@wordpress/block-library 9.32.0 → 9.33.1-next.ff1cebbba.0

package/src/list/style.scss

@@ -1,3 +1,5 @@
+@use "@wordpress/base-styles/variables" as *;
+
 ol,
 ul {
 	box-sizing: border-box;

package/src/media-text/block.json

@@ -90,9 +90,6 @@
 		"focalPoint": {
 			"type": "object"
 		},
-		"allowedBlocks": {
-			"type": "array"
-		},
 		"useFeaturedImage": {
 			"type": "boolean",
 			"default": false
@@ -143,7 +140,8 @@
 		},
 		"interactivity": {
 			"clientNavigation": true
-		}
+		},
+		"allowedBlocks": true
 	},
 	"editorStyle": "wp-block-media-text-editor",
 	"style": "wp-block-media-text"

package/src/media-text/style.scss

@@ -1,3 +1,5 @@
+@use "@wordpress/base-styles/breakpoints" as *;
+
 .wp-block-media-text {
 	// This block's direction should not be manipulated by rtl, as the mediaPosition control does.
 	/*!rtl:begin:ignore*/

package/src/more/editor.scss

@@ -1,3 +1,6 @@
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/variables" as *;
+
 .block-editor-block-list__block[data-type="core/more"] {
 	max-width: 100%;
 	text-align: center;

package/src/navigation/edit/inner-blocks.js

@@ -26,6 +26,7 @@ export default function NavigationInnerBlocks( {
 		isImmediateParentOfSelectedBlock,
 		selectedBlockHasChildren,
 		isSelected,
+		hasSelectedDescendant,
 	} = useSelect(
 		( select ) => {
 			const {
@@ -41,6 +42,7 @@ export default function NavigationInnerBlocks( {
 					false
 				),
 				selectedBlockHasChildren: !! getBlockCount( selectedBlockId ),
+				hasSelectedDescendant: hasSelectedInnerBlock( clientId, true ),
 
 				// This prop is already available but computing it here ensures it's
 				// fresh compared to isImmediateParentOfSelectedBlock.
@@ -96,6 +98,7 @@ export default function NavigationInnerBlocks( {
 				isSelected ||
 				( isImmediateParentOfSelectedBlock &&
 					! selectedBlockHasChildren ) ||
+				hasSelectedDescendant ||
 				// Show the appender while dragging to allow inserting element between item and the appender.
 				parentOrChildHasSelection
 					? InnerBlocks.ButtonBlockAppender

package/src/navigation/edit/menu-inspector-controls.js

@@ -23,8 +23,11 @@ import { unlock } from '../../lock-unlock';
 import DeletedNavigationWarning from './deleted-navigation-warning';
 import useNavigationMenu from '../use-navigation-menu';
 import LeafMoreMenu from './leaf-more-menu';
-import { updateAttributes } from '../../navigation-link/update-attributes';
-import { LinkUI } from '../../navigation-link/link-ui';
+import {
+	LinkUI,
+	updateAttributes,
+	useEntityBinding,
+} from '../../navigation-link/shared';
 
 const actionLabel =
 	/* translators: %s: The name of a menu. */ __( "Switch to '%s'" );
@@ -44,6 +47,12 @@ function AdditionalBlockContent( { block, insertedBlock, setInsertedBlock } ) {
 	const blockWasJustInserted = insertedBlock?.clientId === block.clientId;
 	const showLinkControls = supportsLinkControls && blockWasJustInserted;
 
+	// Get binding utilities for the inserted block
+	const { createBinding, clearBinding } = useEntityBinding( {
+		clientId: insertedBlock?.clientId,
+		attributes: insertedBlock?.attributes || {},
+	} );
+
 	if ( ! showLinkControls ) {
 		return null;
 	}
@@ -101,11 +110,22 @@ function AdditionalBlockContent( { block, insertedBlock, setInsertedBlock } ) {
 				cleanupInsertedBlock();
 			} }
 			onChange={ ( updatedValue ) => {
-				updateAttributes(
+				// updateAttributes determines the final state and returns metadata
+				const { isEntityLink } = updateAttributes(
 					updatedValue,
 					setInsertedBlockAttributes( insertedBlock?.clientId ),
 					insertedBlock?.attributes
 				);
+
+				// Handle URL binding based on the final computed state
+				// Only create bindings for entity links (posts, pages, taxonomies)
+				// Never create bindings for custom links (manual URLs)
+				if ( isEntityLink ) {
+					createBinding();
+				} else {
+					clearBinding();
+				}
+
 				setInsertedBlock( null );
 			} }
 		/>

package/src/navigation/editor.scss

@@ -1,3 +1,7 @@
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/mixins" as *;
+@use "@wordpress/base-styles/variables" as *;
+
 /**
  * Editor only CSS.
  */

package/src/navigation/style.scss

@@ -1,3 +1,6 @@
+@use "@wordpress/base-styles/mixins" as *;
+@use "@wordpress/base-styles/variables" as *;
+
 // Navigation block and menu item styles.
 // These styles also affect the Page List block when used inside your navigation block.
 //

package/src/navigation-link/edit.js

@@ -22,7 +22,7 @@ import {
 	useBlockEditingMode,
 } from '@wordpress/block-editor';
 import { isURL, prependHTTP } from '@wordpress/url';
-import { useState, useEffect, useRef } from '@wordpress/element';
+import { useState, useEffect, useRef, useCallback } from '@wordpress/element';
 import { decodeEntities } from '@wordpress/html-entities';
 import { link as linkIcon, addSubmenu } from '@wordpress/icons';
 import { store as coreStore } from '@wordpress/core-data';
@@ -31,10 +31,8 @@ import { useMergeRefs, usePrevious } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
-import { LinkUI } from './link-ui';
-import { updateAttributes } from './update-attributes';
 import { getColors } from '../navigation/edit/utils';
-import { Controls } from './shared';
+import { Controls, LinkUI, updateAttributes, useEntityBinding } from './shared';
 
 const DEFAULT_BLOCK = { name: 'core/navigation-link' };
 const NESTING_BLOCK_NAMES = [
@@ -161,12 +159,6 @@ function getMissingText( type ) {
 	return missingText;
 }
 
-/*
- * Warning, this duplicated in
- * packages/block-library/src/navigation-submenu/edit.js
- * Consider reusing this components for both blocks.
- */
-
 export default function NavigationLinkEdit( {
 	attributes,
 	isSelected,
@@ -177,19 +169,16 @@ export default function NavigationLinkEdit( {
 	context,
 	clientId,
 } ) {
-	const { id, label, type, url, description, kind } = attributes;
+	const { id, label, type, url, description, kind, metadata } = attributes;
 	const { maxNestingLevel } = context;
 
 	const {
 		replaceBlock,
 		__unstableMarkNextChangeAsNotPersistent,
 		selectBlock,
-		selectPreviousBlock,
 	} = useDispatch( blockEditorStore );
 	// Have the link editing ui open on mount when lacking a url and selected.
 	const [ isLinkOpen, setIsLinkOpen ] = useState( isSelected && ! url );
-	// Store what element opened the popover, so we know where to return focus to (toolbar button vs navigation link text)
-	const [ openedBy, setOpenedBy ] = useState( null );
 	// Use internal state instead of a ref to make sure that the component
 	// re-renders when the popover's anchor updates.
 	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
@@ -199,11 +188,7 @@ export default function NavigationLinkEdit( {
 	const ref = useRef();
 	const linkUIref = useRef();
 	const prevUrl = usePrevious( url );
-
-	// Change the `label` and `url` using inspector causes RichText to change focus.
-	// This is a workaround to keep the focus on the field when it's focused we don't render the RichText.
-	// See: https://github.com/WordPress/gutenberg/pull/61374.
-	const [ isEditingControl, setIsEditingControl ] = useState( false );
+	const isNewLink = useRef( ! url );
 
 	const {
 		isAtMaxNesting,
@@ -211,6 +196,7 @@ export default function NavigationLinkEdit( {
 		isParentOfSelectedBlock,
 		hasChildren,
 		validateLinkStatus,
+		parentBlockClientId,
 	} = useSelect(
 		( select ) => {
 			const {
@@ -222,8 +208,8 @@ export default function NavigationLinkEdit( {
 				getSelectedBlockClientId,
 			} = select( blockEditorStore );
 			const rootClientId = getBlockRootClientId( clientId );
-			const isTopLevel =
-				getBlockName( rootClientId ) === 'core/navigation';
+			const parentBlockName = getBlockName( rootClientId );
+			const isTopLevel = parentBlockName === 'core/navigation';
 			const selectedBlockClientId = getSelectedBlockClientId();
 			const rootNavigationClientId = isTopLevel
 				? rootClientId
@@ -232,6 +218,12 @@ export default function NavigationLinkEdit( {
 						'core/navigation'
 				  )[ 0 ];
 
+			// Get the immediate parent - if it's a submenu, use it; otherwise use the navigation block
+			const parentBlockId =
+				parentBlockName === 'core/navigation-submenu'
+					? rootClientId
+					: rootNavigationClientId;
+
 			// Enable when the root Navigation block is selected or any of its inner blocks.
 			const enableLinkStatusValidation =
 				selectedBlockClientId === rootNavigationClientId ||
@@ -248,12 +240,19 @@ export default function NavigationLinkEdit( {
 				),
 				hasChildren: !! getBlockCount( clientId ),
 				validateLinkStatus: enableLinkStatusValidation,
+				parentBlockClientId: parentBlockId,
 			};
 		},
 		[ clientId, maxNestingLevel ]
 	);
 	const { getBlocks } = useSelect( blockEditorStore );
 
+	// URL binding logic
+	const { clearBinding, createBinding } = useEntityBinding( {
+		clientId,
+		attributes,
+	} );
+
 	const [ isInvalid, isDraft ] = useIsInvalidLink(
 		kind,
 		type,
@@ -264,7 +263,7 @@ export default function NavigationLinkEdit( {
 	/**
 	 * Transform to submenu block.
 	 */
-	const transformToSubmenu = () => {
+	const transformToSubmenu = useCallback( () => {
 		let innerBlocks = getBlocks( clientId );
 		if ( innerBlocks.length === 0 ) {
 			innerBlocks = [ createBlock( 'core/navigation-link' ) ];
@@ -276,7 +275,18 @@ export default function NavigationLinkEdit( {
 			innerBlocks
 		);
 		replaceBlock( clientId, newSubmenu );
-	};
+	}, [ getBlocks, clientId, selectBlock, replaceBlock, attributes ] );
+
+	// On mount, if this is a new link without a URL and it's selected,
+	// select the parent block (submenu or navigation) instead to keep the appender visible.
+	// This helps us return focus to the appender if the user closes the link ui without creating a link.
+	// If we leave focus on this block, then when we close the link without creating a link, focus will
+	// be lost during the new block selection process.
+	useEffect( () => {
+		if ( isNewLink.current && isSelected && ! url ) {
+			selectBlock( parentBlockClientId );
+		}
+	}, [] ); // eslint-disable-line react-hooks/exhaustive-deps
 
 	useEffect( () => {
 		// If block has inner blocks, transform to Submenu.
@@ -286,7 +296,11 @@ export default function NavigationLinkEdit( {
 			__unstableMarkNextChangeAsNotPersistent();
 			transformToSubmenu();
 		}
-	}, [ hasChildren ] );
+	}, [
+		hasChildren,
+		__unstableMarkNextChangeAsNotPersistent,
+		transformToSubmenu,
+	] );
 
 	// If the LinkControl popover is open and the URL has changed, close the LinkControl and focus the label text.
 	useEffect( () => {
@@ -356,7 +370,6 @@ export default function NavigationLinkEdit( {
 			// If this link is a child of a parent submenu item, the parent submenu item event will also open, closing this popover
 			event.stopPropagation();
 			setIsLinkOpen( true );
-			setOpenedBy( ref.current );
 		}
 	}
 
@@ -395,7 +408,6 @@ export default function NavigationLinkEdit( {
 	if ( ! url || isInvalid || isDraft ) {
 		blockProps.onClick = () => {
 			setIsLinkOpen( true );
-			setOpenedBy( ref.current );
 		};
 	}
 
@@ -418,9 +430,8 @@ export default function NavigationLinkEdit( {
 						icon={ linkIcon }
 						title={ __( 'Link' ) }
 						shortcut={ displayShortcut.primary( 'k' ) }
-						onClick={ ( event ) => {
+						onClick={ () => {
 							setIsLinkOpen( true );
-							setOpenedBy( event.currentTarget );
 						} }
 					/>
 					{ ! isAtMaxNesting && (
@@ -433,61 +444,58 @@ export default function NavigationLinkEdit( {
 					) }
 				</ToolbarGroup>
 			</BlockControls>
-			{ /* Warning, this duplicated in packages/block-library/src/navigation-submenu/edit.js */ }
 			<InspectorControls>
 				<Controls
 					attributes={ attributes }
 					setAttributes={ setAttributes }
-					setIsEditingControl={ setIsEditingControl }
+					clientId={ clientId }
 				/>
 			</InspectorControls>
 			<div { ...blockProps }>
 				{ /* eslint-disable jsx-a11y/anchor-is-valid */ }
 				<a className={ classes }>
 					{ /* eslint-enable */ }
-					{ ! url && ! isEditingControl ? (
+					{ ! url && ! metadata?.bindings?.url ? (
 						<div className="wp-block-navigation-link__placeholder-text">
 							<span>{ missingText }</span>
 						</div>
 					) : (
 						<>
-							{ ! isInvalid &&
-								! isDraft &&
-								! isEditingControl && (
-									<>
-										<RichText
-											ref={ ref }
-											identifier="label"
-											className="wp-block-navigation-item__label"
-											value={ label }
-											onChange={ ( labelValue ) =>
-												setAttributes( {
-													label: labelValue,
-												} )
-											}
-											onMerge={ mergeBlocks }
-											onReplace={ onReplace }
-											__unstableOnSplitAtEnd={ () =>
-												insertBlocksAfter(
-													createBlock(
-														'core/navigation-link'
-													)
+							{ ! isInvalid && ! isDraft && (
+								<>
+									<RichText
+										ref={ ref }
+										identifier="label"
+										className="wp-block-navigation-item__label"
+										value={ label }
+										onChange={ ( labelValue ) =>
+											setAttributes( {
+												label: labelValue,
+											} )
+										}
+										onMerge={ mergeBlocks }
+										onReplace={ onReplace }
+										__unstableOnSplitAtEnd={ () =>
+											insertBlocksAfter(
+												createBlock(
+													'core/navigation-link'
 												)
-											}
-											aria-label={ __(
-												'Navigation link text'
-											) }
-											placeholder={ itemLabelPlaceholder }
-											withoutInteractiveFormatting
-										/>
-										{ description && (
-											<span className="wp-block-navigation-item__description">
-												{ description }
-											</span>
+											)
+										}
+										aria-label={ __(
+											'Navigation link text'
 										) }
-									</>
-								) }
-							{ ( isInvalid || isDraft || isEditingControl ) && (
+										placeholder={ itemLabelPlaceholder }
+										withoutInteractiveFormatting
+									/>
+									{ description && (
+										<span className="wp-block-navigation-item__description">
+											{ description }
+										</span>
+									) }
+								</>
+							) }
+							{ ( isInvalid || isDraft ) && (
 								<div
 									className={ clsx(
 										'wp-block-navigation-link__placeholder-text',
@@ -522,48 +530,33 @@ export default function NavigationLinkEdit( {
 							clientId={ clientId }
 							link={ attributes }
 							onClose={ () => {
+								setIsLinkOpen( false );
 								// If there is no link then remove the auto-inserted block.
 								// This avoids empty blocks which can provided a poor UX.
 								if ( ! url ) {
-									// Fixes https://github.com/WordPress/gutenberg/issues/61361
-									// There's a chance we're closing due to the user selecting the browse all button.
-									// Only move focus if the focus is still within the popover ui. If it's not within
-									// the popover, it's because something has taken the focus from the popover, and
-									// we don't want to steal it back.
-									if (
-										linkUIref.current.contains(
-											window.document.activeElement
-										)
-									) {
-										// Select the previous block to keep focus nearby
-										selectPreviousBlock( clientId, true );
-									}
-
-									// Remove the link.
 									onReplace( [] );
-									return;
-								}
-
-								setIsLinkOpen( false );
-								if ( openedBy ) {
-									openedBy.focus();
-									setOpenedBy( null );
-								} else if ( ref.current ) {
-									// select the ref when adding a new link
-									ref.current.focus();
-								} else {
-									// Fallback
-									selectPreviousBlock( clientId, true );
+								} else if ( isNewLink.current ) {
+									// If we just created a new link, select it
+									selectBlock( clientId );
 								}
 							} }
 							anchor={ popoverAnchor }
 							onRemove={ removeLink }
 							onChange={ ( updatedValue ) => {
-								updateAttributes(
+								const { isEntityLink } = updateAttributes(
 									updatedValue,
 									setAttributes,
 									attributes
 								);
+
+								// Handle URL binding based on the final computed state
+								// Only create bindings for entity links (posts, pages, taxonomies)
+								// Never create bindings for custom links (manual URLs)
+								if ( isEntityLink ) {
+									createBinding();
+								} else {
+									clearBinding();
+								}
 							} }
 						/>
 					) }

package/src/navigation-link/editor.scss

@@ -1,3 +1,7 @@
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/variables" as *;
+@use "@wordpress/base-styles/z-index" as *;
+
 /**
  * Appender
  */

package/src/navigation-link/index.php

@@ -202,6 +202,20 @@ function render_block_core_navigation_link( $attributes, $content, $block ) {
 		return '';
 	}
 
+	// Resolve URL binding if present
+	$url = $attributes['url'] ?? '';
+	if ( isset( $attributes['metadata']['bindings']['url']['source'] ) ) {
+		$binding = $attributes['metadata']['bindings']['url'];
+		$source  = get_block_bindings_source( $binding['source'] );
+		if ( $source ) {
+			$source_args  = $binding['args'] ?? array();
+			$resolved_url = $source->get_value( $source_args, $block, 'url' );
+			if ( $resolved_url ) {
+				$url = $resolved_url;
+			}
+		}
+	}
+
 	$font_sizes      = block_core_navigation_link_build_css_font_sizes( $block->context );
 	$classes         = array_merge(
 		$font_sizes['css_classes']
@@ -213,9 +227,9 @@ function render_block_core_navigation_link( $attributes, $content, $block ) {
 	$kind        = empty( $attributes['kind'] ) ? 'post_type' : str_replace( '-', '_', $attributes['kind'] );
 	$is_active   = ! empty( $attributes['id'] ) && get_queried_object_id() === (int) $attributes['id'] && ! empty( get_queried_object()->$kind );
 
-	if ( is_post_type_archive() && ! empty( $attributes['url'] ) ) {
+	if ( is_post_type_archive() && ! empty( $url ) ) {
 		$queried_archive_link = get_post_type_archive_link( get_queried_object()->name );
-		if ( $attributes['url'] === $queried_archive_link ) {
+		if ( $url === $queried_archive_link ) {
 			$is_active = true;
 		}
 	}
@@ -231,8 +245,8 @@ function render_block_core_navigation_link( $attributes, $content, $block ) {
 		'<a class="wp-block-navigation-item__content" ';
 
 	// Start appending HTML attributes to anchor tag.
-	if ( isset( $attributes['url'] ) ) {
-		$html .= ' href="' . esc_url( block_core_navigation_link_maybe_urldecode( $attributes['url'] ) ) . '"';
+	if ( ! empty( $url ) ) {
+		$html .= ' href="' . esc_url( block_core_navigation_link_maybe_urldecode( $url ) ) . '"';
 	}
 
 	if ( $is_active ) {

package/src/navigation-link/link-ui/block-inserter.js

@@ -0,0 +1,65 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import {
+	store as blockEditorStore,
+	privateApis as blockEditorPrivateApis,
+} from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import DialogWrapper from './dialog-wrapper';
+import { unlock } from '../../lock-unlock';
+
+const { PrivateQuickInserter: QuickInserter } = unlock(
+	blockEditorPrivateApis
+);
+
+/**
+ * Component for inserting blocks within the Navigation Link UI.
+ *
+ * @param {Object}   props               Component props.
+ * @param {string}   props.clientId      Client ID of the navigation link block.
+ * @param {Function} props.onBack        Callback when user wants to go back.
+ * @param {Function} props.onBlockInsert Callback when a block is inserted.
+ */
+function LinkUIBlockInserter( { clientId, onBack, onBlockInsert } ) {
+	const { rootBlockClientId } = useSelect(
+		( select ) => {
+			const { getBlockRootClientId } = select( blockEditorStore );
+
+			return {
+				rootBlockClientId: getBlockRootClientId( clientId ),
+			};
+		},
+		[ clientId ]
+	);
+
+	if ( ! clientId ) {
+		return null;
+	}
+
+	return (
+		<DialogWrapper
+			className="link-ui-block-inserter"
+			title={ __( 'Add block' ) }
+			description={ __( 'Choose a block to add to your Navigation.' ) }
+			onBack={ onBack }
+		>
+			<QuickInserter
+				rootClientId={ rootBlockClientId }
+				clientId={ clientId }
+				isAppender={ false }
+				prioritizePatterns={ false }
+				selectBlockOnInsert={ ! onBlockInsert }
+				onSelect={ onBlockInsert ? onBlockInsert : undefined }
+				hasSearch={ false }
+			/>
+		</DialogWrapper>
+	);
+}
+
+export default LinkUIBlockInserter;