Issue #24 - Add additional fields to oik-blockicon, clone to oik-bloc…

…kinfo
bobbingwide · Feb 6, 2019 · fd6c7ed · fd6c7ed
1 parent ba3d1f0
commit fd6c7ed
Show file tree

Hide file tree

Showing 7 changed files with 428 additions and 7 deletions.
diff --git a/blocks/index.js b/blocks/index.js
@@ -26,6 +26,7 @@ import './oik-uk-tides';     // From uk-tides - [bw_tides] shortcode
 import './oik-fields';       // From oik-fields - [bw_fields] and [bw_field] shortcode
 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
 
 
 

diff --git a/blocks/oik-blockicon/blockicons.js b/blocks/oik-blockicon/blockicons.js
@@ -10,7 +10,7 @@
  *
  */
 
-const { Component }  = wp.element;
+const { Component, Fragment }  = wp.element;
 const{ getBlockTypes, getBlockType } = wp.blocks;
 const { BlockIcon } = wp.editor;
 const { SelectControl } = wp.components;
@@ -93,13 +93,22 @@ class BlockiconList extends Component {
 
 }
 
-function BlockiconStyled( blockname, ...props ) {
+function BlockiconStyled( blockname, showBlockTypeName, showTitle, showDescription, ...props ) {
     var block = getBlockType( blockname ) ;
+    var blockTypeName =  showBlockTypeName ? <div>{ blockname }</div> : null;
+    var blockTitle = showTitle ? <div> {block.title } </div> : null;
+    var blockDescription = showDescription ? <div> { block.description } </div> : null;
 
     return(
-        <div className={ props.className } >
-            { block ? <BlockIcon icon={ block.icon.src } /> : <p>Hmm</p> }
-        </div>
+        <Fragment>
+            <div className={ props.className } >
+                { block ? <BlockIcon icon={ block.icon.src } /> : <p>Hmm</p> }
+            </div>
+            { blockTypeName }
+            { blockTitle }
+            { blockDescription }
+        </Fragment>
+
     );
 }
 

diff --git a/blocks/oik-blockicon/index.js b/blocks/oik-blockicon/index.js
@@ -26,12 +26,15 @@ const {
     FormToggle,
     ServerSideRender,
     TextControl,
+    ToggleControl,
     Dashicon,
 
 } = wp.components;
 
+
 //import { DashiconsSelect } from './dashicons.js';
 import { BlockiconsSelect, BlockiconStyled } from './blockicons.js';
+//import {ToggleControl} from "../../../gutenberg-source/packages/components/build-module";
 
 /**
  * Register the WordPress block
@@ -65,9 +68,26 @@ export default registerBlockType(
             blockicon: {
                 type: 'string',
                 default: 'oik-block/blockicon'
+            },
+
+            showBlockTypeName: {
+                type: 'boolean',
+                default: false
+            },
+
+            showTitle: {
+                type: 'boolean',
+                default: false
+            },
+
+            showDescription: {
+                type: 'boolean',
+                default: false
             }
 
 
+
+
         },
 
         /**
@@ -89,7 +109,22 @@ export default registerBlockType(
                 props.setAttributes( { blockicon: event } );
             }
 
-            var blockicon = BlockiconStyled( props.attributes.blockicon, props );
+            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 blockicon = BlockiconStyled( props.attributes.blockicon,
+                props.attributes.showBlockTypeName,
+                props.attributes.showTitle,
+                props.attributes.showDescription,
+                props );
 
 
             return [
@@ -101,6 +136,32 @@ export default registerBlockType(
                         <PanelRow>
                             <BlockiconsSelect value={ props.attributes.blockicon } onChange={ onChangeBlockicon } />
                         </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>
 
 
 
@@ -120,7 +181,7 @@ export default registerBlockType(
                 />
          */
         save: props => {
-            return BlockiconStyled( props.attributes.blockicon );
+            return BlockiconStyled( props.attributes.blockicon, props.attributes.showBlockTypeName, props.attributes.showTitle );
         },
     },
 );
diff --git a/blocks/oik-blockinfo/blockicons.js b/blocks/oik-blockinfo/blockicons.js
@@ -0,0 +1,116 @@
+/*
+ * Block icons select control
+ *
+ * I don't fully understand when to use `function Blah` vs `class Blah extends Component`
+ * I supposed it's just a syntax thing.. modern JavaScript ES2015 vs original.
+ * So here we have a mixture.
+ *
+ * @copyright (C) Copyright Bobbing Wide 2019
+ * @author Herb Miller @bobbingwide
+ *
+ */
+
+const { Component, Fragment }  = wp.element;
+const{ getBlockTypes, getBlockType } = wp.blocks;
+const { BlockIcon } = wp.editor;
+const { SelectControl } = wp.components;
+
+function BlockiconsSelect( { value, onChange, ...props } ) {
+
+    const options = getOptions();
+    //console.log( options );
+    options.sort( compareValues );
+    //console.log( options );
+
+    return (
+
+
+            <SelectControl label="Blocks" 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;
+    }
+
+
+    function getOptions() {
+        var block_types = getBlockTypes();
+        const options = block_types.map ( ( block ) => getBlockiconOption( block ) );
+        //console.log( options );
+        return options;
+    }
+
+    function getBlockiconOption( block ) {
+        //var label = BlockiconStyled( block.name );
+
+        var label = getOptionLabel( block );
+        var value = block.name;
+        return {'label': label, 'value': value };
+    }
+
+/**
+ * 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;
+    }
+
+
+class BlockiconList extends Component {
+
+    renderBlockiconList() {
+        var block_types = getBlockTypes();
+        /*console.log( block_types );*/
+        return(
+            <ul>
+                { block_types.map ( ( block ) => this.renderBlockicon( block ) )}
+            </ul>
+        );
+
+    }
+
+    renderBlockicon( block ) {
+        /* { block.icon */
+        /* console.log( block ); */
+        return( <li>
+            <BlockIcon icon={block.icon.src} />
+            {block.name } {block.title }
+        </li> );
+    }
+
+}
+
+function BlockiconStyled( blockname, showBlockTypeName, showTitle, showDescription, ...props ) {
+    var block = getBlockType( blockname ) ;
+    var blockTypeName =  showBlockTypeName ? <div>{ blockname }</div> : null;
+    var blockTitle = showTitle ? <div> {block.title } </div> : null;
+    var blockDescription = showDescription ? <div> { block.description } </div> : null;
+
+    return(
+        <Fragment>
+            <div className={ props.className } >
+                { block ? <BlockIcon icon={ block.icon.src } /> : <p>Hmm</p> }
+            </div>
+            { blockTypeName }
+            { blockTitle }
+            { blockDescription }
+        </Fragment>
+
+    );
+}
+
+
+export  { BlockiconsSelect, BlockiconStyled };
diff --git a/blocks/oik-blockinfo/editor.scss b/blocks/oik-blockinfo/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;
+    }
+  }
+
+}