Add Navigation Overlay close block (behind experiment)

docs/reference-guides/core-blocks.md

@@ -546,6 +546,15 @@ Add a page, link, or another item to your navigation. ([Source](https://github.c
 -	**Supports:** interactivity (clientNavigation), typography (fontSize, lineHeight), ~~html~~, ~~renaming~~, ~~reusable~~
 -	**Attributes:** description, id, isTopLevelLink, kind, label, opensInNewTab, rel, title, type, url
 
+## Navigation Overlay Close
+
+A customizable button to close overlays. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/navigation-overlay-close))
+
+-	**Name:** core/navigation-overlay-close
+-	**Category:** design
+-	**Supports:** color (background, text, ~~gradients~~), spacing (padding), typography (fontSize, lineHeight)
+-	**Attributes:** displayMode, text
+
 ## Submenu
 
 Add a submenu to your navigation. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/navigation-submenu))

packages/block-library/src/index.js

@@ -82,6 +82,7 @@ import * as navigation from './navigation';
 import * as navigationLink from './navigation-link';
 import * as navigationSubmenu from './navigation-submenu';
 import * as nextpage from './nextpage';
+import * as navigationOverlayClose from './navigation-overlay-close';
 import * as pattern from './pattern';
 import * as pageList from './page-list';
 import * as pageListItem from './page-list-item';
@@ -276,6 +277,10 @@ const getAllBlocks = () => {
 		blocks.push( formSubmissionNotification );
 	}
 
+	if ( window?.__experimentalNavigationOverlays ) {
+		blocks.push( navigationOverlayClose );
+	}
+
 	// When in a WordPress context, conditionally
 	// add the classic block and TinyMCE editor
 	// under any of the following conditions:

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

@@ -0,0 +1,53 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"name": "core/navigation-overlay-close",
+	"title": "Navigation Overlay Close",
+	"category": "design",
+	"description": "A customizable button to close overlays.",
+	"keywords": [ "close", "overlay", "navigation", "menu" ],
+	"textdomain": "default",
+	"attributes": {
+		"displayMode": {
+			"type": "string",
+			"enum": [ "icon", "text", "both" ],
+			"default": "icon"
+		},
+		"text": {
+			"type": "rich-text",
+			"source": "rich-text",
+			"selector": "span",
+			"default": "Close"
+		}
+	},
+	"supports": {
+		"color": {
+			"gradients": false,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true
+			}
+		},
+		"spacing": {
+			"padding": true,
+			"__experimentalDefaultControls": {
+				"padding": true
+			}
+		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
+		}
+	},
+	"editorStyle": "wp-block-navigation-overlay-close-editor",
+	"style": "wp-block-navigation-overlay-close"
+}

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

