@wordpress/block-library 8.27.2 → 8.28.0

package/src/navigation/view.js

@@ -23,193 +23,206 @@ const focusableSelectors = [
 // capture the clicks, instead of relying on the focusout event.
 document.addEventListener( 'click', () => {} );
 
-const { state, actions } = store( 'core/navigation', {
-	state: {
-		get roleAttribute() {
-			const ctx = getContext();
-			return ctx.type === 'overlay' && state.isMenuOpen ? 'dialog' : null;
-		},
-		get ariaModal() {
-			const ctx = getContext();
-			return ctx.type === 'overlay' && state.isMenuOpen ? 'true' : null;
-		},
-		get ariaLabel() {
-			const ctx = getContext();
-			return ctx.type === 'overlay' && state.isMenuOpen
-				? ctx.ariaLabel
-				: null;
-		},
-		get isMenuOpen() {
-			// The menu is opened if either `click`, `hover` or `focus` is true.
-			return (
-				Object.values( state.menuOpenedBy ).filter( Boolean ).length > 0
-			);
-		},
-		get menuOpenedBy() {
-			const ctx = getContext();
-			return ctx.type === 'overlay'
-				? ctx.overlayOpenedBy
-				: ctx.submenuOpenedBy;
-		},
-	},
-	actions: {
-		openMenuOnHover() {
-			const { type, overlayOpenedBy } = getContext();
-			if (
-				type === 'submenu' &&
-				// Only open on hover if the overlay is closed.
-				Object.values( overlayOpenedBy || {} ).filter( Boolean )
-					.length === 0
-			)
-				actions.openMenu( 'hover' );
-		},
-		closeMenuOnHover() {
-			actions.closeMenu( 'hover' );
-		},
-		openMenuOnClick() {
-			const ctx = getContext();
-			const { ref } = getElement();
-			ctx.previousFocus = ref;
-			actions.openMenu( 'click' );
-		},
-		closeMenuOnClick() {
-			actions.closeMenu( 'click' );
-			actions.closeMenu( 'focus' );
-		},
-		openMenuOnFocus() {
-			actions.openMenu( 'focus' );
-		},
-		toggleMenuOnClick() {
-			const ctx = getContext();
-			const { ref } = getElement();
-			// Safari won't send focus to the clicked element, so we need to manually place it: https://bugs.webkit.org/show_bug.cgi?id=22261
-			if ( window.document.activeElement !== ref ) ref.focus();
-			const { menuOpenedBy } = state;
-			if ( menuOpenedBy.click || menuOpenedBy.focus ) {
-				actions.closeMenu( 'click' );
-				actions.closeMenu( 'focus' );
-			} else {
+const { state, actions } = store(
+	'core/navigation',
+	{
+		state: {
+			get roleAttribute() {
+				const ctx = getContext();
+				return ctx.type === 'overlay' && state.isMenuOpen
+					? 'dialog'
+					: null;
+			},
+			get ariaModal() {
+				const ctx = getContext();
+				return ctx.type === 'overlay' && state.isMenuOpen
+					? 'true'
+					: null;
+			},
+			get ariaLabel() {
+				const ctx = getContext();
+				return ctx.type === 'overlay' && state.isMenuOpen
+					? ctx.ariaLabel
+					: null;
+			},
+			get isMenuOpen() {
+				// The menu is opened if either `click`, `hover` or `focus` is true.
+				return (
+					Object.values( state.menuOpenedBy ).filter( Boolean )
+						.length > 0
+				);
+			},
+			get menuOpenedBy() {
+				const ctx = getContext();
+				return ctx.type === 'overlay'
+					? ctx.overlayOpenedBy
+					: ctx.submenuOpenedBy;
+			},
+		},
+		actions: {
+			openMenuOnHover() {
+				const { type, overlayOpenedBy } = getContext();
+				if (
+					type === 'submenu' &&
+					// Only open on hover if the overlay is closed.
+					Object.values( overlayOpenedBy || {} ).filter( Boolean )
+						.length === 0
+				)
+					actions.openMenu( 'hover' );
+			},
+			closeMenuOnHover() {
+				actions.closeMenu( 'hover' );
+			},
+			openMenuOnClick() {
+				const ctx = getContext();
+				const { ref } = getElement();
 				ctx.previousFocus = ref;
 				actions.openMenu( 'click' );
-			}
-		},
-		handleMenuKeydown( event ) {
-			const { type, firstFocusableElement, lastFocusableElement } =
-				getContext();
-			if ( state.menuOpenedBy.click ) {
-				// If Escape close the menu.
-				if ( event?.key === 'Escape' ) {
+			},
+			closeMenuOnClick() {
+				actions.closeMenu( 'click' );
+				actions.closeMenu( 'focus' );
+			},
+			openMenuOnFocus() {
+				actions.openMenu( 'focus' );
+			},
+			toggleMenuOnClick() {
+				const ctx = getContext();
+				const { ref } = getElement();
+				// Safari won't send focus to the clicked element, so we need to manually place it: https://bugs.webkit.org/show_bug.cgi?id=22261
+				if ( window.document.activeElement !== ref ) ref.focus();
+				const { menuOpenedBy } = state;
+				if ( menuOpenedBy.click || menuOpenedBy.focus ) {
 					actions.closeMenu( 'click' );
 					actions.closeMenu( 'focus' );
-					return;
+				} else {
+					ctx.previousFocus = ref;
+					actions.openMenu( 'click' );
 				}
+			},
+			handleMenuKeydown( event ) {
+				const { type, firstFocusableElement, lastFocusableElement } =
+					getContext();
+				if ( state.menuOpenedBy.click ) {
+					// If Escape close the menu.
+					if ( event?.key === 'Escape' ) {
+						actions.closeMenu( 'click' );
+						actions.closeMenu( 'focus' );
+						return;
+					}
 
-				// Trap focus if it is an overlay (main menu).
-				if ( type === 'overlay' && event.key === 'Tab' ) {
-					// If shift + tab it change the direction.
-					if (
-						event.shiftKey &&
-						window.document.activeElement === firstFocusableElement
-					) {
-						event.preventDefault();
-						lastFocusableElement.focus();
-					} else if (
-						! event.shiftKey &&
-						window.document.activeElement === lastFocusableElement
-					) {
-						event.preventDefault();
-						firstFocusableElement.focus();
+					// Trap focus if it is an overlay (main menu).
+					if ( type === 'overlay' && event.key === 'Tab' ) {
+						// If shift + tab it change the direction.
+						if (
+							event.shiftKey &&
+							window.document.activeElement ===
+								firstFocusableElement
+						) {
+							event.preventDefault();
+							lastFocusableElement.focus();
+						} else if (
+							! event.shiftKey &&
+							window.document.activeElement ===
+								lastFocusableElement
+						) {
+							event.preventDefault();
+							firstFocusableElement.focus();
+						}
 					}
 				}
-			}
-		},
-		handleMenuFocusout( event ) {
-			const { modal } = getContext();
-			// 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.
+			},
+			handleMenuFocusout( event ) {
+				const { modal } = getContext();
+				// 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.
 
-			// The event.relatedTarget is null when something outside the navigation menu is clicked. This is only necessary for Safari.
-			if (
-				event.relatedTarget === null ||
-				( ! modal?.contains( event.relatedTarget ) &&
-					event.target !== window.document.activeElement )
-			) {
-				actions.closeMenu( 'click' );
-				actions.closeMenu( 'focus' );
-			}
-		},
+				// The event.relatedTarget is null when something outside the navigation menu is clicked. This is only necessary for Safari.
+				if (
+					event.relatedTarget === null ||
+					( ! modal?.contains( event.relatedTarget ) &&
+						event.target !== window.document.activeElement )
+				) {
+					actions.closeMenu( 'click' );
+					actions.closeMenu( 'focus' );
+				}
+			},
 
-		openMenu( menuOpenedOn = 'click' ) {
-			const { type } = getContext();
-			state.menuOpenedBy[ menuOpenedOn ] = true;
-			if ( type === 'overlay' ) {
-				// Add a `has-modal-open` class to the <html> root.
-				document.documentElement.classList.add( 'has-modal-open' );
-			}
-		},
+			openMenu( menuOpenedOn = 'click' ) {
+				const { type } = getContext();
+				state.menuOpenedBy[ menuOpenedOn ] = true;
+				if ( type === 'overlay' ) {
+					// Add a `has-modal-open` class to the <html> root.
+					document.documentElement.classList.add( 'has-modal-open' );
+				}
+			},
 
-		closeMenu( menuClosedOn = 'click' ) {
-			const ctx = getContext();
-			state.menuOpenedBy[ menuClosedOn ] = false;
-			// Check if the menu is still open or not.
-			if ( ! state.isMenuOpen ) {
-				if ( ctx.modal?.contains( window.document.activeElement ) ) {
-					ctx.previousFocus?.focus();
+			closeMenu( menuClosedOn = 'click' ) {
+				const ctx = getContext();
+				state.menuOpenedBy[ menuClosedOn ] = false;
+				// Check if the menu is still open or not.
+				if ( ! state.isMenuOpen ) {
+					if (
+						ctx.modal?.contains( window.document.activeElement )
+					) {
+						ctx.previousFocus?.focus();
+					}
+					ctx.modal = null;
+					ctx.previousFocus = null;
+					if ( ctx.type === 'overlay' ) {
+						document.documentElement.classList.remove(
+							'has-modal-open'
+						);
+					}
 				}
-				ctx.modal = null;
-				ctx.previousFocus = null;
-				if ( ctx.type === 'overlay' ) {
-					document.documentElement.classList.remove(
-						'has-modal-open'
-					);
+			},
+		},
+		callbacks: {
+			initMenu() {
+				const ctx = getContext();
+				const { ref } = getElement();
+				if ( state.isMenuOpen ) {
+					const focusableElements =
+						ref.querySelectorAll( focusableSelectors );
+					ctx.modal = ref;
+					ctx.firstFocusableElement = focusableElements[ 0 ];
+					ctx.lastFocusableElement =
+						focusableElements[ focusableElements.length - 1 ];
 				}
-			}
-		},
-	},
-	callbacks: {
-		initMenu() {
-			const ctx = getContext();
-			const { ref } = getElement();
-			if ( state.isMenuOpen ) {
-				const focusableElements =
-					ref.querySelectorAll( focusableSelectors );
-				ctx.modal = ref;
-				ctx.firstFocusableElement = focusableElements[ 0 ];
-				ctx.lastFocusableElement =
-					focusableElements[ focusableElements.length - 1 ];
-			}
-		},
-		focusFirstElement() {
-			const { ref } = getElement();
-			if ( state.isMenuOpen ) {
-				const focusableElements =
-					ref.querySelectorAll( focusableSelectors );
-				focusableElements?.[ 0 ]?.focus();
-			}
-		},
-		initNav() {
-			const context = getContext();
-			const mediaQuery = window.matchMedia(
-				`(max-width: ${ NAVIGATION_MOBILE_COLLAPSE })`
-			);
+			},
+			focusFirstElement() {
+				const { ref } = getElement();
+				if ( state.isMenuOpen ) {
+					const focusableElements =
+						ref.querySelectorAll( focusableSelectors );
+					focusableElements?.[ 0 ]?.focus();
+				}
+			},
+			initNav() {
+				const context = getContext();
+				const mediaQuery = window.matchMedia(
+					`(max-width: ${ NAVIGATION_MOBILE_COLLAPSE })`
+				);
 
-			// Run once to set the initial state.
-			context.isCollapsed = mediaQuery.matches;
+				// Run once to set the initial state.
+				context.isCollapsed = mediaQuery.matches;
 
-			function handleCollapse( event ) {
-				context.isCollapsed = event.matches;
-			}
+				function handleCollapse( event ) {
+					context.isCollapsed = event.matches;
+				}
 
-			// Run on resize to update the state.
-			mediaQuery.addEventListener( 'change', handleCollapse );
+				// Run on resize to update the state.
+				mediaQuery.addEventListener( 'change', handleCollapse );
 
-			// Remove the listener when the component is unmounted.
-			return () => {
-				mediaQuery.removeEventListener( 'change', handleCollapse );
-			};
+				// Remove the listener when the component is unmounted.
+				return () => {
+					mediaQuery.removeEventListener( 'change', handleCollapse );
+				};
+			},
 		},
 	},
-} );
+	{ lock: true }
+);

package/src/navigation-link/block.json

@@ -5,6 +5,11 @@
 	"title": "Custom Link",
 	"category": "design",
 	"parent": [ "core/navigation" ],
+	"allowedBlocks": [
+		"core/navigation-link",
+		"core/navigation-submenu",
+		"core/page-list"
+	],
 	"description": "Add a page, link, or another item to your navigation.",
 	"textdomain": "default",
 	"attributes": {
@@ -72,7 +77,10 @@
 				"fontSize": true
 			}
 		},
-		"renaming": false
+		"renaming": false,
+		"interactivity": {
+			"clientNavigation": true
+		}
 	},
 	"editorStyle": "wp-block-navigation-link-editor",
 	"style": "wp-block-navigation-link"

package/src/navigation-link/edit.js

@@ -45,6 +45,8 @@ import { LinkUI } from './link-ui';
 import { updateAttributes } from './update-attributes';
 import { getColors } from '../navigation/edit/utils';
 
+const DEFAULT_BLOCK = { name: 'core/navigation-link' };
+
 /**
  * A React hook to determine if it's dragging within the target element.
  *
@@ -355,22 +357,12 @@ export default function NavigationLinkEdit( {
 		onKeyDown,
 	} );
 
-	const ALLOWED_BLOCKS = [
-		'core/navigation-link',
-		'core/navigation-submenu',
-		'core/page-list',
-	];
-	const DEFAULT_BLOCK = {
-		name: 'core/navigation-link',
-	};
-
 	const innerBlocksProps = useInnerBlocksProps(
 		{
 			...blockProps,
 			className: 'remove-outline', // Remove the outline from the inner blocks container.
 		},
 		{
-			allowedBlocks: ALLOWED_BLOCKS,
 			defaultBlock: DEFAULT_BLOCK,
 			directInsert: true,
 			renderAppender: false,
@@ -571,7 +563,14 @@ export default function NavigationLinkEdit( {
 						<LinkUI
 							clientId={ clientId }
 							link={ attributes }
-							onClose={ () => setIsLinkOpen( false ) }
+							onClose={ () => {
+								// If there is no link then remove the auto-inserted block.
+								// This avoids empty blocks which can provided a poor UX.
+								if ( ! url ) {
+									// Need to handle refocusing the Nav block or the inserter?
+									onReplace( [] );
+								}
+							} }
 							anchor={ popoverAnchor }
 							onRemove={ removeLink }
 							onChange={ ( updatedValue ) => {

package/src/navigation-link/index.php

@@ -132,6 +132,10 @@ function block_core_navigation_link_maybe_urldecode( $url ) {
 	$query_params   = wp_parse_args( $query );
 
 	foreach ( $query_params as $query_param ) {
+		$can_query_param_be_encoded = is_string( $query_param ) && ! empty( $query_param );
+		if ( ! $can_query_param_be_encoded ) {
+			continue;
+		}
 		if ( rawurldecode( $query_param ) !== $query_param ) {
 			$is_url_encoded = true;
 			break;
@@ -323,70 +327,40 @@ function build_variation_for_navigation_link( $entity, $kind ) {
 }
 
 /**
- * Register a variation for a post type / taxonomy for the navigation link block.
+ * Filters the registered variations for a block type.
+ * Returns the dynamically built variations for all post-types and taxonomies.
  *
- * @param array $variation Variation array from build_variation_for_navigation_link.
- * @return void
- */
-function block_core_navigation_link_register_variation( $variation ) {
-	// Directly set the variations on the registered block type
-	// because there's no server side registration for variations (see #47170).
-	$navigation_block_type = WP_Block_Type_Registry::get_instance()->get_registered( 'core/navigation-link' );
-	// If the block is not registered yet, bail early.
-	// Variation will be registered in register_block_core_navigation_link then.
-	if ( ! $navigation_block_type ) {
-		return;
-	}
-
-	$navigation_block_type->variations = array_merge(
-		$navigation_block_type->variations,
-		array( $variation )
-	);
-}
-
-/**
- * Unregister a variation for a post type / taxonomy for the navigation link block.
+ * @since 6.5.0
  *
- * @param string $name Name of the post type / taxonomy (which was used as variation name).
- * @return void
+ * @param array         $variations Array of registered variations for a block type.
+ * @param WP_Block_Type $block_type The full block type object.
  */
-function block_core_navigation_link_unregister_variation( $name ) {
-	// Directly get the variations from the registered block type
-	// because there's no server side (un)registration for variations (see #47170).
-	$navigation_block_type = WP_Block_Type_Registry::get_instance()->get_registered( 'core/navigation-link' );
-	// If the block is not registered (yet), there's no need to remove a variation.
-	if ( ! $navigation_block_type || empty( $navigation_block_type->variations ) ) {
-		return;
+function block_core_navigation_link_filter_variations( $variations, $block_type ) {
+	if ( 'core/navigation-link' !== $block_type->name ) {
+		return $variations;
 	}
-	$variations = $navigation_block_type->variations;
-	// Search for the variation and remove it from the array.
-	foreach ( $variations as $i => $variation ) {
-		if ( $variation['name'] === $name ) {
-			unset( $variations[ $i ] );
-			break;
-		}
-	}
-	// Reindex array after removing one variation.
-	$navigation_block_type->variations = array_values( $variations );
+
+	$generated_variations = block_core_navigation_link_build_variations();
+	return array_merge( $variations, $generated_variations );
 }
 
 /**
- * Register the navigation link block.
  * Returns an array of variations for the navigation link block.
  *
+ * @since 6.5.0
+ *
  * @return array
  */
-function build_navigation_link_block_variations() {
-	// This will only handle post types and taxonomies registered until this point (init on priority 9).
-	// See action hooks below for other post types and taxonomies.
-	// See https://github.com/WordPress/gutenberg/issues/53826 for details.
+function block_core_navigation_link_build_variations() {
 	$post_types = get_post_types( array( 'show_in_nav_menus' => true ), 'objects' );
 	$taxonomies = get_taxonomies( array( 'show_in_nav_menus' => true ), 'objects' );
 
-	// Use two separate arrays as a way to order the variations in the UI.
-	// Known variations (like Post Link and Page Link) are added to the
-	// `built_ins` array. Variations for custom post types and taxonomies are
-	// added to the `variations` array and will always appear after `built-ins.
+	/*
+	 * Use two separate arrays as a way to order the variations in the UI.
+	 * Known variations (like Post Link and Page Link) are added to the
+	 * `built_ins` array. Variations for custom post types and taxonomies are
+	 * added to the `variations` array and will always appear after `built-ins.
+	 */
 	$built_ins  = array();
 	$variations = array();
 
@@ -415,76 +389,23 @@ function build_navigation_link_block_variations() {
 }
 
 /**
- * Register the navigation link block.
+ * Registers the navigation link block.
  *
- * @uses render_block_core_navigation()
+ * @uses render_block_core_navigation_link()
+ * @uses build_navigation_link_block_variations()
  * @throws WP_Error An WP_Error exception parsing the block definition.
  */
 function register_block_core_navigation_link() {
 	register_block_type_from_metadata(
 		__DIR__ . '/navigation-link',
 		array(
-			'render_callback'    => 'render_block_core_navigation_link',
-			'variation_callback' => 'build_navigation_link_block_variations',
+			'render_callback' => 'render_block_core_navigation_link',
 		)
 	);
 }
 add_action( 'init', 'register_block_core_navigation_link' );
-// Register actions for all post types and taxonomies, to add variations when they are registered.
-// All post types/taxonomies registered before register_block_core_navigation_link, will be handled by that function.
-add_action( 'registered_post_type', 'block_core_navigation_link_register_post_type_variation', 10, 2 );
-add_action( 'registered_taxonomy', 'block_core_navigation_link_register_taxonomy_variation', 10, 3 );
-// Handle unregistering of post types and taxonomies and remove the variations.
-add_action( 'unregistered_post_type', 'block_core_navigation_link_unregister_post_type_variation' );
-add_action( 'unregistered_taxonomy', 'block_core_navigation_link_unregister_taxonomy_variation' );
-
 /**
- * Register custom post type variations for navigation link on post type registration
- * Handles all post types registered after the block is registered in register_navigation_link_post_type_variations
- *
- * @param string       $post_type The post type name passed from registered_post_type action hook.
- * @param WP_Post_Type $post_type_object The post type object passed from registered_post_type.
- * @return void
+ * Creates all variations for post types / taxonomies dynamically (= each time when variations are requested).
+ * Do not use variation_callback, to also account for unregistering post types/taxonomies later on.
  */
-function block_core_navigation_link_register_post_type_variation( $post_type, $post_type_object ) {
-	if ( $post_type_object->show_in_nav_menus ) {
-		$variation = build_variation_for_navigation_link( $post_type_object, 'post-type' );
-		block_core_navigation_link_register_variation( $variation );
-	}
-}
-
-/**
- * Register a custom taxonomy variation for navigation link on taxonomy registration
- * Handles all taxonomies registered after the block is registered in register_navigation_link_post_type_variations
- *
- * @param string       $taxonomy Taxonomy slug.
- * @param array|string $object_type Object type or array of object types.
- * @param array        $args Array of taxonomy registration arguments.
- * @return void
- */
-function block_core_navigation_link_register_taxonomy_variation( $taxonomy, $object_type, $args ) {
-	if ( isset( $args['show_in_nav_menus'] ) && $args['show_in_nav_menus'] ) {
-		$variation = build_variation_for_navigation_link( (object) $args, 'post-type' );
-		block_core_navigation_link_register_variation( $variation );
-	}
-}
-
-/**
- * Unregisters a custom post type variation for navigation link on post type unregistration.
- *
- * @param string $post_type The post type name passed from unregistered_post_type action hook.
- * @return void
- */
-function block_core_navigation_link_unregister_post_type_variation( $post_type ) {
-	block_core_navigation_link_unregister_variation( $post_type );
-}
-
-/**
- * Unregisters a custom taxonomy variation for navigation link on taxonomy unregistration.
- *
- * @param string $taxonomy The taxonomy name passed from unregistered_taxonomy action hook.
- * @return void
- */
-function block_core_navigation_link_unregister_taxonomy_variation( $taxonomy ) {
-	block_core_navigation_link_unregister_variation( $taxonomy );
-}
+add_action( 'get_block_type_variations', 'block_core_navigation_link_filter_variations', 10, 2 );