@wordpress/block-editor 15.7.0 → 15.8.0

package/src/components/block-variation-transforms/style.scss

@@ -1,49 +1,19 @@
 @use "@wordpress/base-styles/variables" as *;
 @use "@wordpress/base-styles/colors" as *;
 
-.block-editor-block-variation-transforms:where(fieldset) {
-	// Reset `fieldset` browser defaults.
-	border: 0;
-	padding: 0;
-	margin: 0;
-}
-
 .block-editor-block-variation-transforms {
 	box-sizing: border-box;
 	padding: 0 $grid-unit-20 $grid-unit-20 52px;
-	width: 100%;
-
-	.components-dropdown-menu__toggle {
-		border: $border-width solid $gray-700;
-		border-radius: $radius-small;
-		min-height: 30px;
-		width: 100%;
-		position: relative;
-		text-align: left;
-		justify-content: left;
-		padding: 6px 12px;
 
-		// For all button sizes allow sufficient space for the
-		// dropdown "arrow" icon to display.
-		&.components-dropdown-menu__toggle {
-			padding-right: $icon-size;
-		}
-
-		&:focus:not(:disabled) {
-			border-color: var(--wp-admin-theme-color);
-			box-shadow: 0 0 0 calc(var(--wp-admin-border-width-focus) - #{ $border-width }) var(--wp-admin-theme-color);
-		}
-
-		svg {
-			height: 100%;
-			padding: 0;
-			position: absolute;
-			right: 0;
-			top: 0;
-		}
+	&:where(fieldset) {
+		// Reset `fieldset` browser defaults.
+		border: 0;
+		padding: 0;
+		margin: 0;
 	}
 }
 
-.block-editor-block-variation-transforms__popover .components-popover__content {
-	min-width: 230px;
+.block-editor-block-variation-transforms__button {
+	width: 100%;
+	justify-content: center;
 }

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/index.js

@@ -1 +1 @@
-export { ModifyContentLockMenuItem } from './modify-content-lock-menu-item';
+export { ModifyContentOnlySectionMenuItem } from './modify-content-lock-menu-item';

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

@@ -12,42 +12,51 @@ import { store as blockEditorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 
 // The implementation of content locking is mainly in this file, although the mechanism
-// to stop temporarily editing as blocks when an outside block is selected is on component StopEditingAsBlocksOnOutsideSelect
-// at block-editor/src/components/block-list/index.js.
+// to stop editing a content only section when an outside block is selected is in the component
+// `StopEditingContentOnlySectionOnOutsideSelect` at block-editor/src/components/block-list/index.js.
 // Besides the components on this file and the file referenced above the implementation
 // also includes artifacts on the store (actions, reducers, and selector).
 
-export function ModifyContentLockMenuItem( { clientId, onClose } ) {
-	const { templateLock, isLockedByParent, isEditingAsBlocks } = useSelect(
-		( select ) => {
-			const {
-				getContentLockingParent,
-				getTemplateLock,
-				getTemporarilyEditingAsBlocks,
-			} = unlock( select( blockEditorStore ) );
-			return {
-				templateLock: getTemplateLock( clientId ),
-				isLockedByParent: !! getContentLockingParent( clientId ),
-				isEditingAsBlocks: getTemporarilyEditingAsBlocks() === clientId,
-			};
-		},
-		[ clientId ]
-	);
+export function ModifyContentOnlySectionMenuItem( { clientId, onClose } ) {
+	const { templateLock, isLockedByParent, isEditingContentOnlySection } =
+		useSelect(
+			( select ) => {
+				const {
+					getContentLockingParent,
+					getTemplateLock,
+					getEditedContentOnlySection,
+				} = unlock( select( blockEditorStore ) );
+				return {
+					templateLock: getTemplateLock( clientId ),
+					isLockedByParent: !! getContentLockingParent( clientId ),
+					isEditingContentOnlySection:
+						getEditedContentOnlySection() === clientId,
+				};
+			},
+			[ clientId ]
+		);
 	const blockEditorActions = useDispatch( blockEditorStore );
 	const isContentLocked =
 		! isLockedByParent && templateLock === 'contentOnly';
-	if ( ! isContentLocked && ! isEditingAsBlocks ) {
+
+	// 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 { modifyContentLockBlock } = unlock( blockEditorActions );
-	const showStartEditingAsBlocks = ! isEditingAsBlocks && isContentLocked;
+	const { editContentOnlySection } = unlock( blockEditorActions );
+	const showContentOnlyModifyButton =
+		! isEditingContentOnlySection && isContentLocked;
 
 	return (
-		showStartEditingAsBlocks && (
+		showContentOnlyModifyButton && (
 			<MenuItem
 				onClick={ () => {
-					modifyContentLockBlock( clientId );
+					editContentOnlySection( clientId );
 					onClose();
 				} }
 			>

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/iframe/index.js

@@ -342,9 +342,6 @@ function Iframe( {
 			>
 				{ iframeDocument &&
 					createPortal(
-						// We want to prevent React events from bubbling through the iframe
-						// we bubble these manually.
-						/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */
 						<body
 							ref={ bodyRef }
 							className={ clsx(

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/link-control/index.js

@@ -49,13 +49,11 @@ import deprecated from '@wordpress/deprecated';
  *                                    providing a custom `settings` prop.
  */
 
-/* eslint-disable jsdoc/valid-types */
 /**
  * Custom settings values associated with a link.
  *
  * @typedef {{[setting:string]:any}} WPLinkControlSettingsValue
  */
-/* eslint-enable */
 
 /**
  * Custom settings values associated with a link.

package/src/components/list-view/expander.js

@@ -13,8 +13,6 @@ export default function ListViewExpander( { onClick } ) {
 		//
 		// We've mimicked this by adding an icon with aria-hidden set to true to hide this from the accessibility tree.
 		// For the current tree grid implementation, please do not try to make this a button.
-		//
-		// eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
 		<span
 			className="block-editor-list-view__expander"
 			onClick={ ( event ) => onClick( event, { forceToggle: true } ) }

package/src/components/media-replace-flow/index.js

@@ -257,7 +257,6 @@ const MediaReplaceFlow = ( {
 							: children }
 					</NavigableMenu>
 					{ onSelectURL && (
-						// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
 						<form className="block-editor-media-flow__url-input">
 							<span className="block-editor-media-replace-flow__image-url-label">
 								{ __( 'Current media URL:' ) }

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/components/rich-text/index.native.js

@@ -414,8 +414,6 @@ export function RichTextWrapper(
 					preserveWhiteSpace,
 				} );
 
-				// Allows us to ask for this information when we get a report.
-				// eslint-disable-next-line no-console
 				window.console.log( 'Received items:\n\n', files );
 
 				if ( onReplace && isEmpty( value ) ) {