@@ -0,0 +1,82 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	InspectorControls,
+	useBlockProps,
+	RichText,
+} from '@wordpress/block-editor';
+import {
+	PanelBody,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+	Button,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { close as closeIcon } from '@wordpress/icons';
+
+export default function NavigationOverlayCloseEdit( {
+	attributes,
+	setAttributes,
+} ) {
+	const { displayMode, text } = attributes;
+	const showIcon = displayMode === 'icon' || displayMode === 'both';
+	const showText = displayMode === 'text' || displayMode === 'both';
+
+	const blockProps = useBlockProps( {
+		className: 'wp-block-navigation-overlay-close',
+	} );
+
+	return (
+		<>
+			<InspectorControls>
+				<PanelBody title={ __( 'Display Settings' ) }>
+					<ToggleGroupControl
+						label={ __( 'Display Mode' ) }
+						value={ displayMode }
+						onChange={ ( value ) =>
+							setAttributes( { displayMode: value } )
+						}
+						isBlock
+						__next40pxDefaultSize
+						__nextHasNoMarginBottom
+					>
+						<ToggleGroupControlOption
+							value="icon"
+							label={ __( 'Icon' ) }
+						/>
+						<ToggleGroupControlOption
+							value="text"
+							label={ __( 'Text' ) }
+						/>
+						<ToggleGroupControlOption
+							value="both"
+							label={ __( 'Both' ) }
+						/>
+					</ToggleGroupControl>
+				</PanelBody>
+			</InspectorControls>
+			<Button
+				{ ...blockProps }
+				icon={ showIcon ? closeIcon : undefined }
+				aria-label={ __( 'Close' ) }
+				__next40pxDefaultSize
+			>
+				{ showText && (
+					<RichText
+						identifier="text"
+						value={ text }
+						onChange={ ( value ) =>
+							setAttributes( { text: value } )
+						}
+						placeholder={ __( 'Close' ) }
+						allowedFormats={ [ 'core/bold', 'core/italic' ] }
+						withoutInteractiveFormatting
+						tagName="span"
+						className="wp-block-navigation-overlay-close__text"
+					/>
+				) }
+			</Button>
+		</>
+	);
+}

packages/block-library/src/navigation-overlay-close/editor.scss

@@ -0,0 +1,7 @@
+.block-editor-block-list__block[data-type="core/navigation-overlay-close"] {
+	.wp-block-navigation-overlay-close {
+		min-height: 44px;
+		min-width: 44px;
+	}
+}
+

packages/block-library/src/navigation-overlay-close/icon.js

@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+export default (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M18 4H6c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2Zm.5 14c0 .3-.2.5-.5.5H6c-.3 0-.5-.2-.5-.5V6c0-.3.2-.5.5-.5h12c.3 0 .5.2.5.5v12ZM15 8l-3 3-3-3-1.1 1.1 3 3-3 3L9 16.2l3-3 3 3 1.1-1.1-3-3 3-3L15 8Z" />
+	</SVG>
+);

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

@@ -0,0 +1,70 @@
+/**
+ * WordPress dependencies
+ */
+import { addFilter } from '@wordpress/hooks';
+import { select } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import initBlock from '../utils/init-block';
+import edit from './edit';
+import metadata from './block.json';
+import save from './save';
+import icon from './icon';
+
+const { name } = metadata;
+
+export { metadata, name };
+
+export const settings = {
+	icon,
+	edit,
+	save,
+};
+
+function isWithinOverlay() {
+	// @wordpress/block-library should not depend on @wordpress/editor.
+	// Blocks can be loaded into a *non-post* block editor, so to avoid
+	// declaring @wordpress/editor as a dependency, we must access its
+	// store by string.
+	// eslint-disable-next-line @wordpress/data-no-store-string-literals
+	const { getCurrentPostType, getCurrentPostId } = select( 'core/editor' );
+	const { getEditedEntityRecord } = select( coreStore );
+
+	const postType = getCurrentPostType();
+	const postId = getCurrentPostId();
+
+	if ( postType === 'wp_template_part' && postId ) {
+		const templatePartEntity = getEditedEntityRecord(
+			'postType',
+			'wp_template_part',
+			postId
+		);
+
+		return templatePartEntity?.area === 'overlay';
+	}
+
+	return false;
+}
+
+export const init = () => {
+	addFilter(
+		'blockEditor.__unstableCanInsertBlockType',
+		'core/navigation-overlay-close/restrict-to-overlay-template-parts',
+		( canInsert, blockType ) => {
+			if ( blockType.name !== 'core/navigation-overlay-close' ) {
+				return canInsert;
+			}
+
+			if ( ! canInsert ) {
+				return canInsert;
+			}
+
+			return isWithinOverlay();
+		}
+	);
+
+	return initBlock( { name, metadata, settings } );
+};

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

@@ -0,0 +1,18 @@
+<?php
+/**
+ * Server-side registering of the `core/navigation-overlay-close` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Registers the navigation overlay close block.
+ *
+ * @since 7.0.0
+ */
+function register_block_core_navigation_overlay_close() {
+	register_block_type_from_metadata(
+		__DIR__ . '/navigation-overlay-close'
+	);
+}
+add_action( 'init', 'register_block_core_navigation_overlay_close' );

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

@@ -0,0 +1,40 @@
+/**
+ * WordPress dependencies
+ */
+import { useBlockProps, RichText } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+
+export default function NavigationOverlayCloseSave( { attributes } ) {
+	const { displayMode, text } = attributes;
+	const showIcon = displayMode === 'icon' || displayMode === 'both';
+	const showText = displayMode === 'text' || displayMode === 'both';
+
+	// eslint-disable-next-line react-compiler/react-compiler
+	const blockProps = useBlockProps.save( {
+		className: 'wp-block-navigation-overlay-close',
+	} );
+
+	return (
+		<button { ...blockProps } type="button" aria-label={ __( 'Close' ) }>
+			{ showIcon && (
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					viewBox="0 0 24 24"
+					width="24"
+					height="24"
+					aria-hidden="true"
+					focusable="false"
+				>
+					<path d="M13 11.8l6.1-6.3-1.1-1-6.1 6.2-6.1-6.2-1.1 1 6.1 6.3-6.5 6.7 1.1 1 6.5-6.6 6.5 6.6 1.1-1z" />
+				</svg>
+			) }
+			{ showText && (
+				<RichText.Content
+					tagName="span"
+					value={ text }
+					className="wp-block-navigation-overlay-close__text"
+				/>
+			) }
+		</button>
+	);
+}

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

@@ -0,0 +1,32 @@
+.wp-block-navigation-overlay-close {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	gap: 0.5em;
+	padding: 0.5em;
+	border: none;
+	background: transparent;
+	cursor: pointer;
+	text-decoration: none;
+	transition: opacity 0.2s;
+
+	&:hover {
+		opacity: 0.8;
+	}
+
+	&:focus {
+		outline: 2px solid currentColor;
+		outline-offset: 2px;
+	}
+
+	svg {
+		width: 1.5em;
+		height: 1.5em;
+		fill: currentColor;
+	}
+
+	span {
+		display: inline-block;
+	}
+}
+