Gutenberg side panel try 1

admin/class-steempress_sp-admin.php

@@ -80,6 +80,42 @@ class Steempress_sp_Admin {
 
     }
 
+    function gb_block_01_basic_editor_assets() {
+        // Scripts.
+        wp_enqueue_script(
+            'gb-block-01-basic', // Handle.
+            plugin_dir_url( __FILE__ ) . 'js/steempress_sp_gutenberg.js', // Block.js: We register the block here.
+            array( 'wp-blocks', 'wp-i18n', 'wp-element' ) // Dependencies, defined above.
+        );
+        // Styles.
+        wp_enqueue_style(
+            'gb-block-01-basic-editor', // Handle.
+            plugin_dir_url( __FILE__ ) . 'css/steempress_sp-admin.css', // Block editor CSS.
+            array( 'wp-edit-blocks' ) // Dependency to include the CSS after it.
+
+        );
+    } // End function gb_block_01_basic_editor_assets().
+
+
+    /**
+     * Enqueue the block's assets for the frontend.
+     *
+     * @since 1.0.0
+     */
+    function gb_block_01_basic_block_assets() {
+        // Styles.
+        wp_enqueue_style(
+            'gb-block-01-basic-frontend', // Handle.
+            plugin_dir_url( __FILE__ ) . 'css/steempress_sp-admin.css', // Block frontend CSS.
+            array( 'wp-blocks' ) // Dependency to include the CSS after it.
+        );
+    } // End function gb_block_01_basic_block_assets().
+
+    function mdlr_block_static_jsx_example_backend_enqueue() {
+
+        wp_enqueue_script( $this->plugin_name."steempress_sp_backend", plugin_dir_url( __FILE__ ) . 'js/steempress_sp_gutenberg.js', array('wp-i18n', 'wp-element','wp-hooks', 'wp-components', 'wp-compose', 'wp-editor' ));
+    }
+
     /**
      * Register the JavaScript for the admin area.
      *

admin/css/steempress_sp-admin.css

@@ -32,3 +32,11 @@
 .steempress_sp_active:after {
     content: "\2796"; /* Unicode character for "minus" sign (-) */
 }
+
+.wp-block-gb-basic-01 {
+    color: #000000;
+    background: mistyrose;
+    border: 0.2rem solid red;
+    padding: 2rem;
+}
+

admin/js/steempress_sp_gutenberg.js

+const { assign } = lodash;
+const { __ } = wp.i18n;
+const { Fragment } = wp.element;
+const { addFilter } = wp.hooks;
+const { TextControl, PanelBody } = wp.components;
+const { createHigherOrderComponent } = wp.compose;
+const { InspectorControls } = wp.editor;
+
+/**
+* Override the default edit UI to include a new block inspector control for
+    * adding our custom control.
+*
+* @param {function|Component} BlockEdit Original component.
+*
+* @return {string} Wrapped component.
+*/
+export const addMyCustomBlockControls = createHigherOrderComponent( ( BlockEdit ) => {
+
+    return ( props ) => {
+
+    // If this block supports scheduling and is currently selected, add our UI
+    if ( isValidBlockType( props.name ) && props.isSelected ) {
+        return (
+            <Fragment>
+            <BlockEdit { ...props } />
+        <InspectorControls>
+        <PanelBody title={ __( 'My Custom Panel Heading' ) }>
+    <TextControl
+        label={ __( 'My Custom Control' ) }
+        help={ __( 'Some help text for my custom control.' ) }
+        value={ props.attributes.scheduledStart || '' }
+        onChange={ ( nextValue ) => {
+            props.setAttributes( {
+                scheduledStart: nextValue,
+            } );
+        } } />
+        </PanelBody>
+        </InspectorControls>
+        </Fragment>
+    );
+    }
+
+    return <BlockEdit { ...props } />;
+};
+}, 'addMyCustomBlockControls' );
+
+addFilter( 'editor.BlockEdit', 'my-plugin/my-control', addMyCustomBlockControls );
+/**
+ * Is the passed block name one which supports our custom field?
+ *
+ * @param {string} name The name of the block.
+ */
+function isValidBlockType( name ) {
+
+    const validBlockTypes = [
+        'core/paragraph',
+        'core/image',
+        'core/heading',
+    ];
+
+    return validBlockTypes.includes( name );
+
+}// end isValidBlockType()
+
+**
+* Filters registered block settings, extending attributes with our custom data.
+*
+* @param {Object} settings Original block settings.
+*
+* @return {Object} Filtered block settings.
+*/
+export function addAttribute( settings ) {
+
+    // If this is a valid block
+    if ( isValidBlockType( settings.name ) ) {
+
+        // Use Lodash's assign to gracefully handle if attributes are undefined
+        settings.attributes = assign( settings.attributes, {
+            scheduledStart: {
+                type: 'string',
+            },
+        } );
+    }
+
+    return settings;
+
+}// end addAttribute()
+
+/**
+ * Override props assigned to save component to inject our custom data.
+ * This is only done if the component is a valid block type.
+ *
+ * @param {Object} extraProps Additional props applied to save element.
+ * @param {Object} blockType  Block type.
+ * @param {Object} attributes Current block attributes.
+ *
+ * @return {Object} Filtered props applied to save element.
+ */
+export function addSaveProps( extraProps, blockType, attributes ) {
+
+    // If the current block is valid, add our prop.
+    if ( isValidBlockType( blockType.name ) ) {
+        extraProps.scheduledStart = attributes.scheduledStart;
+    }
+
+    return extraProps;
+
+}// end addSaveProps()
+
+addFilter( 'blocks.registerBlockType', 'my-plugin/add-attr', addAttribute );
+addFilter( 'blocks.getSaveContent.extraProps', 'my-plugin/add-props', addSaveProps );
+

includes/class-steempress_sp.php

@@ -181,7 +181,8 @@ class Steempress_sp {
         $this->loader->add_action('add_meta_boxes',$plugin_admin,  'steempress_sp_add_custom_box');
         $this->loader->add_action('save_post', $plugin_admin,  'steempress_sp_save_post_data');
 
-
+        $this->loader->add_action( 'enqueue_block_editor_assets', $plugin_admin, 'gb_block_01_basic_editor_assets' );
+        $this->loader->add_action( 'enqueue_block_assets', $plugin_admin, 'gb_block_01_basic_block_assets' );
     }
 
 

steempress_sp.php

@@ -34,10 +34,10 @@ if ( ! defined( 'WPINC' ) ) {
  * Rename this for your plugin and update it as you release new versions.
  */
 define( 'steempress_sp_compte', '2.1');
-define( 'steempress_sp_api_url', 'https://api.steempress.io');
+//define( 'steempress_sp_api_url', 'https://api.steempress.io');
 define( 'steempress_sp_twoway_api_url', 'https://two.steempress.io');
 
-//define( 'steempress_sp_api_url', 'http://localhost:8001');
+define( 'steempress_sp_api_url', 'http://localhost:8001');
 //define( 'steempress_sp_twoway_api_url', 'http://localhost:8002');
 
 /**