@wordpress/block-editor 15.22.1 → 15.23.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "15.22.1",
+	"version": "15.23.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -60,43 +60,43 @@
 	],
 	"dependencies": {
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.49.0",
-		"@wordpress/base-styles": "^10.1.0",
-		"@wordpress/blob": "^4.49.0",
-		"@wordpress/block-serialization-default-parser": "^5.49.0",
-		"@wordpress/blocks": "^15.22.0",
-		"@wordpress/commands": "^1.49.1",
-		"@wordpress/components": "^36.0.1",
-		"@wordpress/compose": "^8.2.0",
-		"@wordpress/data": "^10.49.0",
-		"@wordpress/dataviews": "^17.0.1",
-		"@wordpress/date": "^5.49.0",
-		"@wordpress/deprecated": "^4.49.0",
-		"@wordpress/dom": "^4.49.0",
-		"@wordpress/element": "^8.1.0",
-		"@wordpress/escape-html": "^3.49.0",
-		"@wordpress/global-styles-engine": "^1.16.0",
-		"@wordpress/hooks": "^4.49.0",
-		"@wordpress/html-entities": "^4.49.0",
-		"@wordpress/i18n": "^6.22.0",
-		"@wordpress/icons": "^15.0.0",
-		"@wordpress/image-cropper": "^1.13.1",
-		"@wordpress/interactivity": "^6.49.0",
-		"@wordpress/is-shallow-equal": "^5.49.0",
-		"@wordpress/keyboard-shortcuts": "^5.49.0",
-		"@wordpress/keycodes": "^4.49.0",
-		"@wordpress/notices": "^5.49.1",
-		"@wordpress/preferences": "^4.49.1",
-		"@wordpress/priority-queue": "^3.49.0",
-		"@wordpress/private-apis": "^1.49.0",
-		"@wordpress/rich-text": "^7.49.0",
-		"@wordpress/style-engine": "^2.49.0",
-		"@wordpress/token-list": "^3.49.0",
-		"@wordpress/ui": "^0.16.1",
-		"@wordpress/upload-media": "^0.34.1",
-		"@wordpress/url": "^4.49.0",
-		"@wordpress/warning": "^3.49.0",
-		"@wordpress/wordcount": "^4.49.0",
+		"@wordpress/a11y": "^4.50.0",
+		"@wordpress/base-styles": "^10.2.0",
+		"@wordpress/blob": "^4.50.0",
+		"@wordpress/block-serialization-default-parser": "^5.50.0",
+		"@wordpress/blocks": "^15.23.0",
+		"@wordpress/commands": "^1.50.0",
+		"@wordpress/components": "^36.1.0",
+		"@wordpress/compose": "^8.3.0",
+		"@wordpress/data": "^10.50.0",
+		"@wordpress/dataviews": "^17.1.0",
+		"@wordpress/date": "^5.50.0",
+		"@wordpress/deprecated": "^4.50.0",
+		"@wordpress/dom": "^4.50.0",
+		"@wordpress/element": "^8.2.0",
+		"@wordpress/escape-html": "^3.50.0",
+		"@wordpress/global-styles-engine": "^1.17.0",
+		"@wordpress/hooks": "^4.50.0",
+		"@wordpress/html-entities": "^4.50.0",
+		"@wordpress/i18n": "^6.23.0",
+		"@wordpress/icons": "^15.1.0",
+		"@wordpress/image-cropper": "^1.14.0",
+		"@wordpress/interactivity": "^6.50.0",
+		"@wordpress/is-shallow-equal": "^5.50.0",
+		"@wordpress/keyboard-shortcuts": "^5.50.0",
+		"@wordpress/keycodes": "^4.50.0",
+		"@wordpress/notices": "^5.50.0",
+		"@wordpress/preferences": "^4.50.0",
+		"@wordpress/priority-queue": "^3.50.0",
+		"@wordpress/private-apis": "^1.50.0",
+		"@wordpress/rich-text": "^7.50.0",
+		"@wordpress/style-engine": "^2.50.0",
+		"@wordpress/token-list": "^3.50.0",
+		"@wordpress/ui": "^0.17.0",
+		"@wordpress/upload-media": "^0.35.0",
+		"@wordpress/url": "^4.50.0",
+		"@wordpress/warning": "^3.50.0",
+		"@wordpress/wordcount": "^4.50.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.9.3",
@@ -133,5 +133,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "9a75283890dda96ae1d37197b5070fae8c9cf66f"
+	"gitHead": "fee6e24e8e63d36f6bbcf487c193461e9bd79753"
 }

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

@@ -45,7 +45,6 @@ import {
 	hasViewportBlockStyleState,
 	isDefaultBlockStyleState,
 } from '../../hooks/block-style-state';
