Issue 4811 - DC for background image

core/blocks/class-maxi-block.php

@@ -230,6 +230,13 @@ class MaxiBlocks_Block
             'linkSettings' => [
                 'type' => 'object',
             ],
+			// Required to render backcground DC
+			'background-layers' => [
+				'type' => 'array',
+			],
+			'background-layers-hover' => [
+				'type' => 'array',
+			],
         ];
 
         /**

core/class-maxi-dynamic-content.php

@@ -553,8 +553,9 @@ private function recursive_check($block, $attributes, $content)
     public function render_dc($attributes, $content, $block)
     {
 
-        if (!array_key_exists('dc-status', $attributes)) {
-
+        if (!array_key_exists('dc-status', $attributes) &&
+        !array_key_exists('background-layers', $attributes) &&
+        !array_key_exists('background-layers-hover', $attributes)) {
             if (isset($block->inner_blocks) && !empty($block->inner_blocks)) {
                 $content = $this->check_inner_blocks($block, $attributes, $content);
             }
@@ -566,11 +567,6 @@ public function render_dc($attributes, $content, $block)
             return $content;
         }
 
-        if (!$attributes['dc-status']) {
-            $content = $this->check_inner_blocks($block, $attributes, $content);
-            return $content;
-        }
-
         $pagination_page = 1;
         if (isset($_GET['cl-page'])) {
             $pagination_page = absint($_GET['cl-page']);
@@ -615,6 +611,14 @@ public function render_dc($attributes, $content, $block)
 
             }
         }
+
+        $content = self::render_dc_background($attributes, $content, $context_loop);
+
+        if (!array_key_exists('dc-status', $attributes) || !$attributes['dc-status']) {
+            $content = $this->check_inner_blocks($block, $attributes, $content);
+            return $content;
+        }
+
         $attributes = array_merge($attributes, $this->get_dc_values($attributes, $context_loop));
 
         if (array_key_exists('dc-link-status', $attributes)) {
@@ -643,6 +647,31 @@ public function render_dc($attributes, $content, $block)
         return $content;
     }
 
+    public function render_dc_background($attributes, $content, $context_loop)
+    {
+        @list(
+            'background-layers' => $background_layers,
+            'background-layers-hover' => $background_layers_hover,
+        ) = $attributes;
+
+        foreach ([$background_layers, $background_layers_hover] as $layers) {
+            if (!is_array($layers)) {
+                continue;
+            }
+
+            foreach ($layers as $layer) {
+                if (array_key_exists('dc-status', $layer) && $layer['dc-status'] &&
+                    array_key_exists('type', $layer) && $layer['type'] === 'image') {
+                    $layer = array_merge($layer, $this->get_dc_values($layer, $context_loop));
+
+                    $content = self::render_dc_image($layer, $content, true);
+                }
+            }
+        }
+
+        return $content;
+    }
+
     public function render_dc_link($attributes, $content)
     {
 
@@ -819,7 +848,7 @@ public function render_dc_content($attributes, $content)
         return $content;
     }
 
-    public function render_dc_image($attributes, $content)
+    public function render_dc_image($attributes, $content, $is_background = false)
     {
 
         @list(
@@ -904,11 +933,16 @@ public function render_dc_image($attributes, $content)
             }
         }
 
+        $mediaIdToReplace = ($is_background) ? '$bg-media-id-to-replace' : '$media-id-to-replace';
+        $mediaUrlToReplace = ($is_background) ? '$bg-media-url-to-replace' : '$media-url-to-replace';
+        $mediaAltToReplace = ($is_background) ? '$bg-media-alt-to-replace' : '$media-alt-to-replace';
+        $mediaCaptionToReplace = ($is_background) ? '$bg-media-caption-to-replace' : '$media-caption-to-replace';
+
         if (!empty($media_src)) {
-            $content = str_replace('$media-id-to-replace', $media_id, $content);
-            $content = str_replace('$media-url-to-replace', $media_src, $content);
-            $content = str_replace('$media-alt-to-replace', $media_alt, $content);
-            $content = str_replace('$media-caption-to-replace', $media_caption, $content);
+            $content = str_replace($mediaIdToReplace, $media_id, $content);
+            $content = str_replace($mediaUrlToReplace, $media_src, $content);
+            $content = str_replace($mediaAltToReplace, $media_alt, $content);
+            $content = str_replace($mediaCaptionToReplace, $media_caption, $content);
         } else {
             $this->is_empty = true;
 
@@ -917,11 +951,10 @@ public function render_dc_image($attributes, $content)
                 return '';
             }
 
-            $content = str_replace('$media-id-to-replace', '', $content);
-            $content = str_replace('$media-url-to-replace', '', $content);
-            $content = str_replace('$media-alt-to-replace', '', $content);
-            $content = str_replace('$media-caption-to-replace', '', $content);
-
+            $content = str_replace($mediaIdToReplace, '', $content);
+            $content = str_replace($mediaUrlToReplace, '', $content);
+            $content = str_replace($mediaAltToReplace, '', $content);
+            $content = str_replace($mediaCaptionToReplace, '', $content);
         }
 
         return $content;

e2e-tests/components/background/__snapshots__/imageLayer.spec.js.snap

@@ -132,6 +132,7 @@ exports[`BackgroundControl Check Background image layer hover 1`] = `
     "background-image-wrapper-width-unit-xs": "em",
     "background-image-wrapper-width-xl": 50,
     "background-image-wrapper-width-xs": 25,
+    "dc-author": 1,
     "display-general": "block",
     "id": 1,
     "isHover": false,

src/blocks/accordion-maxi/edit.js

@@ -24,6 +24,7 @@ import { getMaxiBlockAttributes } from '../../components/maxi-block';
 import getStyles from './styles';
 import AccordionContext from './context';
 import { copyPasteMapping } from './data';
+import withMaxiDC from '../../extensions/DC/withMaxiDC';
 
 /**
  * Edit
@@ -141,4 +142,4 @@ class edit extends MaxiBlockComponent {
 	}
 }
 
-export default withMaxiContextLoop(withMaxiProps(edit));
+export default withMaxiContextLoop(withMaxiDC(withMaxiProps(edit)));

src/blocks/column-maxi/edit.js

@@ -35,6 +35,7 @@ import {
 	withMaxiContextLoopContext,
 } from '../../extensions/DC';
 import { DISALLOWED_BLOCKS } from '../../extensions/repeater';
+import withMaxiDC from '../../extensions/DC/withMaxiDC';
 
 /**
  * Editor
@@ -301,5 +302,5 @@ class edit extends MaxiBlockComponent {
 }
 
 export default withMaxiContextLoop(
-	withMaxiContextLoopContext(withMaxiProps(edit))
+	withMaxiContextLoopContext(withMaxiDC(withMaxiProps(edit)))
 );

src/blocks/container-maxi/edit.js

@@ -31,6 +31,7 @@ import {
 	withMaxiContextLoop,
 	withMaxiContextLoopContext,
 } from '../../extensions/DC';
+import withMaxiDC from '../../extensions/DC/withMaxiDC';
 
 /**
  * General
@@ -196,5 +197,5 @@ class edit extends MaxiBlockComponent {
 }
 
 export default withMaxiContextLoop(
-	withMaxiContextLoopContext(withMaxiProps(edit))
+	withMaxiContextLoopContext(withMaxiDC(withMaxiProps(edit)))
 );

src/blocks/group-maxi/edit.js

@@ -25,6 +25,7 @@ import {
 	withMaxiContextLoopContext,
 } from '../../extensions/DC';
 import { DISALLOWED_BLOCKS } from '../../extensions/repeater';
+import withMaxiDC from '../../extensions/DC/withMaxiDC';
 
 /**
  * Edit
@@ -99,5 +100,5 @@ class edit extends MaxiBlockComponent {
 }
 
 export default withMaxiContextLoop(
-	withMaxiContextLoopContext(withMaxiProps(edit))
+	withMaxiContextLoopContext(withMaxiDC(withMaxiProps(edit)))
 );

src/blocks/list-item-maxi/edit.js

@@ -29,6 +29,7 @@ import {
 	TextContext,
 } from '../../extensions/text/formats';
 import { copyPasteMapping, scProps } from './data';
+import withMaxiDC from '../../extensions/DC/withMaxiDC';
 
 /**
  * Content
@@ -216,4 +217,4 @@ class edit extends MaxiBlockComponent {
 	}
 }
 
-export default withMaxiProps(edit);
+export default withMaxiDC(withMaxiProps(edit));

src/blocks/map-maxi/edit.js

@@ -17,6 +17,7 @@ import { getBreakpoints } from '../../extensions/styles/helpers';
 import getStyles from './styles';
 import { copyPasteMapping } from './data';
 import * as mapMarkerIcons from '../../icons/map-icons/markers';
+import withMaxiDC from '../../extensions/DC/withMaxiDC';
 
 /**
  * Edit
@@ -104,4 +105,4 @@ class edit extends MaxiBlockComponent {
 	}
 }
 
-export default withMaxiProps(edit);
+export default withMaxiDC(withMaxiProps(edit));

src/blocks/number-counter-maxi/edit.js

@@ -30,6 +30,7 @@ import {
 import getStyles from './styles';
 import { getBreakpoints } from '../../extensions/styles/helpers';
 import { copyPasteMapping } from './data';
+import withMaxiDC from '../../extensions/DC/withMaxiDC';
 
 /**
  * Content
@@ -333,4 +334,4 @@ const NumberCounter = attributes => {
 	);
 };
 
-export default withMaxiProps(edit);
+export default withMaxiDC(withMaxiProps(edit));

src/blocks/pane-maxi/edit.js

@@ -25,6 +25,7 @@ import {
 	withMaxiContextLoop,
 	withMaxiContextLoopContext,
 } from '../../extensions/DC';
+import withMaxiDC from '../../extensions/DC/withMaxiDC';
 
 const boxedPreset = {
 	'border-bottom-left-radius-general': 10,
@@ -281,5 +282,5 @@ class edit extends MaxiBlockComponent {
 }
 
 export default withMaxiContextLoop(
-	withMaxiContextLoopContext(withMaxiProps(edit))
+	withMaxiContextLoopContext(withMaxiDC(withMaxiProps(edit)))
 );

src/blocks/row-maxi/edit.js

@@ -35,6 +35,7 @@ import {
 	withMaxiContextLoop,
 	withMaxiContextLoopContext,
 } from '../../extensions/DC';
+import withMaxiDC from '../../extensions/DC/withMaxiDC';
 
 /**
  * Edit
@@ -251,5 +252,5 @@ class edit extends MaxiBlockComponent {
 }
 
 export default withMaxiContextLoop(
-	withMaxiContextLoopContext(withMaxiProps(edit))
+	withMaxiContextLoopContext(withMaxiDC(withMaxiProps(edit)))
 );

src/blocks/search-maxi/edit.js

@@ -23,6 +23,7 @@ import { getMaxiBlockAttributes } from '../../components/maxi-block';
 import { getIconPositionClass } from '../../extensions/styles';
 import getStyles from './styles';
 import { prefixes, copyPasteMapping } from './data';
+import withMaxiDC from '../../extensions/DC/withMaxiDC';
 
 /**
  * Search block
@@ -196,4 +197,4 @@ class edit extends MaxiBlockComponent {
 	}
 }
 
-export default withMaxiProps(edit);
+export default withMaxiDC(withMaxiProps(edit));

src/blocks/slide-maxi/edit.js

@@ -25,6 +25,7 @@ import { MaxiBlock, getMaxiBlockAttributes } from '../../components/maxi-block';
 import { getLastBreakpointAttribute } from '../../extensions/styles';
 import getStyles from './styles';
 import SliderContext from '../slider-maxi/context';
+import withMaxiDC from '../../extensions/DC/withMaxiDC';
 
 /**
  * Editor
@@ -134,5 +135,5 @@ class edit extends MaxiBlockComponent {
 }
 
 export default withMaxiContextLoop(
-	withMaxiContextLoopContext(withMaxiProps(edit))
+	withMaxiContextLoopContext(withMaxiDC(withMaxiProps(edit)))
 );

src/blocks/svg-icon-maxi/edit.js

@@ -41,6 +41,7 @@ import {
 import { withMaxiContextLoopContext } from '../../extensions/DC';
 import getStyles from './styles';
 import { copyPasteMapping } from './data';
+import withMaxiDC from '../../extensions/DC/withMaxiDC';
 
 class edit extends MaxiBlockComponent {
 	constructor(props) {
@@ -359,4 +360,4 @@ class edit extends MaxiBlockComponent {
 	}
 }
 
-export default withMaxiContextLoopContext(withMaxiProps(edit));
+export default withMaxiContextLoopContext(withMaxiDC(withMaxiProps(edit)));

src/blocks/video-maxi/edit.js

@@ -32,6 +32,7 @@ import { getGroupAttributes } from '../../extensions/styles';
 import { videoValidation } from '../../extensions/video';
 import { copyPasteMapping } from './data';
 import { placeholderImage, toolbarReplaceImage } from '../../icons';
+import withMaxiDC from '../../extensions/DC/withMaxiDC';
 
 /**
  * Video player
@@ -300,4 +301,4 @@ class edit extends MaxiBlockComponent {
 	}
 }
 
-export default withMaxiProps(edit);
+export default withMaxiDC(withMaxiProps(edit));