MC-3700: Create concept for background image style generation

- Update view.xml format to reflect Magento_Catalog

Author: davemacaulay

app/code/Magento/PageBuilder/Plugin/Filter/TemplatePlugin.php

@@ -131,9 +131,8 @@ private function generateCssFromImages(string $elementClass, array $images) : st
                 'background-image' => 'url(' . $images['desktop_image'] . ')',
             ];
         }
-        if (isset($images['mobile_image']) && $this->getMobileBreakpoint()) {
-            $mediaQuery = '@media only screen and (max-width: ' . $this->getMobileBreakpoint() . ')';
-            $css[$mediaQuery]['.' . $elementClass] = [
+        if (isset($images['mobile_image']) && $this->getMobileMediaQuery()) {
+            $css[$this->getMobileMediaQuery()]['.' . $elementClass] = [
                 'background-image' => 'url(' . $images['mobile_image'] . ')',
             ];
         }
@@ -163,13 +162,23 @@ private function cssFromArray(array $css) : string
     }
 
     /**
-     * Retrieve the mobile breakpoint from the view configuration
+     * Generate the mobile media query from view configuration
      *
      * @return null|string
      */
-    private function getMobileBreakpoint() : ?string
+    private function getMobileMediaQuery() : ?string
     {
-        $breakpoints = $this->viewConfig->getViewConfig()->getVarValue('Magento_PageBuilder', 'breakpoints');
-        return isset($breakpoints['mobile']) ? $breakpoints['mobile'] : null;
+        $breakpoints = $this->viewConfig->getViewConfig()->getVarValue(
+            'Magento_PageBuilder',
+            'breakpoints/mobile/conditions'
+        );
+        if ($breakpoints && count($breakpoints) > 0) {
+            $mobileBreakpoint = "@media only screen ";
+            foreach ($breakpoints as $key => $value) {
+                $mobileBreakpoint .= "and (" . $key . ": " . $value . ") ";
+            }
+            return rtrim($mobileBreakpoint);
+        }
+        return null;
     }
 }

app/code/Magento/PageBuilder/etc/view.xml

@@ -24,7 +24,11 @@
     </media>
     <vars module="Magento_PageBuilder">
         <var name="breakpoints">
-            <var name="mobile">768px</var>
+            <var name="mobile">
+                <var name="conditions">
+                    <var name="max-width">768px</var>
+                </var>
+            </var>
         </var>
     </vars>
 </view>