-import { onViewportStateChangeKey } from '../../store/private-keys';
 
 function StyleInspectorSlots( {
 	blockName,
@@ -150,7 +149,7 @@ function BlockInspector() {
 		blockEditingMode,
 		selectedBlockStyleState,
 		showStateOnCanvas,
-		onViewportStateChange,
+		isResponsiveEditing,
 	} = useSelect( ( select ) => {
 		const {
 			getSelectedBlockClientId,
@@ -164,8 +163,8 @@ function BlockInspector() {
 			getBlockEditingMode,
 			getSelectedBlockStyleState,
 			isSelectedBlockStyleStateShownOnCanvas,
+			isResponsiveEditing: _isResponsiveEditing,
 		} = unlock( select( blockEditorStore ) );
-		const blockEditorSettings = select( blockEditorStore ).getSettings();
 		const { getBlockStyles } = select( blocksStore );
 		const _selectedBlockClientId = getSelectedBlockClientId();
 		const isWithinEditedSection = isWithinEditedContentOnlySection(
@@ -203,8 +202,7 @@ function BlockInspector() {
 			showStateOnCanvas: isSelectedBlockStyleStateShownOnCanvas(
 				_renderedBlockClientId
 			),
-			onViewportStateChange:
-				blockEditorSettings?.[ onViewportStateChangeKey ],
+			isResponsiveEditing: _isResponsiveEditing(),
 		};
 	}, [] );
 
@@ -339,7 +337,7 @@ function BlockInspector() {
 				blockEditingMode={ blockEditingMode }
 				selectedBlockStyleState={ selectedBlockStyleState }
 				showStateOnCanvas={ showStateOnCanvas }
-				onViewportStateChange={ onViewportStateChange }
+				isResponsiveEditing={ isResponsiveEditing }
 				isBlockStyleStateSelected={ isBlockStyleStateSelected }
 			/>
 		</BlockInspectorSingleBlockWrapper>
@@ -395,11 +393,14 @@ const BlockInspectorSingleBlock = ( {
 	blockEditingMode,
 	selectedBlockStyleState,
 	showStateOnCanvas,
-	onViewportStateChange,
+	isResponsiveEditing,
 	isBlockStyleStateSelected,
 } ) => {
 	const listViewRef = useRef( null );
 	const hasMultipleTabs = availableTabs?.length > 1;
+	const hasPseudoState = hasPseudoBlockStyleState( selectedBlockStyleState );
+	const isEditingStyleState =
+		isBlockStyleStateSelected || isResponsiveEditing;
 	const hasParentChildBlockCards =
 		editedContentOnlySection &&
 		editedContentOnlySection !== renderedBlockClientId;
@@ -415,32 +416,10 @@ const BlockInspectorSingleBlock = ( {
 		setSelectedBlockStyleStateCanvasPreview,
 	} = unlock( useDispatch( blockEditorStore ) );
 	const onBlockStyleStateChange = ( value ) => {
-		const nextSelectedBlockStyleState = {
-			...selectedBlockStyleState,
-			...value,
-		};
-
-		setSelectedBlockStyleState(
-			renderedBlockClientId,
-			nextSelectedBlockStyleState
-		);
-
-		if ( value.viewport ) {
-			onViewportStateChange?.( {
-				viewport: nextSelectedBlockStyleState.viewport,
-				showStateOnCanvas,
-			} );
-		}
+		setSelectedBlockStyleState( renderedBlockClientId, value );
 	};
 	const onShowStateOnCanvasChange = ( value ) => {
 		setSelectedBlockStyleStateCanvasPreview( renderedBlockClientId, value );
-
-		if ( value ) {
-			onViewportStateChange?.( {
-				viewport: selectedBlockStyleState.viewport,
-				showStateOnCanvas: value,
-			} );
-		}
 	};
 
 	return (
@@ -470,34 +449,37 @@ const BlockInspectorSingleBlock = ( {
 					)
 				}
 			/>
-			{ blockEditingMode === 'default' && isBlockStyleStateSelected && (
+			{ blockEditingMode === 'default' && isEditingStyleState && (
 				<Spacer paddingX={ 4 } paddingY={ 2 }>
-					<ToggleControl
-						label={ __( 'Show state on canvas' ) }
-						checked={ showStateOnCanvas }
-						onChange={ onShowStateOnCanvasChange }
-					/>
+					{ hasPseudoState && (
+						<ToggleControl
+							label={ __( 'Show state on canvas' ) }
+							checked={ showStateOnCanvas }
+							onChange={ onShowStateOnCanvasChange }
+						/>
+					) }
 					<BlockStateBadges
 						name={ blockName }
 						value={ selectedBlockStyleState }
+						isResponsiveEditing={ isResponsiveEditing }
 					/>
 				</Spacer>
 			) }
 			<ViewportVisibilityInfo clientId={ renderedBlockClientId } />
 			<EditContents clientId={ renderedBlockClientId } />
-			{ ! isBlockStyleStateSelected && (
+			{ ! isEditingStyleState && (
 				<BlockVariationTransforms
 					blockClientId={ renderedBlockClientId }
 				/>
 			) }
 			<BlockInspectorPreTabsSlot />
-			{ isBlockStyleStateSelected && ! isSectionBlock && (
+			{ isEditingStyleState && ! isSectionBlock && (
 				<StyleStateInspectorSlots
 					blockName={ blockName }
 					selectedBlockStyleState={ selectedBlockStyleState }
 				/>
 			) }
-			{ ! isBlockStyleStateSelected && hasMultipleTabs && (
+			{ ! isEditingStyleState && hasMultipleTabs && (
 				<>
 					<InspectorControlsTabs
 						hasBlockStyles={ hasBlockStyles }
@@ -509,7 +491,7 @@ const BlockInspectorSingleBlock = ( {
 					/>
 				</>
 			) }
-			{ ! isBlockStyleStateSelected && ! hasMultipleTabs && (
+			{ ! isEditingStyleState && ! hasMultipleTabs && (
 				<>
 					{ hasBlockStyles && (
 						<BlockStyles clientId={ renderedBlockClientId } />
@@ -523,9 +505,7 @@ const BlockInspectorSingleBlock = ( {
 					) }
 				</>
 			) }
-			{ ! isBlockStyleStateSelected && (
-				<InspectorControlsLastItem.Slot />
-			) }
+			{ ! isEditingStyleState && <InspectorControlsLastItem.Slot /> }
 			<SkipToSelectedBlock key="back" />
 		</div>
 	);

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/hooks/states.js

@@ -1,7 +1,6 @@
 /**
  * WordPress dependencies
  */
-import { getBlockType } from '@wordpress/blocks';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -23,6 +22,19 @@ 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,
+		} )
+	),
+];
+
 // 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 +55,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 +68,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 +86,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/private-apis.js

@@ -52,7 +52,6 @@ import {
 	mediaEditKey,
 	getMediaSelectKey,
 	deviceTypeKey,
-	onViewportStateChangeKey,
 	isIsolatedEditorKey,
 	isNavigationOverlayContextKey,
 	isNavigationPostEditorKey,
@@ -141,7 +140,6 @@ lock( privateApis, {
 	mediaEditKey,
 	getMediaSelectKey,
 	deviceTypeKey,
-	onViewportStateChangeKey,
 	isIsolatedEditorKey,
 	isNavigationOverlayContextKey,
 	isNavigationPostEditorKey,

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,7 +10,6 @@ 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'
 );

package/src/store/private-selectors.js

@@ -1152,6 +1152,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 +1184,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.

package/src/store/reducer.js

@@ -2312,7 +2312,6 @@ export function selectedBlockStyleState( state = undefined, action ) {
 				clientId: action.clientId,
 				showStateOnCanvas,
 				value: {
-					viewport: 'default',
 					pseudo: 'default',
 					...previousValue,
 					...action.value,
@@ -2332,7 +2331,6 @@ export function selectedBlockStyleState( state = undefined, action ) {
 				clientId: action.clientId,
 				showStateOnCanvas: action.value,
 				value: {
-					viewport: 'default',
 					pseudo: 'default',
 					...previousValue,
 				},
@@ -2390,6 +2388,41 @@ export function selectedBlockStyleState( state = undefined, action ) {
 	return state;
 }
 
+/**
+ * Reducer holding the globally selected viewport style state. When set to a
+ * value other than 'default', block style edits in the inspector are applied to
+ * that viewport. Driven by the editor's device preview (Responsive editing).
+ *
+ * @param {string} state  Current state.
+ * @param {Object} action Dispatched action.
+ *
+ * @return {string} Updated state.
+ */
+export function styleStateViewport( state = 'default', action ) {
+	if ( action.type === 'SET_STYLE_STATE_VIEWPORT' ) {
+		return action.viewport ?? 'default';
+	}
+
+	return state;
+}
+
+/**
+ * Reducer for whether Responsive editing is enabled. When enabled, the device
+ * preview also drives which viewport block style edits are applied to.
+ *
+ * @param {boolean} state  Current state.
+ * @param {Object}  action Dispatched action.
+ *
+ * @return {boolean} Updated state.
+ */
+export function isResponsiveEditing( state = false, action ) {
+	if ( action.type === 'SET_RESPONSIVE_EDITING' ) {
+		return action.enabled;
+	}
+
+	return state;
+}
+
 const combinedReducers = combineReducers( {
 	blocks,
 	isDragging,
@@ -2426,6 +2459,8 @@ const combinedReducers = combineReducers( {
 	listViewContentPanelOpen,
 	requestedInspectorTab,
 	selectedBlockStyleState,
+	styleStateViewport,
+	isResponsiveEditing,
 } );
 
 /**