Navigation: Allow Search block to be added alongside links

lib/class-wp-rest-menu-items-controller.php

@@ -317,6 +317,7 @@ protected function prepare_item_for_database( $request ) {
  'menu-item-title' => $menu_item_obj->title,
  'menu-item-url' => $menu_item_obj->url,
  'menu-item-description' => $menu_item_obj->description,
+ 'menu-item-content' => $menu_item_obj->menu_item_content,
  'menu-item-attr-title' => $menu_item_obj->attr_title,
  'menu-item-target' => $menu_item_obj->target,
  // Stored in the database as a string.
@@ -337,6 +338,7 @@ protected function prepare_item_for_database( $request ) {
  'menu-item-title' => '',
  'menu-item-url' => '',
  'menu-item-description' => '',
+ 'menu-item-content' => '',
  'menu-item-attr-title' => '',
  'menu-item-target' => '',
  'menu-item-classes' => '',
@@ -390,6 +392,15 @@ protected function prepare_item_for_database( $request ) {
  }
  }
 
+ // Nav menu content.
+ if ( ! empty( $schema['properties']['content'] ) && isset( $request['content'] ) ) {
+ if ( is_string( $request['content'] ) ) {
+ $prepared_nav_item['menu-item-content'] = $request['content'];
+ } elseif ( isset( $request['content']['raw'] ) ) {
+ $prepared_nav_item['menu-item-content'] = $request['content']['raw'];
+ }
+ }
+
  // Check if object id exists before saving.
  if ( ! $prepared_nav_item['menu-item-object'] ) {
  // If taxonony, check if term exists.
@@ -429,6 +440,13 @@ protected function prepare_item_for_database( $request ) {
  }
  }
 
+ // If menu item is type html, then content is required.
+ if ( 'html' === $prepared_nav_item['menu-item-type'] ) {
+ if ( empty( $prepared_nav_item['menu-item-content'] ) ) {
+ return new WP_Error( 'rest_content_required', __( 'Content required if menu item of type html.', 'gutenberg' ), array( 'status' => 400 ) );
+ }
+ }
+
  // If menu id is set, valid the value of menu item position and parent id.
  if ( ! empty( $prepared_nav_item['menu-id'] ) ) {
  // Check if nav menu is valid.
@@ -596,6 +614,20 @@ public function prepare_item_for_response( $post, $request ) {
  $data['object_id'] = absint( $menu_item->object_id );
  }
 
+ if ( rest_is_field_included( 'content', $fields ) ) {
+ $data['content'] = array();
+ }
+ if ( rest_is_field_included( 'content.raw', $fields ) ) {
+ $data['content']['raw'] = $menu_item->content;
+ }
+ if ( rest_is_field_included( 'content.rendered', $fields ) ) {
+ /** This filter is documented in wp-includes/post-template.php */
+ $data['content']['rendered'] = apply_filters( 'the_content', $menu_item->content );
+ }
+ if ( rest_is_field_included( 'content.block_version', $fields ) ) {
+ $data['content']['block_version'] = block_version( $menu_item->content );
+ }
+
  if ( in_array( 'parent', $fields, true ) ) {
  // Same as post_parent, expose as integer.
  $data['parent'] = absint( $menu_item->menu_item_parent );
@@ -787,7 +819,7 @@ public function get_item_schema() {
  $schema['properties']['type'] = array(
  'description' => __( 'The family of objects originally represented, such as "post_type" or "taxonomy".', 'gutenberg' ),
  'type' => 'string',
- 'enum' => array( 'taxonomy', 'post_type', 'post_type_archive', 'custom' ),
+ 'enum' => array( 'taxonomy', 'post_type', 'post_type_archive', 'custom', 'html' ),
  'context' => array( 'view', 'edit', 'embed' ),
  'default' => 'custom',
  );
@@ -861,6 +893,35 @@ public function get_item_schema() {
  'default' => 0,
  );
 
+ $schema['properties']['content'] = array(
+ 'description' => __( 'HTML content to display for this menu item. May contain blocks.', 'gutenberg' ),
+ 'context' => array( 'view', 'edit', 'embed' ),
+ 'type' => 'object',
+ 'arg_options' => array(
+ 'sanitize_callback' => null, // Note: sanitization implemented in self::prepare_item_for_database().
+ 'validate_callback' => null, // Note: validation implemented in self::prepare_item_for_database().
+ ),
+ 'properties' => array(
+ 'raw' => array(
+ 'description' => __( 'HTML content, as it exists in the database.', 'gutenberg' ),
+ 'type' => 'string',
+ 'context' => array( 'edit' ),
+ ),
+ 'rendered' => array(
+ 'description' => __( 'HTML content, transformed for display.', 'gutenberg' ),
+ 'type' => 'string',
+ 'context' => array( 'view', 'edit' ),
+ 'readonly' => true,
+ ),
+ 'block_version' => array(
+ 'description' => __( 'Version of the block format used in the HTML content.', 'gutenberg' ),
+ 'type' => 'integer',
+ 'context' => array( 'edit' ),
+ 'readonly' => true,
+ ),
+ ),
+ );
+
  $schema['properties']['target'] = array(
  'description' => __( 'The target attribute of the link element for this menu item.', 'gutenberg' ),
  'type' => 'string',

lib/compat.php

@@ -472,3 +472,111 @@ function gutenberg_render_block_with_assigned_block_context( $pre_render, $parse
  * @see WP_Block::render
  */
 remove_action( 'enqueue_block_assets', 'wp_enqueue_registered_block_scripts_and_styles' );
+
+/**
+ * Shim that hooks into `wp_update_nav_menu_item` and makes it so that nav menu
+ * items support a 'content' field. This field contains HTML and is used by nav
+ * menu items with `type` set to `'html'`.
+ *
+ * Specifically, this shim makes it so that:
+ *
+ * 1) The `wp_update_nav_menu_item()` function supports setting
+ * `'menu-item-content'` on a menu item. When merged to Core, this functionality
+ * should exist in `wp_update_nav_menu_item()`.
+ *
+ * 2) The `customize_save` ajax action supports setting `'content'` on a nav
+ * menu item. When merged to Core, this functionality should exist in
+ * `WP_Customize_Manager::save()`.
+ *
+ * This shim can be removed when the Gutenberg plugin requires a WordPress
+ * version that has the ticket below.
+ *
+ * @see https://core.trac.wordpress.org/ticket/50544
+ *
+ * @param int $menu_id ID of the updated menu.
+ * @param int $menu_item_db_id ID of the new menu item.
+ * @param array $args An array of arguments used to update/add the menu item.
+ */
+function gutenberg_update_nav_menu_item_content( $menu_id, $menu_item_db_id, $args ) {
+ global $wp_customize;
+
+ // Support setting content in customize_save admin-ajax.php requests by
+ // grabbing the unsanitized $_POST values.
+ if ( isset( $wp_customize ) ) {
+ $values = $wp_customize->unsanitized_post_values();
+ if ( isset( $values[ "nav_menu_item[$menu_item_db_id]" ]['content'] ) ) {
+ if ( is_string( $values[ "nav_menu_item[$menu_item_db_id]" ]['content'] ) ) {
+ $args['menu-item-content'] = $values[ "nav_menu_item[$menu_item_db_id]" ]['content'];
+ } elseif ( isset( $values[ "nav_menu_item[$menu_item_db_id]" ]['content']['raw'] ) ) {
+ $args['menu-item-content'] = $values[ "nav_menu_item[$menu_item_db_id]" ]['content']['raw'];
+ }
+ }
+ }
+
+ $defaults = array(
+ 'menu-item-content' => '',
+ );
+
+ $args = wp_parse_args( $args, $defaults );
+
+ update_post_meta( $menu_item_db_id, '_menu_item_content', wp_slash( $args['menu-item-content'] ) );
+}
+add_action( 'wp_update_nav_menu_item', 'gutenberg_update_nav_menu_item_content', 10, 3 );
+
+/**
+ * Shim that hooks into `wp_setup_nav_menu_items` and makes it so that nav menu
+ * items have a 'content' field. This field contains HTML and is used by nav
+ * menu items with `type` set to `'html'`.
+ *
+ * Specifically, this shim makes it so that the `wp_setup_nav_menu_item()`
+ * function sets `content` on the returned menu item. When merged to Core, this
+ * functionality should exist in `wp_setup_nav_menu_item()`.
+ *
+ * This shim can be removed when the Gutenberg plugin requires a WordPress
+ * version that has the ticket below.
+ *
+ * @see https://core.trac.wordpress.org/ticket/50544
+ *
+ * @param object $menu_item The menu item object.
+ */
+function gutenberg_setup_html_nav_menu_item( $menu_item ) {
+ if ( 'html' === $menu_item->type ) {
+ $menu_item->type_label = __( 'HTML', 'gutenberg' );
+ $menu_item->content = ! isset( $menu_item->content ) ? get_post_meta( $menu_item->db_id, '_menu_item_content', true ) : $menu_item->content;
+ }
+
+ return $menu_item;
+}
+add_filter( 'wp_setup_nav_menu_item', 'gutenberg_setup_html_nav_menu_item' );
+
+/**
+ * Shim that hooks into `walker_nav_menu_start_el` and makes it so that the
+ * default walker which renders a menu will correctly render the HTML associated
+ * with any navigation menu item that has `type` set to `'html`'.
+ *
+ * Specifically, this shim makes it so that `Walker_Nav_Menu::start_el()`
+ * renders the `content` of a nav menu item when its `type` is `'html'`. When
+ * merged to Core, this functionality should exist in
+ * `Walker_Nav_Menu::start_el()`.
+ *
+ * This shim can be removed when the Gutenberg plugin requires a WordPress
+ * version that has the ticket below.
+ *
+ * @see https://core.trac.wordpress.org/ticket/50544
+ *
+ * @param string $item_output The menu item's starting HTML output.
+ * @param WP_Post $item Menu item data object.
+ * @param int $depth Depth of menu item. Used for padding.
+ * @param stdClass $args An object of wp_nav_menu() arguments.
+ */
+function gutenberg_output_html_nav_menu_item( $item_output, $item, $depth, $args ) {
+ if ( 'html' === $item->type ) {
+ $item_output = $args->before;
+ /** This filter is documented in wp-includes/post-template.php */
+ $item_output .= apply_filters( 'the_content', $item->content );
+ $item_output .= $args->after;
+ }
+
+ return $item_output;
+}
+add_filter( 'walker_nav_menu_start_el', 'gutenberg_output_html_nav_menu_item', 10, 4 );

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

@@ -193,7 +193,10 @@ function Navigation( {
  >
  <InnerBlocks
  ref={ ref }
- allowedBlocks={ [ 'core/navigation-link' ] }
+ allowedBlocks={ [
+ 'core/navigation-link',
+ 'core/search',
+ ] }
  renderAppender={
  ( isImmediateParentOfSelectedBlock &&
  ! selectedBlockHasDescendants ) ||

packages/e2e-tests/specs/experiments/navigation.test.js

@@ -421,11 +421,17 @@ describe( 'Navigation', () => {
 
  await showBlockToolbar();
 
- // Add another Link block.
+ // Add another block.
  // Using 'click' here checks for regressions of https://github.com/WordPress/gutenberg/issues/18329,
  // an issue where the block appender requires two clicks.
  await page.click( '.wp-block-navigation .block-list-appender' );
 
+ // Select a Link block.
+ const [ linkButton ] = await page.$x(
+ "//*[contains(@class, 'block-editor-inserter__quick-inserter')]//*[text()='Link']"
+ );
+ await linkButton.click();
+
  // After adding a new block, search input should be shown immediately.
  // Verify that Escape would close the popover.
  // Regression: https://github.com/WordPress/gutenberg/pull/19885

packages/edit-navigation/src/store/actions.js

@@ -8,6 +8,7 @@ import { v4 as uuid } from 'uuid';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { serialize } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -167,7 +168,7 @@ function* batchSave( menuId, menuItemsByClientId, navigationBlock ) {
 function computeCustomizedAttribute( blocks, menuId, menuItemsByClientId ) {
  const blocksList = blocksTreeToFlatList( blocks );
  const dataList = blocksList.map( ( { block, parentId, position } ) =>
- linkBlockToRequestItem( block, parentId, position )
+ blockToRequestItem( block, parentId, position )
  );
 
  // Create an object like { "nav_menu_item[12]": {...}} }
@@ -195,14 +196,29 @@ function computeCustomizedAttribute( blocks, menuId, menuItemsByClientId ) {
  );
  }
 
- function linkBlockToRequestItem( block, parentId, position ) {
+ function blockToRequestItem( block, parentId, position ) {
  const menuItem = omit( getMenuItemForBlock( block ), 'menus', 'meta' );
+
+ let attributes;
+
+ if ( block.name === 'core/navigation-link' ) {
+ attributes = {
+ type: 'custom',
+ title: block.attributes?.label,
+ original_title: '',
+ url: block.attributes.url,
+ };
+ } else {
+ attributes = {
+ type: 'html',
+ content: serialize( block ),
+ };
+ }
+
  return {
  ...menuItem,
+ ...attributes,
  position,
- title: block.attributes?.label,
- url: block.attributes.url,
- original_title: '',
  classes: ( menuItem.classes || [] ).join( ' ' ),
  xfn: ( menuItem.xfn || [] ).join( ' ' ),
  nav_menu_term_id: menuId,

packages/edit-navigation/src/store/resolvers.js

@@ -6,7 +6,7 @@ import { groupBy, sortBy } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { createBlock } from '@wordpress/blocks';
+import { parse, createBlock } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -99,23 +99,32 @@ function createNavigationBlock( menuItems ) {
  itemsByParentID[ item.id ]
  );
  }
- const linkBlock = convertMenuItemToLinkBlock(
- item,
- menuItemInnerBlocks
- );
- menuItemIdToClientId[ item.id ] = linkBlock.clientId;
- innerBlocks.push( linkBlock );
+ const block = convertMenuItemToBlock( item, menuItemInnerBlocks );
+ menuItemIdToClientId[ item.id ] = block.clientId;
+ innerBlocks.push( block );
  }
  return innerBlocks;
  };
 
- // menuItemsToTreeOfLinkBlocks takes an array of top-level menu items and recursively creates all their innerBlocks
+ // menuItemsToTreeOfBlocks takes an array of top-level menu items and recursively creates all their innerBlocks
  const innerBlocks = menuItemsToTreeOfBlocks( itemsByParentID[ 0 ] || [] );
  const navigationBlock = createBlock( 'core/navigation', {}, innerBlocks );
  return [ navigationBlock, menuItemIdToClientId ];
 }
 
-function convertMenuItemToLinkBlock( menuItem, innerBlocks = [] ) {
+function convertMenuItemToBlock( menuItem, innerBlocks = [] ) {
+ if ( menuItem.type === 'html' ) {
+ const parsedBlocks = parse( menuItem.content.raw );
+
+ if ( parsedBlocks.length !== 1 ) {
+ return createBlock( 'core/freeform', {
+ originalContent: menuItem.content.raw,
+ } );
+ }
+
+ return parsedBlocks[ 0 ];
+ }
+
  const attributes = {
  label: menuItem.title.rendered,
  url: menuItem.url,