@wordpress/block-library 8.8.0 → 8.10.0

package/src/navigation/index.php

@@ -67,57 +67,7 @@ if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
 	}
 }
 
-/**
- * Turns menu item data into a nested array of parsed blocks
- *
- * @param array $menu_items               An array of menu items that represent
- *                                        an individual level of a menu.
- * @param array $menu_items_by_parent_id  An array keyed by the id of the
- *                                        parent menu where each element is an
- *                                        array of menu items that belong to
- *                                        that parent.
- * @return array An array of parsed block data.
- */
-function block_core_navigation_parse_blocks_from_menu_items( $menu_items, $menu_items_by_parent_id ) {
-	if ( empty( $menu_items ) ) {
-		return array();
-	}
-
-	$blocks = array();
-
-	foreach ( $menu_items as $menu_item ) {
-		$class_name       = ! empty( $menu_item->classes ) ? implode( ' ', (array) $menu_item->classes ) : null;
-		$id               = ( null !== $menu_item->object_id && 'custom' !== $menu_item->object ) ? $menu_item->object_id : null;
-		$opens_in_new_tab = null !== $menu_item->target && '_blank' === $menu_item->target;
-		$rel              = ( null !== $menu_item->xfn && '' !== $menu_item->xfn ) ? $menu_item->xfn : null;
-		$kind             = null !== $menu_item->type ? str_replace( '_', '-', $menu_item->type ) : 'custom';
-
-		$block = array(
-			'blockName' => isset( $menu_items_by_parent_id[ $menu_item->ID ] ) ? 'core/navigation-submenu' : 'core/navigation-link',
-			'attrs'     => array(
-				'className'     => $class_name,
-				'description'   => $menu_item->description,
-				'id'            => $id,
-				'kind'          => $kind,
-				'label'         => $menu_item->title,
-				'opensInNewTab' => $opens_in_new_tab,
-				'rel'           => $rel,
-				'title'         => $menu_item->attr_title,
-				'type'          => $menu_item->object,
-				'url'           => $menu_item->url,
-			),
-		);
-
-		$block['innerBlocks']  = isset( $menu_items_by_parent_id[ $menu_item->ID ] )
-			? block_core_navigation_parse_blocks_from_menu_items( $menu_items_by_parent_id[ $menu_item->ID ], $menu_items_by_parent_id )
-			: array();
-		$block['innerContent'] = array_map( 'serialize_block', $block['innerBlocks'] );
-
-		$blocks[] = $block;
-	}
 
-	return $blocks;
-}
 
 /**
  * Build an array with CSS classes and inline styles defining the colors
@@ -248,148 +198,9 @@ function block_core_navigation_render_submenu_icon() {
 	return '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true" focusable="false"><path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5"></path></svg>';
 }
 
-/**
- * Get the classic navigation menu to use as a fallback.
- *
- * @return object WP_Term The classic navigation.
- */
-function block_core_navigation_get_classic_menu_fallback() {
-	$classic_nav_menus = wp_get_nav_menus();
-
-	// If menus exist.
-	if ( $classic_nav_menus && ! is_wp_error( $classic_nav_menus ) ) {
-		// Handles simple use case where user has a classic menu and switches to a block theme.
-
-		// Returns the menu assigned to location `primary`.
-		$locations = get_nav_menu_locations();
-		if ( isset( $locations['primary'] ) ) {
-			$primary_menu = wp_get_nav_menu_object( $locations['primary'] );
-			if ( $primary_menu ) {
-				return $primary_menu;
-			}
-		}
-
-		// Returns a menu if `primary` is its slug.
-		foreach ( $classic_nav_menus as $classic_nav_menu ) {
-			if ( 'primary' === $classic_nav_menu->slug ) {
-				return $classic_nav_menu;
-			}
-		}
-
-		// Otherwise return the most recently created classic menu.
-		usort(
-			$classic_nav_menus,
-			function( $a, $b ) {
-				return $b->term_id - $a->term_id;
-			}
-		);
-		return $classic_nav_menus[0];
-	}
-}
-
-/**
- * Converts a classic navigation to blocks.
- *
- * @param  object $classic_nav_menu WP_Term The classic navigation object to convert.
- * @return array the normalized parsed blocks.
- */
-function block_core_navigation_get_classic_menu_fallback_blocks( $classic_nav_menu ) {
-	// BEGIN: Code that already exists in wp_nav_menu().
-	$menu_items = wp_get_nav_menu_items( $classic_nav_menu->term_id, array( 'update_post_term_cache' => false ) );
-
-	// Set up the $menu_item variables.
-	_wp_menu_item_classes_by_context( $menu_items );
-
-	$sorted_menu_items = array();
-	foreach ( (array) $menu_items as $menu_item ) {
-		$sorted_menu_items[ $menu_item->menu_order ] = $menu_item;
-	}
-
-	unset( $menu_items, $menu_item );
-
-	// END: Code that already exists in wp_nav_menu().
-
-	$menu_items_by_parent_id = array();
-	foreach ( $sorted_menu_items as $menu_item ) {
-		$menu_items_by_parent_id[ $menu_item->menu_item_parent ][] = $menu_item;
-	}
-
-	$inner_blocks = block_core_navigation_parse_blocks_from_menu_items(
-		isset( $menu_items_by_parent_id[0] )
-			? $menu_items_by_parent_id[0]
-			: array(),
-		$menu_items_by_parent_id
-	);
-
-	return serialize_blocks( $inner_blocks );
-}
-
-/**
- * If there's a the classic menu then use it as a fallback.
- *
- * @return array the normalized parsed blocks.
- */
-function block_core_navigation_maybe_use_classic_menu_fallback() {
-	// See if we have a classic menu.
-	$classic_nav_menu = block_core_navigation_get_classic_menu_fallback();
 
-	if ( ! $classic_nav_menu ) {
-		return;
-	}
 
-	// If we have a classic menu then convert it to blocks.
-	$classic_nav_menu_blocks = block_core_navigation_get_classic_menu_fallback_blocks( $classic_nav_menu );
 
-	if ( empty( $classic_nav_menu_blocks ) ) {
-		return;
-	}
-
-	// Create a new navigation menu from the classic menu.
-	$wp_insert_post_result = wp_insert_post(
-		array(
-			'post_content' => $classic_nav_menu_blocks,
-			'post_title'   => $classic_nav_menu->name,
-			'post_name'    => $classic_nav_menu->slug,
-			'post_status'  => 'publish',
-			'post_type'    => 'wp_navigation',
-		),
-		true // So that we can check whether the result is an error.
-	);
-
-	if ( is_wp_error( $wp_insert_post_result ) ) {
-		return;
-	}
-
-	// Fetch the most recently published navigation which will be the classic one created above.
-	return block_core_navigation_get_most_recently_published_navigation();
-}
-
-/**
- * Finds the most recently published `wp_navigation` Post.
- *
- * @return WP_Post|null the first non-empty Navigation or null.
- */
-function block_core_navigation_get_most_recently_published_navigation() {
-
-	// Default to the most recently created menu.
-	$parsed_args = array(
-		'post_type'              => 'wp_navigation',
-		'no_found_rows'          => true,
-		'update_post_meta_cache' => false,
-		'update_post_term_cache' => false,
-		'order'                  => 'DESC',
-		'orderby'                => 'date',
-		'post_status'            => 'publish',
-		'posts_per_page'         => 1, // get only the most recent.
-	);
-
-	$navigation_post = new WP_Query( $parsed_args );
-	if ( count( $navigation_post->posts ) > 0 ) {
-		return $navigation_post->posts[0];
-	}
-
-	return null;
-}
 
 /**
  * Filter out empty "null" blocks from the block list.
@@ -452,14 +263,7 @@ function block_core_navigation_get_fallback_blocks() {
 	// If `core/page-list` is not registered then return empty blocks.
 	$fallback_blocks = $registry->is_registered( 'core/page-list' ) ? $page_list_fallback : array();
 
-	// Default to a list of Pages.
-	$navigation_post = block_core_navigation_get_most_recently_published_navigation();
-
-	// If there are no navigation posts then try to find a classic menu
-	// and convert it into a block based navigation menu.
-	if ( ! $navigation_post ) {
-		$navigation_post = block_core_navigation_maybe_use_classic_menu_fallback();
-	}
+	$navigation_post = WP_Navigation_Fallback_Gutenberg::get_fallback();
 
 	// Use the first non-empty Navigation as fallback if available.
 	if ( $navigation_post ) {
@@ -874,3 +678,212 @@ function block_core_navigation_typographic_presets_backcompatibility( $parsed_bl
 }
 
 add_filter( 'render_block_data', 'block_core_navigation_typographic_presets_backcompatibility' );
+
+/**
+ * Turns menu item data into a nested array of parsed blocks
+ *
+ * @param array $menu_items               An array of menu items that represent
+ *                                        an individual level of a menu.
+ * @param array $menu_items_by_parent_id  An array keyed by the id of the
+ *                                        parent menu where each element is an
+ *                                        array of menu items that belong to
+ *                                        that parent.
+ * @return array An array of parsed block data.
+ */
+function block_core_navigation_parse_blocks_from_menu_items( $menu_items, $menu_items_by_parent_id ) {
+
+	_deprecated_function( __FUNCTION__, '6.3.0', 'WP_Navigation_Fallback_Gutenberg::parse_blocks_from_menu_items' );
+
+	if ( empty( $menu_items ) ) {
+		return array();
+	}
+
+	$blocks = array();
+
+	foreach ( $menu_items as $menu_item ) {
+		$class_name       = ! empty( $menu_item->classes ) ? implode( ' ', (array) $menu_item->classes ) : null;
+		$id               = ( null !== $menu_item->object_id && 'custom' !== $menu_item->object ) ? $menu_item->object_id : null;
+		$opens_in_new_tab = null !== $menu_item->target && '_blank' === $menu_item->target;
+		$rel              = ( null !== $menu_item->xfn && '' !== $menu_item->xfn ) ? $menu_item->xfn : null;
+		$kind             = null !== $menu_item->type ? str_replace( '_', '-', $menu_item->type ) : 'custom';
+
+		$block = array(
+			'blockName' => isset( $menu_items_by_parent_id[ $menu_item->ID ] ) ? 'core/navigation-submenu' : 'core/navigation-link',
+			'attrs'     => array(
+				'className'     => $class_name,
+				'description'   => $menu_item->description,
+				'id'            => $id,
+				'kind'          => $kind,
+				'label'         => $menu_item->title,
+				'opensInNewTab' => $opens_in_new_tab,
+				'rel'           => $rel,
+				'title'         => $menu_item->attr_title,
+				'type'          => $menu_item->object,
+				'url'           => $menu_item->url,
+			),
+		);
+
+		$block['innerBlocks']  = isset( $menu_items_by_parent_id[ $menu_item->ID ] )
+			? block_core_navigation_parse_blocks_from_menu_items( $menu_items_by_parent_id[ $menu_item->ID ], $menu_items_by_parent_id )
+			: array();
+		$block['innerContent'] = array_map( 'serialize_block', $block['innerBlocks'] );
+
+		$blocks[] = $block;
+	}
+
+	return $blocks;
+}
+
+/**
+ * Get the classic navigation menu to use as a fallback.
+ *
+ * @return object WP_Term The classic navigation.
+ */
+function block_core_navigation_get_classic_menu_fallback() {
+
+	_deprecated_function( __FUNCTION__, '6.3.0', 'WP_Navigation_Fallback_Gutenberg::get_classic_menu_fallback' );
+
+	$classic_nav_menus = wp_get_nav_menus();
+
+	// If menus exist.
+	if ( $classic_nav_menus && ! is_wp_error( $classic_nav_menus ) ) {
+		// Handles simple use case where user has a classic menu and switches to a block theme.
+
+		// Returns the menu assigned to location `primary`.
+		$locations = get_nav_menu_locations();
+		if ( isset( $locations['primary'] ) ) {
+			$primary_menu = wp_get_nav_menu_object( $locations['primary'] );
+			if ( $primary_menu ) {
+				return $primary_menu;
+			}
+		}
+
+		// Returns a menu if `primary` is its slug.
+		foreach ( $classic_nav_menus as $classic_nav_menu ) {
+			if ( 'primary' === $classic_nav_menu->slug ) {
+				return $classic_nav_menu;
+			}
+		}
+
+		// Otherwise return the most recently created classic menu.
+		usort(
+			$classic_nav_menus,
+			function( $a, $b ) {
+				return $b->term_id - $a->term_id;
+			}
+		);
+		return $classic_nav_menus[0];
+	}
+}
+
+/**
+ * Converts a classic navigation to blocks.
+ *
+ * @param  object $classic_nav_menu WP_Term The classic navigation object to convert.
+ * @return array the normalized parsed blocks.
+ */
+function block_core_navigation_get_classic_menu_fallback_blocks( $classic_nav_menu ) {
+
+	_deprecated_function( __FUNCTION__, '6.3.0', 'WP_Navigation_Fallback_Gutenberg::get_classic_menu_fallback_blocks' );
+
+	// BEGIN: Code that already exists in wp_nav_menu().
+	$menu_items = wp_get_nav_menu_items( $classic_nav_menu->term_id, array( 'update_post_term_cache' => false ) );
+
+	// Set up the $menu_item variables.
+	_wp_menu_item_classes_by_context( $menu_items );
+
+	$sorted_menu_items = array();
+	foreach ( (array) $menu_items as $menu_item ) {
+		$sorted_menu_items[ $menu_item->menu_order ] = $menu_item;
+	}
+
+	unset( $menu_items, $menu_item );
+
+	// END: Code that already exists in wp_nav_menu().
+
+	$menu_items_by_parent_id = array();
+	foreach ( $sorted_menu_items as $menu_item ) {
+		$menu_items_by_parent_id[ $menu_item->menu_item_parent ][] = $menu_item;
+	}
+
+	$inner_blocks = block_core_navigation_parse_blocks_from_menu_items(
+		isset( $menu_items_by_parent_id[0] )
+			? $menu_items_by_parent_id[0]
+			: array(),
+		$menu_items_by_parent_id
+	);
+
+	return serialize_blocks( $inner_blocks );
+}
+
+/**
+ * If there's a the classic menu then use it as a fallback.
+ *
+ * @return array the normalized parsed blocks.
+ */
+function block_core_navigation_maybe_use_classic_menu_fallback() {
+
+	_deprecated_function( __FUNCTION__, '6.3.0', 'WP_Navigation_Fallback_Gutenberg::create_classic_menu_fallback' );
+
+	// See if we have a classic menu.
+	$classic_nav_menu = block_core_navigation_get_classic_menu_fallback();
+
+	if ( ! $classic_nav_menu ) {
+		return;
+	}
+
+	// If we have a classic menu then convert it to blocks.
+	$classic_nav_menu_blocks = block_core_navigation_get_classic_menu_fallback_blocks( $classic_nav_menu );
+
+	if ( empty( $classic_nav_menu_blocks ) ) {
+		return;
+	}
+
+	// Create a new navigation menu from the classic menu.
+	$wp_insert_post_result = wp_insert_post(
+		array(
+			'post_content' => $classic_nav_menu_blocks,
+			'post_title'   => $classic_nav_menu->name,
+			'post_name'    => $classic_nav_menu->slug,
+			'post_status'  => 'publish',
+			'post_type'    => 'wp_navigation',
+		),
+		true // So that we can check whether the result is an error.
+	);
+
+	if ( is_wp_error( $wp_insert_post_result ) ) {
+		return;
+	}
+
+	// Fetch the most recently published navigation which will be the classic one created above.
+	return block_core_navigation_get_most_recently_published_navigation();
+}
+
+/**
+ * Finds the most recently published `wp_navigation` Post.
+ *
+ * @return WP_Post|null the first non-empty Navigation or null.
+ */
+function block_core_navigation_get_most_recently_published_navigation() {
+
+	_deprecated_function( __FUNCTION__, '6.3.0', 'WP_Navigation_Fallback_Gutenberg::get_most_recently_published_navigation' );
+
+	// Default to the most recently created menu.
+	$parsed_args = array(
+		'post_type'              => 'wp_navigation',
+		'no_found_rows'          => true,
+		'update_post_meta_cache' => false,
+		'update_post_term_cache' => false,
+		'order'                  => 'DESC',
+		'orderby'                => 'date',
+		'post_status'            => 'publish',
+		'posts_per_page'         => 1, // get only the most recent.
+	);
+
+	$navigation_post = new WP_Query( $parsed_args );
+	if ( count( $navigation_post->posts ) > 0 ) {
+		return $navigation_post->posts[0];
+	}
+
+	return null;
+}

