PLANET-6911: Update blocks frontend output to accessible HTML

Update block declaration to block.json format Replace save function with frontend component
greenpeace · Oct 26, 2022 · 34f3f08 · 34f3f08
1 parent e630986
commit 34f3f08
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 47 deletions.
diff --git a/assets/src/blocks/Splittwocolumns/block.json b/assets/src/blocks/Splittwocolumns/block.json
@@ -0,0 +1,42 @@
+{
+  "$schema": "https://schemas.wp.org/trunk/block.json",
+  "apiVersion": 2,
+  "name": "planet4-blocks/split-two-columns",
+  "title": "Split Two Columns",
+  "category": "planet4-blocks",
+  "textdomain": "planet4-blocks-backend",
+  "icon": "editor-table",
+  "attributes": {
+    "version": { "type": "number", "default": 3 },
+    "select_issue": { "type": "number", "default": 0 },
+    "title": { "type": "string", "default": "" },
+    "issue_description": { "type": "string", "default": "" },
+    "issue_link_text": { "type": "string", "default": "" },
+    "issue_link_path": { "type": "string", "default": "" },
+    "issue_image_id": { "type": "number", "default": 0 },
+    "issue_image_src": { "type": "string", "default": "" },
+    "issue_image_srcset": { "type": "string", "default": "" },
+    "issue_image_title": { "type": "string", "default": "" },
+    "focus_issue_image": { "type": "string", "default": "50% 50%" },
+    "select_tag": { "type": "number", "default": 0 },
+    "tag_name": { "type": "string", "default": "" },
+    "tag_description": { "type": "string", "default": "" },
+    "tag_link": { "type": "string", "default": "" },
+    "button_text": { "type": "string", "default": "" },
+    "button_link": { "type": "string", "default": "" },
+    "tag_image_id": { "type": "number", "default": 0 },
+    "tag_image_src": { "type": "string", "default": "" },
+    "tag_image_srcset": { "type": "string", "default": "" },
+    "tag_image_title": { "type": "string", "default": "" },
+    "focus_tag_image": { "type": "string", "default": "50% 50%" },
+    "edited": { "type": "object", "default": {
+      "title": false,
+      "issue_description": false,
+      "issue_link_text": false,
+      "tag_description": false,
+      "button_text": false,
+      "issue_image_id": false,
+      "tag_image_id": false
+    } }
+  }
+}
diff --git a/assets/src/blocks/Splittwocolumns/register.js b/assets/src/blocks/Splittwocolumns/register.js
@@ -1,53 +1,19 @@
 import { SplittwocolumnsEditor } from './SplittwocolumnsEditor';
-import { frontendRendered } from '../frontendRendered';
+import { SplittwocolumnsFrontend } from './SplittwocolumnsFrontend';
 import { splitTwoColumnsV1 } from './deprecated/SplittwocolumnsV1';
+import metadata from './block.json';
 
 const { registerBlockType } = wp.blocks;
-const { __ } = wp.i18n;
 
 export const BLOCK_NAME = 'planet4-blocks/split-two-columns';
 export const VERSION = 2;
 
 export const registerSplittwocolumnsBlock = () => {
-  registerBlockType( BLOCK_NAME, {
-    title: __('Split Two Columns', 'planet4-blocks-backend'),
-    icon: 'editor-table',
-    category: 'planet4-blocks',
-    attributes: {
-      version: { type: 'number', default: VERSION },
-      select_issue: { type: 'number', default: 0 },
-      title: { type: 'string', default: '' },
-      issue_description: { type: 'string', default: '' },
-      issue_link_text: { type: 'string', default: '' },
-      issue_link_path: { type: 'string', default: '' },
-      issue_image_id: { type: 'number', default: 0 },
-      issue_image_src: { type: 'string', default: '' },
-      issue_image_srcset: { type: 'string', default: '' },
-      issue_image_title: { type: 'string', default: '' },
-      focus_issue_image: { type: 'string', default: '50% 50%' },
-      select_tag: { type: 'number', default: 0 },
-      tag_name: { type: 'string', default: '' },
-      tag_description: { type: 'string', default: '' },
-      tag_link: { type: 'string', default: '' },
-      button_text: { type: 'string', default: '' },
-      button_link: { type: 'string', default: '' },
-      tag_image_id: { type: 'number', default: 0 },
-      tag_image_src: { type: 'string', default: '' },
-      tag_image_srcset: { type: 'string', default: '' },
-      tag_image_title: { type: 'string', default: '' },
-      focus_tag_image: { type: 'string', default: '50% 50%' },
-      edited: { type: 'object', default: {
-          title: false,
-          issue_description: false,
-          issue_link_text: false,
-          tag_description: false,
-          button_text: false,
-          issue_image_id: false,
-          tag_image_id: false
-        } },
-    },
+  registerBlockType( metadata.name, {
     edit: SplittwocolumnsEditor,
-    save: frontendRendered( BLOCK_NAME ),
+    save: ({ attributes }) => {
+      return <SplittwocolumnsFrontend {...attributes} />
+    },
     supports: {
       html: false, // Disable "Edit as HTMl" block option.
     },

diff --git a/classes/blocks/class-splittwocolumns.php b/classes/blocks/class-splittwocolumns.php
@@ -28,7 +28,9 @@ class SplitTwoColumns extends Base_Block {
 	 *
 	 * @var int VERSION.
 	 */
-	private const VERSION = 2;
+	private const VERSION = 3;
+
+	private const CONFIG_PATH = P4GBKS_PLUGIN_DIR . '/assets/src/blocks/Splittwocolumns';
 
 	/**
 	 * @var array Block attributes.
@@ -75,13 +77,9 @@ public function __construct() {
 		);
 
 		\register_block_type(
-			self::get_full_block_name(),
+			self::CONFIG_PATH,
 			[
-				'editor_script'   => 'planet4-blocks',
-				'attributes'      => self::ATTRIBUTES,
-				'render_callback' => function ( $attributes ) {
-					return self::render_frontend( self::update_data( $attributes ) );
-				},
+				'editor_script' => 'planet4-blocks',
 			]
 		);
 	}