Issue #27 - Start build the Block list block oik-blocklist

blocks/index.js

@@ -27,6 +27,7 @@ import './oik-fields';       // From oik-fields - [bw_fields] and [bw_field] sho
 import './oik-dashicon';     // From oik-bob-bing-wide [bw_dash]
 import './oik-blockicon';    // Displays a selected BlockIcon
 import './oik-blockinfo';    // Displays a selected Block's information
+import './oik-blocklist';    // Displays a list of Blocks for a selected prefix
 
 
 

blocks/oik-blocklist/blocklist.js

@@ -0,0 +1,30 @@
+/*
+ * Block info renderer - displays the fields for the block info block
+ *
+ * @copyright (C) Copyright Bobbing Wide 2019
+ * @author Herb Miller @bobbingwide
+ *
+ */
+
+const { getBlockType } = wp.blocks;
+
+import { BlockiconStyled } from '../oik-blockicon/blockicons.js';
+
+function BlockListStyled( prefix, showBlockTypeName, showTitle, showDescription, ...props ) {
+    //var block = getBlockType( blockname ) ;
+    //var blockicon =  BlockiconStyled( blockname, props  );
+    //var blockTypeName =  showBlockTypeName ? <div>{ blockname }</div> : null;
+    //var blockTitle = showTitle ? <div> {block.title } </div> : null;
+    //var blockDescription = showDescription ? <div> { block.description } </div> : null;
+
+    var prefix_array = prefix.split( '/' );
+    var namespace = prefix_array[0];
+    return(
+        <ul><li>Blocks for {namespace}</li></ul>
+
+    );
+
+
+}
+
+export  { BlockListStyled };

blocks/oik-blocklist/blockprefix.js

@@ -0,0 +1,98 @@
+/*
+ * Block prefix select control
+ *
+ * @TODO Reduce the list to just the prefixes
+ * For the time being you select a block and we determine the prefix from the chosen block.
+ * The onChange function will have to do that.
+ *
+ *
+ * @copyright (C) Copyright Bobbing Wide 2019
+ * @author Herb Miller @bobbingwide
+ *
+ */
+
+const { Component }  = wp.element;
+const{ getBlockTypes, getBlockType } = wp.blocks;
+const { BlockIcon } = wp.editor;
+const { SelectControl } = wp.components;
+
+function BlockPrefixSelect( { value, onChange, ...props } ) {
+
+    const options = getOptions();
+    //console.log( options );
+    options.sort( compareValues );
+    //console.log( options );
+
+    return (
+
+
+        <SelectControl label="Prefix" value={ value } options={ options } onChange={ onChange } />
+    );
+    //this.renderBlockiconList();
+
+}
+
+function compareValues(a, b) {
+    if (a.value < b.value )
+        return -1;
+    if (a.value > b.value )
+        return 1;
+    return 0;
+}
+
+
+/**
+ * How do we reduce the list of Block types to a smaller array of Prefixes?
+ * @returns {*}
+ */
+
+function getOptions() {
+    var block_types = getBlockTypes();
+    const namespaces = getNameSpaces( block_types );
+    const options = namespaces.map ( ( namespace ) => getBlockPrefixOption( namespace ) );
+    console.log( options );
+    return options;
+}
+
+function getBlockPrefixOption( namespace ) {
+    return {'label': namespace, 'value': namespace };
+}
+
+function onlyUnique(value, index, self) {
+    return self.indexOf(value) === index;
+}
+
+function getNameSpaces( block_types) {
+    var namespaces = block_types.map( ( block ) => getNameSpace( block ));
+    var unique_namespaces = namespaces.filter( onlyUnique );
+
+    console.log( namespaces );
+    console.log( unique_namespaces );
+    return unique_namespaces;
+
+}
+
+function getNameSpace( block ) {
+    var block_name = block.name;
+    var prefix_array = block_name.split( '/' );
+    var namespace = prefix_array[0];
+    return namespace;
+}
+
+/**
+ * So how do I get the icon into the option label?
+ * It seems it's not possible.
+ *
+ * @param block
+ * @returns {string}
+ */
+
+function getOptionLabel( block ) {
+    var label = `${block.name} - ${ block.title }`;
+    return label;
+}
+
+
+
+
+export  { BlockPrefixSelect };

blocks/oik-blocklist/editor.scss

@@ -0,0 +1,11 @@
+.wp-block-oik-block-blockicon {
+  .is-style-svg64 {
+    svg {
+      width: 64px;
+      height: 64px;
+      max-height: 64px;
+      max-width: 64px;
+    }
+  }
+
+}

blocks/oik-blocklist/index.js

