Navigation Overlay customisation via Template Parts

docs/reference-guides/core-blocks.md

@@ -461,7 +461,7 @@ A collection of blocks that allow visitors to get around your site. ([Source](ht
 -	**Name:** core/navigation
 -	**Category:** theme
 -	**Supports:** align (full, wide), ariaLabel, inserter, interactivity, layout (allowSizingOnChildren, default, ~~allowInheriting~~, ~~allowSwitching~~, ~~allowVerticalAlignment~~), spacing (blockGap, units), typography (fontSize, lineHeight), ~~html~~, ~~renaming~~
--	**Attributes:** __unstableLocation, backgroundColor, customBackgroundColor, customOverlayBackgroundColor, customOverlayTextColor, customTextColor, hasIcon, icon, maxNestingLevel, openSubmenusOnClick, overlayBackgroundColor, overlayMenu, overlayTextColor, ref, rgbBackgroundColor, rgbTextColor, showSubmenuIcon, templateLock, textColor
+-	**Attributes:** __unstableLocation, backgroundColor, customBackgroundColor, customOverlayBackgroundColor, customOverlayTextColor, customTextColor, hasIcon, icon, maxNestingLevel, openSubmenusOnClick, overlayBackgroundColor, overlayId, overlayMenu, overlayTextColor, ref, rgbBackgroundColor, rgbTextColor, showSubmenuIcon, templateLock, textColor
 
 ## Custom Link
 
@@ -473,6 +473,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
+
+Add a Close button to your Navigation Overlay. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/navigation-overlay-close))
+
+-	**Name:** core/navigation-overlay-close
+-	**Category:** design
+-	**Supports:** anchor, color (background, text, ~~link~~), dimensions (height, width), interactivity, spacing (margin, padding, units), ~~html~~, ~~multiple~~, ~~reusable~~
+-	**Attributes:** hasIcon
+
 ## Submenu
 
 Add a submenu to your navigation. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/navigation-submenu))

lib/blocks.php

@@ -81,6 +81,7 @@ function gutenberg_reregister_core_block_types() {
 				'navigation.php'                   => 'core/navigation',
 				'navigation-link.php'              => 'core/navigation-link',
 				'navigation-submenu.php'           => 'core/navigation-submenu',
+				'navigation-overlay-close.php'     => 'core/navigation-overlay-close',
 				'page-list.php'                    => 'core/page-list',
 				'page-list-item.php'               => 'core/page-list-item',
 				'pattern.php'                      => 'core/pattern',

lib/experimental/blocks.php

@@ -77,3 +77,68 @@
 		add_filter( 'render_block', $callback, 10, 2 );
 	}
 }
+
+function add_navigation_overlay_area( $areas ) {
+	$areas[] = array(
+		'area'        => 'navigation-overlay',
+		'label'       => _x( 'Navigation Overlay', 'template part area' ),
+		'description' => __(
+			'An area for navigation overlay content.'
+		),
+		'area_tag'    => 'section',
+		'icon'        => 'handle',
+	);
+	return $areas;
+}
+add_filter( 'default_wp_template_part_areas', 'add_navigation_overlay_area', 10, 1 );
+
+function add_default_navigation_overlay_template_part( $block_template, $id, $template_type ) {
+
+	// if the template type is not template part, return the block template
+	if ( 'wp_template_part' !== $template_type ) {
+		return $block_template;
+	}
+
+	// If its not the "Core" Navigation Overlay, return the block template.
+	if ( $id !== 'core//navigation-overlay' ) {
+		return $block_template;
+	}
+
+	// If the block template is not empty, return the "found" block template.
+	// Failure to do this will override any "found" overlay template part from the Theme.
+	if ( ! empty( $block_template ) ) {
+		return $block_template;
+	}
+
+	// Return a default template part for the Navigation Overlay.
+	// This is essentially a "Core" fallback in case the Theme does not provide one.
+	$template = new WP_Block_Template();
+
+	// TODO: should we provide "$theme" here at all as this is a "Core" template.
+	$template->id             = 'core' . '//' . 'navigation-overlay';
+	$template->theme          = 'core';
+	$template->slug           = 'navigation-overlay';
+	$template->source         = 'custom';
+	$template->type           = 'wp_template_part';
+	$template->title          = 'Navigation Overlay';
+	$template->status         = 'publish';
+	$template->has_theme_file = null;
+	$template->is_custom      = false;
+	$template->modified       = null;
+	$template->origin         = null;
+	$template->author         = null;
+
+	// Set the area to match the Navigation Overlay area.
+	$template->area = 'navigation-overlay';
+
+	// The content is the default Navigation Overlay template part. This will only be used
+	// if the Theme does not provide a template part for the Navigation Overlay.
+	// PHP is used here to allow for translation of the default template part.
+	ob_start();
+	include __DIR__ . '/navigation-overlay.php';
+	$template->content = ob_get_clean();
+
+	return $template;
+}
+
+add_filter( 'get_block_file_template', 'add_default_navigation_overlay_template_part', 10, 3 );

