Enable the core/navigation block and style

private/src/scripts/editor/blocks/core-mods/button/index.js

@@ -0,0 +1,29 @@
+const { select, subscribe } = wp.data;
+const { __ } = wp.i18n;
+
+subscribe(() => {
+  const selected = select('core/block-editor').getSelectedBlock();
+
+  if (!selected || selected.name !== 'core/button') {
+    return;
+  }
+
+  // translators: [admin]
+  const search = __('Border settings');
+  const xpath = `//button[contains(@class, 'components-button')][contains(text(),'${search}')]`;
+
+  const { singleNodeValue: button } = document.evaluate(
+    xpath,
+    document,
+    null,
+    XPathResult.FIRST_ORDERED_NODE_TYPE,
+    null,
+  );
+
+  if (!button) {
+    return;
+  }
+
+  const toHide = button.parentElement.parentElement;
+  toHide.parentElement.style.display = 'none';
+});

private/src/scripts/editor/blocks/core-mods/details/index.js

@@ -0,0 +1,18 @@
+const { assign } = lodash;
+const { addFilter } = wp.hooks;
+
+/**
+ * Remove button styles
+ */
+addFilter('blocks.registerBlockType', 'amnesty-core', (settings, name) => {
+  if (name !== 'core/details') {
+    return settings;
+  }
+
+  return assign({}, settings, {
+    supports: {
+      ...settings.supports,
+      anchor: true,
+    },
+  });
+});

private/src/scripts/editor/blocks/core-mods/index.js

@@ -1,29 +1,2 @@
-const { select, subscribe } = wp.data;
-const { __ } = wp.i18n;
-
-subscribe(() => {
-  const selected = select('core/block-editor').getSelectedBlock();
-
-  if (!selected || selected.name !== 'core/button') {
-    return;
-  }
-
-  // translators: [admin]
-  const search = __('Border settings');
-  const xpath = `//button[contains(@class, 'components-button')][contains(text(),'${search}')]`;
-
-  const { singleNodeValue: button } = document.evaluate(
-    xpath,
-    document,
-    null,
-    XPathResult.FIRST_ORDERED_NODE_TYPE,
-    null,
-  );
-
-  if (!button) {
-    return;
-  }
-
-  const toHide = button.parentElement.parentElement;
-  toHide.parentElement.style.display = 'none';
-});
+import './button';
+import './details';

private/src/styles/app.scss

@@ -85,6 +85,7 @@
 @import "blocks/core-blocks/social-links";
 @import "blocks/core-blocks/table";
 @import "blocks/core-blocks/video";
+@import "blocks/core-blocks/navigation";
 @import "blocks/countdown-timer/main";
 @import "blocks/custom-card/main";
 @import "blocks/download-block/style";

private/src/styles/blocks/core-blocks/_navigation.scss

@@ -0,0 +1,68 @@
+.wp-block-navigation {
+  min-width: 100%;
+}
+
+.wp-block-navigation__container {
+  display: flex;
+  flex-wrap: nowrap !important;
+  padding: 20px !important;
+  background-color: var(--wp--preset--color--white);
+  color: var(--wp--preset--color--black);
+  width: 100%;
+  overflow-x: scroll;
+  overflow-y: visible;
+
+  .wp-block-navigation-item {
+    display: flex;
+    justify-content: center;
+    background-color: var(--wp--preset--color--white);
+    border: 1px solid var(--wp--preset--color--amnesty-grey-md-light);
+    text-decoration: none !important;
+
+    @include mq(xx-small) {
+      @include flexy-grid(2, flexy-gutter());
+    }
+
+    @include mq(x-small) {
+      @include flexy-grid(3, flexy-gutter());
+    }
+
+    @include mq(medium) {
+      @include flexy-grid(4, flexy-gutter());
+      flex-grow: 1;
+    }
+
+    a {
+      color: var(--wp--preset--color--black);
+      text-decoration: none;
+      font-family: var(--wp--preset--font-family--secondary);
+      text-transform: uppercase;
+      text-align: center;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: var(--wp--preset--color--white);
+      padding: 11px 16px;
+    }
+  }
+}
+
+.wp-block-navigation .wp-block-navigation__container .wp-block-navigation-item:not(:first-of-type) {
+  margin-left: flexy-gutter() !important;
+
+  .rtl & {
+    margin-right: flexy-gutter();
+    margin-left: 0 !important;
+  }
+}
+
+.wp-block-navigation .wp-block-navigation__container .wp-block-navigation-item a:hover {
+  background-color: var(--wp--preset--color--amnesty-grey-md-light);
+  cursor: pointer;
+}
+
+.wp-block-navigation.has-amnesty-grey-light-background-color .wp-block-navigation__container {
+  background-color: var(--wp--preset--color--amnesty-grey-light);
+}

private/src/styles/gutenberg.scss

@@ -67,6 +67,7 @@
 @import "blocks/core-blocks/rss-editor";
 @import "blocks/core-blocks/social-links";
 @import "blocks/core-blocks/social-links-editor";
+@import "blocks/core-blocks/navigation";
 @import "blocks/countdown-timer/editor";
 @import "blocks/custom-card/main";
 @import "blocks/custom-card/editor";

wp-content/themes/humanity-theme/includes/blocks/register.php

@@ -153,7 +153,6 @@ function amnesty_filter_allowed_blocks(): array {
 			'core/loginout',
 			'core/media-text',
 			'core/more',
-			'core/navigation',
 			'core/nextpage',
 			'core/page-list',
 			'core/post-author',

wp-content/themes/humanity-theme/theme.json

@@ -3,6 +3,26 @@
   "version": 3,
   "settings": {
     "appearanceTools": false,
+    "blocks" : {
+      "core/navigation": {
+        "color": {
+          "background": true,
+          "text": false,
+          "palette": [
+            {
+              "slug": "white",
+              "color": "#fff",
+              "name": "White"
+            },
+            {
+              "slug": "amnesty-grey-light",
+              "color": "#e4e4e4",
+              "name": "Grey Light"
+            }
+          ]
+        }
+      }
+    },
     "color": {
       "background": false,
       "text": false,