PLANET-4811 Submenu WYSIWYG

assets/src/blocks/Submenu/SubmenuBlock.js

@@ -1,158 +1,71 @@
-import {Submenu} from './Submenu.js';
+import { SubmenuEditor } from './SubmenuEditor.js';
+import { Tooltip } from '@wordpress/components';
+
+const { __ } = wp.i18n;
+
+const BLOCK_NAME = 'planet4-blocks/submenu';
+
+const getStyleLabel = (label, help) => {
+  if (help) {
+    return (
+      <Tooltip text={__(help, 'planet4-blocks-backend')}>
+        <span>{__(label, 'planet4-blocks-backend')}</span>
+      </Tooltip>
+    );
+  }
+  return label;
+}
 
 export class SubmenuBlock {
   constructor() {
-    const {registerBlockType} = wp.blocks;
-    const {withSelect} = wp.data;
+    const { registerBlockType } = wp.blocks;
 
-    registerBlockType('planet4-blocks/submenu', {
+    registerBlockType(BLOCK_NAME, {
       title: 'Submenu',
       icon: 'welcome-widgets-menus',
       category: 'planet4-blocks',
-      supports: {
-        multiple: false, // Use the block just once per post.
-      },
-      /**
-       * Transforms old 'shortcake' shortcode to new gutenberg block.
-       *
-       * old block-shortcode:
-       * [shortcake_submenu submenu_style="3" title="title22" heading1="2"
-       *                    link1="true" style1="bullet" heading2="3" link2="true" style2="number"
-       *                    heading3="4" link3="false"
-       * /]
-       *
-       * new block-gutenberg:
-       * <!-- wp:planet4-blocks/submenu {"submenu_style":3,"title":"title22","levels":[{"heading":"2","link":"true","style":"bullet"},
-       *    {"heading":"3","link":"true","style":"number"},{"heading":"4","link":"false","style":"none"}]} /-->
-       *
-       */
-      transforms: {
-        from: [
-          {
-            type: 'shortcode',
-            // Shortcode tag can also be an array of shortcode aliases
-            // This `shortcode` definition will be used as a callback,
-            // it is a function which expects an object with at least
-            // a `named` key with `cover_type` property whose default value is 1.
-            // See: https://simonsmith.io/destructuring-objects-as-function-parameters-in-es6
-            tag: 'shortcake_submenu',
-            attributes: {
-              submenu_style: {
-                type: 'integer',
-                shortcode: function (attributes) {
-                  return Number(attributes.named.submenu_style);
-                }
-              },
-              title: {
-                type: 'string',
-                shortcode: function (attributes) {
-                  return attributes.named.title;
-                }
-              },
-              levels: {
-                type: 'array',
-                shortcode: function (attributes) {
-                  let levels = [];
-                  if (attributes.named.heading1 > 0) {
-                    let level = {
-                      heading: Number(attributes.named.heading1),
-                      link: Boolean(attributes.named.link1) || false,
-                      style: attributes.named.style1 || 'none'
-                    };
-                    levels.push(Object.assign({}, level));
-
-                    if (attributes.named.heading2 > 0) {
-                      let level = {
-                        heading: Number(attributes.named.heading2),
-                        link: Boolean(attributes.named.link2) || false,
-                        style: attributes.named.style2 || 'none'
-                      };
-                      levels.push(Object.assign({}, level));
-
-                      if (attributes.named.heading3 > 0) {
-                        let level = {
-                          heading: Number(attributes.named.heading3),
-                          link: Boolean(attributes.named.link3) || false,
-                          style: attributes.named.style3 || 'none'
-                        };
-                        levels.push(Object.assign({}, level));
-                      }
-                    }
-                  }
-                  return levels;
-                },
-              }
-            },
-          },
-        ]
-      },
       attributes: {
-        submenu_style: {
-          type: 'integer',
-          default: 1
-        },
         title: {
           type: 'string',
+          default: ''
+        },
+        submenu_style: { // Needed for old blocks conversion
+          type: 'integer',
+          default: 0
         },
         levels: {
           type: 'array',
-          default: [ {heading: 0, link: false, style: 'none'}]
+          default: [{ heading: 0, link: false, style: 'none' }]
         },
       },
-      edit: withSelect((select) => {
-
-      })(({
-            isSelected,
-            attributes,
-            setAttributes
-          }) => {
-
-        function addLevel() {
-          setAttributes({levels: attributes.levels.concat({heading: 0, link: false, style: 'none'})});
-        }
-
-        function onTitleChange(value) {
-          setAttributes({title: value});
-        }
-
-        function onHeadingChange(index, value) {
-          let levels = JSON.parse(JSON.stringify(attributes.levels));
-          levels[index].heading = Number(value);
-          setAttributes({levels: levels});
-        }
-
-        function onLayoutChange(value) {
-          setAttributes({submenu_style: Number(value)});
-        }
-
-        function onLinkChange(index, value) {
-          let levels = JSON.parse(JSON.stringify(attributes.levels));
-          levels[index].link = value;
-          setAttributes({levels: levels});
-        }
-
-        function onStyleChange(index, value) {
-          let levels = JSON.parse(JSON.stringify(attributes.levels));
-          levels[index].style = value;
-          setAttributes({levels: levels});
-        }
-
-        function removeLevel() {
-          setAttributes({levels: attributes.levels.slice(0, -1)});
+      supports: {
+        multiple: false, // Use the block just once per post.
+      },
+      styles: [
+        {
+          name: 'long',
+          label: getStyleLabel(
+            'Long full-width',
+            'Use: on long pages (more than 5 screens) when list items are long (+ 10 words). No max items recommended.'
+          ),
+          isDefault: true
+        },
+        {
+          name: 'short',
+          label: getStyleLabel(
+            'Short full-width',
+            'Use: on long pages (more than 5 screens) when list items are short (up to 5 words). No max items recommended.'
+          )
+        },
+        {
+          name: 'sidebar',
+          label: getStyleLabel(
+            'Short sidebar',
+            'Use: on long pages (more than 5 screens) when list items are short (up to 10 words). Max items recommended: 9'
+          )
         }
-
-        return <Submenu
-          {...attributes}
-          isSelected={isSelected}
-          onSelectedLayoutChange={onLayoutChange}
-          onTitleChange={onTitleChange}
-          onHeadingChange={onHeadingChange}
-          onLinkChange={onLinkChange}
-          onStyleChange={onStyleChange}
-          addLevel={addLevel}
-          removeLevel={removeLevel}
-        />
-      }),
+      ],
+      edit: SubmenuEditor,
       save() {
         return null;
       }