PLANET-4811 Use next level for new level

* Pre populate the added level with the last level+1. * Disable options that are a lower or equal level than the previous level.
greenpeace · Sep 29, 2020 · 2b554e6 · 2b554e6
1 parent 7c5d05b
commit 2b554e6
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 11 deletions.
diff --git a/assets/src/blocks/Submenu/SubmenuEditor.js b/assets/src/blocks/Submenu/SubmenuEditor.js
@@ -12,7 +12,9 @@ const { __ } = wp.i18n;
 const { RichText } = wp.blockEditor;
 const renderEdit = (attributes, setAttributes) => {
   function addLevel() {
-    setAttributes({ levels: attributes.levels.concat({ heading: 0, link: false, style: 'none' }) });
+    const [previousLastLevel] = attributes.levels.slice(-1);
+    const newLevel = previousLastLevel.heading + 1;
+    setAttributes({ levels: attributes.levels.concat({ heading: newLevel, link: false, style: 'none' }) });
   }
 
   function onHeadingChange(index, value) {
@@ -37,6 +39,14 @@ const renderEdit = (attributes, setAttributes) => {
     setAttributes({ levels: attributes.levels.slice(0, -1) });
   }
 
+  function getMinLevel(attributes, index) {
+    if (index === 0) {
+      return null;
+    }
+
+    return attributes.levels[index-1].heading;
+  }
+
   return (
     <InspectorControls>
       <PanelBody title={__('Setting', 'planet4-blocks-backend')}>
@@ -48,6 +58,7 @@ const renderEdit = (attributes, setAttributes) => {
             onStyleChange={onStyleChange}
             index={i}
             key={i}
+            minLevel={getMinLevel(attributes, i)}
           />
         ))}
         <Button

diff --git a/assets/src/blocks/Submenu/SubmenuLevel.js b/assets/src/blocks/Submenu/SubmenuLevel.js
@@ -6,6 +6,17 @@ import {
 
 const { __ } = wp.i18n;
 
+const getHeadingOptions = (minLevel) => {
+  return [
+    { label: __('None', 'planet4-blocks'), value: 0 },
+    ...[2, 3, 4, 5, 6].map(n => ({
+      label: __('Heading %n', 'planet4-blocks').replace('%n', n),
+      value: n,
+      disabled: n <= minLevel,
+    }))
+  ];
+};
+
 export class SubmenuLevel extends Component {
   render() {
     const {
@@ -15,7 +26,8 @@ export class SubmenuLevel extends Component {
       link,
       onHeadingChange,
       style,
-      onStyleChange
+      onStyleChange,
+      minLevel,
     } = this.props;
 
     return (
@@ -24,15 +36,7 @@ export class SubmenuLevel extends Component {
         <SelectControl
           label={__('Submenu item', 'planet4-blocks')}
           value={heading}
-          options={[
-            { label: __('None', 'planet4-blocks'), value: 0 },
-            { label: __('Heading 1', 'planet4-blocks'), value: 1 },
-            { label: __('Heading 2', 'planet4-blocks'), value: 2 },
-            { label: __('Heading 3', 'planet4-blocks'), value: 3 },
-            { label: __('Heading 4', 'planet4-blocks'), value: 4 },
-            { label: __('Heading 5', 'planet4-blocks'), value: 5 },
-            { label: __('Heading 6', 'planet4-blocks'), value: 6 },
-          ]}
+          options={getHeadingOptions(minLevel)}
           onChange={e => onHeadingChange(index, e)}
         />