@wordpress/block-library 9.30.0 → 9.30.1-next.6f42e1382.0

package/src/accordion-content/block.json

@@ -30,7 +30,8 @@
 				"width": true
 			}
 		},
-		"shadow": true
+		"shadow": true,
+		"layout": true
 	},
 	"attributes": {
 		"openByDefault": {

package/src/accordion-content/edit.js

@@ -25,11 +25,8 @@ import clsx from 'clsx';
  */
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
-export default function Edit( {
-	attributes: { openByDefault },
-	clientId,
-	setAttributes,
-} ) {
+export default function Edit( { attributes, clientId, setAttributes } ) {
+	const { openByDefault } = attributes;
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
 	const { isSelected, getBlockOrder } = useSelect(
@@ -67,29 +64,26 @@ export default function Edit( {
 		updateBlockAttributes,
 	] );
 
-	const blockProps = useBlockProps();
-	const innerBlocksProps = useInnerBlocksProps(
-		{
-			...blockProps,
-			className: clsx( blockProps.className, {
-				'is-open': openByDefault || isSelected,
-			} ),
-		},
-		{
-			template: [
-				[ 'core/accordion-header', {} ],
-				[
-					'core/accordion-panel',
-					{
-						openByDefault,
-					},
-				],
+	const blockProps = useBlockProps( {
+		className: clsx( {
+			'is-open': openByDefault || isSelected,
+		} ),
+	} );
+
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		template: [
+			[ 'core/accordion-header', {} ],
+			[
+				'core/accordion-panel',
+				{
+					openByDefault,
+				},
 			],
-			templateLock: 'all',
-			directInsert: true,
-			templateInsertUpdatesSelection: true,
-		}
-	);
+		],
+		templateLock: 'all',
+		directInsert: true,
+		templateInsertUpdatesSelection: true,
+	} );
 
 	return (
 		<>

package/src/accordion-panel/block.json

@@ -47,7 +47,8 @@
 				"fontSize": true
 			}
 		},
-		"shadow": true
+		"shadow": true,
+		"layout": true
 	},
 	"attributes": {
 		"allowedBlocks": {

package/src/buttons/block.json

@@ -62,7 +62,8 @@
 		},
 		"interactivity": {
 			"clientNavigation": true
-		}
+		},
+		"contentRole": true
 	},
 	"editorStyle": "wp-block-buttons-editor",
 	"style": "wp-block-buttons"

package/src/categories/edit.js

@@ -52,7 +52,8 @@ export default function CategoriesEdit( {
 
 	const { records: allTaxonomies, isResolvingTaxonomies } = useEntityRecords(
 		'root',
-		'taxonomy'
+		'taxonomy',
+		{ per_page: -1 }
 	);
 
 	const taxonomies = allTaxonomies?.filter( ( t ) => t.visibility.public );

package/src/cover/test/edit.js

@@ -51,11 +51,7 @@ async function createAndSelectBlock() {
 			name: 'Black',
 		} )
 	);
-	await userEvent.click(
-		screen.getByRole( 'button', {
-			name: 'Select parent block: Cover',
-		} )
-	);
+	await selectBlock( 'Block: Cover' );
 }
 
 describe( 'Cover block', () => {

package/src/editor.scss

@@ -46,6 +46,7 @@
 @import "./table/editor.scss";
 @import "./tag-cloud/editor.scss";
 @import "./template-part/editor.scss";
+@import "./term-template/editor.scss";
 @import "./text-columns/editor.scss";
 @import "./video/editor.scss";
 @import "./query/editor.scss";

package/src/form-input/style.scss

@@ -34,7 +34,7 @@
 	width: fit-content;
 }
 
-.wp-block-form-input__input {
+:where(.wp-block-form-input__input) {
 	padding: 0 0.5em;
 	font-size: 1em;
 	margin-bottom: 0.5em;
@@ -54,7 +54,8 @@
 	&[type="week"] {
 		min-height: 2em;
 		line-height: 2;
-		border: 1px solid;
+		border-width: 1px;
+		border-style: solid;
 	}
 }
 

package/src/index.js

@@ -122,6 +122,8 @@ import * as tableOfContents from './table-of-contents';
 import * as tagCloud from './tag-cloud';
 import * as templatePart from './template-part';
 import * as termDescription from './term-description';
+import * as termsQuery from './terms-query';
+import * as termTemplate from './term-template';
 import * as textColumns from './text-columns';
 import * as verse from './verse';
 import * as video from './video';
@@ -244,6 +246,8 @@ const getAllBlocks = () => {
 		blocks.push( accordionContent );
 		blocks.push( accordionHeader );
 		blocks.push( accordionPanel );
+		blocks.push( termsQuery );
+		blocks.push( termTemplate );
 	}
 
 	if ( window?.__experimentalEnableFormBlocks ) {

package/src/navigation/constants.js

@@ -1,5 +1,9 @@
 export const DEFAULT_BLOCK = {
 	name: 'core/navigation-link',
+	attributes: {
+		kind: 'post-type',
+		type: 'page',
+	},
 };
 
 export const PRIORITIZED_INSERTER_BLOCKS = [

package/src/navigation/edit/index.js

@@ -26,6 +26,7 @@ import {
 	__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
 	__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,
 	useBlockEditingMode,
+	BlockControls,
 } from '@wordpress/block-editor';
 import { EntityProvider, store as coreStore } from '@wordpress/core-data';
 
@@ -40,10 +41,13 @@ import {
 	Button,
 	Spinner,
 	Notice,
+	ToolbarButton,
+	ToolbarGroup,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { speak } from '@wordpress/a11y';
-import { close, Icon } from '@wordpress/icons';
+import { close, Icon, page } from '@wordpress/icons';
+import { createBlock } from '@wordpress/blocks';
 import { useInstanceId } from '@wordpress/compose';
 
 /**
@@ -75,6 +79,48 @@ import AccessibleDescription from './accessible-description';
 import AccessibleMenuDescription from './accessible-menu-description';
 import { unlock } from '../../lock-unlock';
 import { useToolsPanelDropdownMenuProps } from '../../utils/hooks';
+import { DEFAULT_BLOCK } from '../constants';
+
+/**
+ * Component that renders the Add page button for the Navigation block.
+ *
+ * @param {Object} props          Component props.
+ * @param {string} props.clientId Block client ID.
+ * @return {JSX.Element|null} The Add page button component or null if not applicable.
+ */
+function NavigationAddPageButton( { clientId } ) {
+	const { insertBlock } = useDispatch( blockEditorStore );
+	const { getBlockCount } = useSelect( blockEditorStore );
+
+	const onAddPage = useCallback( () => {
+		// Get the current number of blocks to insert at the end
+		const blockCount = getBlockCount( clientId );
+
+		// Create a new navigation link block (default block)
+		const newBlock = createBlock( DEFAULT_BLOCK.name, {
+			kind: DEFAULT_BLOCK.attributes.kind,
+			type: DEFAULT_BLOCK.attributes.type,
+		} );
+
+		// Insert the block at the end of the navigation
+		insertBlock( newBlock, blockCount, clientId );
+	}, [ clientId, insertBlock, getBlockCount ] );
+
+	return (
+		<BlockControls>
+			<ToolbarGroup>
+				<ToolbarButton
+					name="add-page"
+					icon={ page }
+					title={ __( 'Add page' ) }
+					onClick={ onAddPage }
+				>
+					{ __( 'Add page' ) }
+				</ToolbarButton>
+			</ToolbarGroup>
+		</BlockControls>
+	);
+}
 
 function ColorTools( {
 	textColor,
@@ -937,6 +983,9 @@ function Navigation( {
 					blockEditingMode={ blockEditingMode }
 				/>
 				{ blockEditingMode === 'default' && stylingInspectorControls }
+				{ blockEditingMode === 'contentOnly' && isEntityAvailable && (
+					<NavigationAddPageButton clientId={ clientId } />
+				) }
 				{ blockEditingMode === 'default' && isEntityAvailable && (
 					<InspectorControls group="advanced">
 						{ hasResolvedCanUserUpdateNavigationMenu &&

package/src/navigation/edit/leaf-more-menu.js

@@ -146,7 +146,6 @@ export default function LeafMoreMenu( props ) {
 						<AddSubmenuItem
 							block={ block }
 							onClose={ onClose }
-							expanded
 							expandedState={ props.expandedState }
 							expand={ props.expand }
 							setInsertedBlock={ props.setInsertedBlock }

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

@@ -35,7 +35,8 @@ const BLOCKS_WITH_LINK_UI_SUPPORT = [
 const { PrivateListView } = unlock( blockEditorPrivateApis );
 
 function AdditionalBlockContent( { block, insertedBlock, setInsertedBlock } ) {
-	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+	const { updateBlockAttributes, removeBlock } =
+		useDispatch( blockEditorStore );
 
 	const supportsLinkControls = BLOCKS_WITH_LINK_UI_SUPPORT?.includes(
 		insertedBlock?.name
@@ -47,6 +48,27 @@ function AdditionalBlockContent( { block, insertedBlock, setInsertedBlock } ) {
 		return null;
 	}
 
+	/**
+	 * Cleanup function for auto-inserted Navigation Link blocks.
+	 *
+	 * Removes the block if it has no URL and clears the inserted block state.
+	 * This ensures consistent cleanup behavior across different contexts.
+	 */
+	const cleanupInsertedBlock = () => {
+		// Prevent automatic block selection when removing blocks in list view context
+		// This avoids focus stealing that would close the list view and switch to canvas
+		const shouldAutoSelectBlock = false;
+
+		// Follows the exact same pattern as Navigation Link block's onClose handler
+		// If there is no URL then remove the auto-inserted block to avoid empty blocks
+		if ( ! insertedBlock?.attributes?.url && insertedBlock?.clientId ) {
+			// Remove the block entirely to avoid poor UX
+			// This matches the Navigation Link block's behavior
+			removeBlock( insertedBlock.clientId, shouldAutoSelectBlock );
+		}
+		setInsertedBlock( null );
+	};
+
 	const setInsertedBlockAttributes =
 		( _insertedBlockClientId ) => ( _updatedAttributes ) => {
 			if ( ! _insertedBlockClientId ) {
@@ -55,12 +77,28 @@ function AdditionalBlockContent( { block, insertedBlock, setInsertedBlock } ) {
 			updateBlockAttributes( _insertedBlockClientId, _updatedAttributes );
 		};
 
+	// Wrapper function to clean up original block when a new block is selected
+	const handleSetInsertedBlock = ( newBlock ) => {
+		// Prevent automatic block selection when removing blocks in list view context
+		// This avoids focus stealing that would close the list view and switch to canvas
+		const shouldAutoSelectBlock = false;
+
+		// If we have an existing inserted block and a new block is being set,
+		// remove the original block to avoid duplicates
+		if ( insertedBlock?.clientId && newBlock ) {
+			removeBlock( insertedBlock.clientId, shouldAutoSelectBlock );
+		}
+		setInsertedBlock( newBlock );
+	};
+
 	return (
 		<LinkUI
 			clientId={ insertedBlock?.clientId }
 			link={ insertedBlock?.attributes }
+			onBlockInsert={ handleSetInsertedBlock }
 			onClose={ () => {
-				setInsertedBlock( null );
+				// Use cleanup function
+				cleanupInsertedBlock();
 			} }
 			onChange={ ( updatedValue ) => {
 				updateAttributes(
@@ -70,9 +108,6 @@ function AdditionalBlockContent( { block, insertedBlock, setInsertedBlock } ) {
 				);
 				setInsertedBlock( null );
 			} }
-			onCancel={ () => {
-				setInsertedBlock( null );
-			} }
 		/>
 	);
 }

package/src/navigation-link/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;

package/src/navigation-link/dialog-wrapper.js

@@ -0,0 +1,74 @@
+/**
+ * WordPress dependencies
+ */
+import { Button, VisuallyHidden } from '@wordpress/components';
+import { __, isRTL } from '@wordpress/i18n';
+import { chevronLeftSmall, chevronRightSmall } from '@wordpress/icons';
+import { useInstanceId, useFocusOnMount } from '@wordpress/compose';
+
+/**
+ * Shared BackButton component for consistent navigation across LinkUI sub-components.
+ *
+ * @param {Object}   props           Component props.
+ * @param {string}   props.className CSS class name for the button.
+ * @param {Function} props.onBack    Callback when user wants to go back.
+ */
+function BackButton( { className, onBack } ) {
+	return (
+		<Button
+			className={ className }
+			icon={ isRTL() ? chevronRightSmall : chevronLeftSmall }
+			onClick={ ( e ) => {
+				e.preventDefault();
+				onBack();
+			} }
+			size="small"
+		>
+			{ __( 'Back' ) }
+		</Button>
+	);
+}
+
+/**
+ * Shared DialogWrapper component for consistent dialog structure across LinkUI sub-components.
+ *
+ * @param {Object}   props             Component props.
+ * @param {string}   props.className   CSS class name for the dialog container.
+ * @param {string}   props.title       Dialog title for accessibility.
+ * @param {string}   props.description Dialog description for accessibility.
+ * @param {Function} props.onBack      Callback when user wants to go back.
+ * @param {Object}   props.children    Child components to render inside the dialog.
+ */
+function DialogWrapper( { className, title, description, onBack, children } ) {
+	const dialogTitleId = useInstanceId(
+		DialogWrapper,
+		'link-ui-dialog-title'
+	);
+	const dialogDescriptionId = useInstanceId(
+		DialogWrapper,
+		'link-ui-dialog-description'
+	);
+	const focusOnMountRef = useFocusOnMount( 'firstElement' );
+	const backButtonClassName = `${ className }__back`;
+
+	return (
+		<div
+			className={ className }
+			role="dialog"
+			aria-labelledby={ dialogTitleId }
+			aria-describedby={ dialogDescriptionId }
+			ref={ focusOnMountRef }
+		>
+			<VisuallyHidden>
+				<h2 id={ dialogTitleId }>{ title }</h2>
+				<p id={ dialogDescriptionId }>{ description }</p>
+			</VisuallyHidden>
+
+			<BackButton className={ backButtonClassName } onBack={ onBack } />
+
+			{ children }
+		</div>
+	);
+}
+
+export default DialogWrapper;

package/src/navigation-link/editor.scss

@@ -122,3 +122,20 @@
 	gap: $grid-unit-10;
 	height: auto;
 }
+
+.link-ui-page-creator {
+	// Match LinkControl width constraints for consistent UI sizing
+	max-width: 350px;
+	min-width: auto;
+	width: 90vw;
+	padding-top: $grid-unit-10;
+
+	&__inner {
+		padding: $grid-unit-20;
+	}
+
+	&__back {
+		margin-left: $grid-unit-10;
+		text-transform: uppercase;
+	}
+}