Issue #5 - Change Address block to server side rendered. Issue #21 - …

…ensure shortcode fields are expanded

blocks/oik-address/index.js

@@ -1,3 +1,13 @@
+/**
+ * Implements [bw_address] as a server rendered block
+ *
+ * - Depends on oik
+ * -
+ *
+ * @copyright (C) Copyright Bobbing Wide 2018,2019
+ * @author Herb Miller @bobbingwide
+ */
+
 import './style.scss';
 import './editor.scss';
 
@@ -8,10 +18,34 @@ import './editor.scss';
 const { __ } = wp.i18n;
 // Get registerBlockType and Editable from wp.blocks
 const { registerBlockType, Editable } = wp.blocks;
+
+const {
+    InspectorControls,
+    ServerSideRender,
+} = wp.editor;
+
+const {
+    Toolbar,
+    PanelBody,
+    PanelRow,
+    FormToggle,
+    TextControl,
+    SelectControl,
+} = wp.components;
+const Fragment = wp.element.Fragment;
+import { map, partial } from 'lodash';
 // Set the header for the block since it is reused
 const blockHeader = <h3>{ __( 'Address' ) }</h3>;
 
 //var TextControl = wp.blocks.InspectorControls.TextControl;
+/**
+ * These are the different options for the tag attr
+ */
+const tagOptions =
+    { "div": "Block",
+        "span": "Inline",
+
+    };
 
 /**
  * Register e
@@ -23,7 +57,7 @@ export default registerBlockType(
         // Localize title using wp.i18n.__()
         title: __( 'Address' ),
 
-				description: 'Displays your address',
+		description: 'Displays your address',
 
         // Category Options: common, formatting, layout, widgets, embed
         category: 'common',
@@ -39,28 +73,54 @@ export default registerBlockType(
 
         // Set for each piece of dynamic data used in your block
         attributes: {
+            tag: {
+                type: 'string',
+                default: ''
+            }
+
 
         },
 
+        supports: {
+            customClassName: false,
+            className: false,
+            html: false,
+        },
+
         edit: props => {
-          const onChangeInput = ( event ) => {
-            props.setAttributes( { issue: event.target.value } );
-						bit = 'bit'; 
-						props.setAttributes( { bit: bit } );
-          };
-
-					//const focus = ( focus ) => {
-					 	//props.setAttributes( { issue: 'fred' } );
-					//};
+            function onChangeAttr( key, value ) {
+                props.setAttributes( { [key] : value } );
+            };
+
+
 
           return (
-            <div className={ props.className }>
-							{blockHeader}
-							<p>This is where the address will appear</p>
-            </div>
+
+              <Fragment>
+              <InspectorControls >
+              <PanelBody>
+            <PanelRow>
+                <SelectControl label="Display" value={props.attributes.tag}
+                                     options={ map( tagOptions, ( key, label ) => ( { value: label, label: key } ) ) }
+                                     onChange={partial( onChangeAttr, 'tag' )}
+            />
+
+            </PanelRow>
+                  <PanelRow>
+                      Equivalent shortcode<br />
+                      &#91;bw_address tag={props.attributes.tag}&#93;
+                  </PanelRow>
+            </PanelBody>
+
+        </InspectorControls>
+
+        <ServerSideRender
+            block="oik-block/address" attributes={ props.attributes }
+            />
+        </Fragment>
           );
         },
-        save: props => {
+        saver: props => {
 					// console.log( props );
 					//var shortcode =  {props.attributes.issue} ;
 					var lsb = '[';
@@ -74,5 +134,8 @@ export default registerBlockType(
             </div>
           );
         },
+        save() {
+                  return null;
+        }
     },
 );

oik-blocks.php

@@ -5,7 +5,7 @@
  * Description: WordPress 5.0 blocks, aka Gutenberg blocks, for oik shortcodes.
  * Author: Herb Miller
  * Author URI: https://herbmiller.me/about/mick
- * Version: 0.1.0-alpha-20190102
+ * Version: 0.1.0-alpha-20190105
  * License: GPL3+
  * License URI: https://www.gnu.org/licenses/gpl-3.0.txt
  *
@@ -323,6 +323,14 @@ function oik_blocks_fields_featured_image_not_set() {
 	return;
 }
 
+function oik_blocks_dynamic_block_address( $attributes ) {
+	$html = oik_blocks_check_server_func( "shortcodes/oik-address.php", "oik", "bw_address" );
+	if ( null === $html ) {
+		$html = bw_address( $attributes, null, null );
+	}
+	return $html;
+}
+
 
 /**
  * Checks if the server function is available
@@ -452,13 +460,23 @@ function oik_blocks_loaded() {
 	add_action( "plugins_loaded", "oik_blocks_plugins_loaded", 100 );
 
 	add_action( "init", "oik_blocks_register_dynamic_blocks" );
+	add_action( "oik_pre_theme_field", "oik_blocks_pre_theme_field" );
 
 
   if ( !defined('DOING_AJAX') ) {
   }
 
 }
 
+/**
+ * Implements oik_pre_theme_field
+ *
+ * This allows the Fields block to ensure shortcodes are loaded during server side rendering.
+ */
+function oik_blocks_pre_theme_field() {
+	do_action( "oik_add_shortcodes" );
+}
+
 /**
  * Registers action/filter hooks for oik's dynamic blocks
  *
@@ -525,6 +543,14 @@ function oik_blocks_register_dynamic_blocks() {
 			]
 
 		);
+		register_block_type( "oik-block/address",
+			[ 'render_callback' => 'oik_blocks_dynamic_block_address',
+			  'attributes' => [
+			  	'tag' => [ 'type' => 'string']
+			  ]
+			]
+
+		);
 	}
 }