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

package/src/layouts/grid.js

@@ -8,6 +8,7 @@ import {
 	Flex,
 	FlexItem,
 	RangeControl,
+	ToggleControl,
 	__experimentalNumberControl as NumberControl,
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
@@ -81,6 +82,9 @@ export default {
 		const showMinWidthControl =
 			! layout?.isManualPlacement ||
 			window.__experimentalEnableGridInteractivity;
+		// Auto-fit/auto-fill only applies when grid items are placed
+		// automatically, so the control is irrelevant in manual placement mode.
+		const showFillControl = ! layout?.isManualPlacement;
 		const defaultColumnCount = layout.isManualPlacement ? 3 : undefined;
 		const hasLayoutValue = ( key, defaultValue ) =>
 			( layout?.[ key ] ?? defaultValue ) !==
@@ -92,6 +96,7 @@ export default {
 			hasLayoutValue( 'rowCount' );
 		const hasMinimumColumnWidthValue = () =>
 			hasLayoutValue( 'minimumColumnWidth' );
+		const hasFillValue = () => hasLayoutValue( 'autoFit', false );
 		const resetGridType = () =>
 			onChange(
 				cleanEmptyObject( {
@@ -116,6 +121,13 @@ export default {
 					minimumColumnWidth: resetLayout?.minimumColumnWidth,
 				} )
 			);
+		const resetFill = () =>
+			onChange(
+				cleanEmptyObject( {
+					...layout,
+					autoFit: resetLayout?.autoFit,
+				} )
+			);
 
 		return (
 			<>
@@ -162,6 +174,19 @@ export default {
 						/>
 					</ToolsPanelItem>
 				) }
+				{ showFillControl && (
+					<ToolsPanelItem
+						label={ __( 'Fill available space' ) }
+						hasValue={ hasFillValue }
+						onDeselect={ resetFill }
+						panelId={ clientId }
+					>
+						<GridLayoutFillControl
+							layout={ layout }
+							onChange={ onChange }
+						/>
+					</ToolsPanelItem>
+				) }
 			</>
 		);
 	},
@@ -188,8 +213,13 @@ export default {
 			minimumColumnWidth = null,
 			columnCount = null,
 			rowCount = null,
+			autoFit = false,
 		} = effectiveLayout;
 
+		// When enabled, columns stretch to fill the available space using
+		// `auto-fit`; otherwise empty tracks are preserved with `auto-fill`.
+		const autoPlacement = autoFit ? 'auto-fit' : 'auto-fill';
+
 		// Check that the grid layout attributes are of the correct type, so that we don't accidentally
 		// write code that stores a string attribute instead of a number.
 		if ( process.env.NODE_ENV === 'development' ) {
@@ -205,6 +235,9 @@ export default {
 			if ( rowCount && typeof rowCount !== 'number' ) {
 				throw new Error( 'rowCount must be a number' );
 			}
+			if ( autoFit && typeof autoFit !== 'boolean' ) {
+				throw new Error( 'autoFit must be a boolean' );
+			}
 		}
 
 		// Use the global blockGap value as fallback when available.
@@ -236,6 +269,7 @@ export default {
 			! hasViewportOverrides ||
 			hasViewportOverride( 'minimumColumnWidth' ) ||
 			hasViewportOverride( 'columnCount' ) ||
+			hasViewportOverride( 'autoFit' ) ||
 			( hasBlockGapOverride && minimumColumnWidth && columnCount > 0 );
 		const shouldOutputGridRows =
 			( ! hasViewportOverrides || hasViewportOverride( 'rowCount' ) ) &&
@@ -256,7 +290,7 @@ export default {
 				columnCount - 1
 			}) ) / ${ columnCount })`;
 			rules.push(
-				`grid-template-columns: repeat(auto-fill, minmax(${ maxValue }, 1fr))`
+				`grid-template-columns: repeat(${ autoPlacement }, minmax(${ maxValue }, 1fr))`
 			);
 		} else if ( shouldOutputGridColumns && columnCount ) {
 			rules.push(
@@ -264,7 +298,7 @@ export default {
 			);
 		} else if ( shouldOutputGridColumns ) {
 			rules.push(
-				`grid-template-columns: repeat(auto-fill, minmax(min(${
+				`grid-template-columns: repeat(${ autoPlacement }, minmax(min(${
 					minimumColumnWidth || '12rem'
 				}, 100%), 1fr))`
 			);
@@ -357,7 +391,6 @@ function GridLayoutMinimumWidthControl( { layout, onChange } ) {
 			<Flex gap={ 4 }>
 				<FlexItem isBlock>
 					<UnitControl
-						size="__unstable-large"
 						onChange={ ( newValue ) => {
 							onChange( {
 								...layout,
@@ -375,7 +408,6 @@ function GridLayoutMinimumWidthControl( { layout, onChange } ) {
 				</FlexItem>
 				<FlexItem isBlock>
 					<RangeControl
-						__next40pxDefaultSize
 						onChange={ handleSliderChange }
 						value={ quantity || 0 }
 						min={ 0 }
@@ -435,7 +467,7 @@ function GridLayoutColumnsAndRowsControl( {
 									columnCount: newColumnCount,
 								} );
 							} }
-							value={ columnCount }
+							value={ columnCount ?? '' }
 							min={ 1 }
 							label={ __( 'Columns' ) }
 							hideLabelFromVision={ ! isManualPlacement }
@@ -463,7 +495,6 @@ function GridLayoutColumnsAndRowsControl( {
 							/>
 						) : (
 							<RangeControl
-								__next40pxDefaultSize
 								value={ columnCount ?? 1 }
 								onChange={ ( value ) =>
 									onChange( {
@@ -488,6 +519,28 @@ function GridLayoutColumnsAndRowsControl( {
 	);
 }
 
+// Enables stretching grid columns to fill the available space (auto-fit)
+// instead of leaving empty tracks at the end of a row (auto-fill).
+function GridLayoutFillControl( { layout, onChange } ) {
+	const { autoFit = false } = layout;
+
+	return (
+		<ToggleControl
+			label={ __( 'Fill available space' ) }
+			help={ __(
+				'Stretch columns to fill the available space, instead of leaving gaps when there are too few items to fill a row.'
+			) }
+			checked={ autoFit }
+			onChange={ ( value ) =>
+				onChange( {
+					...layout,
+					autoFit: value,
+				} )
+			}
+		/>
+	);
+}
+
 // Enables switching between grid types
 function GridLayoutTypeControl( { layout, onChange } ) {
 	const { columnCount, rowCount, minimumColumnWidth, isManualPlacement } =
@@ -535,7 +588,6 @@ function GridLayoutTypeControl( { layout, onChange } ) {
 
 	return (
 		<ToggleGroupControl
-			__next40pxDefaultSize
 			label={ __( 'Grid item position' ) }
 			value={ gridPlacement }
 			onChange={ onChangeType }

package/src/layouts/test/constrained.js

@@ -1,8 +1,35 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+/**
+ * WordPress dependencies
+ */
+import { __experimentalToolsPanel as ToolsPanel } from '@wordpress/components';
+
 /**
  * Internal dependencies
  */
 import constrained from '../constrained';
 
+const ConstrainedLayoutInspectorControls = constrained.inspectorControls;
+const PANEL_ID = 'test-panel';
+
+function renderInspectorControls( props = {} ) {
+	return render(
+		<ToolsPanel label="Layout" resetAll={ jest.fn() } panelId={ PANEL_ID }>
+			<ConstrainedLayoutInspectorControls
+				clientId={ PANEL_ID }
+				layout={ {} }
+				onChange={ jest.fn() }
+				{ ...props }
+			/>
+		</ToolsPanel>
+	);
+}
+
 describe( 'getLayoutStyle', () => {
 	it( 'should return an empty string if no non-default params are provided', () => {
 		const expected = '';
@@ -18,4 +45,68 @@ describe( 'getLayoutStyle', () => {
 
 		expect( result ).toBe( expected );
 	} );
+
+	it( 'should reset constrained sizes when content width is unset in a viewport', () => {
+		const result = constrained.getLayoutStyle( {
+			selector: '.my-container',
+			layout: { type: 'constrained', contentSize: '800px' },
+			viewportOverrides: { contentSize: null },
+			style: {},
+			blockName: 'test-block',
+			hasBlockGapSupport: false,
+			layoutDefinitions: undefined,
+		} );
+
+		expect( result ).toContain(
+			'max-width: var(--wp--style--global--content-size, none);'
+		);
+		expect( result ).toContain(
+			'max-width: var(--wp--style--global--wide-size, none);'
+		);
+	} );
+} );
+
+describe( 'ConstrainedLayoutInspectorControls', () => {
+	it( 'renders an unset content width as an empty control value', () => {
+		renderInspectorControls( {
+			layout: { type: 'constrained', contentSize: null },
+			resetLayout: { type: 'constrained', contentSize: '800px' },
+		} );
+
+		expect(
+			screen.getByRole( 'spinbutton', { name: 'Content width' } )
+		).toHaveDisplayValue( '' );
+	} );
+
+	it.each( [
+		[ 'Content width', 'contentSize' ],
+		[ 'Wide width', 'wideSize' ],
+	] )(
+		'preserves a cleared %s value for viewport layout overrides',
+		async ( label, layoutKey ) => {
+			const user = userEvent.setup();
+			const onChange = jest.fn();
+			renderInspectorControls( {
+				layout: { type: 'constrained', [ layoutKey ]: '800px' },
+				resetLayout: { type: 'constrained', [ layoutKey ]: '800px' },
+				onChange,
+			} );
+
+			await user.click(
+				screen.getByRole( 'button', { name: /Layout options/i } )
+			);
+			await user.click(
+				screen.getByRole( 'menuitemcheckbox', {
+					name: `Show ${ label }`,
+				} )
+			);
+			await user.clear(
+				screen.getByRole( 'spinbutton', { name: label } )
+			);
+
+			const nextLayout = onChange.mock.lastCall?.[ 0 ];
+			expect( Object.hasOwn( nextLayout, layoutKey ) ).toBe( true );
+			expect( nextLayout[ layoutKey ] ).toBeUndefined();
+		}
+	);
 } );

package/src/layouts/test/grid.js

@@ -1,8 +1,34 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { __experimentalToolsPanel as ToolsPanel } from '@wordpress/components';
+
 /**
  * Internal dependencies
  */
 import grid from '../grid';
 
+const GridLayoutInspectorControls = grid.inspectorControls;
+const PANEL_ID = 'test-panel';
+
+function renderInspectorControls( props = {} ) {
+	return render(
+		<ToolsPanel label="Layout" resetAll={ jest.fn() } panelId={ PANEL_ID }>
+			<GridLayoutInspectorControls
+				clientId={ PANEL_ID }
+				layout={ {} }
+				onChange={ jest.fn() }
+				{ ...props }
+			/>
+		</ToolsPanel>
+	);
+}
+
 describe( 'getLayoutStyle', () => {
 	it( 'should return only `grid-template-columns` and `container-type` properties if no non-default params are provided', () => {
 		const expected = `.my-container { grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr)); container-type: inline-size; }`;
@@ -46,4 +72,49 @@ describe( 'getLayoutStyle', () => {
 
 		expect( result ).toBe( expected );
 	} );
+	it( 'should use `auto-fit` instead of `auto-fill` when autoFit is enabled', () => {
+		const expected = `.my-container { grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); container-type: inline-size; }`;
+
+		const result = grid.getLayoutStyle( {
+			selector: '.my-container',
+			layout: { autoFit: true },
+			style: {},
+			blockName: 'test-block',
+			hasBlockGapSupport: false,
+			layoutDefinitions: undefined,
+		} );
+
+		expect( result ).toBe( expected );
+	} );
+	it( 'should use `auto-fit` with max() function when autoFit is enabled and both minimumColumnWidth and columnCount are provided', () => {
+		const expected = `.my-container { grid-template-columns: repeat(auto-fit, minmax(max(min( 12rem, 100%), ( 100% - (1.2rem*2) ) / 3), 1fr)); container-type: inline-size; }`;
+
+		const result = grid.getLayoutStyle( {
+			selector: '.my-container',
+			layout: {
+				minimumColumnWidth: '12rem',
+				columnCount: 3,
+				autoFit: true,
+			},
+			style: {},
+			blockName: 'test-block',
+			hasBlockGapSupport: false,
+			layoutDefinitions: undefined,
+		} );
+
+		expect( result ).toBe( expected );
+	} );
+} );
+
+describe( 'GridLayoutInspectorControls', () => {
+	it( 'renders an unset column count as an empty control value', () => {
+		renderInspectorControls( {
+			layout: { type: 'grid', columnCount: null },
+			resetLayout: { type: 'grid', columnCount: 3 },
+		} );
+
+		expect(
+			screen.getByRole( 'spinbutton', { name: 'Columns' } )
+		).toHaveDisplayValue( '' );
+	} );
 } );

package/src/private-apis.js

@@ -52,11 +52,11 @@ import {
 	mediaEditKey,
 	getMediaSelectKey,
 	deviceTypeKey,
-	onViewportStateChangeKey,
 	isIsolatedEditorKey,
 	isNavigationOverlayContextKey,
 	isNavigationPostEditorKey,
 	mediaUploadOnSuccessKey,
+	mediaSideloadFromUrlKey,
 	openMediaEditorModalKey,
 } from './store/private-keys';
 import { requiresWrapperOnCopy } from './components/writing-flow/utils';
@@ -78,6 +78,7 @@ import { LinkPicker } from './components/link-picker';
 import useRemoteUrlData from './components/link-control/use-rich-url-data';
 import { PrivateBlockContext } from './components/block-list/private-block-context';
 import useListViewPanelState from './components/use-list-view-panel-state';
+import InnerContent from './components/inner-content';
 import {
 	isHashLink,
 	isRelativePath,
@@ -141,11 +142,11 @@ lock( privateApis, {
 	mediaEditKey,
 	getMediaSelectKey,
 	deviceTypeKey,
-	onViewportStateChangeKey,
 	isIsolatedEditorKey,
 	isNavigationOverlayContextKey,
 	isNavigationPostEditorKey,
 	mediaUploadOnSuccessKey,
+	mediaSideloadFromUrlKey,
 	openMediaEditorModalKey,
 	useBlockElement,
 	useBlockElementRef,
@@ -155,4 +156,5 @@ lock( privateApis, {
 	useListViewPanelState,
 	isHashLink,
 	isRelativePath,
+	InnerContent,
 } );

package/src/store/actions.js

@@ -2051,6 +2051,7 @@ export function __unstableSetTemporarilyEditingAsBlocks( clientId ) {
  *                                                                                                   the report url for the media item. It accepts the `InserterMediaItem` as an argument.
  * @property {boolean}                                                [isExternalResource]           If the media category is an external resource, this should be set to true.
  *                                                                                                   This is used to avoid making a request to the external resource when the user
+ * @property {string}                                                 [emptyMessage]                 Optional message shown in place of the generic "No results found." when the source has no items and there is no active search. Providing it also keeps the source in the tab list while empty, so the message stays reachable.
  */
 export const registerInserterMediaCategory =
 	( category ) =>

package/src/store/private-actions.js

@@ -558,3 +558,34 @@ export function setSelectedBlockStyleStateCanvasPreview( clientId, value ) {
 		value,
 	};
 }
+
+/**
+ * Sets the globally selected viewport style state. When set to a value other
+ * than 'default', block style edits in the inspector apply to that viewport.
+ * Driven by the editor's device preview while Responsive editing is enabled.
+ *
+ * @param {string} viewport The selected viewport state (e.g. 'default', 'tablet', 'mobile').
+ *
+ * @return {Object} Action object.
+ */
+export function setStyleStateViewport( viewport ) {
+	return {
+		type: 'SET_STYLE_STATE_VIEWPORT',
+		viewport,
+	};
+}
+
+/**
+ * Sets whether Responsive editing is enabled. When enabled, the device preview
+ * also drives which viewport block style edits are applied to. Session-only.
+ *
+ * @param {boolean} enabled Whether Responsive editing is enabled.
+ *
+ * @return {Object} Action object.
+ */
+export function setResponsiveEditing( enabled ) {
+	return {
+		type: 'SET_RESPONSIVE_EDITING',
+		enabled,
+	};
+}

package/src/store/private-keys.js

@@ -10,10 +10,10 @@ export const mediaEditKey = Symbol( 'mediaEditKey' );
 export const getMediaSelectKey = Symbol( 'getMediaSelect' );
 export const isIsolatedEditorKey = Symbol( 'isIsolatedEditor' );
 export const deviceTypeKey = Symbol( 'deviceTypeKey' );
-export const onViewportStateChangeKey = Symbol( 'onViewportStateChangeKey' );
 export const isNavigationOverlayContextKey = Symbol(
 	'isNavigationOverlayContext'
 );
 export const isNavigationPostEditorKey = Symbol( 'isNavigationPostEditor' );
 export const mediaUploadOnSuccessKey = Symbol( 'mediaUploadOnSuccess' );
+export const mediaSideloadFromUrlKey = Symbol( 'mediaSideloadFromUrl' );
 export const openMediaEditorModalKey = Symbol( 'openMediaEditorModal' );

package/src/store/private-selectors.js

@@ -159,16 +159,31 @@ export const getClientIdsTree = createSelector(
 	( state ) => [ state.blocks.order ]
 );
 
-function getEnabledClientIdsTreeUnmemoized( state, rootClientId ) {
+/**
+ * Returns a tree of block objects filtered by a block inclusion callback.
+ * Excluded blocks are replaced by any included descendants.
+ *
+ * @param {Object}   state         Global application state.
+ * @param {?string}  rootClientId  Optional root client ID of block list.
+ * @param {Function} includesBlock Callback that returns whether to include a block.
+ *
+ * @return {Object[]} Tree of block objects with only clientID and innerBlocks set.
+ */
+function getFilteredClientIdsTreeUnmemoized(
+	state,
+	rootClientId,
+	includesBlock
+) {
 	const blockOrder = getBlockOrder( state, rootClientId );
 	const result = [];
 
 	for ( const clientId of blockOrder ) {
-		const innerBlocks = getEnabledClientIdsTreeUnmemoized(
+		const innerBlocks = getFilteredClientIdsTreeUnmemoized(
 			state,
-			clientId
+			clientId,
+			includesBlock
 		);
-		if ( getBlockEditingMode( state, clientId ) !== 'disabled' ) {
+		if ( includesBlock( state, clientId ) ) {
 			result.push( { clientId, innerBlocks } );
 		} else {
 			result.push( ...innerBlocks );
@@ -178,6 +193,100 @@ function getEnabledClientIdsTreeUnmemoized( state, rootClientId ) {
 	return result;
 }
 
+function getEnabledClientIdsTreeUnmemoized( state, rootClientId ) {
+	return getFilteredClientIdsTreeUnmemoized(
+		state,
+		rootClientId,
+		( _state, clientId ) =>
+			getBlockEditingMode( _state, clientId ) !== 'disabled'
+	);
+}
+
+/**
+ * Returns whether the nearest explicit block editing mode in the block's
+ * ancestry is disabled.
+ *
+ * @param {Object} state    Global application state.
+ * @param {string} clientId The block client ID.
+ *
+ * @return {boolean} Whether an explicit parent block editing mode disables this
+ *                   block.
+ */
+function hasExplicitDisabledParent( state, clientId ) {
+	let parent = state.blocks.parents.get( clientId );
+
+	while ( parent !== undefined ) {
+		const parentBlockEditingMode =
+			state.blocks.blockEditingModes.get( parent );
+
+		if ( parentBlockEditingMode ) {
+			return parentBlockEditingMode === 'disabled';
+		}
+
+		parent = state.blocks.parents.get( parent );
+	}
+
+	return false;
+}
+
+/**
+ * Returns the block tree displayed by List View.
+ *
+ * @param {Object}  state        Global application state.
+ * @param {?string} rootClientId Optional root client ID of block list.
+ *
+ * @return {Object[]} Tree of block objects with only clientID and innerBlocks set.
+ */
+function getListViewClientIdsTreeUnmemoized( state, rootClientId ) {
+	return getFilteredClientIdsTreeUnmemoized(
+		state,
+		rootClientId,
+		( _state, clientId ) => {
+			// Non-disabled blocks are always shown in List view.
+			if ( getBlockEditingMode( _state, clientId ) !== 'disabled' ) {
+				return true;
+			}
+
+			const explicitBlockEditingMode =
+				_state.blocks.blockEditingModes.get( clientId );
+			if ( explicitBlockEditingMode ) {
+				return explicitBlockEditingMode !== 'disabled';
+			}
+
+			if ( hasExplicitDisabledParent( _state, clientId ) ) {
+				return false;
+			}
+
+			// When a contentOnly section is being edited, there's some special handling.
+			if ( _state.editedContentOnlySection ) {
+				// Blocks within the edited content only section generally have their block
+				// editing mode flipped from disabled to default for editing, any disabled
+				// blocks can still be excluded.
+				if ( isWithinEditedContentOnlySection( _state, clientId ) ) {
+					return false;
+				}
+
+				// Blocks that are not in another section but are disabled are shown.
+				// These are blocks that would usually be visible.
+				const parentSectionBlock = getParentSectionBlock(
+					_state,
+					clientId
+				);
+				if ( ! parentSectionBlock ) {
+					return true;
+				}
+
+				// If a block is in another section, then it is only visible if its a content block.
+				if ( isContentBlock( getBlockName( _state, clientId ) ) ) {
+					return true;
+				}
+			}
+
+			return false;
+		}
+	);
+}
+
 /**
  * Returns a tree of block objects with only clientID and innerBlocks set.
  * Blocks with a 'disabled' editing mode are not included.
@@ -195,6 +304,34 @@ export const getEnabledClientIdsTree = createRegistrySelector( () =>
 	] )
 );
 
+/**
+ * Returns the block tree displayed by List View.
+ *
+ * Blocks with a 'disabled' editing mode are usually not included. When a
+ * content-only section is being edited, List View keeps visible outside-section
+ * context blocks in the tree so they can be faded. Blocks that were already
+ * hidden because they are non-content blocks inside another content-only section
+ * remain hidden.
+ *
+ * @param {Object}  state        Global application state.
+ * @param {?string} rootClientId Optional root client ID of block list.
+ *
+ * @return {Object[]} Tree of block objects with only clientID and innerBlocks set.
+ */
+export const getListViewClientIdsTree = createRegistrySelector( () =>
+	createSelector( getListViewClientIdsTreeUnmemoized, ( state ) => [
+		state.blocks.order,
+		state.derivedBlockEditingModes,
+		state.blocks.blockEditingModes,
+		state.blocks.parents,
+		state.blocks.byClientId,
+		state.blocks.attributes,
+		state.blockListSettings,
+		state.editedContentOnlySection,
+		state.settings,
+	] )
+);
+
 /**
  * Returns a list of a given block's ancestors, from top to bottom. Blocks with
  * a 'disabled' editing mode are excluded.
@@ -1152,6 +1289,30 @@ const DEFAULT_BLOCK_STYLE_STATE = {
 	pseudo: 'default',
 };
 
+/**
+ * Returns the globally selected viewport style state. When set to a value other
+ * than 'default', block style edits in the inspector apply to that viewport.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {string} The selected viewport style state.
+ */
+export function getStyleStateViewport( state ) {
+	return state.styleStateViewport ?? DEFAULT_BLOCK_STYLE_STATE.viewport;
+}
+
+/**
+ * Returns whether Responsive editing is enabled. When enabled, the device
+ * preview also drives which viewport block style edits are applied to.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {boolean} Whether Responsive editing is enabled.
+ */
+export function isResponsiveEditing( state ) {
+	return state.isResponsiveEditing;
+}
+
 /**
  * Returns the selected style state for a block's style controls.
  *
@@ -1160,13 +1321,25 @@ const DEFAULT_BLOCK_STYLE_STATE = {
  *
  * @return {Object} The selected block style state.
  */
-export function getSelectedBlockStyleState( state, clientId ) {
-	if ( state.selectedBlockStyleState?.clientId !== clientId ) {
-		return DEFAULT_BLOCK_STYLE_STATE;
-	}
-
-	return state.selectedBlockStyleState.value ?? DEFAULT_BLOCK_STYLE_STATE;
-}
+export const getSelectedBlockStyleState = createSelector(
+	( state, clientId ) => {
+		const perBlockState =
+			state.selectedBlockStyleState?.clientId === clientId
+				? state.selectedBlockStyleState.value ??
+				  DEFAULT_BLOCK_STYLE_STATE
+				: DEFAULT_BLOCK_STYLE_STATE;
+
+		return {
+			...perBlockState,
+			// The viewport is tracked globally, so inject it here. This way
+			// consumers receive a single combined state object instead of
+			// merging the global viewport themselves, and selectors derived
+			// from this stay consistent.
+			viewport: getStyleStateViewport( state ),
+		};
+	},
+	( state ) => [ state.styleStateViewport, state.selectedBlockStyleState ]
+);
 
 /**
  * Returns whether a non-default style state is selected for a block.