Code refactor and testing with 5.9

Author: thatdevgirl

color-palette/build/color-palette.min.js

@@ -34,6 +34,11 @@ Give each color block a color using the selector in the Inspector Panel on the r
 
 == Changelog ==
 
+= 4.2 =
+* Tested for compatibility with WordPress 5.9.
+* Code refactor to use the latest version of block.json.
+* Added front-end search functionality within the palette block. Search is opt-in. You can turn it on via an option in the Inspector Panel.
+
 = 4.1.1 =
 * Tested for compatibility with Wordpress 5.8.
 * Fixed minor "invalid color" bug when Color Palette block is added to a page.

color-palette/readme.txt

@@ -1,10 +1,14 @@
 {
+
+  "api_version": 2,
+
   "name": "tdg/color",
   "title": "Color",
-  "description": "A single color block.",
   "category": "design",
+  "description": "A single color block.",
   "keywords": [ "colors", "styles", "visual identity" ],
   "parent": [ "tdg/colors" ],
+
   "attributes": {
     "hex":  {
       "type": "string",
@@ -13,9 +17,22 @@
     "label":  {
       "type": "string",
       "default": ""
+    },
+    "autoLabel":  {
+      "type": "string",
+      "default": ""
+    }
+  },
+
+  "example": {
+    "attributes": {
+      "hex": "#604c8d",
+      "label": "Cyber Grape"
     }
   },
+
   "script": "file:../../../build/color-palette.min.js",
   "editorStyle": "file:../../../build/styles-editor.min.css",
   "style": "file:../../../build/styles-frontend.min.css"
+
 }

color-palette/source/blocks/color/block.json

@@ -7,16 +7,16 @@ import ntc from '../../vendor/ntc.js';
 const ColorEdit = ( props ) => {
 
   const { ColorPicker, PanelBody, TextControl } = wp.components;
-  const { InspectorControls } = wp.blockEditor;
-  const { Fragment } = wp.element;
+  const { InspectorControls, useBlockProps } = wp.blockEditor;
 
   // Get the values needed from props.
   const { setAttributes } = props;
   const { hex, label, autoLabel } = props.attributes;
+  const blockProps = useBlockProps();
 
   // Declare change event handlers.
-  const onChangeHex       = ( value ) => { setAttributes( { hex: value.hex } ) };
-  const onChangeLabel     = ( value ) => { setAttributes( { label: value } ) };
+  const onChangeHex   = ( value ) => { setAttributes( { hex: value.hex } ) };
+  const onChangeLabel = ( value ) => { setAttributes( { label: value } ) };
 
   // Get the automatic name for this hex from the "Name That Color" API.
   // This will be used as the placeholder text for the Color Label attribute
@@ -31,7 +31,7 @@ const ColorEdit = ( props ) => {
 
   // Return the edit UI.
   return (
-    <Fragment>
+    <div { ...blockProps }>
 
       <InspectorControls>
 
@@ -65,7 +65,7 @@ const ColorEdit = ( props ) => {
 
       </div>
 
-    </Fragment>
+    </div>
   );
 
 };

color-palette/source/blocks/color/edit.js

@@ -4,22 +4,18 @@
  * This block is the child block to the color palette block.
  */
 
-import ColorEdit from './edit.js';
-import ColorExample from './example.js';
-import ColorIcons from './icons.js';
+import { default as Edit } from './edit.js';
+import { default as Icons } from './icons.js';
+import { default as Metadata } from './block.json';
 
 const Color = ( () => {
 
   const { registerBlockType } = wp.blocks;
 
-  registerBlockType( 'tdg/color', {
-    title: 'Color',
-    description: 'A single color block.',
-    category: 'design',
-    icon: ColorIcons.block,
-    example: ColorExample,
+  registerBlockType( Metadata, {
+    icon: Icons.block,
     parent: [ 'tdg/color' ],
-    edit: ( props ) => { return ( ColorEdit( props ) ); },
+    edit: ( props ) => { return ( Edit( props ) ); },
     save: () => { return null; }
   } );
 

color-palette/source/blocks/color/example.js

@@ -24,13 +24,7 @@ public function __construct() {
    * @return void
    */
   public function register(): void {
-    register_block_type( 'tdg/color', [
-      'attributes' => [
-        'hex'       => [ 'type' => 'string', 'default' => '' ],
-        'label'     => [ 'type' => 'string', 'default' => '' ],
-        'autoLabel' => [ 'type' => 'string', 'default' => '' ]
-      ],
-
+    register_block_type_from_metadata( __DIR__, [
       'render_callback' => [ $this, 'render' ]
     ] );
   }

color-palette/source/blocks/color/index.js

@@ -1,9 +1,13 @@
 {
+
+  "api_version": 2,
+
   "name": "tdg/colors",
   "title": "Color Palette",
-  "description": "A group of related color swatches.",
   "category": "design",
+  "description": "A group of related color swatches.",
   "keywords": [ "colors", "styles", "visual identity" ],
+
   "attributes": {
     "hideHex":  {
       "type": "boolean"
@@ -15,7 +19,36 @@
       "type": "boolean"
     }
   },
+
+  "example": {
+    "innerBlocks": [
+      {
+        "name": "tdg/color",
+        "attributes": {
+          "hex": "#604c8d",
+          "label": "Cyber Grape"
+        }
+      },
+      {
+        "name": "tdg/color",
+        "attributes": {
+          "hex": "#559cad",
+          "label": "Pacific Blue"
+        }
+      },
+      {
+        "name": "tdg/color",
+        "attributes": {
+          "hex": "#c1b2ab",
+          "label": "Pale Silver"
+        }
+      }
+    ],
+
+  },
+
   "script": "file:../../../build/color-palette.min.js",
   "editorStyle": "file:../../../build/styles-editor.min.css",
   "style": "file:../../../build/styles-frontend.min.css"
+
 }

color-palette/source/blocks/color/register.php

@@ -3,20 +3,20 @@
  */
 
 import { memoize, times } from 'lodash';
-import ColorsGetClasses from './get-classes.js';
+import { default as GetClasses } from './get-classes.js';
 
 const ColorsEdit = ( props ) => {
 
-  const { InnerBlocks, InspectorControls } = wp.blockEditor;
+  const { InnerBlocks, InspectorControls, useBlockProps } = wp.blockEditor;
   const { PanelBody, ToggleControl } = wp.components;
-  const { Fragment } = wp.element;
 
   // Get attributes from props.
   const { setAttributes } = props;
   const { hideHex, hideRGB, hideCMYK } = props.attributes;
+  const blockProps = useBlockProps();
 
   // Figure out what classes should be applied to the colors.
-  const colorsClasses = ColorsGetClasses( props );
+  const colorsClasses = GetClasses( props );
 
   // Change event handlers.
   const onChangeHideHex  = ( value ) => { setAttributes( { hideHex: value } ) };
@@ -33,7 +33,7 @@ const ColorsEdit = ( props ) => {
 
   // Return the edit UI.
   return (
-    <Fragment>
+    <div { ...blockProps }>
 
       <InspectorControls>
         <PanelBody title='Color code display options'>
@@ -71,7 +71,7 @@ const ColorsEdit = ( props ) => {
         </div>
       </div>
 
-    </Fragment>
+    </div>
   );
 
 };