* Server-side rendering of the `core/navigation` block.
* Helper functions used to render the navigation block.
class WP_Navigation_Block_Renderer {
* Used to determine whether or not a navigation has submenus.
private static $has_submenus = false;
* Used to determine which blocks need an <li> wrapper.
private static $needs_list_item_wrapper = array(
* Keeps track of all the navigation names that have been seen.
private static $seen_menu_names = array();
* Returns whether or not this is responsive navigation.
* @param array $attributes The block attributes.
* @return bool Returns whether or not this is responsive navigation.
private static function is_responsive( $attributes ) {
* This is for backwards compatibility after the `isResponsive` attribute was been removed.
$has_old_responsive_attribute = ! empty( $attributes['isResponsive'] ) && $attributes['isResponsive'];
return isset( $attributes['overlayMenu'] ) && 'never' !== $attributes['overlayMenu'] || $has_old_responsive_attribute;
* Returns whether or not a navigation has a submenu.
* @param WP_Block_List $inner_blocks The list of inner blocks.
* @return bool Returns whether or not a navigation has a submenu and also sets the member variable.
private static function has_submenus( $inner_blocks ) {
if ( true === static::$has_submenus ) {
return static::$has_submenus;
foreach ( $inner_blocks as $inner_block ) {
// If this is a page list then work out if any of the pages have children.
if ( 'core/page-list' === $inner_block->name ) {
'sort_column' => 'menu_order,post_title',
foreach ( (array) $all_pages as $page ) {
if ( $page->post_parent ) {
static::$has_submenus = true;
// If this is a navigation submenu then we know we have submenus.
if ( 'core/navigation-submenu' === $inner_block->name ) {
static::$has_submenus = true;
return static::$has_submenus;
* Determine whether the navigation blocks is interactive.
* @param array $attributes The block attributes.
* @param WP_Block_List $inner_blocks The list of inner blocks.
* @return bool Returns whether or not to load the view script.
private static function is_interactive( $attributes, $inner_blocks ) {
$has_submenus = static::has_submenus( $inner_blocks );
$is_responsive_menu = static::is_responsive( $attributes );
return ( $has_submenus && ( $attributes['openSubmenusOnClick'] || $attributes['showSubmenuIcon'] ) ) || $is_responsive_menu;
* Returns whether or not a block needs a list item wrapper.
* @param WP_Block $block The block.
* @return bool Returns whether or not a block needs a list item wrapper.
private static function does_block_need_a_list_item_wrapper( $block ) {
* Filter the list of blocks that need a list item wrapper.
* Affords the ability to customize which blocks need a list item wrapper when rendered
* within a core/navigation block.
* This is useful for blocks that are not list items but should be wrapped in a list
* item when used as a child of a navigation block.
* @param array $needs_list_item_wrapper The list of blocks that need a list item wrapper.
$needs_list_item_wrapper = apply_filters( 'block_core_navigation_listable_blocks', static::$needs_list_item_wrapper );
return in_array( $block->name, $needs_list_item_wrapper, true );
* Returns the markup for a single inner block.
* @param WP_Block $inner_block The inner block.
* @return string Returns the markup for a single inner block.
private static function get_markup_for_inner_block( $inner_block ) {
$inner_block_content = $inner_block->render();
if ( ! empty( $inner_block_content ) ) {
if ( static::does_block_need_a_list_item_wrapper( $inner_block ) ) {
return '<li class="wp-block-navigation-item">' . $inner_block_content . '</li>';
return $inner_block_content;
* Returns the html for the inner blocks of the navigation block.
* @param array $attributes The block attributes.
* @param WP_Block_List $inner_blocks The list of inner blocks.
* @return string Returns the html for the inner blocks of the navigation block.
private static function get_inner_blocks_html( $attributes, $inner_blocks ) {
$has_submenus = static::has_submenus( $inner_blocks );
$is_interactive = static::is_interactive( $attributes, $inner_blocks );
$style = static::get_styles( $attributes );
$class = static::get_classes( $attributes );
$container_attributes = get_block_wrapper_attributes(
'class' => 'wp-block-navigation__container ' . $class,
foreach ( $inner_blocks as $inner_block ) {
$inner_block_markup = static::get_markup_for_inner_block( $inner_block );
$p = new WP_HTML_Tag_Processor( $inner_block_markup );
$is_list_item = $p->next_tag( 'LI' );
if ( $is_list_item && ! $is_list_open ) {
$inner_blocks_html .= sprintf(
if ( ! $is_list_item && $is_list_open ) {
$inner_blocks_html .= '</ul>';
$inner_blocks_html .= $inner_block_markup;
$inner_blocks_html .= '</ul>';
// Add directives to the submenu if needed.
if ( $has_submenus && $is_interactive ) {
$tags = new WP_HTML_Tag_Processor( $inner_blocks_html );
$inner_blocks_html = block_core_navigation_add_directives_to_submenu( $tags, $attributes );
return $inner_blocks_html;
* Gets the inner blocks for the navigation block from the navigation post.
* @param array $attributes The block attributes.
* @return WP_Block_List Returns the inner blocks for the navigation block.
private static function get_inner_blocks_from_navigation_post( $attributes ) {
$navigation_post = get_post( $attributes['ref'] );
if ( ! isset( $navigation_post ) ) {
return new WP_Block_List( array(), $attributes );
// Only published posts are valid. If this is changed then a corresponding change
// must also be implemented in `use-navigation-menu.js`.
if ( 'publish' === $navigation_post->post_status ) {
$parsed_blocks = parse_blocks( $navigation_post->post_content );
// 'parse_blocks' includes a null block with '\n\n' as the content when
// it encounters whitespace. This code strips it.
$blocks = block_core_navigation_filter_out_empty_blocks( $parsed_blocks );
// Re-serialize, and run Block Hooks algorithm to inject hooked blocks.
// TODO: See if we can move the apply_block_hooks_to_content_from_post_object() call
// before the parse_blocks() call further above, to avoid the extra serialization/parsing.
$markup = serialize_blocks( $blocks );
$markup = apply_block_hooks_to_content_from_post_object( $markup, $navigation_post );
$blocks = parse_blocks( $markup );
// TODO - this uses the full navigation block attributes for the
// context which could be refined.
return new WP_Block_List( $blocks, $attributes );
* Gets the inner blocks for the navigation block from the fallback.
* @param array $attributes The block attributes.
* @return WP_Block_List Returns the inner blocks for the navigation block.
private static function get_inner_blocks_from_fallback( $attributes ) {
$fallback_blocks = block_core_navigation_get_fallback_blocks();
// Fallback my have been filtered so do basic test for validity.
if ( empty( $fallback_blocks ) || ! is_array( $fallback_blocks ) ) {
return new WP_Block_List( array(), $attributes );
return new WP_Block_List( $fallback_blocks, $attributes );
* Gets the inner blocks for the navigation block.
* @param array $attributes The block attributes.
* @param WP_Block $block The parsed block.
* @return WP_Block_List Returns the inner blocks for the navigation block.
private static function get_inner_blocks( $attributes, $block ) {
$inner_blocks = $block->inner_blocks;
// Ensure that blocks saved with the legacy ref attribute name (navigationMenuId) continue to render.
if ( array_key_exists( 'navigationMenuId', $attributes ) ) {
$attributes['ref'] = $attributes['navigationMenuId'];
// - the gutenberg plugin is active
// - `__unstableLocation` is defined
// - we have menu items at the defined location
// - we don't have a relationship to a `wp_navigation` Post (via `ref`).
// ...then create inner blocks from the classic menu assigned to that location.
defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN &&
array_key_exists( '__unstableLocation', $attributes ) &&
! array_key_exists( 'ref', $attributes ) &&
! empty( block_core_navigation_get_menu_items_at_location( $attributes['__unstableLocation'] ) )
$inner_blocks = block_core_navigation_get_inner_blocks_from_unstable_location( $attributes );
// Load inner blocks from the navigation post.
if ( array_key_exists( 'ref', $attributes ) ) {
$inner_blocks = static::get_inner_blocks_from_navigation_post( $attributes );
// If there are no inner blocks then fallback to rendering an appropriate fallback.
if ( empty( $inner_blocks ) ) {
$inner_blocks = static::get_inner_blocks_from_fallback( $attributes );
* Filter navigation block $inner_blocks.
* Allows modification of a navigation block menu items.
* @param \WP_Block_List $inner_blocks
$inner_blocks = apply_filters( 'block_core_navigation_render_inner_blocks', $inner_blocks );
$post_ids = block_core_navigation_get_post_ids( $inner_blocks );
_prime_post_caches( $post_ids, false, false );
* Gets the name of the current navigation, if it has one.
* @param array $attributes The block attributes.
* @return string Returns the name of the navigation.
private static function get_navigation_name( $attributes ) {
$navigation_name = $attributes['ariaLabel'] ?? '';
if ( ! empty( $navigation_name ) ) {
// Load the navigation post.
if ( array_key_exists( 'ref', $attributes ) ) {
$navigation_post = get_post( $attributes['ref'] );
if ( ! isset( $navigation_post ) ) {
// Only published posts are valid. If this is changed then a corresponding change
// must also be implemented in `use-navigation-menu.js`.
if ( 'publish' === $navigation_post->post_status ) {
$navigation_name = $navigation_post->post_title;
// This is used to count the number of times a navigation name has been seen,
// so that we can ensure every navigation has a unique id.
if ( isset( static::$seen_menu_names[ $navigation_name ] ) ) {
++static::$seen_menu_names[ $navigation_name ];
static::$seen_menu_names[ $navigation_name ] = 1;
* Returns the layout class for the navigation block.
* @param array $attributes The block attributes.
* @return string Returns the layout class for the navigation block.
private static function get_layout_class( $attributes ) {
$layout_justification = array(
'left' => 'items-justified-left',
'right' => 'items-justified-right',
'center' => 'items-justified-center',
'space-between' => 'items-justified-space-between',
isset( $attributes['layout']['justifyContent'] ) &&
isset( $layout_justification[ $attributes['layout']['justifyContent'] ] )
$layout_class .= $layout_justification[ $attributes['layout']['justifyContent'] ];
if ( isset( $attributes['layout']['orientation'] ) && 'vertical' === $attributes['layout']['orientation'] ) {
$layout_class .= ' is-vertical';
if ( isset( $attributes['layout']['flexWrap'] ) && 'nowrap' === $attributes['layout']['flexWrap'] ) {
$layout_class .= ' no-wrap';
* Return classes for the navigation block.
* @param array $attributes The block attributes.
* @return string Returns the classes for the navigation block.
private static function get_classes( $attributes ) {
// Restore legacy classnames for submenu positioning.
$layout_class = static::get_layout_class( $attributes );
$colors = block_core_navigation_build_css_colors( $attributes );
$font_sizes = block_core_navigation_build_css_font_sizes( $attributes );
$is_responsive_menu = static::is_responsive( $attributes );
// Manually add block support text decoration as CSS class.
$text_decoration = $attributes['style']['typography']['textDecoration'] ?? null;
$text_decoration_class = sprintf( 'has-text-decoration-%s', $text_decoration );
$font_sizes['css_classes'],
$is_responsive_menu ? array( 'is-responsive' ) : array(),
$layout_class ? array( $layout_class ) : array(),
$text_decoration ? array( $text_decoration_class ) : array()
return implode( ' ', $classes );
* Get styles for the navigation block.
* @param array $attributes The block attributes.
* @return string Returns the styles for the navigation block.
private static function get_styles( $attributes ) {
$colors = block_core_navigation_build_css_colors( $attributes );
$font_sizes = block_core_navigation_build_css_font_sizes( $attributes );
$block_styles = isset( $attributes['styles'] ) ? $attributes['styles'] : '';
return $block_styles . $colors['inline_styles'] . $font_sizes['inline_styles'];
* Get the responsive container markup
* @param array $attributes The block attributes.
* @param WP_Block_List $inner_blocks The list of inner blocks.
* @param string $inner_blocks_html The markup for the inner blocks.
* @return string Returns the container markup.
private static function get_responsive_container_markup( $attributes, $inner_blocks, $inner_blocks_html ) {
$is_interactive = static::is_interactive( $attributes, $inner_blocks );
$colors = block_core_navigation_build_css_colors( $attributes );
$modal_unique_id = wp_unique_id( 'modal-' );
$is_hidden_by_default = isset( $attributes['overlayMenu'] ) && 'always' === $attributes['overlayMenu'];
$responsive_container_classes = array(
'wp-block-navigation__responsive-container',
$is_hidden_by_default ? 'hidden-by-default' : '',
implode( ' ', $colors['overlay_css_classes'] ),
$open_button_classes = array(
'wp-block-navigation__responsive-container-open',
$is_hidden_by_default ? 'always-shown' : '',
$should_display_icon_label = isset( $attributes['hasIcon'] ) && true === $attributes['hasIcon'];
$toggle_button_icon = '<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M4 7.5h16v1.5H4z"></path><path d="M4 15h16v1.5H4z"></path></svg>';
if ( isset( $attributes['icon'] ) ) {
if ( 'menu' === $attributes['icon'] ) {
$toggle_button_icon = '<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 5v1.5h14V5H5z"></path><path d="M5 12.8h14v-1.5H5v1.5z"></path><path d="M5 19h14v-1.5H5V19z"></path></svg>';
$toggle_button_content = $should_display_icon_label ? $toggle_button_icon : __( 'Menu' );
$toggle_close_button_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.06 12 6.47-6.47-1.06-1.06L12 10.94 5.53 4.47 4.47 5.53 10.94 12l-6.47 6.47 1.06 1.06L12 13.06l6.47 6.47 1.06-1.06L13.06 12Z"></path></svg>';
$toggle_close_button_content = $should_display_icon_label ? $toggle_close_button_icon : __( 'Close' );
$toggle_aria_label_open = $should_display_icon_label ? 'aria-label="' . __( 'Open menu' ) . '"' : ''; // Open button label.
$toggle_aria_label_close = $should_display_icon_label ? 'aria-label="' . __( 'Close menu' ) . '"' : ''; // Close button label.
// Add Interactivity API directives to the markup if needed.
$open_button_directives = '';
$responsive_container_directives = '';
$responsive_dialog_directives = '';
$close_button_directives = '';
$open_button_directives = '
data-wp-on--click="actions.openMenuOnClick"