@wordpress/block-editor 15.23.0 → 16.0.1-next.v.202607070741.0

package/src/components/preset-input-control/index.js

@@ -267,7 +267,6 @@ export default function PresetInputControl( {
 					step={ 1 }
 					value={ currentValue }
 					withInputField={ false }
-					__next40pxDefaultSize
 				/>
 			) }
 			{ hasPresets && ! showRangeControl && ! showCustomValueControl && (
@@ -295,7 +294,6 @@ export default function PresetInputControl( {
 					onMouseOut={ onMouseOut }
 					onMouseOver={ onMouseOver }
 					options={ options }
-					size="__unstable-large"
 					value={
 						// passing empty string as a fallback to continue using the
 						// component in controlled mode

package/src/components/resolution-tool/index.js

@@ -51,7 +51,6 @@ export default function ResolutionTool( {
 				options={ options }
 				onChange={ onChange }
 				help={ __( 'Select the size of the source image.' ) }
-				size="__unstable-large"
 			/>
 		</ToolsPanelItem>
 	);

package/src/components/responsive-block-control/test/index.js

@@ -39,11 +39,7 @@ const sizeOptions = [
 const renderTestDefaultControlComponent = ( labelComponent, device ) => {
 	return (
 		<>
-			<SelectControl
-				__next40pxDefaultSize
-				label={ labelComponent }
-				options={ sizeOptions }
-			/>
+			<SelectControl label={ labelComponent } options={ sizeOptions } />
 			<p id={ device.id }>
 				{ device.label } is used here for testing purposes to ensure we
 				have access to details about the device.

package/src/components/text-alignment-control/index.js

@@ -76,7 +76,6 @@ export default function TextAlignmentControl( {
 	return (
 		<ToggleGroupControl
 			isDeselectable
-			__next40pxDefaultSize
 			label={ __( 'Text alignment' ) }
 			className={ clsx(
 				'block-editor-text-alignment-control',

package/src/components/text-decoration-control/index.js

@@ -49,7 +49,6 @@ export default function TextDecorationControl( {
 	return (
 		<ToggleGroupControl
 			isDeselectable
-			__next40pxDefaultSize
 			label={ __( 'Decoration' ) }
 			className={ clsx(
 				'block-editor-text-decoration-control',

package/src/components/text-indent-control/index.js

@@ -22,19 +22,17 @@ import { useSettings } from '../../components/use-settings';
 /**
  * Control for line text indent.
  *
- * @param {Object}                  props                       Component props.
- * @param {boolean}                 props.__next40pxDefaultSize Start opting into the larger default height that will become the default size in a future version.
- * @param {string}                  props.value                 Currently selected text indent.
- * @param {Function}                props.onChange              Handles change in text indent selection.
- * @param {string|number|undefined} props.__unstableInputWidth  Input width to pass through to inner UnitControl. Should be a valid CSS value.
- * @param {boolean}                 props.withSlider            Whether to show the slider control.
- * @param {boolean}                 props.hasBottomMargin       Whether to add bottom margin below the control.
- * @param {string}                  props.help                  Help text to display below the control.
+ * @param {Object}                  props                      Component props.
+ * @param {string}                  props.value                Currently selected text indent.
+ * @param {Function}                props.onChange             Handles change in text indent selection.
+ * @param {string|number|undefined} props.__unstableInputWidth Input width to pass through to inner UnitControl. Should be a valid CSS value.
+ * @param {boolean}                 props.withSlider           Whether to show the slider control.
+ * @param {boolean}                 props.hasBottomMargin      Whether to add bottom margin below the control.
+ * @param {string}                  props.help                 Help text to display below the control.
  *
  * @return {Element} Text indent control.
  */
 export default function TextIndentControl( {
-	__next40pxDefaultSize = false,
 	value,
 	onChange,
 	__unstableInputWidth = '60px',
@@ -68,8 +66,6 @@ export default function TextIndentControl( {
 	if ( ! withSlider ) {
 		return (
 			<UnitControl
-				__next40pxDefaultSize={ __next40pxDefaultSize }
-				__shouldNotWarnDeprecated36pxSize
 				{ ...otherProps }
 				label={ __( 'Line indent' ) }
 				value={ value }
@@ -89,14 +85,11 @@ export default function TextIndentControl( {
 			<Flex>
 				<FlexItem isBlock>
 					<UnitControl
-						__next40pxDefaultSize={ __next40pxDefaultSize }
-						__shouldNotWarnDeprecated36pxSize
 						label={ __( 'Line indent' ) }
 						labelPosition="top"
 						hideLabelFromVision
 						value={ value }
 						onChange={ onChange }
-						size={ otherProps.size }
 						units={ units }
 						__unstableInputWidth={ __unstableInputWidth }
 						min={ 0 }
@@ -106,8 +99,6 @@ export default function TextIndentControl( {
 					<FlexItem isBlock>
 						<Spacer marginX={ 2 } marginBottom={ 0 }>
 							<RangeControl
-								__next40pxDefaultSize={ __next40pxDefaultSize }
-								__shouldNotWarnDeprecated36pxSize
 								label={ __( 'Line indent' ) }
 								hideLabelFromVision
 								value={ valueQuantity }

package/src/components/text-transform-control/index.js

@@ -55,7 +55,6 @@ export default function TextTransformControl( { className, value, onChange } ) {
 	return (
 		<ToggleGroupControl
 			isDeselectable
-			__next40pxDefaultSize
 			label={ __( 'Letter case' ) }
 			className={ clsx(
 				'block-editor-text-transform-control',

package/src/components/use-block-display-information/index.js

@@ -16,7 +16,6 @@ import { symbol } from '@wordpress/icons';
  */
 import { store as blockEditorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
-import { isIsolatedEditorKey } from '../../store/private-keys';
 
 /** @typedef {import('@wordpress/blocks').WPIcon} WPIcon */
 
@@ -78,8 +77,8 @@ export default function useBlockDisplayInformation( clientId ) {
 			const {
 				getBlockName,
 				getBlockAttributes,
+				getBlock,
 				__experimentalGetParsedPattern,
-				getSettings,
 			} = blockEditorSelect;
 			const { getBlockType, getActiveBlockVariation } =
 				select( blocksStore );
@@ -89,20 +88,12 @@ export default function useBlockDisplayInformation( clientId ) {
 				return null;
 			}
 			const attributes = getBlockAttributes( clientId );
-			const { isWithinEditedContentOnlySection } =
-				unlock( blockEditorSelect );
-			const isIsolatedEditor = !! getSettings()?.[ isIsolatedEditorKey ];
+			const { isSectionBlock } = unlock( blockEditorSelect );
 
 			// Check if this block is a pattern
 			const patternName = attributes?.metadata?.patternName;
-			const isEditedContentOnlySection =
-				isWithinEditedContentOnlySection( clientId );
 
-			if (
-				patternName &&
-				! isEditedContentOnlySection &&
-				! isIsolatedEditor
-			) {
+			if ( patternName && isSectionBlock( clientId ) ) {
 				const pattern = __experimentalGetParsedPattern( patternName );
 				const positionLabel = getPositionTypeLabel( attributes );
 				return {
@@ -118,7 +109,12 @@ export default function useBlockDisplayInformation( clientId ) {
 				};
 			}
 
-			const match = getActiveBlockVariation( blockName, attributes );
+			const match = getActiveBlockVariation(
+				blockName,
+				attributes,
+				undefined,
+				getBlock?.( clientId )?.innerContent
+			);
 			const isSynced =
 				isReusableBlock( blockType ) || isTemplatePart( blockType );
 			const syncedTitle = isSynced

package/src/components/use-block-display-information/test/index.js

@@ -14,7 +14,6 @@ import { symbol } from '@wordpress/icons';
  * Internal dependencies
  */
 import useBlockDisplayInformation from '../';
-import { isIsolatedEditorKey } from '../../../store/private-keys';
 
 jest.mock( '@wordpress/data/src/components/use-select', () => jest.fn() );
 jest.mock( '../../../lock-unlock', () => ( {
@@ -26,6 +25,7 @@ jest.mock( '../../../lock-unlock', () => ( {
 } ) );
 
 const groupIcon = 'group-icon';
+const templatePartIcon = 'template-part-icon';
 
 function TestComponent( { onChange } ) {
 	const blockInformation = useBlockDisplayInformation( 'client-id' );
@@ -56,19 +56,17 @@ function setupUseSelect( {
 		description: 'Gather blocks in a layout container.',
 	},
 	getActiveBlockVariation = () => null,
-	settings = {},
-	isWithinEditedSection = false,
+	isSectionBlock = true,
 } = {} ) {
 	useSelect.mockImplementation( ( mapSelect ) =>
 		mapSelect( () => ( {
 			getBlockName: () => blockName,
 			getBlockAttributes: () => attributes,
-			getSettings: () => settings,
 			__experimentalGetParsedPattern: () => ( {
 				title: 'Hero pattern',
 				description: 'Pattern description.',
 			} ),
-			isWithinEditedContentOnlySection: () => isWithinEditedSection,
+			isSectionBlock: () => isSectionBlock,
 			getBlockType: () => blockType,
 			getActiveBlockVariation,
 		} ) )
@@ -97,7 +95,7 @@ describe( 'useBlockDisplayInformation', () => {
 	} );
 
 	it( 'displays block information for a pattern section that is being edited', () => {
-		setupUseSelect( { isWithinEditedSection: true } );
+		setupUseSelect( { isSectionBlock: false } );
 		const onChange = jest.fn();
 
 		render( <TestComponent onChange={ onChange } /> );
@@ -120,9 +118,7 @@ describe( 'useBlockDisplayInformation', () => {
 					patternName: 'theme/header-wrapper',
 				},
 			},
-			settings: {
-				[ isIsolatedEditorKey ]: true,
-			},
+			isSectionBlock: false,
 		} );
 		const onChange = jest.fn();
 
@@ -137,4 +133,46 @@ describe( 'useBlockDisplayInformation', () => {
 			} )
 		);
 	} );
+
+	it( 'displays block information for a pattern wrapper when content-only editing is disabled', () => {
+		setupUseSelect( {
+			isSectionBlock: false,
+		} );
+		const onChange = jest.fn();
+
+		render( <TestComponent onChange={ onChange } /> );
+
+		expect( onChange ).toHaveBeenCalledWith(
+			expect.objectContaining( {
+				title: 'Group',
+				icon: groupIcon,
+				description: 'Gather blocks in a layout container.',
+				name: 'Hero pattern',
+			} )
+		);
+	} );
+
+	it( 'displays block information for section blocks without pattern metadata', () => {
+		setupUseSelect( {
+			attributes: {},
+			blockName: 'core/template-part',
+			blockType: {
+				name: 'core/template-part',
+				title: 'Template Part',
+				icon: templatePartIcon,
+				description: 'A template part.',
+			},
+		} );
+		const onChange = jest.fn();
+
+		render( <TestComponent onChange={ onChange } /> );
+
+		expect( onChange ).toHaveBeenCalledWith(
+			expect.objectContaining( {
+				title: 'Template Part',
+				icon: templatePartIcon,
+				description: 'A template part.',
+			} )
+		);
+	} );
 } );

package/src/components/use-on-block-drop/index.js

@@ -5,6 +5,7 @@ import { useCallback } from '@wordpress/element';
 import {
 	cloneBlock,
 	createBlock,
+	__experimentalCloneSanitizedBlock,
 	findTransform,
 	getBlockTransforms,
 	pasteHandler,
@@ -266,13 +267,9 @@ export default function useOnBlockDrop(
 					blocks.unshift( targetBlock );
 				}
 
-				const groupInnerBlocks = blocks.map( ( block ) => {
-					return createBlock(
-						block.name,
-						block.attributes,
-						block.innerBlocks
-					);
-				} );
+				const groupInnerBlocks = blocks.map( ( block ) =>
+					__experimentalCloneSanitizedBlock( block )
+				);
 
 				const areAllImages = blocks.every( ( block ) => {
 					return block.name === 'core/image';

package/src/components/writing-mode-control/index.js

@@ -40,7 +40,6 @@ export default function WritingModeControl( { className, value, onChange } ) {
 	return (
 		<ToggleGroupControl
 			isDeselectable
-			__next40pxDefaultSize
 			label={ __( 'Orientation' ) }
 			className={ clsx( 'block-editor-writing-mode-control', className ) }
 			value={ value }

package/src/hooks/block-hooks.scss

@@ -2,6 +2,7 @@
 @use "@wordpress/base-styles/colors" as *;
 
 .block-editor-hooks__block-hooks {
+
 	/**
 	 * Un-reverse the flex direction for the toggle's label.
 	 */
@@ -15,3 +16,17 @@
 		margin-bottom: $grid-unit-20;
 	}
 }
+
+.block-editor-hooks__position-control-item {
+
+	/**
+	 * Try to make items match the width of the anchor, subtract any margin on
+	 * items to calculate the correct inner width.
+	 */
+	max-inline-size: max(calc(var(--anchor-width) - (2 * var(--wp-ui-popup-padding))), 223px);
+}
+
+.block-editor-hooks__position-control-item-hint {
+	color: var(--wpds-color-foreground-content-neutral-weak);
+	margin-block-start: $grid-unit-05;
+}

package/src/hooks/font-size.js

@@ -131,7 +131,6 @@ export function FontSizeEdit( props ) {
 			valueMode={ fontSize ? 'slug' : 'literal' }
 			withReset={ false }
 			withSlider
-			size="__unstable-large"
 		/>
 	);
 }

package/src/hooks/layout.js

@@ -85,7 +85,7 @@ export function getResetLayout( layoutBlockSupport = {}, blockVariation ) {
 	} );
 }
 
-function getLayoutStateOverrides(
+export function getLayoutStateOverrides(
 	layout = {},
 	baseLayout = {},
 	existingLayout = {}
@@ -98,11 +98,13 @@ function getLayoutStateOverrides(
 	);
 
 	Object.entries( layout || {} ).forEach( ( [ key, value ] ) => {
+		const baseHasValue = Object.hasOwn( baseLayout || {}, key );
 		if (
 			! CHILD_LAYOUT_KEYS.includes( key ) &&
 			value !== baseLayout?.[ key ]
 		) {
-			overrides[ key ] = value;
+			overrides[ key ] =
+				value === undefined && baseHasValue ? null : value;
 		}
 	} );
 
@@ -466,7 +468,7 @@ function LayoutPanelPure( {
 			const nextStateStyle = cleanEmptyObject( {
 				...stateStyle,
 				layout: getLayoutStateOverrides(
-					cleanEmptyObject( newLayout ),
+					newLayout,
 					baseLayout,
 					stateStyle?.layout
 				),
@@ -593,7 +595,6 @@ export default {
 function LayoutTypeSwitcher( { type, onChange } ) {
 	return (
 		<ToggleGroupControl
-			__next40pxDefaultSize
 			isBlock
 			label={ __( 'Layout type' ) }
 			hideLabelFromVision

package/src/hooks/position.js

@@ -8,10 +8,11 @@ import clsx from 'clsx';
  */
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
-import { BaseControl, CustomSelectControl } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
-import { useMemo } from '@wordpress/element';
+import { useId, useMemo } from '@wordpress/element';
+// eslint-disable-next-line @wordpress/use-recommended-components -- Use the portal-based popup to avoid inspector clipping.
+import { SelectControl } from '@wordpress/ui';
 
 /**
  * Internal dependencies
@@ -27,13 +28,13 @@ const POSITION_SUPPORT_KEY = 'position';
 const DEFAULT_OPTION = {
 	key: 'default',
 	value: '',
-	name: __( 'Default' ),
+	label: __( 'Default' ),
 };
 
 const STICKY_OPTION = {
 	key: 'sticky',
 	value: 'sticky',
-	name: _x( 'Sticky', 'Name for the value of the CSS position property' ),
+	label: _x( 'Sticky', 'Name for the value of the CSS position property' ),
 	hint: __(
 		'The block will stick to the top of the window instead of scrolling.'
 	),
@@ -42,7 +43,7 @@ const STICKY_OPTION = {
 const FIXED_OPTION = {
 	key: 'fixed',
 	value: 'fixed',
-	name: _x( 'Fixed', 'Name for the value of the CSS position property' ),
+	label: _x( 'Fixed', 'Name for the value of the CSS position property' ),
 	hint: __( 'The block will not move when the page is scrolled.' ),
 };
 
@@ -262,28 +263,48 @@ export function PositionPanelPure( {
 	const selectedOption = value
 		? options.find( ( option ) => option.value === value ) || DEFAULT_OPTION
 		: DEFAULT_OPTION;
+	const hintIdPrefix = useId();
 
 	// Only display position controls if there is at least one option to choose from.
 	return options.length > 1 ? (
 		<InspectorControls group="position">
-			<BaseControl help={ stickyHelpText }>
-				<CustomSelectControl
-					__next40pxDefaultSize
-					label={ __( 'Position' ) }
-					hideLabelFromVision
-					describedBy={ sprintf(
-						// translators: %s: Currently selected position.
-						__( 'Currently selected position: %s' ),
-						selectedOption.name
-					) }
-					options={ options }
-					value={ selectedOption }
-					onChange={ ( { selectedItem } ) => {
-						onChangeType( selectedItem.value );
-					} }
-					size="__unstable-large"
-				/>
-			</BaseControl>
+			<SelectControl
+				label={ __( 'Position' ) }
+				hideLabelFromVision
+				description={ stickyHelpText }
+				items={ options }
+				value={ selectedOption }
+				onValueChange={ ( selectedItem ) => {
+					onChangeType( selectedItem.value );
+				} }
+			>
+				{ options.map( ( option ) => {
+					const hintId = option.hint
+						? `${ hintIdPrefix }-${ option.key }`
+						: undefined;
+
+					return (
+						<SelectControl.Item
+							key={ option.key }
+							value={ option }
+							label={ option.label }
+							className="block-editor-hooks__position-control-item"
+							aria-describedby={ hintId }
+						>
+							<div>{ option.label }</div>
+							{ option.hint && (
+								<div
+									id={ hintId }
+									className="block-editor-hooks__position-control-item-hint"
+									aria-hidden="true"
+								>
+									{ option.hint }
+								</div>
+							) }
+						</SelectControl.Item>
+					);
+				} ) }
+			</SelectControl>
 		</InspectorControls>
 	) : null;
 }

package/src/hooks/states.js

@@ -22,18 +22,12 @@ export const RESPONSIVE_STATE_LABELS = {
 	'@mobile': __( 'Mobile' ),
 };
 
-// Viewport states are selected globally via the editor's device preview
-// (Responsive editing). 'default' maps to the Desktop device, the remaining
-// options are derived from the shared responsive-state labels.
-const DEVICE_STATE_OPTIONS = [
-	{ value: 'default', label: __( 'Desktop' ) },
-	...Object.entries( RESPONSIVE_STATE_LABELS ).map(
-		( [ value, label ] ) => ( {
-			value,
-			label,
-		} )
-	),
-];
+const DEVICE_STATE_OPTIONS = Object.entries( RESPONSIVE_STATE_LABELS ).map(
+	( [ value, label ] ) => ( {
+		value,
+		label,
+	} )
+);
 
 // Keep in sync with WP_Theme_JSON_Gutenberg::VALID_BLOCK_PSEUDO_SELECTORS
 // and packages/global-styles-engine/src/core/render.tsx.

package/src/hooks/test/cross-origin-isolation.js

@@ -1,7 +1,3 @@
-/**
- * @jest-environment jsdom
- */
-
 describe( 'cross-origin-isolation', () => {
 	let originalCrossOriginIsolated;
 	let originalBody;

package/src/hooks/test/layout.js

@@ -1,7 +1,11 @@
 /**
  * Internal dependencies
  */
-import { getResetLayout, getResponsiveLayoutStyles } from '../layout';
+import {
+	getLayoutStateOverrides,
+	getResetLayout,
+	getResponsiveLayoutStyles,
+} from '../layout';
 
 describe( 'layout', () => {
 	describe( 'getResetLayout()', () => {
@@ -46,6 +50,28 @@ describe( 'layout', () => {
 		} );
 	} );
 
+	describe( 'getLayoutStateOverrides()', () => {
+		it( 'preserves explicit unsets for layout values inherited from the default state', () => {
+			expect(
+				getLayoutStateOverrides(
+					{ type: 'grid', columnCount: undefined },
+					{ type: 'grid', columnCount: 3 }
+				)
+			).toEqual( {
+				columnCount: null,
+			} );
+		} );
+
+		it( 'removes undefined layout values that are not inherited from the default state', () => {
+			expect(
+				getLayoutStateOverrides(
+					{ type: 'grid', columnCount: undefined },
+					{ type: 'grid' }
+				)
+			).toBeUndefined();
+		} );
+	} );
+
 	describe( 'getResponsiveLayoutStyles()', () => {
 		it( 'generates responsive block gap styles for flow layouts', () => {
 			expect(
@@ -135,6 +161,54 @@ describe( 'layout', () => {
 			);
 		} );
 
+		it( 'generates responsive auto grid columns when column count is unset', () => {
+			expect(
+				getResponsiveLayoutStyles( {
+					attributes: {
+						style: {
+							'@mobile': {
+								layout: {
+									columnCount: null,
+								},
+							},
+						},
+					},
+					blockName: 'core/group',
+					selector: '.wp-container-test',
+					layout: { type: 'grid', columnCount: 3 },
+					hasBlockGapSupport: true,
+				} )
+			).toBe(
+				'@media (width <= 480px){.wp-container-test { grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr)); container-type: inline-size; }}'
+			);
+		} );
+
+		it( 'generates responsive constrained size resets when content width is unset', () => {
+			const result = getResponsiveLayoutStyles( {
+				attributes: {
+					style: {
+						'@mobile': {
+							layout: {
+								contentSize: null,
+							},
+						},
+					},
+				},
+				blockName: 'core/group',
+				selector: '.wp-container-test',
+				layout: { type: 'constrained', contentSize: '800px' },
+				hasBlockGapSupport: true,
+			} );
+
+			expect( result ).toContain( '@media (width <= 480px)' );
+			expect( result ).toContain(
+				'max-width: var(--wp--style--global--content-size, none);'
+			);
+			expect( result ).toContain(
+				'max-width: var(--wp--style--global--wide-size, none);'
+			);
+		} );
+
 		it( 'keeps responsive grid column overrides when block gap is also changed', () => {
 			expect(
 				getResponsiveLayoutStyles( {