Add rendering improvements for Outlook

[MAILPOET-5705]

mailpoet/lib/EmailEditor/Engine/SettingsController.php

@@ -157,7 +157,19 @@ class SettingsController {
     return trim($cssString); // Remove trailing space and return the formatted string
   }
 
-  private function parseNumberFromStringWithPixels(string $string): float {
+  public function parseStylesToArray(string $styles): array {
+    $styles = explode(';', $styles);
+    $parsedStyles = [];
+    foreach ($styles as $style) {
+      $style = explode(':', $style);
+      if (count($style) === 2) {
+        $parsedStyles[trim($style[0])] = trim($style[1]);
+      }
+    }
+    return $parsedStyles;
+  }
+
+  public function parseNumberFromStringWithPixels(string $string): float {
     return (float)str_replace('px', '', $string);
   }
 }

mailpoet/lib/EmailEditor/Integrations/Core/Renderer/Blocks/Image.php

@@ -15,6 +15,7 @@ class Image implements BlockRenderer {
     );
 
     $blockContent = $this->applyRoundedStyle($blockContent, $parsedBlock);
+    $blockContent = $this->addImageDimensions($blockContent, $parsedBlock, $settingsController);
     $blockContent = $this->addWidthToWrapper($blockContent, $parsedBlock, $settingsController);
     $blockContent = $this->addCaptionFontSize($blockContent, $settingsController);
     bdump($parsedBlock);
@@ -33,6 +34,27 @@ class Image implements BlockRenderer {
     return $blockContent;
   }
 
+  /**
+   * Settings width and height attributes for images is important for MS Outlook.
+   */
+  private function addImageDimensions($blockContent, array $parsedBlock, SettingsController $settingsController) {
+    $html = new \WP_HTML_Tag_Processor($blockContent);
+    if ($html->next_tag(['tag_name' => 'img'])) {
+      // Getting height from styles and if it's set, we set the height attribute
+      $styles = $html->get_attribute('style');
+      $styles = $settingsController->parseStylesToArray($styles);
+      $height = $styles['height'] ?? null;
+      if ($height && is_numeric($settingsController->parseNumberFromStringWithPixels($height))) {
+        $html->set_attribute('height', $settingsController->parseNumberFromStringWithPixels($height));
+      }
+
+      $html->set_attribute('width', $settingsController->parseNumberFromStringWithPixels($parsedBlock['email_attrs']['width']));
+      $blockContent = $html->get_updated_html();
+    }
+
+    return $blockContent;
+  }
+
   /**
    * We need to reset font-size to avoid unexpected white spaces and set the width of the wrapper
    * for having caption text under the image.
@@ -81,7 +103,7 @@ class Image implements BlockRenderer {
       $styles['font-family'] = $contentStyles['typography']['fontFamily'];
     }
 
-    $styles['width'] = '100%';
+    $styles['width'] = '100% !important'; // Using important is necessary for Gmail app on mobile devices
     $align = $parsedBlock['attrs']['align'] ?? 'left';
 
     return '