Convert Issues pattern into a block template

- Also improve styles
greenpeace · Dec 27, 2022 · fb845c7 · fb845c7
1 parent 004ecb8
commit fb845c7
Show file tree

Hide file tree

Showing 7 changed files with 140 additions and 58 deletions.
diff --git a/assets/src/block-templates/issues/block.json b/assets/src/block-templates/issues/block.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://schemas.wp.org/trunk/block.json",
+  "apiVersion": 2,
+  "name": "planet4-block-templates/issues",
+  "title": "Issues",
+  "category": "planet4-block-templates",
+  "icon": "editor-table",
+  "textdomain": "planet4-blocks-backend",
+  "attributes": {
+    "backgroundColor": { "type": "string" }
+  }
+}
diff --git a/assets/src/block-templates/issues/index.js b/assets/src/block-templates/issues/index.js
@@ -0,0 +1,4 @@
+import metadata from './block.json';
+import template from './template';
+
+export { metadata, template };
diff --git a/assets/src/block-templates/issues/template.js b/assets/src/block-templates/issues/template.js
@@ -0,0 +1,115 @@
+import mainThemeUrl from '../main-theme-url';
+
+const item = ['core/group', {
+  className: 'd-flex',
+  backgroundColor: 'white',
+  style: {
+    border: { radius:'4px' },
+    spacing: {
+      padding: {
+        top:'32px',
+        right:'16px',
+        bottom:'32px',
+        left:'16px',
+      }
+    },
+  },
+  layout: {
+    type: 'flex',
+    flexWrap: 'nowrap',
+    justifyContent: "left",
+    orientation: 'horizontal',
+  },
+}, [
+  ['core/image', {
+    className: 'force-no-lightbox force-no-caption my-0 w-40',
+    url: `${mainThemeUrl}/images/placeholders/placeholder-40x40.jpg`,
+    alt: __('Enter text', 'planet4-blocks-backend'),
+    width: 40,
+    height: 40,
+  }],
+  ['core/heading', {
+    level: 5,
+    className: 'w-auto',
+    style: {
+      typography: { fontSize: '16px' },
+      spacing: {
+        margin: { top: '0px', bottom: '0px', left: '16px' },
+      },
+    },
+    textAlign: 'left',
+    placeholder: __('Enter text', 'planet4-blocks-backend')
+  }]
+]];
+
+const template = ({
+  backgroundColor = 'grey-05',
+}) => ([
+  [ 'core/group', {
+      align: 'full',
+      backgroundColor,
+      className: 'block',
+      style: {
+        spacing: {
+          padding: {
+            top: '80px',
+            bottom: '80px',
+          },
+        },
+      },
+    },
+    [
+      [ 'core/group', {
+          className: 'container',
+        }, [
+          [ 'core/heading', {
+              level: 2,
+              placeholder: __( 'Enter title', 'planet4-blocks-backend' ),
+              style: {
+                spacing: {
+                  margin: {
+                    bottom: '24px',
+                  },
+                },
+              },
+              textAlign: 'center',
+            }
+          ],
+          [ 'core/paragraph', {
+              className: 'my-0',
+              placeholder: __( 'Enter description', 'planet4-blocks-backend' ),
+              align: 'center',
+            },
+          ],
+          [ 'core/group', {
+              className: 'is-style-space-evenly',
+              layout: {
+                type: "flex",
+                allowOrientation: false,
+              },
+              style: {
+                spacing: {
+                  padding: {
+                    top: "40px",
+                    bottom: "56px",
+                  },
+                },
+              },
+            },
+            [...Array(4).keys()].map(() => item)
+          ],
+          [ 'core/buttons', {
+              layout: {
+                type: "flex",
+                justifyContent: "center",
+              },
+            }, [
+            [ 'core/button', { placeholder: __( 'Enter text', 'planet4-blocks-backend' ) } ]]],
+          ],
+        ],
+      ],
+    ],
+  ]
+);
+
+export default template;
diff --git a/assets/src/block-templates/template-list.js b/assets/src/block-templates/template-list.js
@@ -2,10 +2,12 @@ import * as sideImgTextCta from './side-image-with-text-and-cta';
 import * as quickLinks from './quick-links';
 import * as deepDive from './deep-dive';
 import * as realityCheck from './reality-check';
+import * as issues from './issues';
 
 export default [
   sideImgTextCta,
   quickLinks,
   deepDive,
   realityCheck,
+  issues,
 ];
diff --git a/assets/src/styles/blocks/core-overrides/Image.scss b/assets/src/styles/blocks/core-overrides/Image.scss
@@ -34,6 +34,10 @@
     display: none !important;
   }
 
