Issue #24 - enable Additional CSS class svg64 for block info icons an…

…d transform between block icon and block info
bobbingwide · Feb 8, 2019 · 0a8f3e5 · 0a8f3e5
1 parent 0c6fe83
commit 0a8f3e5
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 15 deletions.
diff --git a/blocks/oik-blockicon/index.js b/blocks/oik-blockicon/index.js
@@ -88,7 +88,7 @@ export default registerBlockType(
             }
 
             var blockicon = BlockiconStyled( props.attributes.blockicon, props );
-            
+
             return [
                 <InspectorControls >
                     <PanelBody>

diff --git a/blocks/oik-blockinfo/blockinfo.js b/blocks/oik-blockinfo/blockinfo.js
@@ -1,15 +1,12 @@
 /*
- * Block info - displays the fields for the block info block
+ * Block info renderer - displays the fields for the block info block
  *
  * @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;
+const { getBlockType } = wp.blocks;
 
 import { BlockiconStyled } from '../oik-blockicon/blockicons.js';
 
@@ -21,15 +18,14 @@ function BlockinfoStyled( blockname, showBlockTypeName, showTitle, showDescripti
     var blockDescription = showDescription ? <div> { block.description } </div> : null;
 
     return(
-        <Fragment>
+        <div className={ props.className }>
             { blockicon }
             { blockTypeName }
             { blockTitle }
             { blockDescription }
-        </Fragment>
+        </div>
 
     );
 }
 
-
 export  { BlockinfoStyled };
diff --git a/blocks/oik-blockinfo/index.js b/blocks/oik-blockinfo/index.js
@@ -24,6 +24,7 @@ const { __ } = wp.i18n;
 // Get registerBlockType from wp.blocks
 const {
     registerBlockType,
+    createBlock,
 } = wp.blocks;
 const {
     BlockIcon,
@@ -41,6 +42,7 @@ const {
     Dashicon,
 
 } = wp.components;
+const { Fragment }  = wp.element;
 
 
 //import { DashiconsSelect } from './dashicons.js';
@@ -97,10 +99,31 @@ export default registerBlockType(
                 default: true
             }
 
+        },
 
-
-
-
+        transforms: {
+            from: [
+                {
+                    type: 'block',
+                    blocks: ['oik-block/blockicon'],
+                    transform: function( attributes ) {
+                        return createBlock( 'oik-block/blockinfo', {
+                            blockicon: attributes.blockicon,
+                        });
+                    },
+                },
+            ],
+            to: [
+                {
+                    type: 'block',
+                    blocks: ['oik-block/blockicon'],
+                    transform: function( attributes ) {
+                        return createBlock( 'oik-block/blockicon', {
+                            blockicon: attributes.blockicon,
+                        });
+                    },
+                }
+            ]
         },
 
         /**
@@ -133,7 +156,7 @@ export default registerBlockType(
                 props.setAttributes(  { showDescription: ! props.attributes.showDescription } );
             }
 
-            var blockicon = BlockinfoStyled( props.attributes.blockicon,
+            var blockinfo = BlockinfoStyled( props.attributes.blockicon,
                 props.attributes.showBlockTypeName,
                 props.attributes.showTitle,
                 props.attributes.showDescription,
@@ -183,9 +206,10 @@ export default registerBlockType(
                 </InspectorControls>
                 ,
                 <div className={ props.className }>
-                    { blockicon }
+                { blockinfo }
                 </div>
 
+
             ];
         },
         /*
@@ -194,7 +218,7 @@ export default registerBlockType(
                 />
          */
         save: props => {
-            return BlockinfoStyled( props.attributes.blockicon, props.attributes.showBlockTypeName, props.attributes.showTitle );
+            return BlockinfoStyled( props.attributes.blockicon, props.attributes.showBlockTypeName, props.attributes.showTitle, props.attributes.showDescription, props );
         },
     },
 );
diff --git a/blocks/oik-blockinfo/style.scss b/blocks/oik-blockinfo/style.scss
@@ -1,3 +1,4 @@
+
 /* oik-blockicon/style.scss */
 .wp-block-oik-block-blockicon.svg64 svg {
   width: 64px;