PLANET-7395: Move Deep Dive block pattern into master theme (#2258)

* PLANET-7395: Move Deep Dive block pattern into master theme

- Move all related files

---------

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

assets/src/block-templates/deep-dive/block.json

@@ -0,0 +1,13 @@
+{
+  "$schema": "https://schemas.wp.org/trunk/block.json",
+  "apiVersion": 2,
+  "name": "planet4-block-templates/deep-dive",
+  "title": "Deep Dive",
+  "category": "planet4-block-templates",
+  "icon": "editor-table",
+  "textdomain": "planet4-blocks-backend",
+  "attributes": {
+    "title": { "type": "string" },
+    "backgroundColor": { "type": "string" }
+  }
+}

assets/src/block-templates/deep-dive/index.js

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

assets/src/block-templates/deep-dive/template.js

@@ -0,0 +1,54 @@
+import mainThemeUrl from '../main-theme-url';
+
+const {__} = wp.i18n;
+
+const topic = ['core/column', {}, [
+  ['core/group', {className: 'group-stretched-link'}, [
+    ['core/image', {
+      align: 'center',
+      className: 'force-no-lightbox force-no-caption is-style-rounded-180',
+      url: `${mainThemeUrl}/images/placeholders/placeholder-180x180.jpg`,
+      height: '180px',
+      width: '180px',
+    }],
+    ['core/heading', {
+      level: 5,
+      textAlign: 'center',
+      style: {typography: {fontSize: '1rem'}},
+      className: 'is-style-chevron',
+      placeholder: __('Enter topic', 'planet4-blocks-backend'),
+    }],
+    ['core/spacer', {height: '16px'}],
+  ]],
+]];
+
+const innerBlocks = ({
+  title = '',
+}) => ([
+  ['core/group', {className: 'container'}, [
+    ['core/spacer', {height: '24px'}],
+    ['core/heading', {
+      textAlign: 'center',
+      placeholder: __('Enter title', 'planet4-blocks-backend'),
+      content: title,
+    }],
+    ['core/columns', {}, [...Array(4).keys()].map(() => topic)],
+  ]],
+]);
+
+const template = ({
+  title = '',
+  backgroundColor = 'beige-100',
+}) => ([
+  [
+    'core/group',
+    {
+      className: 'block',
+      align: 'full',
+      backgroundColor,
+    },
+    innerBlocks({title}),
+  ],
+]);
+
+export default template;

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

@@ -2,10 +2,12 @@ import * as sideImgTextCta from './side-image-with-text-and-cta';
 import * as issues from './issues';
 import * as realityCheck from './reality-check';
 import * as quickLinks from './quick-links';
+import * as deepDive from './deep-dive';
 
 export default [
   sideImgTextCta,
   issues,
   realityCheck,
   quickLinks,
+  deepDive,
 ];

assets/src/scss/editorOverrides.scss

@@ -31,20 +31,6 @@
   @include table;
 }
 
-.wp-block-image {
-  display: table;
-
-  // Mimics the behavior of WP's native '.is-resized' CSS class
-  .editor-rich-text.block-editor-rich-text {
-    display: table-caption;
-    caption-side: bottom;
-
-    figcaption {
-      display: block;
-    }
-  }
-}
-
 .components-panel__body label {
   font-size: 13px;
 }

src/Patterns/BlockPattern.php

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

src/Patterns/DeepDive.php

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