PLANET-6530 Add new Secondary Navigation Block

- Added all necessary files for the new block
- Added tests for the new block

assets/src/blocks/SecondaryNavigation/SecondaryNavigationBlock.js

@@ -0,0 +1,39 @@
+import {SecondaryNavigationEditor} from './SecondaryNavigationEditor';
+import {example} from './example';
+
+const {__} = wp.i18n;
+
+const BLOCK_NAME = 'planet4-blocks/secondary-navigation';
+
+export const registerSecondaryNavigationBlock = () => {
+  const {registerBlockType} = wp.blocks;
+
+  registerBlockType(BLOCK_NAME, {
+    title: 'Secondary Navigation Menu',
+    description: __('Inserts a secondary navigation menu to the page that leads to different sections of the same page.', 'planet4-blocks-backend'),
+    icon: 'welcome-widgets-menus',
+    category: 'planet4-blocks',
+    attributes: {
+      levels: {
+        type: 'array',
+        default: [{heading: 2, link: true}],
+      },
+      exampleMenuItems: { // Used for the block's preview, which can't extract items from anything.
+        type: 'array',
+      },
+    },
+    isExample: {
+      type: 'boolean',
+      default: false,
+    },
+    supports: {
+      multiple: false, // Use the block just once per post.
+      html: false,
+    },
+    edit: SecondaryNavigationEditor,
+    save() {
+      return null;
+    },
+    example,
+  });
+};

assets/src/blocks/SecondaryNavigation/SecondaryNavigationEditor.js

@@ -0,0 +1,66 @@
+import {getHeadingsFromBlocks} from './generateHeadingsForBlock';
+
+const {useSelect} = wp.data;
+const {InspectorControls} = wp.blockEditor;
+const {PanelBody} = wp.components;
+const {__} = wp.i18n;
+
+const renderEdit = () => {
+  return (
+    <InspectorControls>
+      <PanelBody title={__('Learn more about this block', 'planet4-blocks-backend')} initialOpen={false}>
+        <p className="components-base-control__help">
+          <a target="_blank" href="https://planet4.greenpeace.org/content/blocks/table-of-contents/" rel="noreferrer">
+            P4 Handbook - P4 Secondary Navigation Menu
+          </a>
+          {' '} &#128203;
+        </p>
+      </PanelBody>
+    </InspectorControls>
+  );
+};
+
+const renderView = attributes => {
+  const {
+    levels,
+    isExample,
+    exampleMenuItems,
+  } = attributes;
+
+  const blocks = useSelect(select => select('core/block-editor').getBlocks(), []);
+
+  const flatHeadings = getHeadingsFromBlocks(blocks, levels);
+
+  const menuItems = isExample ? exampleMenuItems : flatHeadings;
+
+  return (
+    <section className="block secondary-navigation-block">
+      {menuItems.length > 0 ?
+        <div className="secondary-navigation-menu">
+          <ul className="secondary-navigation-item">
+            {menuItems.map(({anchor, content}) => (
+              <li key={anchor}>
+                <a
+                  className="secondary-navigation-link"
+                  href={`#${anchor}`}
+                >
+                  {content}
+                </a>
+              </li>
+            ))}
+          </ul>
+        </div> :
+        <div className="EmptyMessage">
+          {__('There are not any pre-established headings that this block can display in the form of a secondary navigation menu. Please add headings to your page.', 'planet4-blocks-backend')}
+        </div>
+      }
+    </section>
+  );
+};
+
+export const SecondaryNavigationEditor = ({attributes, isSelected}) => (
+  <>
+    {isSelected && renderEdit()}
+    {renderView(attributes)}
+  </>
+);

assets/src/blocks/SecondaryNavigation/SecondaryNavigationFrontend.js

