PLANET-7508: Modify Highlighted CTA block pattern template (#1205)

* Ref: https://jira.greenpeace.org/browse/PLANET-7508 Modify Highlighted CTA block pattern - Fix styles and improve its template --------- Co-authored-by: Dan Tovbein <[email protected]>
greenpeace · May 7, 2024 · 1bb0690 · 1bb0690
1 parent e980c81
commit 1bb0690
Showing 1 changed file with 28 additions and 18 deletions.
diff --git a/assets/src/block-templates/highlighted-cta/template.js b/assets/src/block-templates/highlighted-cta/template.js
@@ -6,30 +6,40 @@ const template = ({
   titlePlaceholder = __('Enter text', 'planet4-blocks-backend'),
 }) => [
   [
-    'core/columns',
+    'core/group',
     {
       className: 'block',
-      textColor: 'white',
       backgroundColor: 'dark-green-800',
     },
     [
-      ['core/column', {}, [
-        ['core/image', {
-          align: 'center',
-          className: 'force-no-lightbox force-no-caption',
-          url: `${mainThemeUrl}/images/placeholders/placeholder-80x80.jpg`,
-        }],
-        ['core/heading', {
-          textAlign: 'center',
-          level: 3,
-          placeholder: titlePlaceholder,
-        }],
-        ['core/spacer', {height: '16px'}],
-        ['core/buttons', {layout: {type: 'flex', justifyContent: 'center'}}, [
-          ['core/button', {className: 'is-style-transparent'}],
-        ]],
-        ['core/spacer', {height: '16px'}],
+      ['core/spacer', {height: '40px'}],
+      ['core/image', {
+        align: 'center',
+        className: 'force-no-lightbox force-no-caption',
+        url: `${mainThemeUrl}/images/placeholders/placeholder-80x80.jpg`,
+        width: '80px',
+        height: '80px',
+        style: {
+          spacing: {
+            margin: {
+              top: '0',
+              bottom: '0',
+            },
+          },
+        },
+      }],
+      ['core/spacer', {height: '32px'}],
+      ['core/heading', {
+        textAlign: 'center',
+        level: 3,
+        placeholder: titlePlaceholder,
+        textColor: 'white',
+      }],
+      ['core/spacer', {height: '24px'}],
+      ['core/buttons', {layout: {type: 'flex', justifyContent: 'center'}}, [
+        ['core/button', {className: 'is-style-cta'}],
       ]],
+      ['core/spacer', {height: '40px'}],
     ],
   ],
 ];