package/src/navigation/interactivity.js

@@ -0,0 +1,144 @@
+/**
+ * Internal dependencies
+ */
+import { store } from '../utils/interactivity';
+
+const focusableSelectors = [
+	'a[href]',
+	'area[href]',
+	'input:not([disabled]):not([type="hidden"]):not([aria-hidden])',
+	'select:not([disabled]):not([aria-hidden])',
+	'textarea:not([disabled]):not([aria-hidden])',
+	'button:not([disabled]):not([aria-hidden])',
+	'iframe',
+	'object',
+	'embed',
+	'[contenteditable]',
+	'[tabindex]:not([tabindex^="-"])',
+];
+
+store( {
+	effects: {
+		core: {
+			navigation: {
+				initModal: async ( { context, ref } ) => {
+					if ( context.core.navigation.isMenuOpen ) {
+						const focusableElements =
+							ref.querySelectorAll( focusableSelectors );
+						context.core.navigation.modal = ref;
+						context.core.navigation.firstFocusableElement =
+							focusableElements[ 0 ];
+						context.core.navigation.lastFocusableElement =
+							focusableElements[ focusableElements.length - 1 ];
+					}
+				},
+				focusFirstElement: async ( { context, ref } ) => {
+					if ( context.core.navigation.isMenuOpen ) {
+						ref.querySelector(
+							'.wp-block-navigation-item > *:first-child'
+						).focus();
+					}
+				},
+			},
+		},
+	},
+	selectors: {
+		core: {
+			navigation: {
+				roleAttribute: ( { context } ) => {
+					return context.core.navigation.overlay &&
+						context.core.navigation.isMenuOpen
+						? 'dialog'
+						: '';
+				},
+			},
+		},
+	},
+	actions: {
+		core: {
+			navigation: {
+				openMenu: ( { context, ref } ) => {
+					context.core.navigation.isMenuOpen = true;
+					context.core.navigation.previousFocus = ref;
+					if ( context.core.navigation.overlay ) {
+						// It adds a `has-modal-open` class to the <html> root
+						document.documentElement.classList.add(
+							'has-modal-open'
+						);
+					}
+				},
+				closeMenu: ( { context } ) => {
+					if ( context.core.navigation.isMenuOpen ) {
+						context.core.navigation.isMenuOpen = false;
+						if (
+							context.core.navigation.modal.contains(
+								window.document.activeElement
+							)
+						) {
+							context.core.navigation.previousFocus.focus();
+						}
+						context.core.navigation.modal = null;
+						context.core.navigation.previousFocus = null;
+						if ( context.core.navigation.overlay ) {
+							document.documentElement.classList.remove(
+								'has-modal-open'
+							);
+						}
+					}
+				},
+				handleMenuKeydown: ( { actions, context, event } ) => {
+					if ( context.core.navigation.isMenuOpen ) {
+						// If Escape close the menu
+						if (
+							event?.key === 'Escape' ||
+							event?.keyCode === 27
+						) {
+							actions.core.navigation.closeMenu( { context } );
+							return;
+						}
+
+						// Trap focus if it is an overlay (main menu)
+						if (
+							context.core.navigation.overlay &&
+							( event.key === 'Tab' || event.keyCode === 9 )
+						) {
+							// If shift + tab it change the direction
+							if (
+								event.shiftKey &&
+								window.document.activeElement ===
+									context.core.navigation
+										.firstFocusableElement
+							) {
+								event.preventDefault();
+								context.core.navigation.lastFocusableElement.focus();
+							} else if (
+								! event.shiftKey &&
+								window.document.activeElement ===
+									context.core.navigation.lastFocusableElement
+							) {
+								event.preventDefault();
+								context.core.navigation.firstFocusableElement.focus();
+							}
+						}
+					}
+				},
+				handleMenuFocusout: ( { actions, context, event } ) => {
+					if ( context.core.navigation.isMenuOpen ) {
+						// If focus is outside modal, and in the document, close menu
+						// event.target === The element losing focus
+						// event.relatedTarget === The element receiving focus (if any)
+						// When focusout is outsite the document, `window.document.activeElement` doesn't change
+						if (
+							! context.core.navigation.modal.contains(
+								event.relatedTarget
+							) &&
+							event.target !== window.document.activeElement
+						) {
+							actions.core.navigation.closeMenu( { context } );
+						}
+					}
+				},
+			},
+		},
+	},
+} );

