Issue #27 - Add component for Block create command

blocks/build/css/blocks.style.css

@@ -3,4 +3,4 @@ div.bw_css{background-color:#f8f8f8}.bw_css code{display:block;margin-top:10px;b
 div.bw_csv{width:100%}
 .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}
 .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}
-.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}
+pre.wp-block-oik-block-blocklist{font-size:10px}

blocks/oik-blocklist/blocklist.js

@@ -13,7 +13,7 @@ const Fragment = wp.element.Fragment;
 import { BlockiconStyled } from '../oik-blockicon/blockicons.js';
 import { getNameSpace} from './blockprefix.js';
 
-function BlockListStyled( prefix, showBlockTypeName, showTitle, showDescription, showBatch, ...props ) {
+function BlockListStyled( prefix, showBlockTypeName, showTitle, showDescription, showBatch, component, ...props ) {
     //var block = getBlockType( blockname ) ;
     //var blockicon =  BlockiconStyled( blockname, props  );
     //var blockTypeName =  showBlockTypeName ? <div>{ blockname }</div> : null;
@@ -32,7 +32,7 @@ function BlockListStyled( prefix, showBlockTypeName, showTitle, showDescription,
     if ( showBatch ) {
         var blocklist =  <pre>
             cd ~/public_html/wp-content/plugins/oik-shortcodes/admin
-            {block_types.map( (block) => BlockCreateItem( block )) }
+            {block_types.map( (block) => BlockCreateItem( block, component )) }
         </pre>
     } else
     {
@@ -75,9 +75,9 @@ function BlockListItem( block ) {
         );
 }
 
-function BlockCreateItem( block ) {
+function BlockCreateItem( block, component ) {
                 console.log( block );
-    return( <Fragment><br/>oikwp oik-create-blocks.php {block.name} "{block.title}" component url=blocks.wp-a2z.org</Fragment> );
+    return( <Fragment><br/>oikwp oik-create-blocks.php {block.name} "{block.title}" {component} url=blocks.wp-a2z.org</Fragment> );
 }
 
 export  { BlockListStyled };

blocks/oik-blocklist/editor.scss

@@ -1,17 +1,7 @@
-.wp-block-oik-block-blockicon {
-  .is-style-svg64 {
-    svg {
-      width: 64px;
-      height: 64px;
-      max-height: 64px;
-      max-width: 64px;
-    }
-  }
-
-}
+/* Editor styling for oik-blocklist */
 
 .wp-block-oik-block-blocklist {
   pre {
-    font-size: 12px;
+    font-size: 10px;
   }
 }

blocks/oik-blocklist/index.js

@@ -96,6 +96,11 @@ export default registerBlockType(
             showBatch: {
                 type: 'boolean',
                 default: false
+            },
+
+            component: {
+                type: 'string',
+                default: ""
             }
 
 
@@ -127,11 +132,16 @@ export default registerBlockType(
                 props.setAttributes( { showBatch: ! props.attributes.showBatch } );
             }
 
+            const onChangeComponent = ( event ) => {
+                props.setAttributes( { component: event } );
+            }
+
             var blocklist = BlockListStyled( props.attributes.prefix,
                 props.attributes.showBlockTypeName,
                 props.attributes.showTitle,
                 props.attributes.showDescription,
                 props.attributes.showBatch,
+                props.attributes.component,
                 props );
 
 
@@ -181,6 +191,10 @@ export default registerBlockType(
 
                         </PanelRow>
 
+                    <PanelRow>
+                        <TextControl label={"Component"} value={ props.attributes.component} onChange={ onChangeComponent }/>
+                    </PanelRow>
+
 
 
                     </PanelBody>
@@ -201,7 +215,7 @@ export default registerBlockType(
                 />
          */
         save: props => {
-            return BlockListStyled( props.attributes.prefix, props.attributes.showBlockTypeName, props.attributes.showTitle, props.attributes.showDescription, props.attributes.showBatch, props );
+            return BlockListStyled( props.attributes.prefix, props.attributes.showBlockTypeName, props.attributes.showTitle, props.attributes.showDescription, props.attributes.showBatch, props.attributes.component, props );
         },
     },
 );

blocks/oik-blocklist/style.scss

@@ -1,26 +1,4 @@
-
-/* 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;
-    }
-
-
-}
+/* oik-blocklist/style.scss */
+pre.wp-block-oik-block-blocklist {
+    font-size: 10px;
+  }