Add supports

docs/reference-guides/core-blocks.md

@@ -482,7 +482,7 @@ Display your navigation in an overlay. ([Source](https://github.com/WordPress/gu
 
 -	**Name:** core/navigation-overlay
 -	**Category:** navigation, theme, design
--	**Supports:** align (full, wide), anchor, ariaLabel, background (backgroundImage), color (background, button, gradients, heading, link, text), dimensions (minHeight), layout (allowSizingOnChildren), spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~, ~~inserter~~
+-	**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

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

@@ -8,7 +8,6 @@
 	"supports": {
 		"align": [ "wide", "full" ],
 		"anchor": true,
-		"ariaLabel": true,
 		"html": false,
 		"inserter": false,
 		"background": {

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

@@ -1,16 +1,64 @@
 /**
  * WordPress dependencies
  */
-import { useBlockProps } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+import {
+	InnerBlocks,
+	useBlockProps,
+	useInnerBlocksProps,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
 
-const NavigationOverlayEdit = () => {
-	const props = useBlockProps();
+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';
 
-	return (
-		<>
-			<div { ...props }>hello</div>
-		</>
+	// 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

@@ -1,15 +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/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 } />;
+}