@wordpress/block-library 9.30.0 → 9.30.1-next.836ecdcae.0

package/build-style/style.css

@@ -147,11 +147,6 @@
   transform: rotate(45deg);
 }
 
-.accordion-content__heading {
-  margin-block-start: 0;
-  margin-block-end: 0;
-}
-
 .accordion-content__toggle {
   font-family: inherit;
   font-size: inherit;
@@ -182,7 +177,11 @@
 .is-layout-flow > .wp-block-accordion-panel,
 .wp-block-accordion-panel {
   overflow: hidden;
-  margin: 0;
+}
+
+.wp-block-accordion-panel[inert],
+.wp-block-accordion-panel[aria-hidden=true] {
+  margin-block-start: 0;
 }
 
 .accordion-panel__wrapper {
@@ -1304,15 +1303,16 @@ body:not(.editor-styles-wrapper) .wp-block-cover:not(.wp-block-cover:has(.wp-blo
   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;
 }
-.wp-block-form-input__input[type=text], .wp-block-form-input__input[type=password], .wp-block-form-input__input[type=date], .wp-block-form-input__input[type=datetime], .wp-block-form-input__input[type=datetime-local], .wp-block-form-input__input[type=email], .wp-block-form-input__input[type=month], .wp-block-form-input__input[type=number], .wp-block-form-input__input[type=search], .wp-block-form-input__input[type=tel], .wp-block-form-input__input[type=time], .wp-block-form-input__input[type=url], .wp-block-form-input__input[type=week] {
+:where(.wp-block-form-input__input)[type=text], :where(.wp-block-form-input__input)[type=password], :where(.wp-block-form-input__input)[type=date], :where(.wp-block-form-input__input)[type=datetime], :where(.wp-block-form-input__input)[type=datetime-local], :where(.wp-block-form-input__input)[type=email], :where(.wp-block-form-input__input)[type=month], :where(.wp-block-form-input__input)[type=number], :where(.wp-block-form-input__input)[type=search], :where(.wp-block-form-input__input)[type=tel], :where(.wp-block-form-input__input)[type=time], :where(.wp-block-form-input__input)[type=url], :where(.wp-block-form-input__input)[type=week] {
   min-height: 2em;
   line-height: 2;
-  border: 1px solid;
+  border-width: 1px;
+  border-style: solid;
 }
 
 textarea.wp-block-form-input__input {
@@ -2900,7 +2900,7 @@ html.has-modal-open {
 }
 
 .link-ui-tools {
-  border-top: 1px solid #f0f0f0;
+  outline: 1px solid #f0f0f0;
   padding: 8px;
 }
 
@@ -3007,14 +3007,17 @@ p.has-text-align-left[style*="writing-mode:vertical-lr"] {
   box-sizing: border-box;
 }
 
-:where(.wp-block-post-comments-form) textarea,
-:where(.wp-block-post-comments-form) input:not([type=submit]) {
-  border: 1px solid #949494;
+:where(.wp-block-post-comments-form textarea),
+:where(.wp-block-post-comments-form input:not([type=submit])) {
+  border-width: 1px;
+  border-style: solid;
+  border-color: #949494;
   font-size: 1em;
   font-family: inherit;
 }
-:where(.wp-block-post-comments-form) textarea,
-:where(.wp-block-post-comments-form) input:where(:not([type=submit]):not([type=checkbox])) {
+
+:where(.wp-block-post-comments-form textarea),
+:where(.wp-block-post-comments-form input:where(:not([type=submit]):not([type=checkbox]))) {
   padding: calc(0.667em + 2px);
 }
 
@@ -3505,17 +3508,6 @@ ul.wp-block-rss.is-grid li {
   width: 100%;
 }
 
-.wp-block-search__input {
-  padding: 8px;
-  flex-grow: 1;
-  margin-left: 0;
-  margin-right: 0;
-  min-width: 3rem;
-  border: 1px solid #949494;
-  text-decoration: unset !important;
-  appearance: initial;
-}
-
 .wp-block-search.wp-block-search__button-only .wp-block-search__button {
   margin-left: 0;
   flex-shrink: 0;
@@ -3558,11 +3550,21 @@ ul.wp-block-rss.is-grid li {
   letter-spacing: inherit;
   text-transform: inherit;
   font-style: inherit;
+  padding: 8px;
+  flex-grow: 1;
+  margin-left: 0;
+  margin-right: 0;
+  min-width: 3rem;
+  border: 1px solid #949494;
+  text-decoration: unset !important;
+  appearance: initial;
 }
 
 :where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) {
   padding: 4px;
-  border: 1px solid #949494;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #949494;
   background-color: #fff;
   box-sizing: border-box;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "9.30.0",
+	"version": "9.30.1-next.836ecdcae.0",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -42,39 +42,39 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "7.25.7",
-		"@wordpress/a11y": "^4.30.0",
-		"@wordpress/api-fetch": "^7.30.0",
-		"@wordpress/autop": "^4.30.0",
-		"@wordpress/blob": "^4.30.0",
-		"@wordpress/block-editor": "^15.3.0",
-		"@wordpress/blocks": "^15.3.0",
-		"@wordpress/components": "^30.3.0",
-		"@wordpress/compose": "^7.30.0",
-		"@wordpress/core-data": "^7.30.0",
-		"@wordpress/data": "^10.30.0",
-		"@wordpress/date": "^5.30.0",
-		"@wordpress/deprecated": "^4.30.0",
-		"@wordpress/dom": "^4.30.0",
-		"@wordpress/element": "^6.30.0",
-		"@wordpress/escape-html": "^3.30.0",
-		"@wordpress/hooks": "^4.30.0",
-		"@wordpress/html-entities": "^4.30.0",
-		"@wordpress/i18n": "^6.3.0",
-		"@wordpress/icons": "^10.30.0",
-		"@wordpress/interactivity": "^6.30.0",
-		"@wordpress/interactivity-router": "^2.30.0",
-		"@wordpress/keyboard-shortcuts": "^5.30.0",
-		"@wordpress/keycodes": "^4.30.0",
-		"@wordpress/notices": "^5.30.0",
-		"@wordpress/patterns": "^2.30.0",
-		"@wordpress/primitives": "^4.30.0",
-		"@wordpress/private-apis": "^1.30.0",
-		"@wordpress/reusable-blocks": "^5.30.0",
-		"@wordpress/rich-text": "^7.30.0",
-		"@wordpress/server-side-render": "^6.6.0",
-		"@wordpress/url": "^4.30.0",
-		"@wordpress/viewport": "^6.30.0",
-		"@wordpress/wordcount": "^4.30.0",
+		"@wordpress/a11y": "^4.30.1-next.836ecdcae.0",
+		"@wordpress/api-fetch": "^7.30.1-next.836ecdcae.0",
+		"@wordpress/autop": "^4.30.1-next.836ecdcae.0",
+		"@wordpress/blob": "^4.30.1-next.836ecdcae.0",
+		"@wordpress/block-editor": "^15.3.1-next.836ecdcae.0",
+		"@wordpress/blocks": "^15.3.1-next.836ecdcae.0",
+		"@wordpress/components": "^30.3.2-next.836ecdcae.0",
+		"@wordpress/compose": "^7.30.1-next.836ecdcae.0",
+		"@wordpress/core-data": "^7.30.1-next.836ecdcae.0",
+		"@wordpress/data": "^10.30.1-next.836ecdcae.0",
+		"@wordpress/date": "^5.30.1-next.836ecdcae.0",
+		"@wordpress/deprecated": "^4.30.1-next.836ecdcae.0",
+		"@wordpress/dom": "^4.30.1-next.836ecdcae.0",
+		"@wordpress/element": "^6.30.1-next.836ecdcae.0",
+		"@wordpress/escape-html": "^3.30.1-next.836ecdcae.0",
+		"@wordpress/hooks": "^4.30.1-next.836ecdcae.0",
+		"@wordpress/html-entities": "^4.30.1-next.836ecdcae.0",
+		"@wordpress/i18n": "^6.3.1-next.836ecdcae.0",
+		"@wordpress/icons": "^10.30.1-next.836ecdcae.0",
+		"@wordpress/interactivity": "^6.30.1-next.836ecdcae.0",
+		"@wordpress/interactivity-router": "^2.30.1-next.836ecdcae.0",
+		"@wordpress/keyboard-shortcuts": "^5.30.1-next.836ecdcae.0",
+		"@wordpress/keycodes": "^4.30.1-next.836ecdcae.0",
+		"@wordpress/notices": "^5.30.1-next.836ecdcae.0",
+		"@wordpress/patterns": "^2.30.1-next.836ecdcae.0",
+		"@wordpress/primitives": "^4.30.1-next.836ecdcae.0",
+		"@wordpress/private-apis": "^1.30.1-next.836ecdcae.0",
+		"@wordpress/reusable-blocks": "^5.30.1-next.836ecdcae.0",
+		"@wordpress/rich-text": "^7.30.1-next.836ecdcae.0",
+		"@wordpress/server-side-render": "^6.6.1-next.836ecdcae.0",
+		"@wordpress/url": "^4.30.1-next.836ecdcae.0",
+		"@wordpress/viewport": "^6.30.1-next.836ecdcae.0",
+		"@wordpress/wordcount": "^4.30.1-next.836ecdcae.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -92,5 +92,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "c66cb089eed19d4f4956962fa7b4c81abe6dd513"
+	"gitHead": "3e60b4c1e78d7b27acbf1d7dd172bbd64358a0f2"
 }

package/src/accordion/style.scss

@@ -13,11 +13,6 @@
 	}
 }
 
-.accordion-content__heading {
-	margin-block-start: 0;
-	margin-block-end: 0;
-}
-
 .accordion-content__toggle {
 	font-family: inherit;
 	font-size: inherit;
@@ -48,7 +43,12 @@
 .is-layout-flow > .wp-block-accordion-panel,
 .wp-block-accordion-panel {
 	overflow: hidden;
-	margin: 0;
+}
+
+// Prevent blockGap from Accordion Content block from adding extra margin between accordions.
+.wp-block-accordion-panel[inert],
+.wp-block-accordion-panel[aria-hidden="true"] {
+	margin-block-start: 0;
 }
 
 .accordion-panel__wrapper {

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/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/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/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/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;
+	}
+}