Merge pull request #133 from alleyinteractive/feature/LEDE-2613/two-u…

…p-block-style-refactor

LEDE-2613 Refactor Post Two Up Block & Refine Text Styles

blocks/post-item/block.json

@@ -0,0 +1,17 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "wp-newsletter-builder/post-item",
+	"version": "0.1.0",
+	"title": "Newsletter Post Item",
+	"category": "design",
+	"icon": "editor-table",
+	"description": "Displays a post block inside a table cell.",
+	"textdomain": "wp-newsletter-builder",
+	"editorScript": "file:index.ts",
+	"editorStyle": "file:index.css",
+	"style": [
+		"file:style-index.css"
+	],
+	"render": "file:render.php"
+}

blocks/post-item/edit.tsx

@@ -0,0 +1,47 @@
+/**
+ * React hook that is used to mark the block wrapper element.
+ * It provides all the necessary props like the class name.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
+ */
+import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
+
+/**
+ * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
+ * Those files can contain any CSS code that gets applied to the editor.
+ *
+ * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
+ */
+// Uncomment the following line if styles are added.
+// import './index.scss';
+
+/**
+ * The edit function describes the structure of your block in the context of the
+ * editor. This represents what the editor will render when the block is used.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit
+ *
+ * @return {WPElement} Element to render.
+ */
+const MY_TEMPLATE = [
+  ['wp-newsletter-builder/post', {
+    showContent: false,
+    showExcerpt: false,
+    showByline: false,
+    showCta: false,
+    order: ['image', 'title', 'excerpt', 'content', 'byline'],
+  }],
+];
+
+export default function Edit() {
+  return (
+    <td {...useBlockProps()}>
+      <InnerBlocks
+        orientation="horizontal"
+        // @ts-ignore
+        template={MY_TEMPLATE}
+        templateLock="all"
+      />
+    </td>
+  );
+}

blocks/post-item/index.php

@@ -0,0 +1,21 @@
+<?php
+/**
+ * Block Name: Post Item.
+ *
+ * @package wp-newsletter-builder
+ */
+
+/**
+ * Registers the block using the metadata loaded from the `block.json` file.
+ * Behind the scenes, it registers also all assets so they can be enqueued
+ * through the block editor in the corresponding context.
+ *
+ * @see https://developer.wordpress.org/reference/functions/register_block_type/
+ */
+function wp_newsletter_builder_post_item_block_init(): void {
+	// Register the block by passing the location of block.json.
+	register_block_type(
+		__DIR__
+	);
+}
+add_action( 'init', 'wp_newsletter_builder_post_item_block_init' );

blocks/post-item/index.tsx

@@ -0,0 +1,46 @@
+/**
+ * Registers a new block provided a unique name and an object defining its behavior.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
+ */
+import { registerBlockType } from '@wordpress/blocks';
+import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
+
+/**
+ * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
+ * All files containing `style` keyword are bundled together. The code used
+ * gets applied both to the front of your site and to the editor.
+ *
+ * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
+ */
+// Uncomment the following line if styles are added.
+// import './style.scss';
+
+/**
+ * Internal dependencies
+ */
+import edit from './edit';
+import metadata from './block.json';
+
+/**
+ * Every block starts by registering a new block type definition.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
+ */
+registerBlockType(
+  /* @ts-expect-error Provided types are inaccurate to the actual plugin API. */
+  metadata,
+  {
+    apiVersion: 2,
+    edit,
+    save: () => {
+      const blockProps = useBlockProps.save();
+      return (
+        <td {...blockProps}>
+          {/* @ts-ignore */}
+          <InnerBlocks.Content />
+        </td>
+      );
+    },
+  },
+);

blocks/post-item/render.php

@@ -0,0 +1,14 @@
+<?php
+/**
+ * All of the parameters passed to the function where this file is being required are accessible in this scope:
+ *
+ * @param array    $attributes     The array of attributes for this block.
+ * @param string   $content        Rendered block output. ie. <InnerBlocks.Content />.
+ * @param WP_Block $block_instance The instance of the WP_Block class that represents the block being rendered.
+ *
+ * @package wp-newsletter-builder
+ */
+
+?>
+<?php
+echo $content ?? ''; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped

blocks/post-title/style.scss

@@ -22,7 +22,7 @@ a.post__title-link {
     text-align: center;
 
     &.post__title--small {
-      font-size: 24px;
+      font-size: 18px;
     }
   }
 }

blocks/post/edit.tsx

@@ -124,12 +124,22 @@ export default function Edit({
         </div>
       ) : null}
       { postId || editPostType === 'nb_template' ? (
-        <InnerBlocks
-          // @ts-ignore
-          template={MY_TEMPLATE}
-          allowedBlocks={ALLOWED_BLOCKS}
-          templateLock={false}
-        />
+        // Role='presentation' tells AT table is for layout only so table semantics are ignored.
+        <table role="presentation">
+          <tbody>
+            <tr>
+              {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
+              <td>
+                <InnerBlocks
+                  // @ts-ignore
+                  template={MY_TEMPLATE}
+                  allowedBlocks={ALLOWED_BLOCKS}
+                  templateLock={false}
+                />
+              </td>
+            </tr>
+          </tbody>
+        </table>
       ) : null}
       <InspectorControls>
         {/* @ts-ignore */}

blocks/post/index.tsx

@@ -34,10 +34,14 @@ registerBlockType(
     save: () => {
       const blockProps = useBlockProps.save();
       return (
-        <div {...blockProps}>
-          {/* @ts-ignore */}
-          <InnerBlocks.Content />
-        </div>
+        <table {...blockProps} role="presentation">
+          <tbody>
+            <tr>
+              {/* @ts-ignore */}
+              <InnerBlocks.Content />
+            </tr>
+          </tbody>
+        </table>
       );
     },
   },

blocks/post/style.scss

@@ -48,10 +48,6 @@
     margin: 20px auto;
   }
 