lib/experimental/navigation-overlay.php

@@ -0,0 +1,9 @@
+<!-- wp:group {"lock":{"move":true,"remove":true},"metadata":{"name":"<?php echo __( 'Overlay' ); ?>"},"style":{"dimensions":{"minHeight":"100vh"},"spacing":{"padding":{"top":"clamp(1rem, calc(var(\u002d\u002dwp\u002dadmin\u002d\u002dadmin\u002dbar\u002d\u002dheight, 1rem) + var(\u002d\u002dwp\u002d\u002dstyle\u002d\u002droot\u002d\u002dpadding\u002dtop, 1rem)), 20rem)","bottom":"clamp(1rem, var(\u002d\u002dwp\u002d\u002dstyle\u002d\u002droot\u002d\u002dpadding\u002dbottom, 1rem), 20rem)","left":"clamp(1rem, var(\u002d\u002dwp\u002d\u002dstyle\u002d\u002droot\u002d\u002dpadding\u002dleft), 20rem)","right":"clamp(1rem, var(\u002d\u002dwp\u002d\u002dstyle\u002d\u002droot\u002d\u002dpadding\u002dright), 20rem)"}}},"layout":{"type":"constrained","justifyContent":"center"}} -->
+<div class="wp-block-group" style="min-height:100vh;padding-top:clamp(1rem, calc(var(--wp-admin--admin-bar--height, 1rem) + var(--wp--style--root--padding-top, 1rem)), 20rem);padding-right:clamp(1rem, var(--wp--style--root--padding-right), 20rem);padding-bottom:clamp(1rem, var(--wp--style--root--padding-bottom, 1rem), 20rem);padding-left:clamp(1rem, var(--wp--style--root--padding-left), 20rem)"><!-- wp:group {"metadata":{"name":"Close"},"align":"wide","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"right"}} -->
+<div class="wp-block-group alignwide"><!-- wp:navigation-overlay-close {"lock":{"move":false,"remove":true},"metadata":{},"className":"wp-block-navigation-overlay-close"} /--></div>
+<!-- /wp:group -->
+
+<!-- wp:group {"metadata":{"name":"<?php echo __( 'Contents' ); ?>"},"align":"wide","style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"right"}} -->
+<div class="wp-block-group alignwide"><!-- wp:navigation {"overlayMenu":"never","align":"wide","layout":{"type":"flex","orientation":"vertical","justifyContent":"right"}} /--></div>
+<!-- /wp:group --></div>
+<!-- /wp:group -->

packages/block-library/package.json

@@ -59,6 +59,7 @@
 		"@wordpress/private-apis": "file:../private-apis",
 		"@wordpress/reusable-blocks": "file:../reusable-blocks",
 		"@wordpress/rich-text": "file:../rich-text",
+		"@wordpress/router": "file:../router",
 		"@wordpress/server-side-render": "file:../server-side-render",
 		"@wordpress/url": "file:../url",
 		"@wordpress/viewport": "file:../viewport",

packages/block-library/src/index.js

@@ -69,6 +69,7 @@ import * as more from './more';
 import * as navigation from './navigation';
 import * as navigationLink from './navigation-link';
 import * as navigationSubmenu from './navigation-submenu';
+import * as navigationOverlayClose from './navigation-overlay-close';
 import * as nextpage from './nextpage';
 import * as pattern from './pattern';
 import * as pageList from './page-list';
@@ -186,6 +187,7 @@ const getAllBlocks = () => {
 		navigation,
 		navigationLink,
 		navigationSubmenu,
+		navigationOverlayClose,
 		siteLogo,
 		siteTitle,
 		siteTagline,

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

@@ -0,0 +1,49 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"name": "core/navigation-overlay-close",
+	"title": "Navigation Overlay Close",
+	"category": "design",
+	"description": "Add a Close button to your Navigation Overlay.",
+	"textdomain": "default",
+	"icon": "dismiss",
+	"attributes": {
+		"hasIcon": {
+			"type": "boolean",
+			"default": true
+		}
+	},
+	"usesContext": [
+		"textColor",
+		"customTextColor",
+		"backgroundColor",
+		"customBackgroundColor"
+	],
+	"supports": {
+		"multiple": false,
+		"reusable": false,
+		"html": false,
+		"dimensions": {
+			"width": true,
+			"height": true
+		},
+		"color": {
+			"link": false,
+			"text": true,
+			"background": true
+		},
+		"interactivity": true,
+		"anchor": true,
+		"spacing": {
+			"margin": true,
+			"padding": true,
+			"units": [ "px", "em", "rem", "vh", "vw" ],
+			"__experimentalDefaultControls": {
+				"margin": true,
+				"padding": 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,55 @@
+/**
+ * WordPress dependencies
+ */
+import { Button, Icon, ToggleControl, PanelBody } from '@wordpress/components';
+import { close } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../lock-unlock';
+
+const { useHistory } = unlock( routerPrivateApis );
+
+export default function Edit( { attributes, isSelected, setAttributes } ) {
+	const blockProps = useBlockProps();
+	const history = useHistory();
+	const { hasIcon } = attributes;
+
+	const closeText = __( 'Close' );
+
+	const onClick = () => {
+		if ( isSelected ) {
+			// Exit navigation overlay edit mode.
+			history.back();
+		}
+	};
+
+	blockProps.onClick = onClick;
+
+	return (
+		<>
+			<InspectorControls>
+				<PanelBody title={ __( 'Display' ) }>
+					<ToggleControl
+						__nextHasNoMarginBottom
+						label={ __( 'Use icon' ) }
+						help={ __(
+							'Configure whether the button use an icon or text.'
+						) }
+						onChange={ ( value ) =>
+							setAttributes( { hasIcon: value } )
+						}
+						checked={ hasIcon }
+					/>
+				</PanelBody>
+			</InspectorControls>
+			<Button { ...blockProps } aria-label={ hasIcon && closeText }>
+				{ hasIcon ? <Icon icon={ close } /> : closeText }
+			</Button>
+		</>
+	);
+}

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

@@ -0,0 +1,16 @@
+/**
+ * Internal dependencies
+ */
+import initBlock from '../utils/init-block';
+import metadata from './block.json';
+import edit from './edit';
+
+const { name } = metadata;
+
+export { metadata, name };
+
+export const settings = {
+	edit,
+};
+
+export const init = () => initBlock( { name, metadata, settings } );

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

@@ -0,0 +1,48 @@
+<?php
+
+
+function render_block_core_navigation_overlay_close( $attributes ) {
+
+    // This icon is duplicated in the Navigation Block itself.
+    // See WP_Navigation_Block_Renderer::get_responsive_container_markup().
+    // Changes to this icon should be reflected there as well.
+	$close_icon = '<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-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path></svg>';
+
+	$hasIcon = ! empty( $attributes['hasIcon'] );
+
+	$wrapper_attributes = get_block_wrapper_attributes(
+		array_filter( // Removes any empty attributes.
+			// Attributes
+			array(
+				// This directive is duplicated in the Navigation Block itself.
+				// See WP_Navigation_Block_Renderer::get_responsive_container_markup().
+				// Changes to this directive should be reflected there as well.
+				'data-wp-on--click' => 'actions.closeMenuOnClick',
+				'aria-label'        => $hasIcon ? __( 'Close menu' ) : false,
+			)
+		)
+	);
+
+	$content = $hasIcon ? $close_icon : __( 'Close menu' );
+
+	return sprintf(
+		'<button %1$s>%2$s</button>',
+		$wrapper_attributes,
+		$content,
+	);
+
+}
+
+
+/**
+ * Registers the `core/navigation-overlay-close` block on server.
+ */
+function register_block_core_navigation_overlay_close() {
+	register_block_type_from_metadata(
+		__DIR__ . '/navigation-overlay-close',
+		array(
+			'render_callback' => 'render_block_core_navigation_overlay_close',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_navigation_overlay_close' );

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

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

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

@@ -0,0 +1,34 @@
+
+// Size of burger and close icons.
+$navigation-icon-size: 24px;
+
+// Menu and close buttons.
+.wp-block-navigation-overlay-close {
+	height: auto; // remove default height applied to button component
+	vertical-align: middle;
+	cursor: pointer;
+	border: none;
+	margin: 0;
+	padding: 0;
+	text-transform: inherit;
+	z-index: 2; // Needs to be above the modal z index itself.
+	background-color: inherit; // remove user agent stylesheet default.
+	color: inherit; // remove user agent stylesheet default.
+
+	// When set to collapse into a text button, it should inherit the parent font.
+	// This needs specificity to override inherited properties by the button element and component.
+	&.wp-block-navigation-overlay-close {
+		font-family: inherit;
+		font-weight: inherit;
+		font-size: inherit;
+	}
+
+	svg {
+		fill: currentColor;
+		pointer-events: none;
+		display: block;
+		width: $navigation-icon-size;
+		height: $navigation-icon-size;
+	}
+}
+

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

@@ -22,7 +22,7 @@
 	"textdomain": "default",
 	"attributes": {
 		"ref": {
-			"type": "number"
+			"type": [ "number", "string" ]
 		},
 		"textColor": {
 			"type": "string"
@@ -84,6 +84,9 @@
 		"templateLock": {
 			"type": [ "string", "boolean" ],
 			"enum": [ "all", "insert", "contentOnly", false ]
+		},
+		"overlayId": {
+			"type": "string"
 		}
 	},
 	"providesContext": {

packages/block-library/src/navigation/constants.js

@@ -7,6 +7,8 @@ export const PRIORITIZED_INSERTER_BLOCKS = [
 	'core/navigation-link',
 ];
 
+export const NAVIGATION_OVERLAY_TEMPLATE_PART_AREA = 'navigation-overlay';
+
 // These parameters must be kept aligned with those in
 // lib/compat/wordpress-6.3/navigation-block-preloading.php
 // and