Skip to content

Navigation Overlay customisation via Template Parts #55657

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
getdave wants to merge 3 commits into from
Closed

Navigation Overlay customisation via Template Parts #55657

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
dc567e3
Initial navigate to template part
getdave Oct 27, 2023
04bc9c9
Reset files
getdave Oct 14, 2025
83294ef
Anothe reset
getdave Oct 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions lib/blocks.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,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',
Expand Down
101 changes: 63 additions & 38 deletions lib/experimental/blocks.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,44 +78,17 @@
}
}

/**
* Registers a new block style for one or more block types.
*
* WP_Block_Styles_Registry was marked as `final` in core so it cannot be
* updated via Gutenberg to allow registration of a style across multiple
* block types as well as with an optional style object. This function will
* support the desired functionality until the styles registry can be updated
* in core.
*
* @param string|array $block_name Block type name including namespace or array of namespaced block type names.
* @param array $style_properties Array containing the properties of the style name, label,
* style_handle (name of the stylesheet to be enqueued),
* inline_style (string containing the CSS to be added),
* style_data (theme.json-like object to generate CSS from).
*
* @return bool True if all block styles were registered with success and false otherwise.
*/
function gutenberg_register_block_style( $block_name, $style_properties ) {
if ( ! is_string( $block_name ) && ! is_array( $block_name ) ) {
_doing_it_wrong(
__METHOD__,
__( 'Block name must be a string or array.', 'gutenberg' ),
'6.6.0'
);

return false;
}

$block_names = is_string( $block_name ) ? array( $block_name ) : $block_name;
$result = true;

foreach ( $block_names as $name ) {
if ( ! WP_Block_Styles_Registry::get_instance()->register( $name, $style_properties ) ) {
$result = false;
}
}

return $result;
function gutenberg_add_navigation_overlay_area( $areas ) {
$areas[] = array(
'area' => 'navigation-overlay',
'label' => _x( 'Navigation Overlay', 'template part area' ),

Check warning on line 84 in lib/experimental/blocks.php

View workflow job for this annotation

GitHub Actions / PHP coding standards 

Missing $domain parameter in function call to _x(). If this text string is supposed to use a WP Core translation, use the "default" text domain.
'description' => __(

Check warning on line 85 in lib/experimental/blocks.php

View workflow job for this annotation

GitHub Actions / PHP coding standards 

Missing $domain parameter in function call to __(). If this text string is supposed to use a WP Core translation, use the "default" text domain.
'An area for navigation overlay content.'
),
'area_tag' => 'section',
'icon' => 'handle',
);
return $areas;
}

/**
Expand All @@ -136,3 +109,55 @@
'script_module_data_@wordpress/block-library/form/view',
'gutenberg_block_core_form_view_script_module'
);
add_filter( 'default_wp_template_part_areas', 'gutenberg_add_navigation_overlay_area', 10, 1 );

function gutenberg_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' ) {

Check failure on line 122 in lib/experimental/blocks.php

View workflow job for this annotation

GitHub Actions / PHP coding standards 

Use Yoda Condition checks, you must.
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', 'gutenberg_add_default_navigation_overlay_template_part', 10, 3 );
9 changes: 9 additions & 0 deletions lib/experimental/navigation-overlay.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"}} -->

Check warning on line 1 in lib/experimental/navigation-overlay.php

View workflow job for this annotation

GitHub Actions / PHP coding standards 

Missing $domain parameter in function call to __(). If this text string is supposed to use a WP Core translation, use the "default" text domain.
<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"}} -->

Check warning on line 6 in lib/experimental/navigation-overlay.php

View workflow job for this annotation

GitHub Actions / PHP coding standards 

Missing $domain parameter in function call to __(). If this text string is supposed to use a WP Core translation, use the "default" text domain.
<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 -->
2 changes: 2 additions & 0 deletions packages/block-library/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,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';
Expand Down Expand Up @@ -208,6 +209,7 @@ const getAllBlocks = () => {
navigation,
navigationLink,
navigationSubmenu,
navigationOverlayClose,
siteLogo,
siteTitle,
siteTagline,
Expand Down
49 changes: 49 additions & 0 deletions packages/block-library/src/navigation-overlay-close/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 3,
"name": "core/navigation-overlay-close",
"title": "Navigation Overlay Close",
Copy link
Contributor Author

@getdave getdave Dec 1, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Don't worry - we can make a separate PR for this block if/when we decide to merge this branch.

Copy link
Contributor Author

@getdave getdave Dec 1, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@WordPress/interactivity-api This block is going to effectively be the same as the existing button which toggles the overlay. It's required because when editing the overlay within the editor, users need to be able to:

  • perceive the presence of the Close button
  • style the Close button directly

I'd really appreciate any advice/help on how best to transfer the interactivity directives over the this block 🙏

Copy link
Member

@luisherranz luisherranz Dec 4, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We've been doing so with the WP_HTML_Tag_Processor quite successfully so far.

We basically use the WP_HTML_Tag_Processor on the render callback of the block, search for the inner block, and add the necessary directives. Something like this:

$p = new WP_HTML_Tag_Processor( $block_content );

if ( $p->next_tag( array( 'class' => 'wp-block-button' ) ) ) {
  $p->set_attribute( 'data-wp-on--click', 'actions.openMenu' );
}

"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"
}
55 changes: 55 additions & 0 deletions packages/block-library/src/navigation-overlay-close/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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();
Copy link
Contributor

@jeryj jeryj Dec 12, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are more routes available, so this doesn't work. Example repro:

  • From the Site Editor
  • Go to the Overlay Template Editor
  • Click the Site Logo/W in the top Left to open up the left Sidebar
  • Click the Editor Canvas
  • Click the Overlay X
  • The Editor Sidebar will open, and you can't exit the overlay edit directly back to the edtior

Copy link
Contributor

@jeryj jeryj Dec 12, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also, we should still have the Back button navigation in the central header area as on other templates.

Copy link
Contributor Author

@getdave getdave Dec 13, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also, we should still have the Back button navigation in the central header area as on other templates.

That's turned into a wider problem. I agree we need it but it will need to be a seperate PR.

}
};

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>
</>
);
}
16 changes: 16 additions & 0 deletions packages/block-library/src/navigation-overlay-close/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 } );
48 changes: 48 additions & 0 deletions packages/block-library/src/navigation-overlay-close/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
<?php


function render_block_core_navigation_overlay_close( $attributes ) {

Check failure on line 4 in packages/block-library/src/navigation-overlay-close/index.php

View workflow job for this annotation

GitHub Actions / PHP coding standards 

Missing @SInCE tag for the "render_block_core_navigation_overlay_close()" function.

// 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'] );

Check failure on line 11 in packages/block-library/src/navigation-overlay-close/index.php

View workflow job for this annotation

GitHub Actions / PHP coding standards 

Variable "$hasIcon" is not in valid snake_case format, try "$has_icon"

$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,

Check failure on line 21 in packages/block-library/src/navigation-overlay-close/index.php

View workflow job for this annotation

GitHub Actions / PHP coding standards 

Variable "$hasIcon" is not in valid snake_case format, try "$has_icon"
)
)
);

$content = $hasIcon ? $close_icon : __( 'Close menu' );

Check failure on line 26 in packages/block-library/src/navigation-overlay-close/index.php

View workflow job for this annotation

GitHub Actions / PHP coding standards 

Variable "$hasIcon" is not in valid snake_case format, try "$has_icon"

return sprintf(
'<button %1$s>%2$s</button>',
$wrapper_attributes,
$content,

Check failure on line 31 in packages/block-library/src/navigation-overlay-close/index.php

View workflow job for this annotation

GitHub Actions / PHP coding standards 

Trailing comma's are not allowed in function calls in PHP 7.2 or earlier
);

}

Check failure on line 34 in packages/block-library/src/navigation-overlay-close/index.php

View workflow job for this annotation

GitHub Actions / PHP coding standards 

Function closing brace must go on the next line following the body; found 1 blank lines before brace


/**
* Registers the `core/navigation-overlay-close` block on server.
*/
function register_block_core_navigation_overlay_close() {

Check failure on line 40 in packages/block-library/src/navigation-overlay-close/index.php

View workflow job for this annotation

GitHub Actions / PHP coding standards 

Missing @SInCE tag for the "register_block_core_navigation_overlay_close()" function.
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' );
6 changes: 6 additions & 0 deletions packages/block-library/src/navigation-overlay-close/init.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
/**
* Internal dependencies
*/
import { init } from './';

export default init();
34 changes: 34 additions & 0 deletions packages/block-library/src/navigation-overlay-close/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
}

5 changes: 4 additions & 1 deletion packages/block-library/src/navigation/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
"textdomain": "default",
"attributes": {
"ref": {
"type": "number"
"type": [ "number", "string" ]
},
"textColor": {
"type": "string"
Expand Down Expand Up @@ -84,6 +84,9 @@
"templateLock": {
"type": [ "string", "boolean" ],
"enum": [ "all", "insert", "contentOnly", false ]
},
"overlayId": {
"type": "string"
}
},
"providesContext": {
Expand Down
2 changes: 2 additions & 0 deletions packages/block-library/src/navigation/constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,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
Expand Down
Loading
Loading