Refactor oik/countdown for wp-scripts and block.json #177

bobbingwide · Aug 13, 2021 · b7cea41 · b7cea41
1 parent 9ae698f
commit b7cea41
Showing 1 changed file with 27 additions and 117 deletions.
diff --git a/src/oik-countdown/index.js b/src/oik-countdown/index.js
@@ -5,116 +5,48 @@
  * The block is dynamic, but cannot be Server Side Rendered since
  * the original implementation generates inline jQuery and CSS which isn't enqueued in REST processing.
  *
- * @copyright (C) Copyright Bobbing Wide 2019, 2020
+ * @copyright (C) Copyright Bobbing Wide 2019, 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 {
-	ServerSideRender
-} = wp.editor;
-
-const { 
-  InspectorControls,
-} = wp.blockEditor;
-
-const {
-  Toolbar,
-  Button,
-  Tooltip,
-  PanelBody,
-  PanelRow,
-  FormToggle,
+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,
 	TextControl,
-} = wp.components;
+	TextareaControl,
+	SelectControl } from '@wordpress/components';
+import { Fragment} from '@wordpress/element';
+import { map, partial } from 'lodash';
 
-const {
-	withInstanceId,
-} = wp.compose;	
-
-const Fragment = wp.element.Fragment;
 import { transforms } from './transforms.js';
 
-
-
-/**
- * Attempt to find an easier way to define each attribute
- * which is a shortcode parameter
- */
-const blockAttributes = {
-	since: {
-		type: 'string',
-		default: '',
-	},
-	until: {
-		type: 'string',
-		default: '',
-	},
-	url: {
-		type: 'string',
-		default: '',
-	},
-	description: {
-		type: 'string',
-		default: '',
-	},
-	expirytext: {
-		type: 'string',
-		default: '',
-	},
-	format: {
-		type: 'string',
-		default: '',
-	},
-
-};
-
-
-
 /**
  * Register the Countdown timer
  */
 registerBlockType(
     // Namespaced, hyphens, lowercase, unique name
     'oik/countdown',
     {
-        // Localize title using wp.i18n.__()
-        title: __( 'Countdown' ),
-
-		description: 'Countdown timer',
-
-        // Category Options: common, formatting, layout, widgets, embed
-        category: 'common',
-
-        // Dashicons Options - https://goo.gl/aTM1DQ
-        icon: 'clock',
-
-        // Limit to 3 Keywords / Phrases
-        keywords: [
-            __( 'Countdown' ),
-			__( 'timer' ),
-			__( 'since' ),
-            __( 'oik' ),
-        ],
-
-        // Set for each piece of dynamic data used in your block
-        attributes: blockAttributes,
-
-		supports: { html: false, className: false},
-
 		transforms,
 
         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 onChangeSince = ( event ) => {
 						props.setAttributes( { since: event } );
@@ -181,7 +113,8 @@ registerBlockType(
 
 
           	</InspectorControls>
-				<div className={ props.className } >
+				<div {...blockProps} >
+
 					<p>The Countdown block will be rendered on the front end. <br />Shortcode equivalent:
 					<br />
 				{chatts}
@@ -195,29 +128,6 @@ registerBlockType(
 		save() {
 			// Rendering in PHP
 			return null;
-		},
-        saver: props => {
-					var lsb = '[';
-					var rsb = ']';
-					var atts = props.attributes;
-					var chatts = '[bw_countdown'; 	
-					for (var key of Object.keys( atts )) {
-						var value = atts[key];
-						if ( value ) {
-							chatts = chatts + " " + key + "=\"" + value + '"';
-						}
-					}
-					chatts = chatts + ']';
-
-
-					//const createMarkup()
-
-					//props.setAttributes( { content: chatts } );
-					//console.log( chatts );
-					//console.log( props.attributes.content );
-          return( <RawHTML>{chatts}</RawHTML> );
-
-
-        },
-    },
+		}
+    }
 );