@wordpress/block-library 9.29.1-next.f34ab90e9.0 → 9.30.1-next.6870dfe5b.0

package/src/accordion-content/block.json

@@ -2,16 +2,13 @@
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 3,
 	"name": "core/accordion-content",
-	"version": "0.1.0",
 	"title": "Accordion Content",
 	"category": "design",
 	"description": "Displays a section of content in an accordion, including a header and expandable content.",
-	"example": {},
 	"__experimental": true,
 	"parent": [ "core/accordion" ],
 	"allowedBlocks": [ "core/accordion-header", "core/accordion-panel" ],
 	"supports": {
-		"align": [ "wide", "full" ],
 		"color": {
 			"background": true,
 			"gradient": true
@@ -33,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-content/index.js

@@ -13,7 +13,6 @@ export { metadata, name };
 
 export const settings = {
 	icon,
-	example: {},
 	edit,
 	save,
 };

package/src/accordion-header/block.json

@@ -2,11 +2,9 @@
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 3,
 	"name": "core/accordion-header",
-	"version": "0.1.0",
 	"title": "Accordion Header",
 	"category": "design",
 	"description": "Displays an accordion header.",
-	"example": {},
 	"__experimental": true,
 	"parent": [ "core/accordion-content" ],
 	"usesContext": [
@@ -20,7 +18,6 @@
 			"gradient": true
 		},
 		"align": false,
-		"border": true,
 		"interactivity": true,
 		"spacing": {
 			"padding": true,

package/src/accordion-header/index.js

@@ -13,7 +13,6 @@ export { metadata, name };
 
 export const settings = {
 	icon,
-	example: {},
 	edit,
 	save,
 };

package/src/accordion-panel/block.json

@@ -2,11 +2,9 @@
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 3,
 	"name": "core/accordion-panel",
-	"version": "0.1.0",
 	"title": "Accordion Panel",
 	"category": "design",
 	"description": "Displays an accordion panel.",
-	"example": {},
 	"__experimental": true,
 	"parent": [ "core/accordion-content" ],
 	"supports": {
@@ -14,7 +12,6 @@
 			"background": true,
 			"gradient": true
 		},
-		"border": true,
 		"interactivity": true,
 		"spacing": {
 			"padding": true,
@@ -50,7 +47,8 @@
 				"fontSize": true
 			}
 		},
-		"shadow": true
+		"shadow": true,
+		"layout": true
 	},
 	"attributes": {
 		"allowedBlocks": {

package/src/accordion-panel/edit.js

@@ -1,61 +1,21 @@
 /**
  * WordPress dependencies
  */
-import {
-	useBlockProps,
-	useInnerBlocksProps,
-	__experimentalUseBorderProps as useBorderProps,
-	__experimentalUseColorProps as useColorProps,
-	__experimentalGetSpacingClassesAndStyles as useSpacingProps,
-	__experimentalGetShadowClassesAndStyles as useShadowProps,
-} from '@wordpress/block-editor';
-/**
- * External dependencies
- */
-import clsx from 'clsx';
+import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
 
 export default function Edit( { attributes } ) {
 	const { allowedBlocks, templateLock, openByDefault, isSelected } =
 		attributes;
-	const borderProps = useBorderProps( attributes );
-	const colorProps = useColorProps( attributes );
-	const spacingProps = useSpacingProps( attributes );
-	const shadowProps = useShadowProps( attributes );
 
-	const blockProps = useBlockProps();
-	const innerBlocksProps = useInnerBlocksProps(
-		{
-			className: 'accordion-content__wrapper',
-			style: {
-				...spacingProps.style,
-			},
-		},
-		{
-			allowedBlocks,
-			template: [ [ 'core/paragraph', {} ] ],
-			templateLock,
-		}
-	);
+	const blockProps = useBlockProps( {
+		'aria-hidden': ! isSelected && ! openByDefault,
+	} );
+
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		allowedBlocks,
+		template: [ [ 'core/paragraph', {} ] ],
+		templateLock,
+	} );
 
-	return (
-		<div
-			{ ...blockProps }
-			className={ clsx(
-				blockProps.className,
-				colorProps.className,
-				borderProps.className,
-				{
-					[ `has-custom-font-size` ]: blockProps?.style?.fontSize,
-				}
-			) }
-			style={ {
-				...borderProps.style,
-				...colorProps.style,
-				...shadowProps.style,
-			} }
-			aria-hidden={ ! isSelected && ! openByDefault }
-		>
-			<div { ...innerBlocksProps } />
-		</div>
-	);
+	return <div { ...innerBlocksProps } />;
 }

package/src/accordion-panel/index.js

@@ -13,7 +13,6 @@ export { metadata, name };
 
 export const settings = {
 	icon,
-	example: {},
 	edit,
 	save,
 };

package/src/accordion-panel/save.js

@@ -1,51 +1,10 @@
 /**
  * WordPress dependencies
  */
-import {
-	InnerBlocks,
-	useBlockProps,
-	__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
-	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
-	__experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles,
-	__experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles,
-} from '@wordpress/block-editor';
-/**
- * External dependencies
- */
-import clsx from 'clsx';
+import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
 
-export default function save( { attributes } ) {
+export default function save() {
 	const blockProps = useBlockProps.save();
-	const borderProps = getBorderClassesAndStyles( attributes );
-	const colorProps = getColorClassesAndStyles( attributes );
-	const spacingProps = getSpacingClassesAndStyles( attributes );
-	const shadowProps = getShadowClassesAndStyles( attributes );
-
-	return (
-		<div
-			{ ...blockProps }
-			className={ clsx(
-				blockProps.className,
-				colorProps.className,
-				borderProps.className,
-				{
-					[ `has-custom-font-size` ]: blockProps?.style?.fontSize,
-				}
-			) }
-			style={ {
-				...borderProps.style,
-				...colorProps.style,
-				...shadowProps.style,
-			} }
-		>
-			<div
-				className="accordion-content__wrapper"
-				style={ {
-					...spacingProps.style,
-				} }
-			>
-				<InnerBlocks.Content />
-			</div>
-		</div>
-	);
+	const innerBlocksProps = useInnerBlocksProps.save( blockProps );
+	return <div { ...innerBlocksProps } />;
 }

package/src/audio/edit.js

@@ -22,6 +22,7 @@ import {
 	MediaPlaceholder,
 	MediaReplaceFlow,
 	useBlockProps,
+	useBlockEditingMode,
 } from '@wordpress/block-editor';
 import { __, _x } from '@wordpress/i18n';
 import { useDispatch } from '@wordpress/data';
@@ -51,6 +52,8 @@ function AudioEdit( {
 } ) {
 	const { id, autoplay, loop, preload, src } = attributes;
 	const [ temporaryURL, setTemporaryURL ] = useState( attributes.blob );
+	const blockEditingMode = useBlockEditingMode();
+	const hasNonContentControls = blockEditingMode === 'default';
 
 	useUploadMediaFromBlobURL( {
 		url: temporaryURL,
@@ -264,7 +267,9 @@ function AudioEdit( {
 					isSelected={ isSingleSelected }
 					insertBlocksAfter={ insertBlocksAfter }
 					label={ __( 'Audio caption text' ) }
-					showToolbarButton={ isSingleSelected }
+					showToolbarButton={
+						isSingleSelected && hasNonContentControls
+					}
 				/>
 			</figure>
 		</>

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/gallery/block.json

@@ -75,7 +75,8 @@
 		"caption": {
 			"type": "rich-text",
 			"source": "rich-text",
-			"selector": ".blocks-gallery-caption"
+			"selector": ".blocks-gallery-caption",
+			"role": "content"
 		},
 		"imageCrop": {
 			"type": "boolean",

package/src/gallery/index.php

@@ -142,7 +142,7 @@ function block_core_gallery_render( $attributes, $content ) {
 
 	// This pattern matches figure elements with the `wp-block-image` class to
 	// avoid the gallery's wrapping `figure` element and extract images only.
-	$pattern = '/<figure[^>]*\bwp-block-image\b[^>]*>.*?<\/figure>/';
+	$pattern = '/<figure[^>]*\bwp-block-image\b[^>]*>.*?<\/figure>/s';
 
 	// Find all Image blocks.
 	preg_match_all( $pattern, $updated_content, $matches );

package/src/gallery/test/helpers.native.js

@@ -65,9 +65,9 @@ export const initializeWithGalleryBlock = async ( {
 /**
  * Gets a gallery item within a Gallery block.
  *
- * @param {import('react-test-renderer').ReactTestInstance} galleryBlock Gallery block instance.
- * @param {number}                                          rowIndex     Row position within the Gallery block.
- * @return {import('react-test-renderer').ReactTestInstance} Gallery item.
+ * @param {ReturnType<import('@testing-library/react-native').RenderAPI['getByTestId']>} galleryBlock Gallery block instance.
+ * @param {number}                                                                       rowIndex     Row position within the Gallery block.
+ * @return {ReturnType<import('@testing-library/react-native').RenderAPI['getByTestId']>} Gallery item.
  */
 export const getGalleryItem = ( galleryBlock, rowIndex ) =>
 	getInnerBlock( galleryBlock, 'Image', { rowIndex } );

package/src/group/variations.js

@@ -9,48 +9,36 @@ const example = {
 		{
 			name: 'core/paragraph',
 			attributes: {
-				customTextColor: '#cf2e2e',
-				fontSize: 'large',
 				content: __( 'One.' ),
 			},
 		},
 		{
 			name: 'core/paragraph',
 			attributes: {
-				customTextColor: '#ff6900',
-				fontSize: 'large',
 				content: __( 'Two.' ),
 			},
 		},
 		{
 			name: 'core/paragraph',
 			attributes: {
-				customTextColor: '#fcb900',
-				fontSize: 'large',
 				content: __( 'Three.' ),
 			},
 		},
 		{
 			name: 'core/paragraph',
 			attributes: {
-				customTextColor: '#00d084',
-				fontSize: 'large',
 				content: __( 'Four.' ),
 			},
 		},
 		{
 			name: 'core/paragraph',
 			attributes: {
-				customTextColor: '#0693e3',
-				fontSize: 'large',
 				content: __( 'Five.' ),
 			},
 		},
 		{
 			name: 'core/paragraph',
 			attributes: {
-				customTextColor: '#9b51e0',
-				fontSize: 'large',
 				content: __( 'Six.' ),
 			},
 		},

package/src/image/image.js

@@ -706,7 +706,8 @@ export default function Image( {
 		! lockHrefControls &&
 		! lockUrlControls;
 
-	const showCoverControls = isSingleSelected && canInsertCover;
+	const showCoverControls =
+		isSingleSelected && canInsertCover && ! isContentOnlyMode;
 
 	const showBlockControls = showUrlInput || allowCrop || showCoverControls;
 

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