@wordpress/block-editor 15.7.1-next.2f1c7c01b.0 → 15.8.0

package/src/components/block-toolbar/test/block-toolbar-icon.js

@@ -0,0 +1,182 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { paragraph } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import BlockToolbarIcon from '../block-toolbar-icon';
+
+jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
+jest.mock( '../../block-title/use-block-display-title', () =>
+	jest.fn().mockReturnValue( 'Block Name' )
+);
+jest.mock( '../../block-switcher', () =>
+	jest.fn( ( { children } ) => (
+		<div data-testid="block-switcher">{ children }</div>
+	) )
+);
+jest.mock( '../pattern-overrides-dropdown', () =>
+	jest.fn( ( { clientIds } ) => (
+		<div data-testid="pattern-overrides-dropdown">
+			{ clientIds.length === 1
+				? 'Block Name'
+				: 'Multiple blocks selected' }
+		</div>
+	) )
+);
+
+describe( 'BlockToolbarIcon', () => {
+	const defaultProps = {
+		clientIds: [ 'test-client-id' ],
+		isSynced: false,
+	};
+
+	beforeEach( () => {
+		jest.clearAllMocks();
+	} );
+
+	describe( 'when variant is "switcher"', () => {
+		it( 'should render BlockSwitcher with icon', () => {
+			useSelect.mockImplementation( () => ( {
+				icon: paragraph,
+				showIconLabels: false,
+				variant: 'switcher',
+			} ) );
+
+			render( <BlockToolbarIcon { ...defaultProps } /> );
+
+			expect(
+				screen.getByTestId( 'block-switcher' )
+			).toBeInTheDocument();
+			expect(
+				screen.queryByTestId( 'pattern-overrides-dropdown' )
+			).not.toBeInTheDocument();
+		} );
+	} );
+
+	describe( 'when variant is "pattern-overrides"', () => {
+		it( 'should render PatternOverridesDropdown for single block', () => {
+			useSelect.mockImplementation( () => ( {
+				icon: paragraph,
+				showIconLabels: false,
+				variant: 'pattern-overrides',
+			} ) );
+
+			render( <BlockToolbarIcon { ...defaultProps } /> );
+
+			const dropdown = screen.getByTestId( 'pattern-overrides-dropdown' );
+			expect( dropdown ).toBeInTheDocument();
+			expect( dropdown ).toHaveTextContent( 'Block Name' );
+			expect(
+				screen.queryByTestId( 'block-switcher' )
+			).not.toBeInTheDocument();
+		} );
+
+		it( 'should render PatternOverridesDropdown for multiple blocks', () => {
+			useSelect.mockImplementation( () => ( {
+				icon: paragraph,
+				showIconLabels: false,
+				variant: 'pattern-overrides',
+			} ) );
+
+			render(
+				<BlockToolbarIcon
+					{ ...defaultProps }
+					clientIds={ [ 'test-1', 'test-2' ] }
+				/>
+			);
+
+			const dropdown = screen.getByTestId( 'pattern-overrides-dropdown' );
+			expect( dropdown ).toBeInTheDocument();
+			expect( dropdown ).toHaveTextContent( 'Multiple blocks selected' );
+		} );
+	} );
+
+	describe( 'when variant is "default"', () => {
+		it( 'should render disabled ToolbarButton for single block', () => {
+			useSelect.mockImplementation( () => ( {
+				icon: paragraph,
+				showIconLabels: false,
+				variant: 'default',
+			} ) );
+
+			render( <BlockToolbarIcon { ...defaultProps } /> );
+
+			const button = screen.getByRole( 'button' );
+			expect( button ).toHaveAttribute( 'aria-disabled', 'true' );
+			expect( button ).toHaveAttribute( 'aria-label', 'Block Name' );
+			expect(
+				screen.queryByTestId( 'block-switcher' )
+			).not.toBeInTheDocument();
+			expect(
+				screen.queryByTestId( 'pattern-overrides-dropdown' )
+			).not.toBeInTheDocument();
+		} );
+
+		it( 'should render disabled ToolbarButton for multiple blocks', () => {
+			useSelect.mockImplementation( () => ( {
+				icon: paragraph,
+				showIconLabels: false,
+				variant: 'default',
+			} ) );
+
+			render(
+				<BlockToolbarIcon
+					{ ...defaultProps }
+					clientIds={ [ 'test-1', 'test-2', 'test-3' ] }
+				/>
+			);
+
+			const button = screen.getByRole( 'button' );
+			expect( button ).toHaveAttribute( 'aria-disabled', 'true' );
+			expect( button ).toHaveAttribute(
+				'aria-label',
+				'Multiple blocks selected'
+			);
+		} );
+	} );
+
+	describe( 'label calculation', () => {
+		it( 'should use block title for single block', () => {
+			useSelect.mockImplementation( () => ( {
+				icon: paragraph,
+				showIconLabels: false,
+				variant: 'default',
+			} ) );
+
+			render( <BlockToolbarIcon { ...defaultProps } /> );
+
+			const button = screen.getByRole( 'button' );
+			expect( button ).toHaveAttribute( 'aria-label', 'Block Name' );
+		} );
+
+		it( 'should use "Multiple blocks selected" for multiple blocks', () => {
+			useSelect.mockImplementation( () => ( {
+				icon: paragraph,
+				showIconLabels: false,
+				variant: 'default',
+			} ) );
+
+			render(
+				<BlockToolbarIcon
+					{ ...defaultProps }
+					clientIds={ [ 'test-1', 'test-2' ] }
+				/>
+			);
+
+			const button = screen.getByRole( 'button' );
+			expect( button ).toHaveAttribute(
+				'aria-label',
+				'Multiple blocks selected'
+			);
+		} );
+	} );
+} );

