Refactor oik/content-block for wp-scripts and block.json #47

bobbingwide · Aug 12, 2021 · a03b72c · a03b72c
1 parent 60a3d1a
commit a03b72c
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 117 deletions.
diff --git a/src/oik-content/edit.js b/src/oik-content/edit.js
@@ -1,52 +1,48 @@
 /**
  * Implements the edit part of oik/content-block
  *
- * @copyright (C) Copyright Bobbing Wide 2020
+ * @copyright (C) Copyright Bobbing Wide 2020, 2021
  * @author Herb Miller @bobbingwide
  */
-const { __ } = wp.i18n;
-const {
-    Editable,
-
-    AlignmentToolbar,
-    BlockControls,
-    ServerSideRender,
-} = wp.editor;
-const {
-    PlainText,
-    InspectorControls,
-} = wp.blockEditor;
-
-const {
-   withInstanceId,
-} = wp.compose;
-
-const {
+
+import { __ } from '@wordpress/i18n';
+import classnames from 'classnames';
+
+import { registerBlockType, createBlock } from '@wordpress/blocks';
+import {AlignmentControl, BlockControls, InspectorControls, useBlockProps, PlainText, BlockIcon} from '@wordpress/block-editor';
+import ServerSideRender from '@wordpress/server-side-render';
+import {
+    Toolbar,
     PanelBody,
     PanelRow,
     FormToggle,
+    RangeControl,
     TextControl,
     TextareaControl,
-    SelectControl,
-    RangeControl,
-} = wp.components;
-const Fragment = wp.element.Fragment;
-import { map, partial, has } from 'lodash';
-
-
-
+    ToggleControl,
+    SelectControl } from '@wordpress/components';
+import { Fragment} from '@wordpress/element';
+import { map, partial } from 'lodash';
 
 import {bw_shortcodes, getAttributes} from "./bw_shortcodes";
-import {PostTypes} from "./post_type";
 import{ NumberPosts } from './numberposts';
 import { orderby, order } from './attributes';
 import { Formats } from './formats';
 import { SelectTextControlCombo } from './SelectTextControlCombo';
 
-const edit= withInstanceId(
-    ( { attributes, setAttributes, instanceId, isSelected } ) => {
-        const inputId = `blocks-shortcode-input-${ instanceId }`;
+import { BwQueryControls } from './query_controls';
 
+//import GenericAttrs from './GenericAttrs';
+import { PostTypes } from './post_type';
+
+export default function Edit ( props ) {
+    const { attributes, setAttributes, instanceId, focus, isSelected } = props;
+    const { textAlign, label } = props.attributes;
+    const blockProps = useBlockProps( {
+        className: classnames( {
+            [ `has-text-align-${ textAlign }` ]: textAlign,
+        } ),
+    } );
 
         const onChangeContent = ( value ) => {
             setAttributes( { content: value } );
@@ -149,7 +145,4 @@ const edit= withInstanceId(
             </Fragment>
 
         );
-    }
-)
-
-export { edit };
+    }
diff --git a/src/oik-content/index.js b/src/oik-content/index.js
@@ -1,51 +1,15 @@
 /**
  * Implements the oik dynamic content shortcodes block
  *
- * @copyright (C) Copyright Bobbing Wide 2020
+ * @copyright (C) Copyright Bobbing Wide 2020,2021
  * @author Herb Miller @bobbingwide
  */
 //import './style.scss';
 import './editor.scss';
 
-// Get just the __() localization function from wp.i18n
-const { __ } = wp.i18n;
-// Get registerBlockType and Editable from wp.blocks
-const {
-    registerBlockType,
-} = wp.blocks;
-
-
-const {
-    Toolbar,
-    Button,
-    Tooltip,
-    PanelBody,
-    PanelRow,
-    FormToggle,
-    TextControl,
-    TextareaControl,
-    SelectControl,
-} = wp.components;
-
-
-const Fragment = wp.element.Fragment;
-const RawHTML = wp.element.RawHTML;
-
-//var TextControl = wp.blocks.InspectorControls.TextControl;
-
-import { bw_shortcodes, getAttributes, bw_shortcodes_attrs } from './bw_shortcodes';
-import { BwQueryControls } from './query_controls';
-
-//import GenericAttrs from './GenericAttrs';
-import { PostTypes } from './post_type';
-import { edit } from './edit';
-
-import { map, partial, has } from 'lodash';
-
-import { shortcode_attributes} from './attributes';
-
-
 
+import { registerBlockType } from '@wordpress/blocks';
+import Edit from './edit';
 /**
  * Register the oik-block/shortcode-block block
  *
@@ -57,50 +21,13 @@ export default registerBlockType(
     // Namespaced, hyphens, lowercase, unique name
     'oik/content-block',
     {
-        // Localize title using wp.i18n.__()
-        title: __( 'Dynamic content block' ),
-
-        description: 'Expands content for dynamic oik shortcodes.',
-
-        // Category Options: common, formatting, layout, widgets, embed
-        category: 'layout',
-
-        // Dashicons Options - https://goo.gl/aTM1DQ
-        icon: 'shortcode',
-
-        // Limit to 3 Keywords / Phrases
-        keywords: [
-            __( 'Content' ),
-            __( 'Shortcode' ),
-            __( 'Dynamic'),
-            __( 'oik' ),
-        ],
-
-        // Set for each piece of dynamic data used in your block
-        // The shortcode should be displayed as a select list
-        // with text override. a la?
-
-        // We can't set a default for the shortcode since the attribute is not created when it's the default value
-        // This can probably be used to our advantage if we expect the default value to come from options.
-
-        attributes: shortcode_attributes,
-
-        supports: {
-            customClassName: false,
-            className: true,
-            html: false,
-            align: true,
-            alignWide: true,
-            alignFull: true,
-        },
-
-        edit,
-
-
-
+        /**
+         * @see ./edit.js
+         */
+        edit: Edit,
         save( { attributes } ) {
             return null;
-        },
-    },
+        }
+    }
 );