PLANET-7396: Move Highlighted CTA block pattern into master theme (#2259

)

* Ref: https://jira.greenpeace.org/browse/PLANET-7396

PLANET-7395: Move HighlightedCTA block pattern into master theme

- Move all related files

---------

Co-authored-by: Dan Tovbein <[email protected]>

assets/src/block-templates/highlighted-cta/block.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://schemas.wp.org/trunk/block.json",
+  "apiVersion": 2,
+  "name": "planet4-block-templates/highlighted-cta",
+  "title": "Highlighted CTA",
+  "category": "planet4-block-templates",
+  "textdomain": "planet4-blocks-backend",
+  "attributes": {
+    "titlePlaceholder": { "type": "string" }
+  }
+}

assets/src/block-templates/highlighted-cta/index.js

@@ -0,0 +1,4 @@
+import metadata from './block.json';
+import template from './template';
+
+export {metadata, template};

assets/src/block-templates/highlighted-cta/template.js

@@ -0,0 +1,47 @@
+import mainThemeUrl from '../main-theme-url';
+
+const {__} = wp.i18n;
+
+const template = ({
+  titlePlaceholder = __('Enter text', 'planet4-blocks-backend'),
+}) => [
+  [
+    'core/group',
+    {
+      className: 'block',
+      backgroundColor: 'dark-green-800',
+    },
+    [
+      ['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'}],
+    ],
+  ],
+];
+
+export default template;

assets/src/block-templates/template-list.js

@@ -3,11 +3,13 @@ import * as issues from './issues';
 import * as realityCheck from './reality-check';
 import * as quickLinks from './quick-links';
 import * as deepDive from './deep-dive';
+import * as highlightedCta from './highlighted-cta';
 
 export default [
   sideImgTextCta,
   issues,
   realityCheck,
   quickLinks,
   deepDive,
+  highlightedCta,
 ];

src/Patterns/BlockPattern.php

@@ -46,6 +46,7 @@ public static function get_list(): array
             RealityCheck::class,
             QuickLinks::class,
             DeepDive::class,
+            HighlightedCta::class,
         ];
     }
 

src/Patterns/HighlightedCta.php

@@ -0,0 +1,42 @@
+<?php
+
+/**
+ * Highlighted CTA pattern class.
+ *
+ * @package P4\MasterTheme\Patterns
+ * @since 0.1
+ */
+
+namespace P4\MasterTheme\Patterns;
+
+/**
+ * Class Highlighted CTA.
+ *
+ * @package P4\MasterTheme\Patterns
+ */
+class HighlightedCta extends BlockPattern
+{
+    /**
+     * Returns the pattern name.
+     */
+    public static function get_name(): string
+    {
+        return 'p4/highlighted-cta';
+    }
+
+    /**
+     * Returns the pattern config.
+     *
+     * @param array $params Optional array of parameters for the config.
+     */
+    public static function get_config(array $params = []): array
+    {
+        return [
+            'title' => 'Highlighted CTA',
+            'categories' => [ 'planet4' ],
+            'content' => '
+				<!-- wp:planet4-block-templates/highlighted-cta ' . wp_json_encode($params, \JSON_FORCE_OBJECT) . ' /-->
+			',
+        ];
+    }
+}