Improve display of variations #27

src/oik-blocklist/block.json

@@ -14,7 +14,7 @@
       "type": "boolean",
       "default": true
     },
-    "showDescription": {
+    "showVariations": {
       "type": "boolean",
       "default": true
     },

src/oik-blocklist/blocklist.js

@@ -1,7 +1,7 @@
 /*
  * Block list renderer - displays the Block list for the selected namespace prefix
  *
- * @copyright (C) Copyright Bobbing Wide 2019,2021
+ * @copyright (C) Copyright Bobbing Wide 2019,2021,2022
  * @author Herb Miller @bobbingwide
  *
  */
@@ -23,51 +23,70 @@ import { getAllBlockVariations, getVariationLink } from '../oik-blockicon/blockv
  *
  * @param prefix
  * @param showBlockLink
- * @param showDescription
+ * @param showVariations
  * @param showBatch
  * @param component
  * @param props
  * @returns {JSX.Element}
  * @constructor
  */
-function BlockListStyled( prefix, showBlockLink, showDescription, showBatch, component, ...props ) {
+function BlockListStyled( prefix, showBlockLink, showVariations, showBatch, component, ...props ) {
     var prefix_array = prefix.split( '/' );
     const namespace = prefix_array[0];
 
     var block_types = getBlockTypes();
     block_types = block_types.filter( namespaceFilter, namespace );
     //console.log( block_types );
     block_types = block_types.sort( (a, b) => a.title.localeCompare(b.title));
-
-    var block_variations = getAllBlockVariations( block_types );
-    block_variations = block_variations.sort( (a, b) => a.title.localeCompare(b.title));
-
-    block_types = block_types.concat( block_variations );
-    //console.log( block_types );
-
     var count_blocks = block_types.length;
-    //var blocklist = null;
+    var block_variations = getAllBlockVariations(block_types);
+    var variationsList = null;
+    if ( showVariations && showBatch ) {
+        //block_variations = block_variations.sort((a, b) => a.title.localeCompare(b.title));
+        if (showBlockLink) {
+            variationsList = block_variations.map((block) => BlockCreateBlockLink(block, component));
+        } else {
+            variationsList = block_variations.map((block) => BlockNoLink(block, component));
+        }
+    }
+
+    var blocklist = null;
 
     if ( showBatch ) {
         if ( showBlockLink ) {
 
-            var blocklist = <pre>
-        rem Blocks {count_blocks}
+            blocklist = <pre>
+                rem Blocks {count_blocks}
+                <br />
+                rem Variations { block_variations.length }
                 <br/>
                 {block_types.map((block) => BlockCreateBlockLink(block, component))}
-        </pre>
+                {variationsList}
+                </pre>
         } else {
-            var blocklist = <pre>
+            block_types = block_types.sort((a, b) => a.name.localeCompare(b.name));
+            blocklist = <pre>
                 rem Block {count_blocks }
                 <br />
+                rem Variations { block_variations.length }
+                <br/>
                 {block_types.map( (block) => BlockNoLink( block, component ))}
+                {variationsList}
             </pre>
         }
     } else {
-        var blocklist =
+        blocklist =
         <dl>
             {block_types.map((block) => BlockListItem(block, showBlockLink))}
         </dl>
+        if ( showVariations) {
+            var variationList =
+
+                <dl>
+                    {block_variations.map((block ) => BlockListItem( block, showBlockLink )) }
+                </dl>
+            blocklist = <Fragment>{blocklist}<h3>Variations</h3>{variationList}</Fragment>
+        }
     }
     return( blocklist  );
 }
@@ -104,6 +123,14 @@ function getBlockLink( block ) {
     }
 
 
+/**
+ * Returns a formatted block list item.
+ *
+  * @param block
+ * @param showBlockLink
+ * @returns {JSX.Element}
+ * @constructor
+ */
 function BlockListItem( block, showBlockLink ) {
     var blockLink = null;
 
@@ -115,6 +142,13 @@ function BlockListItem( block, showBlockLink ) {
         }
     }
 
+    var variationSep = null;
+    if  ( undefined === block.block_name || '' === block.block_name ) {
+        variationSep = '';
+    } else {
+        variationSep = ' : ';
+    }
+
     var blockSupportsInserter = null;
     blockSupportsInserter = BlockSupportsInserter( block) ;
 
@@ -130,14 +164,14 @@ function BlockListItem( block, showBlockLink ) {
                         href={ blockLink }
                         title={ __( 'View block', 'oik-blocks' ) }
                     >
-
-                {block.title } - {block.name }
+                        {block.block_title}{variationSep}{block.title } - {block.block_name} {block.name }
                     </a> ) }
 
 
                 {!showBlockLink && (
                     <span>
-                        {block.title} - {block.name} </span>)
+                        {block.block_title}{variationSep}{block.title } - {block.block_name} {block.name }
+                    </span>)
                 }
                 {blockSupportsInserter}
                 <br />
