Merge pull request #333 from AmazeeLabs/refactor-blocks

packages/drupal/gutenberg_blocks/js/blocks/accordion-item-text.tsx

@@ -7,33 +7,35 @@ import {
 } from 'wordpress__block-editor';
 import { registerBlockType } from 'wordpress__blocks';
 import { PanelBody, SelectControl } from 'wordpress__components';
-import { compose, withState } from 'wordpress__compose';
 
 const { t: __ } = Drupal;
 
-// @ts-ignore
-registerBlockType('custom/accordion-item-text', {
+registerBlockType<{
+  title: string;
+  icon?: string;
+}>('custom/accordion-item-text', {
   title: 'Accordion Item Text',
   icon: 'text',
   category: 'layout',
   parent: ['custom/accordion'],
   attributes: {
     title: {
       type: 'string',
+      default: '',
     },
     icon: {
       type: 'string',
     },
   },
-  // @ts-ignore
-  edit: compose(withState())((props) => {
+  edit: (props) => {
     const { attributes, setAttributes } = props;
     const icons = [
       { label: __('- Select an optional icon -'), value: '' },
       { label: __('Checkmark'), value: 'checkmark' },
       { label: __('Questionmark'), value: 'questionmark' },
       { label: __('Arrow'), value: 'arrow' },
     ];
+
     setAttributes({
       icon: attributes.icon === undefined ? '' : attributes.icon,
     });
@@ -83,7 +85,7 @@ registerBlockType('custom/accordion-item-text', {
         </div>
       </Fragment>
     );
-  }),
+  },
 
   save: () => {
     return <InnerBlocks.Content />;

packages/drupal/gutenberg_blocks/js/blocks/accordion.tsx

@@ -11,7 +11,9 @@ enum HeadingLevels {
   H5 = 'h5',
 }
 
-registerBlockType('custom/accordion', {
+registerBlockType<{
+  headingLevel: string;
+}>('custom/accordion', {
   title: __('Accordion'),
   icon: 'menu',
   category: 'layout',
@@ -29,7 +31,7 @@ registerBlockType('custom/accordion', {
         <InspectorControls>
           <PanelBody title={__('Heading Level')}>
             <SelectControl
-              value={props.attributes.headingLevel as string}
+              value={props.attributes.headingLevel}
               options={[
                 {
                   label: __('Heading 2'),

packages/drupal/gutenberg_blocks/js/blocks/conditional.tsx

@@ -21,7 +21,11 @@ type ConditionsType = {
 
 const blockTitle = __('Conditional content');
 
-registerBlockType(`custom/conditional`, {
+registerBlockType<{
+  displayFrom: string;
+  displayTo: string;
+  purpose: string;
+}>(`custom/conditional`, {
   title: blockTitle,
   category: 'layout',
   icon: 'category',
@@ -41,12 +45,9 @@ registerBlockType(`custom/conditional`, {
       default: '',
     },
   },
-  edit(props) {
+  edit: (props) => {
     const { attributes, setAttributes } = props;
-
-    const displayFrom = attributes.displayFrom as string | undefined;
-    const displayTo = attributes.displayTo as string | undefined;
-    const purpose = (attributes.purpose as string) || '';
+    const { displayFrom, displayTo, purpose } = attributes;
 
     // Same logic as in BlockConditional.tsx
     const active = {
@@ -192,8 +193,7 @@ registerBlockType(`custom/conditional`, {
       </>
     );
   },
-
-  save() {
+  save: () => {
     return <InnerBlocks.Content />;
   },
 });

packages/drupal/gutenberg_blocks/js/blocks/content.tsx

@@ -9,7 +9,7 @@ const style = {
   padding: '0 40px',
 };
 
-registerBlockType(`custom/content`, {
+registerBlockType<{}>(`custom/content`, {
   title: __('Content'),
   category: 'layout',
   icon: 'media-document',
@@ -19,15 +19,15 @@ registerBlockType(`custom/content`, {
     align: true,
     html: false,
   },
-  edit() {
+  edit: () => {
     return (
       <main style={style} className="prose lg:prose-xl">
         <InnerBlocks templateLock={false} template={[['core/paragraph', {}]]} />
       </main>
     );
   },
 
-  save() {
+  save: () => {
     return <InnerBlocks.Content />;
   },
 });

packages/drupal/gutenberg_blocks/js/blocks/cta.tsx

@@ -7,7 +7,6 @@ import {
 } from 'wordpress__block-editor';
 import { registerBlockType } from 'wordpress__blocks';
 import { PanelBody, SelectControl, ToggleControl } from 'wordpress__components';
-import { compose, withState } from 'wordpress__compose';
 
 const { t: __ } = Drupal;
 const { setPlainTextAttribute } = silverbackGutenbergUtils;
@@ -29,8 +28,15 @@ const ArrowRightIcon = () => (
   </svg>
 );
 
-// @ts-ignore
-registerBlockType('custom/cta', {
+registerBlockType<{
+  url?: string;
+  text: string;
+  'data-id'?: string;
+  'data-entity-type'?: string;
+  openInNewTab: boolean;
+  icon: string;
+  iconPosition: string;
+}>('custom/cta', {
   title: 'CTA',
   icon: 'admin-links',
   category: 'common',
@@ -40,6 +46,7 @@ registerBlockType('custom/cta', {
     },
     text: {
       type: 'string',
+      default: '',
     },
     // To have an easier integration with entity usage, we also retrieve and
     // store the uuid (data-id) and the entity type of internal links.
@@ -51,6 +58,7 @@ registerBlockType('custom/cta', {
     },
     openInNewTab: {
       type: 'boolean',
+      default: false,
     },
     icon: {
       type: 'string',
@@ -61,8 +69,7 @@ registerBlockType('custom/cta', {
       default: 'AFTER',
     },
   },
-  // @ts-ignore
-  edit: compose(withState({}))((props) => {
+  edit: (props) => {
     return (
       <div>
         <a
@@ -85,7 +92,7 @@ registerBlockType('custom/cta', {
             style={{
               cursor: 'text',
             }}
-            onChange={(text: string) => {
+            onChange={(text) => {
               setPlainTextAttribute(props, 'text', text);
             }}
           />
@@ -112,8 +119,8 @@ registerBlockType('custom/cta', {
               //  type: 'post',
               //  subtype: 'gutenberg',
               //}}
-              // @ts-ignore
-              onChange={(link) => {
+
+              onChange={(link: { url: string; id: string; type: string }) => {
                 props.setAttributes({
                   url: link.url,
                   'data-id': link.id,
@@ -126,6 +133,7 @@ registerBlockType('custom/cta', {
                     // then we can set the data-entity-type value more accurate.
                     // Right now, we just make a "guess" based on the the human
                     // readable label for English and German.
+                    // TODO - this depends on each language, find new solution
                     link.type.startsWith('Media') ||
                     link.type.startsWith('Medien')
                       ? 'media'
@@ -182,8 +190,7 @@ registerBlockType('custom/cta', {
         </InspectorControls>
       </div>
     );
-  }),
-
+  },
   save: () => {
     return null;
   },

packages/drupal/gutenberg_blocks/js/blocks/demo-block.tsx

@@ -2,34 +2,40 @@ import React, { Fragment } from 'react';
 import { InspectorControls, RichText } from 'wordpress__block-editor';
 import { registerBlockType } from 'wordpress__blocks';
 import { PanelBody } from 'wordpress__components';
-import { compose, withState } from 'wordpress__compose';
 import { dispatch } from 'wordpress__data';
 
 import { DrupalMediaEntity } from '../utils/drupal-media';
 
 const { t: __ } = Drupal;
 
-// @ts-ignore
-registerBlockType('custom/demo-block', {
+registerBlockType<{
+  heading: string;
+  description: string;
+  mediaEntityIds?: [string];
+  url: string;
+}>('custom/demo-block', {
   title: 'Demo Block',
   icon: 'text',
   category: 'common',
   attributes: {
     heading: {
       type: 'string',
+      default: '',
     },
     description: {
       type: 'string',
+      default: '',
     },
     mediaEntityIds: {
       type: 'array',
     },
     url: {
       type: 'string',
+      default: '',
     },
   },
-  // @ts-ignore
-  edit: compose(withState())((props) => {
+
+  edit: (props) => {
     const { attributes, setAttributes } = props;
 
     // Set default values this way so that values get saved in the block's attributes.
@@ -86,7 +92,6 @@ registerBlockType('custom/demo-block', {
               setAttributes={props.setAttributes}
               isMediaLibraryEnabled={true}
               onError={(error) => {
-                // @ts-ignore
                 error = typeof error === 'string' ? error : error[2];
                 dispatch('core/notices').createWarningNotice(error);
               }}
@@ -108,9 +113,9 @@ registerBlockType('custom/demo-block', {
         </div>
       </Fragment>
     );
-  }),
+  },
 
-  save() {
+  save: () => {
     return null;
     // or uncomment this if you import and use InnerBlocks from wordpress__block-editor
     // return <InnerBlocks.Content />;

packages/drupal/gutenberg_blocks/js/blocks/form.tsx

@@ -4,7 +4,9 @@ import { PanelBody, SelectControl } from 'wordpress__components';
 
 const { t: __ } = Drupal;
 
-registerBlockType(`custom/form`, {
+registerBlockType<{
+  formId?: string;
+}>(`custom/form`, {
   title: __('Form'),
   icon: 'media-document',
   category: 'layout',
@@ -21,15 +23,15 @@ registerBlockType(`custom/form`, {
       <InspectorControls>
         <PanelBody>
           <SelectControl
-            value={props.attributes.formId as string}
+            value={props.attributes.formId}
             options={[
               { label: __('- Select a form -'), value: '' },
               ...drupalSettings.customGutenbergBlocks.forms.map((form) => ({
                 label: form.label,
                 value: form.id,
               })),
             ]}
-            onChange={(formId: string) => {
+            onChange={(formId) => {
               props.setAttributes({
                 formId,
               });

packages/drupal/gutenberg_blocks/js/blocks/heading.tsx

@@ -1,7 +1,6 @@
 import { BlockControls, RichText } from 'wordpress__block-editor';
 import { createBlock, registerBlockType } from 'wordpress__blocks';
 import { Path, SVG, ToolbarGroup } from 'wordpress__components';
-import { compose, withState } from 'wordpress__compose';
 
 import { cleanUpText } from '../utils/clean-up-text';
 
@@ -10,7 +9,10 @@ const { sanitizeText } = silverbackGutenbergUtils;
 
 // There is no way to remove formatting options (bold, italic, etc.) from the
 // core/heading block. So we use a custom one.
-registerBlockType('custom/heading', {
+registerBlockType<{
+  level: number;
+  text: string;
+}>('custom/heading', {
   title: __('Heading'),
   icon: (
     <svg
@@ -33,13 +35,15 @@ registerBlockType('custom/heading', {
     },
     text: {
       type: 'string',
+      default: '',
     },
   },
   supports: {
     inserter: true,
     anchor: true,
   },
 
+  // Transform the core/paragraph block to this custom heading block.
   transforms: {
     from: [
       {
@@ -65,8 +69,8 @@ registerBlockType('custom/heading', {
       },
     ],
   },
-  // @ts-ignore
-  edit: compose(withState())((props) => {
+
+  edit: (props) => {
     return (
       <div className={props.className}>
         <BlockControls>
@@ -103,7 +107,7 @@ registerBlockType('custom/heading', {
         />
       </div>
     );
-  }),
+  },
 
   // Provide the actual `save` method to be able to aggregate the heading with
   // other HTML blocks.
@@ -112,7 +116,7 @@ registerBlockType('custom/heading', {
     return (
       <RichText.Content
         tagName={TagName as keyof HTMLElementTagNameMap}
-        value={props.attributes.text as string}
+        value={props.attributes.text}
       />
     );
   },