@@ -0,0 +1,32 @@
+import {getHeadingsFromDom} from '../TableOfContents/getHeadingsFromDom';
+
+export const SecondaryNavigationFrontend = ({levels}) => {
+  const headings = getHeadingsFromDom(levels);
+  const setActive = event => {
+    const allLinks = document.querySelectorAll('.secondary-navigation-link');
+    allLinks.forEach(link => link.classList.remove('active'));
+    event.target.classList.add('active');
+  };
+
+  return (
+    <section className="block secondary-navigation-block">
+      <div className="secondary-navigation-menu container">
+        <ul className="secondary-navigation-item">
+          {headings.map(({anchor, content}) => (
+            <li
+              key={anchor}
+            >
+              <a
+                className="secondary-navigation-link"
+                href={`#${anchor}`}
+                onClick={setActive}
+              >
+                {content}
+              </a>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </section>
+  );
+};

assets/src/blocks/SecondaryNavigation/example.js

@@ -0,0 +1,27 @@
+export const example = {
+  viewportWidth: 992,
+  attributes: {
+    isExample: true,
+    exampleMenuItems: [
+      {
+        content: 'Title 1',
+        anchor: 'title-1',
+        level: 2,
+        shouldLink: true,
+      },
+      {
+        content: 'Title 2',
+        anchor: 'title-2',
+        level: 2,
+        shouldLink: true,
+      },
+      {
+        content: 'Title 3',
+        anchor: 'title-3',
+        level: 2,
+        shouldLink: true,
+      },
+    ],
+  },
+};
+

assets/src/blocks/SecondaryNavigation/generateHeadingsForBlock.js

@@ -0,0 +1,30 @@
+import {generateAnchor} from '../TableOfContents/generateAnchor';
+import {unescape} from '../../functions/unescape';
+
+const stripTags = str => str.replace(/(<([^>]+)>)/ig, ''); //NOSONAR
+
+export const getHeadingsFromBlocks = (blocks, selectedLevels) => {
+  const headings = [];
+  blocks.forEach(block => {
+    if (block.name === 'core/heading') {
+      const blockLevel = block.attributes.level;
+
+      const levelConfig = selectedLevels.find(selected => selected.heading === blockLevel);
+
+      if (!levelConfig) {
+        return;
+      }
+
+      const anchor = block.attributes.anchor || generateAnchor(block.attributes.content, headings.map(h => h.anchor));
+
+      headings.push({
+        level: blockLevel,
+        content: unescape(stripTags(block.attributes.content)),
+        anchor,
+        shouldLink: levelConfig.link,
+      });
+    }
+  });
+
+  return headings;
+};

assets/src/blocks/TableOfContents/getHeadingsFromDom.js

@@ -9,7 +9,9 @@ export const getHeadingsFromDom = selectedLevels => {
   }
 
   // Get all heading tags that we need to query
-  const headingsSelector = selectedLevels.map(level => `:not(.table-of-contents-block) > h${level.heading}`);
+  const headingsSelector = selectedLevels.map(
+    level => `:not(.table-of-contents-block):not(.secondary-navigation-block) > h${level.heading}`
+  );
 
   const usedAnchors = [];
 

assets/src/editorIndex.js

@@ -12,6 +12,7 @@ import {registerColumnsBlock} from './blocks/Columns/ColumnsBlock';
 import {registerBlockStyles} from './block-styles';
 import {registerBlockVariations} from './block-variations';
 import {registerActionButtonTextBlock} from './blocks/ActionCustomButtonText';
+import {registerSecondaryNavigationBlock} from './blocks/SecondaryNavigation/SecondaryNavigationBlock';
 
 wp.domReady(() => {
   // Blocks
@@ -21,6 +22,7 @@ wp.domReady(() => {
   registerHappyPointBlock();
   registerSocialMediaBlock();
   registerTimelineBlock();
+  registerSecondaryNavigationBlock();
 
   // Block Templates
   registerBlockTemplates();

assets/src/frontendIndex.js

@@ -8,12 +8,14 @@ import {TableOfContentsFrontend} from './blocks/TableOfContents/TableOfContentsF
 import {HappyPointFrontend} from './blocks/HappyPoint/HappyPointFrontend';
 import {ColumnsFrontend} from './blocks/Columns/ColumnsFrontend';
 import {setupLightboxForImages} from './blocks/components/Lightbox/setupLightboxForImages';
+import {SecondaryNavigationFrontend} from './blocks/SecondaryNavigation/SecondaryNavigationFrontend';
 
 // Render React components
 const COMPONENTS = {
   'planet4-blocks/submenu': TableOfContentsFrontend,
   'planet4-blocks/happypoint': HappyPointFrontend,
   'planet4-blocks/columns': ColumnsFrontend,
+  'planet4-blocks/secondary-navigation': SecondaryNavigationFrontend,
 };
 
 document.addEventListener('DOMContentLoaded', () => {
@@ -35,4 +37,4 @@ document.addEventListener('DOMContentLoaded', () => {
   );
 
   setupLightboxForImages();
-});
+});

assets/src/scss/blocks.scss

@@ -1,6 +1,7 @@
 // Beta blocks
 @import "blocks/ActionsList/ActionsListStyle";
 @import "blocks/PostsList/PostsListStyle";
+@import "blocks/SecondaryNavigation/SecondaryNavigationStyle";
 
 // P4 Blocks
 @import "blocks/Accordion/AccordionStyle";

assets/src/scss/blocks/SecondaryNavigation/SecondaryNavigationStyle.scss

@@ -0,0 +1,60 @@
+.secondary-navigation-block {
+  margin-left: calc(-50vw - -50%);
+  width: 100vw;
+  height: 55px;
+  padding: 10px;
+  background: var(--color-background-navigation_bar);
+  border-bottom: 0 transparent;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
+  position: fixed;
+  top: 80px;
+  z-index: 9999;
+  left: 0;
+}
+
+.page-content > p,
+.page-content > h2 {
+  z-index: -1;
+}
+
+.secondary-navigation-item {
+  list-style: none;
+  display: flex;
+  justify-content: center;
+  overflow-x: auto;
+  gap: 48px;
+
+  li {
+    padding: 5px;
+
+    &:has(a.active) {
+      border-bottom: 4px solid var(--gp-green-400);
+
+      a {
+        color: var(--grey-900) !important;
+
+        &:hover {
+          text-decoration: none;
+        }
+      }
+    }
+
+    &:hover {
+      text-decoration: none;
+      color: var(--grey-900) !important;
+      border-bottom: 4px solid var(--gp-green-400);
+    }
+  }
+}
+
+.secondary-navigation-link {
+  color: var(--grey-600) !important;
+  font-weight: var(--font-weight-bold);
+  font-family: var(--font-family-primary);
+  font-size: var(--font-size-xxs--font-family-primary);
+  line-height: var(--line-height-xs--font-family-primary);
+
+  &:hover {
+    text-decoration: none;
+  }
+}

src/BlockSettings.php

@@ -54,6 +54,7 @@ class BlockSettings
         self::P4_BLOCKS_PREFIX . '/take-action-boxout',
         self::P4_BLOCKS_PREFIX . '/timeline',
         self::P4_BLOCKS_PREFIX . '/guestbook',
+        self::P4_BLOCKS_PREFIX . '/secondary-navigation',
         self::HUBSPOT_FORMS_BLOCK,
         self::GRAVITY_FORMS_BLOCK,
     ];
@@ -92,6 +93,7 @@ class BlockSettings
         self::P4_BLOCKS_PREFIX . '/take-action-boxout',
         self::P4_BLOCKS_PREFIX . '/timeline',
         self::P4_BLOCKS_PREFIX . '/guestbook',
+        self::P4_BLOCKS_PREFIX . '/secondary-navigation',
         self::HUBSPOT_FORMS_BLOCK,
         self::GRAVITY_FORMS_BLOCK,
     ];