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

package/src/components/use-resize-canvas/index.js

@@ -1,79 +1,18 @@
 /**
  * WordPress dependencies
  */
-import { useEffect, useState } from '@wordpress/element';
+import deprecated from '@wordpress/deprecated';
 
 /**
- * Function to resize the editor window.
+ * Previously returned inline styles that sized the editor canvas to emulate a
+ * device preview width. Device preview is now handled by the editor's resizable
+ * canvas, so this hook is a no-op kept for backward compatibility.
  *
- * @param {string} deviceType Used for determining the size of the container (e.g. Desktop, Tablet, Mobile)
- *
- * @return {Object} Inline styles to be added to resizable container.
+ * @deprecated
  */
-export default function useResizeCanvas( deviceType ) {
-	const [ actualWidth, updateActualWidth ] = useState( window.innerWidth );
-
-	useEffect( () => {
-		if ( deviceType === 'Desktop' ) {
-			return;
-		}
-
-		const resizeListener = () => updateActualWidth( window.innerWidth );
-		window.addEventListener( 'resize', resizeListener );
-
-		return () => {
-			window.removeEventListener( 'resize', resizeListener );
-		};
-	}, [ deviceType ] );
-
-	const getCanvasWidth = ( device ) => {
-		let deviceWidth;
-
-		/*
-		 * Matches the breakpoints in packages/base-styles/_breakpoints.scss,
-		 * and breakpoints in packages/compose/src/hooks/use-viewport-match/index.js.
-		 * minus 1 to trigger the media query for device preview.
-		 */
-		switch ( device ) {
-			case 'Tablet':
-				deviceWidth = 782 - 1; // preview for useViewportMatch( 'medium', '<' )
-				break;
-			case 'Mobile':
-				deviceWidth = 480 - 1; // preview for useViewportMatch( 'mobile', '<' )
-				break;
-			default:
-				return null;
-		}
-
-		return deviceWidth < actualWidth ? deviceWidth : actualWidth;
-	};
-
-	const contentInlineStyles = ( device ) => {
-		const height = device === 'Mobile' ? '768px' : '1024px';
-		const marginVertical = '40px';
-		const marginHorizontal = 'auto';
-
-		switch ( device ) {
-			case 'Tablet':
-			case 'Mobile':
-				return {
-					width: getCanvasWidth( device ),
-					// Keeping margin styles separate to avoid warnings
-					// when those props get overridden in the iframe component
-					marginTop: marginVertical,
-					marginBottom: marginVertical,
-					marginLeft: marginHorizontal,
-					marginRight: marginHorizontal,
-					height,
-					overflowY: 'auto',
-				};
-			default:
-				return {
-					marginLeft: marginHorizontal,
-					marginRight: marginHorizontal,
-				};
-		}
-	};
-
-	return contentInlineStyles( deviceType );
+export default function useResizeCanvas() {
+	deprecated( 'wp.blockEditor.useResizeCanvas', {
+		since: '7.1',
+		hint: 'Device preview is now handled by the editor canvas. This hook no longer does anything.',
+	} );
 }

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

@@ -1,7 +1,6 @@
 /**
  * WordPress dependencies
  */
-import { getBlockType } from '@wordpress/blocks';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -23,6 +22,13 @@ export const RESPONSIVE_STATE_LABELS = {
 	'@mobile': __( 'Mobile' ),
 };
 
+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.
 export const VALID_BLOCK_PSEUDO_STATES = {
@@ -43,23 +49,11 @@ function getPseudoStateOptions( name ) {
 
 const DEFAULT_STATE_VALUE = 'default';
 
-function getViewportStateOptions( name ) {
-	if ( ! getBlockType( name )?.attributes?.style ) {
-		return [];
-	}
-
-	return Object.entries( RESPONSIVE_STATE_LABELS ).map(
-		( [ value, label ] ) => ( {
-			value,
-			label,
-		} )
-	);
-}
-
 /**
- * Renders a style-state selector in the block card header.
- * Viewport states are shown for blocks with a style attribute, while
- * pseudo-states are shown for blocks with configured pseudo-state support.
+ * Renders a pseudo-state selector in the block card header.
+ *
+ * Viewport states are selected globally via the editor's device preview
+ * (Responsive editing), so only pseudo-states are exposed here.
  *
  * @param {Object}   props          Component props.
  * @param {string}   props.name     Block name.
@@ -68,21 +62,17 @@ function getViewportStateOptions( name ) {
  * @return {Element|null} State control component, or null if not applicable.
  */
 export function BlockStatesControl( { name, value, onChange } ) {
-	const viewportStateOptions = getViewportStateOptions( name );
 	const pseudoStateOptions = getPseudoStateOptions( name );
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
-	if ( ! viewportStateOptions.length && ! pseudoStateOptions.length ) {
+	if ( ! pseudoStateOptions.length ) {
 		return null;
 	}
 
 	return (
 		<StateControl
-			viewportStates={ viewportStateOptions }
 			pseudoStates={ pseudoStateOptions }
-			viewportValue={ value?.viewport ?? DEFAULT_STATE_VALUE }
 			pseudoStateValue={ value?.pseudo ?? DEFAULT_STATE_VALUE }
-			onChangeViewport={ ( viewport ) => onChange( { viewport } ) }
 			onChangePseudoState={ ( pseudo ) => onChange( { pseudo } ) }
 			popoverProps={ dropdownMenuProps.popoverProps }
 			showText={ false }
@@ -90,17 +80,25 @@ export function BlockStatesControl( { name, value, onChange } ) {
 	);
 }
 
-export function BlockStateBadges( { name, value } ) {
-	const viewportStateOptions = getViewportStateOptions( name );
+/**
+ * Renders badges for the active style states of a block.
+ *
+ * @param {Object}  props                     Component props.
+ * @param {string}  props.name                Block name.
+ * @param {Object}  props.value               Currently selected style-state value.
+ * @param {boolean} props.isResponsiveEditing Whether Responsive editing is enabled.
+ * @return {Element|null} Badges component, or null if there is nothing to show.
+ */
+export function BlockStateBadges( { name, value, isResponsiveEditing } ) {
 	const pseudoStateOptions = getPseudoStateOptions( name );
 
-	if ( ! viewportStateOptions.length && ! pseudoStateOptions.length ) {
+	if ( ! pseudoStateOptions.length && ! isResponsiveEditing ) {
 		return null;
 	}
 
 	return (
 		<StateControlBadges
-			viewportStates={ viewportStateOptions }
+			viewportStates={ isResponsiveEditing ? DEVICE_STATE_OPTIONS : [] }
 			pseudoStates={ pseudoStateOptions }
 			viewportValue={ value?.viewport ?? DEFAULT_STATE_VALUE }
 			pseudoStateValue={ value?.pseudo ?? DEFAULT_STATE_VALUE }

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( {

package/src/layouts/constrained.js

@@ -30,6 +30,9 @@ import { BlockControls, JustifyContentControl } from '../components';
 import { cleanEmptyObject, shouldSkipSerialization } from '../hooks/utils';
 import { LAYOUT_DEFINITIONS } from './definitions';
 
+const GLOBAL_CONTENT_SIZE = 'var(--wp--style--global--content-size, none)';
+const GLOBAL_WIDE_SIZE = 'var(--wp--style--global--wide-size, none)';
+
 export default {
 	name: 'constrained',
 	label: __( 'Constrained' ),
@@ -112,24 +115,25 @@ export default {
 							panelId={ clientId }
 						>
 							<UnitControl
-								__next40pxDefaultSize
 								label={ __( 'Content width' ) }
 								labelPosition="top"
-								value={ contentSize || wideSize || '' }
+								value={
+									contentSize === null
+										? ''
+										: contentSize || wideSize || ''
+								}
 								onChange={ ( nextWidth ) => {
 									nextWidth =
 										0 > parseFloat( nextWidth )
 											? '0'
 											: nextWidth;
-									onChange(
-										cleanEmptyObject( {
-											...layout,
-											contentSize:
-												nextWidth !== ''
-													? nextWidth
-													: undefined,
-										} )
-									);
+									onChange( {
+										...layout,
+										contentSize:
+											nextWidth !== ''
+												? nextWidth
+												: undefined,
+									} );
 								} }
 								units={ units }
 								prefix={
@@ -146,24 +150,25 @@ export default {
 							panelId={ clientId }
 						>
 							<UnitControl
-								__next40pxDefaultSize
 								label={ __( 'Wide width' ) }
 								labelPosition="top"
-								value={ wideSize || contentSize || '' }
+								value={
+									wideSize === null
+										? ''
+										: wideSize || contentSize || ''
+								}
 								onChange={ ( nextWidth ) => {
 									nextWidth =
 										0 > parseFloat( nextWidth )
 											? '0'
 											: nextWidth;
-									onChange(
-										cleanEmptyObject( {
-											...layout,
-											wideSize:
-												nextWidth !== ''
-													? nextWidth
-													: undefined,
-										} )
-									);
+									onChange( {
+										...layout,
+										wideSize:
+											nextWidth !== ''
+												? nextWidth
+												: undefined,
+									} );
 								} }
 								units={ units }
 								prefix={
@@ -188,7 +193,6 @@ export default {
 						panelId={ clientId }
 					>
 						<ToggleGroupControl
-							__next40pxDefaultSize
 							label={ __( 'Justification' ) }
 							value={ justifyContent }
 							onChange={ onJustificationChange }
@@ -273,12 +277,30 @@ export default {
 
 		const hasJustificationOverride =
 			hasViewportOverrides && hasViewportOverride( 'justifyContent' );
+		const hasContentSizeOverride =
+			hasViewportOverrides && hasViewportOverride( 'contentSize' );
+		const hasWideSizeOverride =
+			hasViewportOverrides && hasViewportOverride( 'wideSize' );
 		const shouldOutputConstrainedSizes =
 			! hasViewportOverrides ||
-			hasViewportOverride( 'contentSize' ) ||
-			hasViewportOverride( 'wideSize' );
+			hasContentSizeOverride ||
+			hasWideSizeOverride;
+		const isResettingConstrainedSizes =
+			hasViewportOverrides &&
+			( ( hasContentSizeOverride && ! contentSize ) ||
+				( hasWideSizeOverride && ! wideSize ) );
+		const contentMaxWidth =
+			contentSize ||
+			( wideSize && ! hasContentSizeOverride
+				? wideSize
+				: GLOBAL_CONTENT_SIZE );
+		const wideMaxWidth =
+			wideSize ||
+			( contentSize && ! hasWideSizeOverride
+				? contentSize
+				: GLOBAL_WIDE_SIZE );
 		const constrainedSizeDeclarations = [
-			`max-width: ${ contentSize ?? wideSize }`,
+			`max-width: ${ contentMaxWidth }`,
 		];
 		if ( ! hasViewportOverrides || hasJustificationOverride ) {
 			constrainedSizeDeclarations.push(
@@ -287,7 +309,8 @@ export default {
 			);
 		}
 		let output =
-			shouldOutputConstrainedSizes && ( !! contentSize || !! wideSize )
+			shouldOutputConstrainedSizes &&
+			( !! contentSize || !! wideSize || isResettingConstrainedSizes )
 				? `
 						${ appendSelectors(
 							selector,
@@ -296,7 +319,7 @@ export default {
 						${ constrainedSizeDeclarations.join( '; ' ) };
 					}
 					${ appendSelectors( selector, '> .alignwide' ) }  {
-						max-width: ${ wideSize ?? contentSize };
+						max-width: ${ wideMaxWidth };
 					}
 					${ appendSelectors( selector, '> .alignfull' ) } {
 						max-width: none;

package/src/layouts/flex.js

@@ -437,7 +437,6 @@ function FlexLayoutVerticalAlignmentControl( {
 
 	return (
 		<ToggleGroupControl
-			__next40pxDefaultSize
 			label={ __( 'Alignment' ) }
 			onChange={ onVerticalAlignmentChange }
 			value={ verticalAlignment }
@@ -524,7 +523,6 @@ function FlexLayoutJustifyContentControl( {
 
 	return (
 		<ToggleGroupControl
-			__next40pxDefaultSize
 			label={ __( 'Justification' ) }
 			value={ justifyContent }
 			onChange={ onJustificationChange }
@@ -568,7 +566,6 @@ function OrientationControl( { layout, onChange } ) {
 	} = layout;
 	return (
 		<ToggleGroupControl
-			__next40pxDefaultSize
 			className="block-editor-hooks__flex-layout-orientation-controls"
 			label={ __( 'Orientation' ) }
 			value={ orientation }