PLANET-4811 Hide Submenu block in the frontend if no menu items

greenpeace · Jul 20, 2020 · d771ede · d771ede
1 parent c93fcf9
commit d771ede
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 35 deletions.
diff --git a/assets/src/blocks/Submenu/SubmenuBlock.js b/assets/src/blocks/Submenu/SubmenuBlock.js
@@ -57,15 +57,15 @@ export class SubmenuBlock {
         setAttributes,
         postId,
         className
-      }) => {
-        return <SubmenuEditor
+      }) => (
+        <SubmenuEditor
           attributes={attributes}
           isSelected={isSelected}
           postId={postId}
           className={className}
           setAttributes={setAttributes}
         />
-      }),
+      )),
       save: frontendRendered(BLOCK_NAME)
     });
 

diff --git a/assets/src/blocks/Submenu/SubmenuFrontend.js b/assets/src/blocks/Submenu/SubmenuFrontend.js
@@ -14,12 +14,14 @@ export class SubmenuFrontend extends Component {
   };
 
   componentDidMount() {
-    this.loadMenuItems();
+    if (this.props.postId) {
+      this.loadMenuItems();
+    }
   }
 
-  componentDidUpdate({ levels: prevLevels }) {
-    const { levels } = this.props;
-    if (JSON.stringify(levels) !== JSON.stringify(prevLevels)) {
+  componentDidUpdate({ levels: prevLevels, postId: prevPostId }) {
+    const { levels, postId } = this.props;
+    if (JSON.stringify(levels) !== JSON.stringify(prevLevels) || postId !== prevPostId) {
       this.loadMenuItems();
     }
   }
@@ -54,36 +56,39 @@ export class SubmenuFrontend extends Component {
     if (className) {
       style = className.split('is-style-')[1];
     }
+
     return (
       <Fragment>
-        <section className={isEditing ? '' : `block submenu-block submenu-${style}`}>
-          {title && !isEditing &&
-            <h2>{title}</h2>
-          }
-          {menuItems.length > 0 &&
-            <div className="submenu-menu">
-              <ul className="submenu-item">
-                {menuItems.map(item => (
-                  <li key={item.text} className={`list-style-${item.style || 'none'} ${item.link ? "list-link" : "list-heading"}"`}>
-                    {item.link ?
-                      <a href={`#${item.id}`} className="icon-link submenu-link" data-hash={item.hash}>{item.text}</a>
-                      :
-                      <span className="submenu-heading">{item.text}</span>
-                    }
-                    {item.children && item.children.length > 0 &&
-                      <span>TODO</span>
-                    }
-                  </li>
-                ))
-                }
-              </ul>
-            </div>
-          }
-          {isEditing && menuItems.length === 0 &&
-            <div className='EmptyMessage'>{__('The submenu block produces no output on the editor.', 'p4ge')}</div>
-          }
-          {!isEditing && <a href="#" className="back-top">&nbsp;</a>}
-        </section>
+        {(isEditing || menuItems.length > 0) && (
+          <section className={isEditing ? '' : `block submenu-block submenu-${style}`}>
+            {title && !isEditing &&
+              <h2>{title}</h2>
+            }
+            {menuItems.length > 0 &&
+              <div className="submenu-menu">
+                <ul className="submenu-item">
+                  {menuItems.map(item => (
+                    <li key={item.text} className={`list-style-${item.style || 'none'} ${item.link ? "list-link" : "list-heading"}"`}>
+                      {item.link ?
+                        <a href={`#${item.id}`} className="icon-link submenu-link" data-hash={item.hash}>{item.text}</a>
+                        :
+                        <span className="submenu-heading">{item.text}</span>
+                      }
+                      {item.children && item.children.length > 0 &&
+                        <span>TODO</span>
+                      }
+                    </li>
+                  ))
+                  }
+                </ul>
+              </div>
+            }
+            {isEditing && menuItems.length === 0 &&
+              <div className='EmptyMessage'>{__('The submenu block produces no output on the editor.', 'p4ge')}</div>
+            }
+            {!isEditing && <a href="#" className="back-top">&nbsp;</a>}
+          </section>
+        )}
       </Fragment>
     );
   }