+  &.w-40 {
+    width: 40px !important;
+  }
+
   @include large-and-up {
     margin-top: $sp-2;
     margin-bottom: $sp-4;

diff --git a/classes/patterns/class-issues.php b/classes/patterns/class-issues.php
@@ -9,8 +9,7 @@
 namespace P4GBKS\Patterns;
 
 /**
- * Issues pattern includes:
- * Column, Image, Heading, Paragraph, Media & Text.
+ * Class Issues.
  *
  * @package P4GBKS\Patterns
  */
@@ -23,72 +22,17 @@ public static function get_name(): string {
 		return 'p4/issues';
 	}
 
-	/**
-	 * Returns the template for one media-text.
-	 */
-	public static function get_media_text_template(): string {
-		$media_link = esc_url( get_template_directory_uri() ) . '/images/placeholders/placeholder-40x40.jpg';
-
-		return '<!-- wp:group {"className":"d-flex has-white-background-color has-background","style":{"border":{"radius":"4px"},"spacing":{"padding":{"top":"32px","right":"16px","bottom":"32px","left":"16px"}}},"backgroundColor":"white"} -->
-			<div class="d-flex wp-block-group has-white-background-color has-background" style="border-radius:4px;padding-top:32px;padding-right:16px;padding-bottom:32px;padding-left:16px">
-			<!-- wp:media-text {"mediaLink":"' . $media_link . '","mediaType":"image","mediaWidth":14,"mediaSizeSlug":"thumbnail","isStackedOnMobile":false,"imageFill":false,"className":"w-100 force-no-lightbox"} -->
-			<div class="wp-block-media-text w-100 force-no-lightbox" style="grid-template-columns:14% auto">
-			<figure class="wp-block-media-text__media">
-				<img src="' . $media_link . '" alt="' . __( 'Default image', 'planet4-blocks-backend' ) . '"/>
-			</figure>
-			<div class="wp-block-media-text__content">
-			<!-- wp:heading {"level":4,"className":"mb-0","placeholder":"' . __( 'Enter text', 'planet4-blocks-backend' ) . '","style":{"typography":{"fontSize":"1rem"}}} -->
-			<h4 class="mb-0" style="font-size:1rem"></h4>
-			<!-- /wp:heading --></div></div>
-			<!-- /wp:media-text --></div>
-		<!-- /wp:group -->';
-	}
-
 	/**
 	 * Returns the pattern config.
 	 *
 	 * @param array $params Optional array of parameters for the config.
 	 */
 	public static function get_config( $params = [] ): array {
-		$classname         = self::get_classname();
-		$title_placeholder = $params['title_placeholder'] ?? '';
-
 		return [
 			'title'      => 'Issues',
 			'categories' => [ 'planet4' ],
 			'content'    => '
-				<!-- wp:group {"className":"' . $classname . '","align":"full","backgroundColor":"grey-05","style":{"spacing":{"padding":{"top":"80px","bottom":"80px"}}}} -->
-				<div class="wp-block-group ' . $classname . ' alignfull has-grey-05-background-color has-background" style="padding-top:80px;padding-bottom:80px;">
-
-					<!-- wp:group {"className":"container"} -->
-					<div class="wp-block-group container">
-
-						<!-- wp:heading {"textAlign":"center","level":2, "placeholder":"' . __( 'Enter title', 'planet4-blocks-backend' ) . '","style":{"spacing":{"margin":{"bottom":"24px"}}}} -->
-						<h2 class="has-text-align-center" style="margin-bottom:24px">' . $title_placeholder . '</h2>
-						<!-- /wp:heading -->
-
-						<!-- wp:paragraph {"className":"mb-0","align":"center", "placeholder":"' . __( 'Enter description', 'planet4-blocks-backend' ) . '"} -->
-						<p class="mb-0 has-text-align-center"></p>
-						<!-- /wp:paragraph -->
-
-						<!-- wp:group {"style":{"spacing":{"padding":{"top":"40px","bottom":"56px"}}},"className":"is-style-space-evenly","layout":{"type":"flex","allowOrientation":false}} -->
-						<div class="wp-block-group is-style-space-evenly" style="padding-top:40px;padding-bottom:56px;">
-						' . self::get_media_text_template() . '
-						' . self::get_media_text_template() . '
-						' . self::get_media_text_template() . '
-						' . self::get_media_text_template() . '
-						</div>
-						<!-- /wp:group -->
-
-						<!-- wp:buttons {"placeholder":"' . __( 'Enter text', 'planet4-blocks-backend' ) . '","layout":{"type":"flex","justifyContent":"center"}} -->
-						<div class="wp-block-buttons">
-						<!-- wp:button -->
-						<div class="wp-block-button is-style-secondary"><a class="wp-block-button__link"></a></div>
-						<!-- /wp:button --></div>
-						<!-- /wp:buttons -->
-
-					</div><!-- /wp:group -->
-				</div><!-- /wp:group -->
+				<!-- wp:planet4-block-templates/issues ' . wp_json_encode( $params, \JSON_FORCE_OBJECT ) . ' /-->
 			',
 		];
 	}

diff --git a/planet4-gutenberg-blocks.php b/planet4-gutenberg-blocks.php
@@ -208,6 +208,7 @@
 	'planet4-block-templates/quick-links',
 	'planet4-block-templates/deep-dive',
 	'planet4-block-templates/reality-check',
+	'planet4-block-templates/issues',
 ];
 
 /**