@@ -0,0 +1,191 @@
+/**
+ * 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
+ * I intend to use it to help populate the list of blocks for each component that we want to document.
+ *
+ *
+ *
+ * @copyright (C) Copyright Bobbing Wide 2019
+ * @author Herb Miller @bobbingwide
+ */
+import './style.scss';
+import './editor.scss';
+
+// Get just the __() localization function from wp.i18n
+const { __ } = wp.i18n;
+// Get registerBlockType from wp.blocks
+const {
+    registerBlockType,
+    createBlock,
+} = wp.blocks;
+const {
+    BlockIcon,
+    InspectorControls,
+} = wp.editor;
+
+const {
+    Toolbar,
+    PanelBody,
+    PanelRow,
+    FormToggle,
+    ServerSideRender,
+    TextControl,
+    ToggleControl,
+    Dashicon,
+
+} = wp.components;
+const { Fragment }  = wp.element;
+
+
+//import { DashiconsSelect } from './dashicons.js';
+import { BlockiconsSelect, BlockiconStyled } from '../oik-blockicon/blockicons.js';
+import { BlockListStyled } from './blocklist.js'
+import { BlockPrefixSelect } from './blockprefix.js';
+//import {ToggleControl} from "../../../gutenberg-source/packages/components/build-module";
+
+/**
+ * Register the WordPress block
+ */
+export default registerBlockType(
+    // Namespaced, hyphens, lowercase, unique name
+    'oik-block/blocklist',
+    {
+        // Localize title using wp.i18n.__()
+        title: __( 'Block list' ),
+
+        description: 'Displays a list of Blocks for a chosen prefix',
+
+        // Category Options: common, formatting, layout, widgets, embed
+        category: 'widgets',
+
+        // Dashicons Options - https://goo.gl/aTM1DQ
+        icon: 'block-default',
+
+        // Limit to 3 Keywords / Phrases
+        keywords: [
+            __( 'list' ),
+            __( 'oik' ),
+            __( 'block'),
+        ],
+
+        // Set for each piece of dynamic data used in your block
+
+        attributes: {
+
+            prefix: {
+                type: 'string',
+                default: 'oik-block'
+            },
+
+            showBlockTypeName: {
+                type: 'boolean',
+                default: true
+            },
+
+            showTitle: {
+                type: 'boolean',
+                default: true
+            },
+
+            showDescription: {
+                type: 'boolean',
+                default: true
+            }
+
+        },
+
+
+
+        edit: props => {
+
+
+            const onChangePrefix = ( event ) => {
+                console.log( event );
+                props.setAttributes( { prefix: event } );
+            }
+
+            const onChangeShowBlockTypeName = ( event ) => {
+                props.setAttributes(  { showBlockTypeName: ! props.attributes.showBlockTypeName } );
+            }
+            const onChangeShowTitle = ( event ) => {
+                props.setAttributes(  { showTitle: ! props.attributes.showTitle } );
+            }
+
+            const onChangeShowDescription = ( event ) => {
+                props.setAttributes(  { showDescription: ! props.attributes.showDescription } );
+            }
+
+            var blocklist = BlockListStyled( props.attributes.prefix,
+                props.attributes.showBlockTypeName,
+                props.attributes.showTitle,
+                props.attributes.showDescription,
+                props );
+
+
+            return [
+                <InspectorControls >
+                    <PanelBody>
+
+                        <PanelRow>
+                            <TextControl
+                                label="Prefix"
+                                value={ props.attributes.prefix }
+                                onChange={ onChangePrefix }
+                                onFocus={ focus }
+                            />
+                        </PanelRow>
+
+                        <PanelRow>
+                            <BlockPrefixSelect value={ props.attributes.prefix } onChange={ onChangePrefix } />
+                        </PanelRow>
+                        <PanelRow>
+                            <ToggleControl
+                                label={ __( 'Show block type name' ) }
+                                checked={ !! props.attributes.showBlockTypeName }
+                                onChange={ onChangeShowBlockTypeName }
+
+                            />
+                        </PanelRow>
+                        <PanelRow>
+                            <ToggleControl
+                                label={ __( 'Show block title' ) }
+                                checked={ !! props.attributes.showTitle }
+                                onChange={ onChangeShowTitle }
+
+                            />
+
+                        </PanelRow>
+                        <PanelRow>
+                            <ToggleControl
+                                label={ __( 'Show block description' ) }
+                                checked={ !! props.attributes.showDescription }
+                                onChange={ onChangeShowDescription }
+
+                            />
+
+                        </PanelRow>
+
+
+
+                    </PanelBody>
+
+                </InspectorControls>
+                ,
+                <div className={ props.className }>
+                { blocklist }
+                </div>
+
+
+            ];
+        },
+        /*
+        <ServerSideRender
+                    block="oik-block/dashicon" attributes={ props.attributes }
+                />
+         */
+        save: props => {
+            return BlockListStyled( props.attributes.prefix, props.attributes.showBlockTypeName, props.attributes.showTitle, props.attributes.showDescription, props );
+        },
+    },
+);

blocks/oik-blocklist/style.scss

@@ -0,0 +1,26 @@
+
+/* oik-blockicon/style.scss */
+.wp-block-oik-block-blockicon.svg64 svg {
+  width: 64px;
+  height: 64px;
+}
+
+.svg64 .editor-block-icon,
+.svg64 .editor-block-icon svg {
+  width: 64px;
+  height: 64px;
+  max-height: 64px;
+  max-width: 64px;
+}
+
+
+.wp-block-oik-block-blockicon .is-style-svg64 {
+    svg {
+      width: 64px;
+      height: 64px;
+      max-height: 64px;
+      max-width: 64px;
+    }
+
+
+}