-  .post__dek p {
-    margin: 20px;
-  }
-
   .wp-block-button {
     margin: 20px auto;
   }

blocks/two-up-post/edit.tsx

@@ -23,31 +23,23 @@ import './index.scss';
  * @return {WPElement} Element to render.
  */
 const MY_TEMPLATE = [
-  ['wp-newsletter-builder/post', {
-    showContent: false,
-    showExcerpt: false,
-    showByline: false,
-    showCta: false,
-    order: ['image', 'title', 'excerpt', 'content', 'byline'],
-  }],
-  ['wp-newsletter-builder/post', {
-    showContent: false,
-    showExcerpt: false,
-    showByline: false,
-    showCta: false,
-    order: ['image', 'title', 'excerpt', 'content', 'byline'],
-  }],
+  ['wp-newsletter-builder/post-item', {}],
+  ['wp-newsletter-builder/post-item', {}],
 ];
 
 export default function Edit() {
   return (
-    <div {...useBlockProps()}>
-      <InnerBlocks
-        orientation="horizontal"
-        // @ts-ignore
-        template={MY_TEMPLATE}
-        templateLock="all"
-      />
-    </div>
+    <table {...useBlockProps()} role="presentation">
+      <tbody>
+        <tr>
+          <InnerBlocks
+            orientation="horizontal"
+            // @ts-ignore
+            template={MY_TEMPLATE}
+            templateLock="all"
+          />
+        </tr>
+      </tbody>
+    </table>
   );
 }

blocks/two-up-post/index.scss

@@ -11,23 +11,5 @@
   > .block-editor-inner-blocks {
     max-width: initial;
     width: 100%;
-
-    .block-editor-block-list__layout {
-      display: flex;
-    }
-  }
-
-  div[data-title="Newsletter Single Post"] {
-    flex: 1 0 50%;
-
-    .block-editor-inner-blocks{
-      display: flex;
-
-      // stylelint-disable selector-max-compound-selectors
-      .block-editor-block-list__layout {
-        display: flex;
-        flex-direction: column;
-      }
-    }
   }
 }

blocks/two-up-post/index.tsx

@@ -36,10 +36,14 @@ registerBlockType(
     save: () => {
       const blockProps = useBlockProps.save();
       return (
-        <div {...blockProps}>
-          {/* @ts-ignore */}
-          <InnerBlocks.Content />
-        </div>
+        <table {...blockProps} role="presentation">
+          <tbody>
+            <tr>
+              {/* @ts-ignore */}
+              <InnerBlocks.Content />
+            </tr>
+          </tbody>
+        </table>
       );
     },
   },

blocks/two-up-post/style.scss

@@ -12,25 +12,28 @@
  */
 
 .wp-block-wp-newsletter-builder-two-up-post {
-  display: flex;
-  flex-direction: row;
   max-width: 600px;
   width: 100%;
-  margin: 20px 0;
+
+  td {
+    vertical-align: top;
+  }
 
   div.wp-block-wp-newsletter-builder-post {
     max-width: 300px;
     padding: 0 10px;
-    width: 50%;
 
     img {
       height: auto;
       max-width: 300px;
       width: 100%;
     }
+  }
 
-    h3 {
-      margin-top: 20px;
+  @media screen and (max-width: 480px) {
+    td {
+      display: block;
+      width: 100%;
     }
   }
 }

entries/blocks/index.js

@@ -5,3 +5,5 @@ import '@/scss/core-blocks/image.scss';
 import '@/scss/core-blocks/paragraph.scss';
 import '@/scss/core-blocks/button.scss';
 import '@/scss/core-blocks/separator.scss';
+import '@/scss/core-blocks/list.scss';
+import '@/scss/core-blocks/typography.scss';

plugin.php

@@ -3,7 +3,7 @@
  * Plugin Name: Newsletter Builder
  * Plugin URI: https://github.com/alleyinteractive/wp-newsletter-builder
  * Description: Interface to manage email newsletters
- * Version: 0.3.14
+ * Version: 0.3.15
  * Author: Alley Interactive
  * Author URI: https://github.com/alleyinteractive/wp-newsletter-builder
  * Requires at least: 6.2

scss/core-blocks/heading.scss

@@ -6,10 +6,14 @@ h6 {
   font-family: Georgia, serif;
   font-weight: bold;
   line-height: 1.3;
+
+  span {
+    font-family: Georgia, serif;
+  }
 }
 
 h2 {
-  font-size: 26px;
+  font-size: 22px;
 }
 
 h3 {

scss/core-blocks/list.scss

@@ -1,4 +1,9 @@
-li {
+ul, ol {
   font-family: Georgia, serif;
   font-size: 16px;
+  line-height: 1.3;
+
+  span {
+    font-family: Georgia, serif;
+  }
 }

scss/core-blocks/paragraph.scss

@@ -2,4 +2,8 @@ p {
   font-family: Georgia, serif;
   font-size: 16px;
   line-height: 1.33;
+
+  span {
+    font-family: Georgia, serif;
+  }
 }

scss/core-blocks/typography.scss

@@ -0,0 +1,3 @@
+a, em, s, strong, sup, sub {
+  font-family: Georgia, serif;
+}