Issue #21 - First pass Fields block

blocks/index.js

@@ -23,7 +23,7 @@ import './oik-wp';           // From oik-bob-bing-wide wp shortcode
 import './oik-geshi';        // From oik-css bw_geshi shortcode
 import './oik-search';       // From wordpress - get_search_form()
 import './oik-uk-tides';     // From uk-tides - [bw_tides] shortcode
-//import './oik-fields';       // From oik-fields - [bw_fields] and [bw_field] shortcode
+import './oik-fields';       // From oik-fields - [bw_fields] and [bw_field] shortcode
 
 
 

blocks/oik-fields/index.js

@@ -0,0 +1,157 @@
+/**
+ * Implements [bw_fields/ / [bw_field] as a server rendered block
+ *
+ * - Depends on oik-fields
+ * - Supports easier to use attributes for simple field options; featured,
+ * - Allows option to display Labels or not; [bw_fields] => labels, [bw_field] => no labels
+ * - Server side rendering when the block is not selected.
+ * - Not yet aware of the Fields associated with a CPT
+ * - Does not require fields to be exposed in the REST API
+ *
+ * @copyright (C) Copyright Bobbing Wide 2018
+ * @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,
+} = 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';
+
+
+/**
+ * These are the different options for "virtual" fields
+ */
+const fieldsOptions =
+    { "none": "All",
+        "featured": "Featured image",
+        "file_size": "File size of attachment",
+        "dimensions": "Image dimensions",
+        "thumbnail": "Thumbnail",
+        "googlemap": "Google Maps Map",
+        "template": "Page template name",
+    };
+//import portOptions from './tidetimes-co-uk.js';
+
+
+
+/**
+ * Register the WordPress block
+ */
+export default registerBlockType(
+    // Namespaced, hyphens, lowercase, unique name
+    'oik-block/fields',
+    {
+        // Localize title using wp.i18n.__()
+        title: __( 'Fields' ),
+
+        description: 'Displays Fields',
+
+        // Category Options: common, formatting, layout, widgets, embed
+        category: 'widgets',
+
+        // Dashicons Options - https://goo.gl/aTM1DQ
+        icon: 'info-outline',
+
+        // Limit to 3 Keywords / Phrases
+        keywords: [
+            __( 'field' ),
+            __( 'meta'),
+            __( 'oik' ),
+        ],
+
+        // Set for each piece of dynamic data used in your block
+        attributes: {
+            fields: {
+                type: 'string',
+                default: '',
+
+            },
+            labels: {
+                type: 'string',
+                default: ''
+            },
+
+
+        },
+        supports: {
+            customClassName: false,
+            className: false,
+            html: false,
+        },
+
+        edit: props => {
+
+            /**
+             * Attempt a generic function to apply a change
+             * using the partial technique
+             *
+             * key needs to be in [] otherwise it becomes a literal
+             *
+             */
+            //onChange={ partial( handleChange, 'someKey' ) }
+
+            function onChangeAttr( key, value ) {
+                //var nextAttributes = {};
+                //nextAttributes[ key ] = value;
+                //setAttributes( nextAttributes );
+                props.setAttributes( { [key] : value } );
+            };
+
+
+
+            return (
+                <Fragment>
+                    <InspectorControls >
+                        <PanelBody>
+                            <PanelRow>
+                                <SelectControl label="Fields" value={props.attributes.fields}
+                                               options={ map( fieldsOptions, ( key, label ) => ( { value: label, label: key } ) ) }
+                                               onChange={partial( onChangeAttr, 'fields' )}
+                                />
+
+                            </PanelRow>
+
+                            <PanelRow>
+
+
+                            </PanelRow>
+                            <PanelRow>
+
+                            </PanelRow>
+                        </PanelBody>
+
+                    </InspectorControls>
+
+                    <ServerSideRender
+                        block="oik-block/fields" attributes={ props.attributes }
+                    />
+                </Fragment>
+
+            );
+        },
+
+
+        save() {
+            return null;
+        },
+    },
+);

oik-blocks.php

@@ -20,6 +20,7 @@
  * 
  * Notes:
  * - This routine shouldn't be invoked when using the classic-editor
+ * - But we can no longer perform tests on the classic-editor parameter alone
  * - It should only enqueue scripts for the Gutenberg editor
  * - Not in other admin areas 
  * 
@@ -271,6 +272,58 @@ function oik_blocks_uk_tides_attributes( $attributes ) {
 	return $attributes;
 }
 
+/**
+ * Renders the Fields block
+ *
+ * @param array $attributes fields, labels
+ * @return string generated HTML
+ */
+function oik_blocks_dynamic_block_fields( $attributes ) {
+	$html = oik_blocks_check_server_func( "shortcodes/oik-fields.php", "oik-fields", "bw_metadata");
+	if ( null === $html ) {
+		$attributes = oik_blocks_fields_attributes( $attributes );
+		$html = bw_metadata( $attributes, null, null );
+		$html = oik_blocks_fields_results( $html, $attributes );
+	}
+	return $html;
+}
+
+/**
+ * 'Filters' the Fields block's attributes
+ *
+ * @param array $attributes
+ * @return array $attributes
+ */
+function oik_blocks_fields_attributes( $attributes ) {
+	$fields = bw_array_get( $attributes, "fields", "none" );
+	if ( "none" === $fields ) {
+		unset( $attributes[ 'fields' ] );
+	}
+	return $attributes;
+}
+
+/**
+ * 'filters' the Fields block's results
+ *
+ * @param string $html
+ * @param array $attributes
+ * @return string HTML
+ */
+function oik_blocks_fields_results( $html, $attributes ) {
+	//bw_trace2();
+	$fields = bw_array_get( $attributes, "fields", "none" );
+	if ( $fields === 'featured' && ! has_post_thumbnail() ) {
+		$html .= "Please set featured image";
+	}
+
+	return $html;
+}
+
+function oik_blocks_fields_featured_image_not_set() {
+	return;
+}
+
+
 /**
  * Checks if the server function is available
  *
@@ -462,6 +515,16 @@ function oik_blocks_register_dynamic_blocks() {
 			]
 
 		);
+		register_block_type( "oik-block/fields",
+			[ 'render_callback' => 'oik_blocks_dynamic_block_fields',
+			  'attributes' => [
+				  'fields' => [ 'type' => 'string' ],
+				  'labels' => [ 'type' => 'string' ],
+
+			  ]
+			]
+
+		);
 	}
 }