@@ -182,8 +216,20 @@ function BlockCreateBlockLink( block, component ) {
 }
 
 function BlockNoLink( block, component ) {
+    var block_name = '';
+    if ( undefined !== block.block_name ) {
+        block_name = block_name.concat( block.block_name, ' ' );
+    }
+    block_name = block_name.concat( block.name);
+
+    var block_title = '';
+    if ( undefined !== block.block_title ) {
+        block_title = block_title.concat( block.block_title, ' ' );
+    }
+    block_title = block_title.concat( block.title );
+
     return(
-        <Fragment>{block.title } - {block.name}<br /></Fragment>
+        <Fragment>{block_name },{block_title}<br /></Fragment>
     );
 }
 

src/oik-blocklist/index.js

@@ -1,15 +1,20 @@
 /**
  * Implements the Block list block
  *
- * This block displays a list of blocks associated with a block type name prefix e.g. core, core-embed, oik-block
+ * This block displays a list of blocks associated with a block type name prefix e.g. core, oik-block
  * It's used to help populate the list of blocks for each component that we want to document.
  *
+ * Use the showVariations toggle to include any block variations delivered with the prefix.
+ * For WordPress core this adds over 120 variations to the the original 71 core blocks.
+ *
+ * The number varies depending on the number of registered post types. See core/navigation-link
+ *
  * Note: If the prefix is used by more than one plugin then the list of blocks should be produced
  * using the Block info block being repeated for each block that the plugin delivers.
  *
  * In the future this could be determined from the presence of the block.json files.
  *
- * @copyright (C) Copyright Bobbing Wide 2019, 2020, 2021
+ * @copyright (C) Copyright Bobbing Wide 2019, 2020, 2021, 2022
  * @author Herb Miller @bobbingwide
  */
 import './style.scss';
@@ -20,7 +25,6 @@ import classnames from 'classnames';
 
 import { registerBlockType, createBlock } from '@wordpress/blocks';
 import {AlignmentControl, BlockControls, InspectorControls, useBlockProps, PlainText, BlockIcon} from '@wordpress/block-editor';
-import ServerSideRender from '@wordpress/server-side-render';
 import {
     Toolbar,
     PanelBody,
@@ -70,8 +74,8 @@ export default registerBlockType(
                 props.setAttributes(  { showBlockLink: ! props.attributes.showBlockLink } );
             }
 
-            const onChangeShowDescription = ( event ) => {
-                props.setAttributes(  { showDescription: ! props.attributes.showDescription } );
+            const onChangeshowVariations = ( event ) => {
+                props.setAttributes(  { showVariations: ! props.attributes.showVariations } );
             }
 
             const onChangeShowBatch = ( event ) => {
@@ -84,7 +88,7 @@ export default registerBlockType(
 
             var blocklist = BlockListStyled( props.attributes.prefix,
                 props.attributes.showBlockLink,
-                props.attributes.showDescription,
+                props.attributes.showVariations,
                 props.attributes.showBatch,
                 props.attributes.component,
                 props );
@@ -113,9 +117,9 @@ export default registerBlockType(
 
                         <PanelRow>
                         <ToggleControl
-                            label={ __( 'Show block description', 'oik-blocks' ) }
-                            checked={ !! props.attributes.showDescription }
-                            onChange={ onChangeShowDescription }
+                            label={ __( 'Show block variations', 'oik-blocks' ) }
+                            checked={ !! props.attributes.showVariations }
+                            onChange={ onChangeshowVariations }
 
                         />
 
@@ -155,7 +159,7 @@ export default registerBlockType(
             const blockProps = useBlockProps.save();
             var blocklist = BlockListStyled( props.attributes.prefix,
                 props.attributes.showBlockLink,
-                props.attributes.showDescription,
+                props.attributes.showVariations,
                 props.attributes.showBatch,
                 props.attributes.component,
                 props );