Add navigation overlay block

docs/reference-guides/core-blocks.md

@@ -476,6 +476,15 @@ Add a page, link, or another item to your navigation. ([Source](https://github.c
 -	**Supports:** typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
 -	**Attributes:** description, id, isTopLevelLink, kind, label, opensInNewTab, rel, title, type, url
 
+## Navigation Overlay
+
+Display your navigation in an overlay. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/navigation-overlay))
+
+-	**Name:** core/navigation-overlay
+-	**Category:** navigation, theme, design
+-	**Supports:** align (full, wide), anchor, background (backgroundImage), color (background, button, gradients, heading, link, text), dimensions (minHeight), layout (allowSizingOnChildren), spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~, ~~inserter~~
+-	**Attributes:** 
+
 ## Submenu
 
 Add a submenu to your navigation. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/navigation-submenu))

lib/blocks.php

@@ -31,6 +31,7 @@ function gutenberg_reregister_core_block_types() {
 				'media-text',
 				'missing',
 				'more',
+				'navigation-overlay',
 				'nextpage',
 				'paragraph',
 				'preformatted',

packages/block-library/src/index.js

@@ -68,6 +68,7 @@ import * as missing from './missing';
 import * as more from './more';
 import * as navigation from './navigation';
 import * as navigationLink from './navigation-link';
+import * as navigationOverlay from './navigation-overlay';
 import * as navigationSubmenu from './navigation-submenu';
 import * as nextpage from './nextpage';
 import * as pattern from './pattern';
@@ -185,6 +186,7 @@ const getAllBlocks = () => {
 		// theme blocks
 		navigation,
 		navigationLink,
+		navigationOverlay,
 		navigationSubmenu,
 		siteLogo,
 		siteTitle,

packages/block-library/src/navigation-overlay/block.json

@@ -0,0 +1,70 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"name": "core/navigation-overlay",
+	"title": "Navigation Overlay",
+	"category": "navigation, theme, design",
+	"description": "Display your navigation in an overlay.",
+	"supports": {
+		"align": [ "wide", "full" ],
+		"anchor": true,
+		"html": false,
+		"inserter": false,
+		"background": {
+			"backgroundImage": true
+		},
+		"color": {
+			"gradients": true,
+			"heading": true,
+			"button": true,
+			"link": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true
+			}
+		},
+		"spacing": {
+			"margin": [ "top", "bottom" ],
+			"padding": true,
+			"blockGap": true,
+			"__experimentalDefaultControls": {
+				"padding": true,
+				"blockGap": true
+			}
+		},
+		"dimensions": {
+			"minHeight": true
+		},
+		"__experimentalBorder": {
+			"color": true,
+			"radius": true,
+			"style": true,
+			"width": true,
+			"__experimentalDefaultControls": {
+				"color": true,
+				"radius": true,
+				"style": true,
+				"width": true
+			}
+		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
+		},
+		"layout": {
+			"allowSizingOnChildren": true
+		}
+	},
+	"textdomain": "default",
+	"attributes": {},
+	"style": "wp-block-navigation-overlay"
+}

packages/block-library/src/navigation-overlay/edit.js

@@ -0,0 +1,64 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import {
+	InnerBlocks,
+	useBlockProps,
+	useInnerBlocksProps,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+
+const NavigationOverlayEdit = ( {
+	attributes,
+	clientId,
+	__unstableLayoutClassNames: layoutClassNames,
+} ) => {
+	const { hasInnerBlocks, themeSupportsLayout } = useSelect(
+		( select ) => {
+			const { getBlock, getSettings } = select( blockEditorStore );
+			const block = getBlock( clientId );
+			return {
+				hasInnerBlocks: !! ( block && block.innerBlocks.length ),
+				themeSupportsLayout: getSettings()?.supportsLayout,
+			};
+		},
+		[ clientId ]
+	);
+
+	const { templateLock, allowedBlocks, layout = {} } = attributes;
+
+	// Layout settings.
+	const { type = 'default' } = layout;
+	const layoutSupportEnabled =
+		themeSupportsLayout || type === 'flex' || type === 'grid';
+
+	// Hooks.
+	const blockProps = useBlockProps( {
+		className: ! layoutSupportEnabled ? layoutClassNames : null,
+	} );
+
+	// Default to the regular appender being rendered.
+	let renderAppender;
+	if ( ! hasInnerBlocks ) {
+		// When there is no placeholder, but the block is also empty,
+		// use the larger button appender.
+		renderAppender = InnerBlocks.ButtonBlockAppender;
+	}
+
+	const innerBlocksProps = useInnerBlocksProps(
+		layoutSupportEnabled
+			? blockProps
+			: { className: 'wp-block-navigation-overlay' },
+		{
+			templateLock,
+			allowedBlocks,
+			renderAppender,
+			__unstableDisableLayoutClassNames: ! layoutSupportEnabled,
+		}
+	);
+
+	return <div { ...innerBlocksProps } />;
+};
+
+export default NavigationOverlayEdit;

packages/block-library/src/navigation-overlay/index.js

@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { fullscreen } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import initBlock from '../utils/init-block';
+import metadata from './block.json';
+import NavigationOverlayEdit from './edit';
+import save from './save';
+
+const { name } = metadata;
+export { metadata, name };
+
+export const settings = {
+	edit: NavigationOverlayEdit,
+	save,
+	icon: fullscreen,
+};
+
+export const init = () => initBlock( { name, metadata, settings } );

packages/block-library/src/navigation-overlay/init.js

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from '.';
+
+export default init();

packages/block-library/src/navigation-overlay/save.js

@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { useInnerBlocksProps, useBlockProps } from '@wordpress/block-editor';
+
+export default function save() {
+	const blockProps = useBlockProps.save();
+	const innerBlocksProps = useInnerBlocksProps.save( blockProps );
+	return <div { ...innerBlocksProps } />;
+}

packages/block-library/src/navigation/index.php

@@ -675,6 +675,7 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 
 	$responsive_container_classes = array(
 		'wp-block-navigation__responsive-container',
+		'wp-block-navigation-overlay',
 		$is_hidden_by_default ? 'hidden-by-default' : '',
 		implode( ' ', $colors['overlay_css_classes'] ),
 	);

packages/block-library/src/navigation/style.scss

@@ -462,6 +462,10 @@ button.wp-block-navigation-item__content {
 		transform: translateY(0);
 	}
 }
+
+:where(.wp-block-navigation__responsive-container.is-menu-open) {
+	background-color: inherit;
+}
 .wp-block-navigation__responsive-container {
 	display: none;
 	position: fixed;
@@ -498,7 +502,6 @@ button.wp-block-navigation-item__content {
 	&.is-menu-open {
 		display: flex; // Needs to be set to override "none".
 		flex-direction: column;
-		background-color: inherit;
 
 		// Animation.
 		animation: overlay-menu__fade-in-animation 0.1s ease-out;
@@ -631,13 +634,13 @@ button.wp-block-navigation-item__content {
 }
 
 // Default menu background and font color.
-.wp-block-navigation:not(.has-background)
-.wp-block-navigation__responsive-container.is-menu-open {
+:where(.wp-block-navigation:not(.has-background)
+.wp-block-navigation__responsive-container.is-menu-open) {
 	background-color: #fff;
 }
 
-.wp-block-navigation:not(.has-text-color)
-.wp-block-navigation__responsive-container.is-menu-open {
+:where(.wp-block-navigation:not(.has-text-color)
+.wp-block-navigation__responsive-container.is-menu-open) {
 	color: #000;
 }