From a03b72cc7b65d4d797cdc790903c56d3baab9c0e Mon Sep 17 00:00:00 2001 From: Herb Miller Date: Thu, 12 Aug 2021 16:43:52 +0100 Subject: [PATCH] Refactor oik/content-block for wp-scripts and block.json #47 --- src/oik-content/edit.js | 63 +++++++++++++--------------- src/oik-content/index.js | 91 ++++------------------------------------ 2 files changed, 37 insertions(+), 117 deletions(-) diff --git a/src/oik-content/edit.js b/src/oik-content/edit.js index 67ff1f2..48b885f 100644 --- 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( ); - } -) - -export { edit }; + } \ No newline at end of file diff --git a/src/oik-content/index.js b/src/oik-content/index.js index 7ceb20b..325bca0 100644 --- 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; - }, - }, + } + } );