package/src/navigation-link/edit.js

@@ -429,7 +429,7 @@ export default function NavigationLinkEdit( {
 			</BlockControls>
 			{ /* Warning, this duplicated in packages/block-library/src/navigation-submenu/edit.js */ }
 			<InspectorControls>
-				<PanelBody title={ __( 'Link settings' ) }>
+				<PanelBody title={ __( 'Settings' ) }>
 					<TextControl
 						__nextHasNoMarginBottom
 						value={ label ? stripHTML( label ) : '' }

package/src/navigation-submenu/edit.js

@@ -384,7 +384,7 @@ export default function NavigationSubmenuEdit( {
 			</BlockControls>
 			{ /* Warning, this duplicated in packages/block-library/src/navigation-link/edit.js */ }
 			<InspectorControls>
-				<PanelBody title={ __( 'Link settings' ) }>
+				<PanelBody title={ __( 'Settings' ) }>
 					<TextControl
 						__nextHasNoMarginBottom
 						value={ label || '' }

package/src/paragraph/block.json

@@ -43,7 +43,11 @@
 		},
 		"spacing": {
 			"margin": true,
-			"padding": true
+			"padding": true,
+			"__experimentalDefaultControls": {
+				"margin": false,
+				"padding": false
+			}
 		},
 		"typography": {
 			"fontSize": true,