package/src/components/block-tools/index.js

@@ -77,7 +77,8 @@ export default function BlockTools( {
 		getBlockRootClientId,
 		isGroupable,
 		getBlockName,
-	} = useSelect( blockEditorStore );
+		getEditedContentOnlySection,
+	} = unlock( useSelect( blockEditorStore ) );
 	const { getGroupingBlockName } = useSelect( blocksStore );
 	const { showEmptyBlockSideInserter, showBlockToolbarPopover } =
 		useShowBlockTools();
@@ -94,6 +95,7 @@ export default function BlockTools( {
 		moveBlocksDown,
 		expandBlock,
 		updateBlockAttributes,
+		stopEditingContentOnlySection,
 	} = unlock( useDispatch( blockEditorStore ) );
 
 	function onKeyDown( event ) {
@@ -246,6 +248,14 @@ export default function BlockTools( {
 				} );
 			}
 		}
+
+		// Has the same keyboard shortcut as 'unselect', so can't be within the
+		// if/else chain above.
+		if ( isMatch( 'core/block-editor/stop-editing-as-blocks', event ) ) {
+			if ( getEditedContentOnlySection() ) {
+				stopEditingContentOnlySection();
+			}
+		}
 	}
 	const blockToolbarRef = usePopoverScroll( __unstableContentRef );
 	const blockToolbarAfterRef = usePopoverScroll( __unstableContentRef );

package/src/components/border-radius-control/test/utils.js

@@ -107,6 +107,96 @@ describe( 'getAllValue', () => {
 			expect( getAllValue( undefined ) ).toBe( undefined );
 		} );
 	} );
