From be0fd1b6c9325448e45724863578c9984cad483a Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Thu, 16 Jul 2026 10:40:44 +0800 Subject: [PATCH 1/3] Allow viewport dropdown to control global styles states when rendered in the complementary area --- .../components/global-styles-sidebar/index.js | 7 ++++ .../src/components/global-styles/index.js | 4 ++ .../global-styles-ui/src/global-styles-ui.tsx | 40 +++++++++++++++++-- .../global-styles-ui/src/screen-block.tsx | 18 +++++++-- .../global-styles-ui/src/screen-header.tsx | 8 +++- 5 files changed, 70 insertions(+), 7 deletions(-) diff --git a/packages/editor/src/components/global-styles-sidebar/index.js b/packages/editor/src/components/global-styles-sidebar/index.js index 9811731d932154..6b6e1d4b6ed1e7 100644 --- a/packages/editor/src/components/global-styles-sidebar/index.js +++ b/packages/editor/src/components/global-styles-sidebar/index.js @@ -10,6 +10,7 @@ import { store as preferencesStore } from '@wordpress/preferences'; import { useViewportMatch, usePrevious } from '@wordpress/compose'; import { store as coreStore } from '@wordpress/core-data'; import { store as interfaceStore } from '@wordpress/interface'; +import { store as blockEditorStore } from '@wordpress/block-editor'; /** * Internal dependencies @@ -30,6 +31,7 @@ export default function GlobalStylesSidebar() { hasRevisions, activeComplementaryArea, editorSettings, + styleStateViewport, } = useSelect( ( select ) => { const { getActiveComplementaryArea } = select( interfaceStore ); const { getStylesPath, getShowStylebook } = unlock( @@ -62,6 +64,9 @@ export default function GlobalStylesSidebar() { activeComplementaryArea: select( interfaceStore ).getActiveComplementaryArea( 'core' ), editorSettings: select( editorStore ).getEditorSettings(), + styleStateViewport: unlock( + select( blockEditorStore ) + ).getStyleStateViewport(), }; }, [] ); const { setStylesPath, setShowStylebook, resetStylesNavigation } = unlock( @@ -172,6 +177,8 @@ export default function GlobalStylesSidebar() { path={ stylesPath } onPathChange={ setStylesPath } settings={ editorSettings } + selectedViewport={ styleStateViewport } + showViewportStateControl={ false } /> diff --git a/packages/editor/src/components/global-styles/index.js b/packages/editor/src/components/global-styles/index.js index ab82cfb7e63277..e5ad875bd93f74 100644 --- a/packages/editor/src/components/global-styles/index.js +++ b/packages/editor/src/components/global-styles/index.js @@ -79,6 +79,8 @@ export default function GlobalStylesUIWrapper( { path, onPathChange, settings, + selectedViewport, + showViewportStateControl, } ) { const { user: userConfig, @@ -105,6 +107,8 @@ export default function GlobalStylesUIWrapper( { fontLibraryEnabled={ fontLibraryEnabled } serverCSS={ serverCSS } serverSettings={ serverSettings } + selectedViewport={ selectedViewport } + showViewportStateControl={ showViewportStateControl } /> @@ -51,7 +55,12 @@ function BlockStylesNavigationScreens( { key={ index } path={ parentMenu + '/variations/' + style.name } > - + ) ) } @@ -61,6 +70,8 @@ function BlockStylesNavigationScreens( { interface ContextScreensProps { name?: string; parentMenu?: string; + selectedViewport?: string; + showViewportStateControl?: boolean; } interface GlobalStylesNavigationScreenProps { @@ -68,7 +79,12 @@ interface GlobalStylesNavigationScreenProps { children: React.ReactNode; } -function ContextScreens( { name, parentMenu = '' }: ContextScreensProps ) { +function ContextScreens( { + name, + parentMenu = '', + selectedViewport, + showViewportStateControl, +}: ContextScreensProps ) { const blockStyleVariations = useSelect( ( select ) => { if ( ! name ) { @@ -89,6 +105,8 @@ function ContextScreens( { name, parentMenu = '' }: ContextScreensProps ) { parentMenu={ parentMenu } blockStyles={ blockStyleVariations } blockName={ name || '' } + selectedViewport={ selectedViewport } + showViewportStateControl={ showViewportStateControl } /> ); } @@ -110,6 +128,10 @@ interface GlobalStylesUIProps { serverCSS?: { isGlobalStyles?: boolean }[]; /** Server settings for BlockEditorProvider (optional) */ serverSettings?: { __unstableResolvedAssets: Record< string, unknown > }; + /** Selected viewport state (optional) */ + selectedViewport?: string; + /** Whether to show viewport state controls (optional) */ + showViewportStateControl?: boolean; } export function GlobalStylesUI( { @@ -121,6 +143,8 @@ export function GlobalStylesUI( { fontLibraryEnabled = false, serverCSS, serverSettings, + selectedViewport, + showViewportStateControl = true, }: GlobalStylesUIProps ) { const blocks = getBlockTypes(); @@ -232,7 +256,13 @@ export function GlobalStylesUI( { encodeURIComponent( block.name ) } > - + ) ) } diff --git a/packages/global-styles-ui/src/screen-block.tsx b/packages/global-styles-ui/src/screen-block.tsx index 3ee6834a5a8a85..1cec7276a16b8e 100644 --- a/packages/global-styles-ui/src/screen-block.tsx +++ b/packages/global-styles-ui/src/screen-block.tsx @@ -97,9 +97,16 @@ const { interface ScreenBlockProps { name: string; variation?: string; + selectedViewport?: string; + showViewportStateControl?: boolean; } -function ScreenBlock( { name, variation }: ScreenBlockProps ) { +function ScreenBlock( { + name, + variation, + selectedViewport: controlledSelectedViewport, + showViewportStateControl = true, +}: ScreenBlockProps ) { const { user: userConfig, merged: mergedConfig, @@ -113,10 +120,12 @@ function ScreenBlock( { name, variation }: ScreenBlockProps ) { const prefix = prefixParts.join( '.' ); // State selector state - const [ selectedViewport, setSelectedViewport ] = + const [ localSelectedViewport, setSelectedViewport ] = useState< string >( 'default' ); const [ selectedPseudoState, setSelectedPseudoState ] = useState< string >( 'default' ); + const selectedViewport = + controlledSelectedViewport ?? localSelectedViewport; const viewportSettings = mergedConfig.settings?.viewport; const validViewportStates = useMemo( () => getValidViewportStates( viewportSettings ), @@ -361,8 +370,11 @@ function ScreenBlock( { name, variation }: ScreenBlockProps ) { pseudoStates={ validPseudoStates } selectedViewport={ effectiveSelectedViewport } selectedPseudoState={ selectedPseudoState } - onChangeViewport={ setSelectedViewport } + onChangeViewport={ + showViewportStateControl ? setSelectedViewport : undefined + } onChangePseudoState={ setSelectedPseudoState } + showViewportStateControl={ showViewportStateControl } /> void; onChangePseudoState?: ( value: string ) => void; + showViewportStateControl?: boolean; } export function ScreenHeader( { @@ -45,6 +46,7 @@ export function ScreenHeader( { selectedPseudoState = 'default', onChangeViewport, onChangePseudoState, + showViewportStateControl = true, }: ScreenHeaderProps ) { return ( @@ -69,7 +71,11 @@ export function ScreenHeader( { Date: Thu, 16 Jul 2026 11:16:50 +0800 Subject: [PATCH 2/3] Rename prop --- .../components/global-styles-sidebar/index.js | 2 +- .../src/components/global-styles/index.js | 4 +-- .../global-styles-ui/src/global-styles-ui.tsx | 28 ++++++++++--------- .../global-styles-ui/src/screen-block.tsx | 10 ++++--- .../global-styles-ui/src/screen-header.tsx | 6 ++-- 5 files changed, 27 insertions(+), 23 deletions(-) diff --git a/packages/editor/src/components/global-styles-sidebar/index.js b/packages/editor/src/components/global-styles-sidebar/index.js index 6b6e1d4b6ed1e7..9ffff3f91fd528 100644 --- a/packages/editor/src/components/global-styles-sidebar/index.js +++ b/packages/editor/src/components/global-styles-sidebar/index.js @@ -178,7 +178,7 @@ export default function GlobalStylesSidebar() { onPathChange={ setStylesPath } settings={ editorSettings } selectedViewport={ styleStateViewport } - showViewportStateControl={ false } + showResponsiveStateControls={ false } /> diff --git a/packages/editor/src/components/global-styles/index.js b/packages/editor/src/components/global-styles/index.js index e5ad875bd93f74..a8b37439ca04cc 100644 --- a/packages/editor/src/components/global-styles/index.js +++ b/packages/editor/src/components/global-styles/index.js @@ -80,7 +80,7 @@ export default function GlobalStylesUIWrapper( { onPathChange, settings, selectedViewport, - showViewportStateControl, + showResponsiveStateControls, } ) { const { user: userConfig, @@ -108,7 +108,7 @@ export default function GlobalStylesUIWrapper( { serverCSS={ serverCSS } serverSettings={ serverSettings } selectedViewport={ selectedViewport } - showViewportStateControl={ showViewportStateControl } + showResponsiveStateControls={ showResponsiveStateControls } /> @@ -59,7 +59,9 @@ function BlockStylesNavigationScreens( { name={ blockName } variation={ style.name } selectedViewport={ selectedViewport } - showViewportStateControl={ showViewportStateControl } + showResponsiveStateControls={ + showResponsiveStateControls + } /> ) ) } @@ -71,7 +73,7 @@ interface ContextScreensProps { name?: string; parentMenu?: string; selectedViewport?: string; - showViewportStateControl?: boolean; + showResponsiveStateControls?: boolean; } interface GlobalStylesNavigationScreenProps { @@ -83,7 +85,7 @@ function ContextScreens( { name, parentMenu = '', selectedViewport, - showViewportStateControl, + showResponsiveStateControls, }: ContextScreensProps ) { const blockStyleVariations = useSelect( ( select ) => { @@ -106,7 +108,7 @@ function ContextScreens( { blockStyles={ blockStyleVariations } blockName={ name || '' } selectedViewport={ selectedViewport } - showViewportStateControl={ showViewportStateControl } + showResponsiveStateControls={ showResponsiveStateControls } /> ); } @@ -130,8 +132,8 @@ interface GlobalStylesUIProps { serverSettings?: { __unstableResolvedAssets: Record< string, unknown > }; /** Selected viewport state (optional) */ selectedViewport?: string; - /** Whether to show viewport state controls (optional) */ - showViewportStateControl?: boolean; + /** Whether to show responsive state controls (optional) */ + showResponsiveStateControls?: boolean; } export function GlobalStylesUI( { @@ -144,7 +146,7 @@ export function GlobalStylesUI( { serverCSS, serverSettings, selectedViewport, - showViewportStateControl = true, + showResponsiveStateControls = true, }: GlobalStylesUIProps ) { const blocks = getBlockTypes(); @@ -259,8 +261,8 @@ export function GlobalStylesUI( { @@ -271,8 +273,8 @@ export function GlobalStylesUI( { encodeURIComponent( block.name ) } selectedViewport={ selectedViewport } - showViewportStateControl={ - showViewportStateControl + showResponsiveStateControls={ + showResponsiveStateControls } /> diff --git a/packages/global-styles-ui/src/screen-block.tsx b/packages/global-styles-ui/src/screen-block.tsx index 1cec7276a16b8e..8a3b5104a2bb75 100644 --- a/packages/global-styles-ui/src/screen-block.tsx +++ b/packages/global-styles-ui/src/screen-block.tsx @@ -98,14 +98,14 @@ interface ScreenBlockProps { name: string; variation?: string; selectedViewport?: string; - showViewportStateControl?: boolean; + showResponsiveStateControls?: boolean; } function ScreenBlock( { name, variation, selectedViewport: controlledSelectedViewport, - showViewportStateControl = true, + showResponsiveStateControls = true, }: ScreenBlockProps ) { const { user: userConfig, @@ -371,10 +371,12 @@ function ScreenBlock( { selectedViewport={ effectiveSelectedViewport } selectedPseudoState={ selectedPseudoState } onChangeViewport={ - showViewportStateControl ? setSelectedViewport : undefined + showResponsiveStateControls + ? setSelectedViewport + : undefined } onChangePseudoState={ setSelectedPseudoState } - showViewportStateControl={ showViewportStateControl } + showResponsiveStateControls={ showResponsiveStateControls } /> void; onChangePseudoState?: ( value: string ) => void; - showViewportStateControl?: boolean; + showResponsiveStateControls?: boolean; } export function ScreenHeader( { @@ -46,7 +46,7 @@ export function ScreenHeader( { selectedPseudoState = 'default', onChangeViewport, onChangePseudoState, - showViewportStateControl = true, + showResponsiveStateControls = true, }: ScreenHeaderProps ) { return ( @@ -72,7 +72,7 @@ export function ScreenHeader( { Date: Thu, 16 Jul 2026 16:53:35 +0800 Subject: [PATCH 3/3] Avoid replacing active sidebar for responsive styles --- .../editor/src/components/preview-dropdown/index.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/packages/editor/src/components/preview-dropdown/index.js b/packages/editor/src/components/preview-dropdown/index.js index a62fed93ffb74a..d1b02acf8b0d43 100644 --- a/packages/editor/src/components/preview-dropdown/index.js +++ b/packages/editor/src/components/preview-dropdown/index.js @@ -47,6 +47,7 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) { templateId, isResponsiveEditing, hasBlockSelection, + activeComplementaryArea, } = useSelect( ( select ) => { const { getCurrentPostType, @@ -77,6 +78,8 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) { templateId: getCurrentTemplateId(), isResponsiveEditing: _isResponsiveEditing(), hasBlockSelection: !! getBlockSelectionStart(), + activeComplementaryArea: + select( interfaceStore ).getActiveComplementaryArea( 'core' ), }; }, [] ); const { setDeviceType, setRenderingMode, setDefaultRenderingMode } = unlock( @@ -99,7 +102,13 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) { ? VIEWPORT_STATE_BY_DEVICE_TYPE[ deviceType ] ?? 'default' : 'default' ); - if ( newIsResponsiveEditing && hasBlockSelection ) { + // Only auto-open the block inspector when enabling responsive styles + // for a selected block and no complementary area is already open. + if ( + newIsResponsiveEditing && + hasBlockSelection && + ! activeComplementaryArea + ) { enableComplementaryArea( 'core', sidebars.block ); } };