+
+	describe( 'when provided complex CSS values (clamp, min, max, calc)', () => {
+		it( 'should preserve clamp values when all corners have the same clamp value', () => {
+			const clampValue = 'clamp(1rem, 2vw, 3rem)';
+			const values = {
+				bottomLeft: clampValue,
+				bottomRight: clampValue,
+				topLeft: clampValue,
+				topRight: clampValue,
+			};
+			expect( getAllValue( values ) ).toBe( clampValue );
+		} );
+
+		it( 'should preserve min() values when all corners have the same min value', () => {
+			const minValue = 'min(10px, 5vw)';
+			const values = {
+				bottomLeft: minValue,
+				bottomRight: minValue,
+				topLeft: minValue,
+				topRight: minValue,
+			};
+			expect( getAllValue( values ) ).toBe( minValue );
+		} );
+
+		it( 'should preserve max() values when all corners have the same max value', () => {
+			const maxValue = 'max(20px, 10vw)';
+			const values = {
+				bottomLeft: maxValue,
+				bottomRight: maxValue,
+				topLeft: maxValue,
+				topRight: maxValue,
+			};
+			expect( getAllValue( values ) ).toBe( maxValue );
+		} );
+
+		it( 'should preserve calc() values when all corners have the same calc value', () => {
+			const calcValue = 'calc(100% - 20px)';
+			const values = {
+				bottomLeft: calcValue,
+				bottomRight: calcValue,
+				topLeft: calcValue,
+				topRight: calcValue,
+			};
+			expect( getAllValue( values ) ).toBe( calcValue );
+		} );
+
+		it( 'should return undefined when complex CSS values are mixed', () => {
+			const values = {
+				bottomLeft: 'clamp(1rem, 2vw, 3rem)',
+				bottomRight: 'clamp(1rem, 2vw, 3rem)',
+				topLeft: 'min(10px, 5vw)',
+				topRight: 'clamp(1rem, 2vw, 3rem)',
+			};
+			expect( getAllValue( values ) ).toBe( undefined );
+		} );
+
+		it( 'should return undefined when complex CSS values are mixed with simple values', () => {
+			const values = {
+				bottomLeft: 'clamp(1rem, 2vw, 3rem)',
+				bottomRight: 'clamp(1rem, 2vw, 3rem)',
+				topLeft: '2px',
+				topRight: 'clamp(1rem, 2vw, 3rem)',
+			};
+			expect( getAllValue( values ) ).toBe( undefined );
+		} );
+
+		it( 'should preserve string values that cannot be parsed at all (no numeric prefix)', () => {
+			// Values with no numeric prefix cannot be parsed, so they should be preserved
+			const unparseableValue = 'apples';
+			const values = {
+				bottomLeft: unparseableValue,
+				bottomRight: unparseableValue,
+				topLeft: unparseableValue,
+				topRight: unparseableValue,
+			};
+			expect( getAllValue( values ) ).toBe( unparseableValue );
+		} );
+
+		it( 'should parse numeric prefix from partially parseable values', () => {
+			// Values with numeric prefix get parsed, so "32apples" becomes "32"
+			const partiallyParseableValue = '32apples';
+			const values = {
+				bottomLeft: partiallyParseableValue,
+				bottomRight: partiallyParseableValue,
+				topLeft: partiallyParseableValue,
+				topRight: partiallyParseableValue,
+			};
+			expect( getAllValue( values ) ).toBe( '32' );
+		} );
+	} );
 } );
 
 describe( 'hasMixedValues', () => {

package/src/components/border-radius-control/utils.js

@@ -60,9 +60,13 @@ export function getAllValue( values = {} ) {
 		return values;
 	}
 
-	const parsedQuantitiesAndUnits = Object.values( values ).map( ( value ) =>
-		parseQuantityAndUnitFromRawValue( value )
-	);
+	const parsedQuantitiesAndUnits = Object.values( values ).map( ( value ) => {
+		const newValue = parseQuantityAndUnitFromRawValue( value );
+		if ( typeof value === 'string' && newValue[ 0 ] === undefined ) {
+			return [ value, '' ];
+		}
+		return newValue;
+	} );
 
 	const allValues = parsedQuantitiesAndUnits.map(
 		( value ) => value[ 0 ] ?? ''

package/src/components/content-lock/modify-content-lock-menu-item.js

@@ -38,16 +38,22 @@ export function ModifyContentOnlySectionMenuItem( { clientId, onClose } ) {
 	const blockEditorActions = useDispatch( blockEditorStore );
 	const isContentLocked =
 		! isLockedByParent && templateLock === 'contentOnly';
-	if ( ! isContentLocked && ! isEditingContentOnlySection ) {
+
+	// Hide the Modify button when the content only pattern insertion experiment is active.
+	// This is replaced by an alternative UI in the experiment.
+	if (
+		window?.__experimentalContentOnlyPatternInsertion ||
+		( ! isContentLocked && ! isEditingContentOnlySection )
+	) {
 		return null;
 	}
 
 	const { editContentOnlySection } = unlock( blockEditorActions );
-	const showStartEditingAsBlocks =
+	const showContentOnlyModifyButton =
 		! isEditingContentOnlySection && isContentLocked;
 
 	return (
-		showStartEditingAsBlocks && (
+		showContentOnlyModifyButton && (
 			<MenuItem
 				onClick={ () => {
 					editContentOnlySection( clientId );

package/src/components/global-styles/border-panel.js

@@ -147,17 +147,21 @@ export default function BorderPanel( {
 	// Border radius.
 	const showBorderRadius = useHasBorderRadiusControl( settings );
 	const borderRadiusValues = useMemo( () => {
-		if ( typeof border?.radius !== 'object' ) {
-			return border?.radius;
+		if ( typeof inheritedValue?.border?.radius !== 'object' ) {
+			return decodeValue( inheritedValue?.border?.radius );
 		}
 
 		return {
-			topLeft: border?.radius?.topLeft,
-			topRight: border?.radius?.topRight,
-			bottomLeft: border?.radius?.bottomLeft,
-			bottomRight: border?.radius?.bottomRight,
+			topLeft: decodeValue( inheritedValue?.border?.radius?.topLeft ),
+			topRight: decodeValue( inheritedValue?.border?.radius?.topRight ),
+			bottomLeft: decodeValue(
+				inheritedValue?.border?.radius?.bottomLeft
+			),
+			bottomRight: decodeValue(
+				inheritedValue?.border?.radius?.bottomRight
+			),
 		};
-	}, [ border?.radius ] );
+	}, [ inheritedValue?.border?.radius, decodeValue ] );
 	const setBorderRadius = ( newBorderRadius ) =>
 		setBorder( { ...border, radius: newBorderRadius } );
 	const hasBorderRadius = () => {

package/src/components/global-styles/color-panel.js

@@ -111,12 +111,13 @@ export function useHasBackgroundColorPanel( settings ) {
 	);
 }
 
-function ColorToolsPanel( {
+export function ColorToolsPanel( {
 	resetAllFilter,
 	onChange,
 	value,
 	panelId,
 	children,
+	label,
 } ) {
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 	const resetAll = () => {
@@ -126,7 +127,7 @@ function ColorToolsPanel( {
 
 	return (
 		<ToolsPanel
-			label={ __( 'Elements' ) }
+			label={ label || __( 'Elements' ) }
 			resetAll={ resetAll }
 			panelId={ panelId }
 			hasInnerWrapper
@@ -326,6 +327,7 @@ export default function ColorPanel( {
 	settings,
 	panelId,
 	defaultControls = DEFAULT_CONTROLS,
+	label,
 	children,
 } ) {
 	const colors = useColorsPerOrigin( settings );
@@ -511,31 +513,34 @@ export default function ColorPanel( {
 		},
 	];
 
-	const resetAllFilter = useCallback( ( previousValue ) => {
-		return {
-			...previousValue,
-			color: undefined,
-			elements: {
-				...previousValue?.elements,
-				link: {
-					...previousValue?.elements?.link,
-					color: undefined,
-					':hover': {
+	const resetAllFilter = useCallback(
+		( previousValue ) => {
+			return {
+				...previousValue,
+				color: undefined,
+				elements: {
+					...previousValue?.elements,
+					link: {
+						...previousValue?.elements?.link,
 						color: undefined,
-					},
-				},
-				...elements.reduce( ( acc, element ) => {
-					return {
-						...acc,
-						[ element.name ]: {
-							...previousValue?.elements?.[ element.name ],
+						':hover': {
 							color: undefined,
 						},
-					};
-				}, {} ),
-			},
-		};
-	}, [] );
+					},
+					...elements.reduce( ( acc, element ) => {
+						return {
+							...acc,
+							[ element.name ]: {
+								...previousValue?.elements?.[ element.name ],
+								color: undefined,
+							},
+						};
+					}, {} ),
+				},
+			};
+		},
+		[ elements ]
+	);
 
 	const items = [
 		showTextPanel && {
@@ -606,7 +611,7 @@ export default function ColorPanel( {
 		},
 	].filter( Boolean );
 
-	elements.forEach( ( { name, label, showPanel } ) => {
+	elements.forEach( ( { name, label: elementLabel, showPanel } ) => {
 		if ( ! showPanel ) {
 			return;
 		}
@@ -680,7 +685,7 @@ export default function ColorPanel( {
 
 		items.push( {
 			key: name,
-			label,
+			label: elementLabel,
 			hasValue: hasElement,
 			resetValue: resetElement,
 			isShownByDefault: defaultControls[ name ],
@@ -731,6 +736,7 @@ export default function ColorPanel( {
 			value={ value }
 			onChange={ onChange }
 			panelId={ panelId }
+			label={ label }
 		>
 			{ items.map( ( item ) => {
 				const { key, ...restItem } = item;

package/src/components/global-styles/typography-panel.js

@@ -179,6 +179,7 @@ export default function TypographyPanel( {
 	settings,
 	panelId,
 	defaultControls = DEFAULT_CONTROLS,
+	fitText = false,
 } ) {
 	const decodeValue = ( rawValue ) =>
 		getValueFromVariable( { settings }, '', rawValue );
@@ -448,7 +449,7 @@ export default function TypographyPanel( {
 					/>
 				</ToolsPanelItem>
 			) }
-			{ hasFontSizeEnabled && (
+			{ hasFontSizeEnabled && ! fitText && (
 				<ToolsPanelItem
 					label={ __( 'Size' ) }
 					hasValue={ hasFontSize }

package/src/components/inserter/media-tab/media-tab.js

@@ -77,7 +77,13 @@ function MediaTab( {
 			if ( ! media?.url ) {
 				return;
 			}
-			const [ block ] = getBlockAndPreviewFromMedia( media, media.type );
+			// When the experimental DataViews media modal is enabled,
+			// we need to extract the media type from mime_type (e.g., 'image/jpeg' -> 'image')
+			const mediaType =
+				window.__experimentalDataViewsMediaModal && media.mime_type
+					? media.mime_type.split( '/' )[ 0 ]
+					: media.type;
+			const [ block ] = getBlockAndPreviewFromMedia( media, mediaType );
 			onInsert( block );
 		},
 		[ onInsert ]

package/src/components/inspector-controls-tabs/index.js

@@ -105,6 +105,7 @@ export default function InspectorControlsTabs( {
 						clientId={ clientId }
 						hasBlockStyles={ hasBlockStyles }
 						isSectionBlock={ isSectionBlock }
+						contentClientIds={ contentClientIds }
 					/>
 				</Tabs.TabPanel>
 				<Tabs.TabPanel tabId={ TAB_CONTENT.name } focusable={ false }>

package/src/components/inspector-controls-tabs/styles-tab.js

@@ -3,6 +3,7 @@
  */
 import { PanelBody } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { useDispatch, useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -10,12 +11,61 @@ import { __ } from '@wordpress/i18n';
 import BlockStyles from '../block-styles';
 import InspectorControls from '../inspector-controls';
 import { useBorderPanelLabel } from '../../hooks/border';
+import { useBlockSettings } from '../../hooks/utils';
+import { store as blockEditorStore } from '../../store';
+import { ColorEdit } from '../../hooks/color';
+import { ColorToolsPanel } from '../global-styles/color-panel';
+
+function SectionBlockColorControls( {
+	blockName,
+	clientId,
+	contentClientIds,
+} ) {
+	const settings = useBlockSettings( blockName );
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+
+	const { hasButton, hasHeading } = useSelect(
+		( select ) => {
+			const blockNames =
+				select( blockEditorStore ).getBlockNamesByClientId(
+					contentClientIds
+				);
+			return {
+				hasButton: blockNames.includes( 'core/button' ),
+				hasHeading: blockNames.includes( 'core/heading' ),
+			};
+		},
+		[ contentClientIds ]
+	);
+
+	const setAttributes = ( newAttributes ) => {
+		updateBlockAttributes( clientId, newAttributes );
+	};
+
+	return (
+		<ColorEdit
+			clientId={ clientId }
+			name={ blockName }
+			settings={ settings }
+			setAttributes={ setAttributes }
+			asWrapper={ ColorToolsPanel }
+			label={ __( 'Color' ) }
+			defaultControls={ {
+				text: true,
+				background: true,
+				button: hasButton,
+				heading: hasHeading,
+			} }
+		/>
+	);
+}
 
 const StylesTab = ( {
 	blockName,
 	clientId,
 	hasBlockStyles,
 	isSectionBlock,
+	contentClientIds,
 } ) => {
 	const borderPanelLabel = useBorderPanelLabel( { blockName } );
 
@@ -28,6 +78,14 @@ const StylesTab = ( {
 					</PanelBody>
 				</div>
 			) }
+			{ isSectionBlock &&
+				window?.__experimentalContentOnlyPatternInsertion && (
+					<SectionBlockColorControls
+						blockName={ blockName }
+						clientId={ clientId }
+						contentClientIds={ contentClientIds }
+					/>
+				) }
 			{ ! isSectionBlock && (
 				<>
 					<InspectorControls.Slot

package/src/components/inspector-controls-tabs/use-inspector-controls-tabs.js

@@ -99,7 +99,11 @@ export default function useInspectorControlsTabs(
 		tabs.push( TAB_SETTINGS );
 	}
 
-	if ( isSectionBlock ? hasBlockStyles : hasStyleFills ) {
+	if (
+		hasBlockStyles ||
+		hasStyleFills ||
+		window?.__experimentalContentOnlyPatternInsertion
+	) {
 		tabs.push( TAB_STYLES );
 	}
 

package/src/components/keyboard-shortcuts/index.js

@@ -114,6 +114,15 @@ function KeyboardShortcutsRegister() {
 			],
 		} );
 
+		registerShortcut( {
+			name: 'core/block-editor/stop-editing-as-blocks',
+			category: 'block',
+			description: __( 'Finish editing a design.' ),
+			keyCombination: {
+				character: 'escape',
+			},
+		} );
+
 		registerShortcut( {
 			name: 'core/block-editor/select-all',
 			category: 'selection',

package/src/components/rich-text/index.js

@@ -569,6 +569,7 @@ const PublicForwardedRichTextContainer = forwardRef( ( props, ref ) => {
 		} = removeNativeProps( props );
 		return (
 			<Tag
+				ref={ ref }
 				{ ...contentProps }
 				dangerouslySetInnerHTML={ {
 					__html: valueToHTMLString( value, multiline ),

package/src/hooks/border.js

@@ -142,12 +142,18 @@ function BordersInspectorControl( { label, children, resetAllFilter } ) {
 
 export function BorderPanel( { clientId, name, setAttributes, settings } ) {
 	const isEnabled = useHasBorderPanel( settings );
-	function selector( select ) {
-		const { style, borderColor } =
-			select( blockEditorStore ).getBlockAttributes( clientId ) || {};
-		return { style, borderColor };
-	}
-	const { style, borderColor } = useSelect( selector, [ clientId ] );
+	const { style, borderColor } = useSelect(
+		( select ) => {
+			// Early return to avoid subscription when disabled
+			if ( ! isEnabled ) {
+				return {};
+			}
+			const { style: _style, borderColor: _borderColor } =
+				select( blockEditorStore ).getBlockAttributes( clientId ) || {};
+			return { style: _style, borderColor: _borderColor };
+		},
+		[ clientId, isEnabled ]
+	);
 	const value = useMemo( () => {
 		return attributesToStyle( { style, borderColor } );
 	}, [ style, borderColor ] );