Skip to content

Responsive styles: Use viewport dropdown to control states for in-editor global styles sidebar #80339

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
talldan merged 3 commits into from
Jul 16, 2026
Merged

Responsive styles: Use viewport dropdown to control states for in-editor global styles sidebar #80339

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
be0fd1b
Allow viewport dropdown to control global styles states when rendered…
talldan Jul 16, 2026
a6a2c76
Rename prop
talldan Jul 16, 2026
bdf553c
Avoid replacing active sidebar for responsive styles
talldan Jul 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions packages/editor/src/components/global-styles-sidebar/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -30,6 +31,7 @@ export default function GlobalStylesSidebar() {
hasRevisions,
activeComplementaryArea,
editorSettings,
styleStateViewport,
} = useSelect( ( select ) => {
const { getActiveComplementaryArea } = select( interfaceStore );
const { getStylesPath, getShowStylebook } = unlock(
Expand Down Expand Up @@ -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(
Expand Down Expand Up @@ -172,6 +177,8 @@ export default function GlobalStylesSidebar() {
path={ stylesPath }
onPathChange={ setStylesPath }
settings={ editorSettings }
selectedViewport={ styleStateViewport }
showResponsiveStateControls={ false }
/>
</DefaultSidebar>
<WelcomeGuideStyles />
Expand Down
4 changes: 4 additions & 0 deletions packages/editor/src/components/global-styles/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,8 @@ export default function GlobalStylesUIWrapper( {
path,
onPathChange,
settings,
selectedViewport,
showResponsiveStateControls,
} ) {
const {
user: userConfig,
Expand All @@ -105,6 +107,8 @@ export default function GlobalStylesUIWrapper( {
fontLibraryEnabled={ fontLibraryEnabled }
serverCSS={ serverCSS }
serverSettings={ serverSettings }
selectedViewport={ selectedViewport }
showResponsiveStateControls={ showResponsiveStateControls }
/>
<GlobalStylesBlockLink
path={ path }
Expand Down
11 changes: 10 additions & 1 deletion packages/editor/src/components/preview-dropdown/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
templateId,
isResponsiveEditing,
hasBlockSelection,
activeComplementaryArea,
} = useSelect( ( select ) => {
const {
getCurrentPostType,
Expand Down Expand Up @@ -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(
Expand All @@ -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 );
}
};
Expand Down
42 changes: 39 additions & 3 deletions packages/global-styles-ui/src/global-styles-ui.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,12 +37,16 @@ interface BlockStylesNavigationScreensProps {
parentMenu: string;
blockStyles: any[];
blockName: string;
selectedViewport?: string;
showResponsiveStateControls?: boolean;
}

function BlockStylesNavigationScreens( {
parentMenu,
blockStyles,
blockName,
selectedViewport,
showResponsiveStateControls,
}: BlockStylesNavigationScreensProps ) {
return (
<>
Expand All @@ -51,7 +55,14 @@ function BlockStylesNavigationScreens( {
key={ index }
path={ parentMenu + '/variations/' + style.name }
>
<ScreenBlock name={ blockName } variation={ style.name } />
<ScreenBlock
name={ blockName }
variation={ style.name }
selectedViewport={ selectedViewport }
showResponsiveStateControls={
showResponsiveStateControls
}
/>
</Navigator.Screen>
) ) }
</>
Expand All @@ -61,14 +72,21 @@ function BlockStylesNavigationScreens( {
interface ContextScreensProps {
name?: string;
parentMenu?: string;
selectedViewport?: string;
showResponsiveStateControls?: boolean;
}

interface GlobalStylesNavigationScreenProps {
path: string;
children: React.ReactNode;
}

function ContextScreens( { name, parentMenu = '' }: ContextScreensProps ) {
function ContextScreens( {
name,
parentMenu = '',
selectedViewport,
showResponsiveStateControls,
}: ContextScreensProps ) {
const blockStyleVariations = useSelect(
( select ) => {
if ( ! name ) {
Expand All @@ -89,6 +107,8 @@ function ContextScreens( { name, parentMenu = '' }: ContextScreensProps ) {
parentMenu={ parentMenu }
blockStyles={ blockStyleVariations }
blockName={ name || '' }
selectedViewport={ selectedViewport }
showResponsiveStateControls={ showResponsiveStateControls }
/>
);
}
Expand All @@ -110,6 +130,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 responsive state controls (optional) */
showResponsiveStateControls?: boolean;
}

export function GlobalStylesUI( {
Expand All @@ -121,6 +145,8 @@ export function GlobalStylesUI( {
fontLibraryEnabled = false,
serverCSS,
serverSettings,
selectedViewport,
showResponsiveStateControls = true,
}: GlobalStylesUIProps ) {
const blocks = getBlockTypes();

Expand Down Expand Up @@ -232,14 +258,24 @@ export function GlobalStylesUI( {
encodeURIComponent( block.name )
}
>
<ScreenBlock name={ block.name } />
<ScreenBlock
name={ block.name }
selectedViewport={ selectedViewport }
showResponsiveStateControls={
showResponsiveStateControls
}
/>
</GlobalStylesNavigationScreen>
<ContextScreens
name={ block.name }
parentMenu={
'/blocks/' +
encodeURIComponent( block.name )
}
selectedViewport={ selectedViewport }
showResponsiveStateControls={
showResponsiveStateControls
}
/>
</Fragment>
) ) }
Expand Down
20 changes: 17 additions & 3 deletions packages/global-styles-ui/src/screen-block.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,9 +97,16 @@ const {
interface ScreenBlockProps {
name: string;
variation?: string;
selectedViewport?: string;
showResponsiveStateControls?: boolean;
}

function ScreenBlock( { name, variation }: ScreenBlockProps ) {
function ScreenBlock( {
name,
variation,
selectedViewport: controlledSelectedViewport,

@ramonjd ramonjd Jul 16, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you think one day a global-style-ui context with this type of stuff would be useful to avoid prop drilling?

Just curious!

@talldan talldan Jul 16, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, it is a lot of prop drilling. A context provider could help. 👍

showResponsiveStateControls = true,
}: ScreenBlockProps ) {
const {
user: userConfig,
merged: mergedConfig,
Expand All @@ -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 ),
Expand Down Expand Up @@ -361,8 +370,13 @@ function ScreenBlock( { name, variation }: ScreenBlockProps ) {
pseudoStates={ validPseudoStates }
selectedViewport={ effectiveSelectedViewport }
selectedPseudoState={ selectedPseudoState }
onChangeViewport={ setSelectedViewport }
onChangeViewport={
showResponsiveStateControls
? setSelectedViewport
: undefined
}
Comment on lines +373 to +377

@ramonjd ramonjd Jul 16, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Non blocking question: is this even required since screenheader passes an empty array to StateControl? The MenuGroup wouldn't render in that case is my assumption.

											viewportStates={
												showResponsiveStateControls
													? viewportStates
													: []
											}

@talldan talldan Jul 16, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems not, but I don't mind it. At least with this, StateControl receives sensible prop values, rather than values that might be contradictory.

onChangePseudoState={ setSelectedPseudoState }
showResponsiveStateControls={ showResponsiveStateControls }
/>
<BlockPreviewPanel
name={ name }
Expand Down
8 changes: 7 additions & 1 deletion packages/global-styles-ui/src/screen-header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ interface ScreenHeaderProps {
selectedPseudoState?: string;
onChangeViewport?: ( value: string ) => void;
onChangePseudoState?: ( value: string ) => void;
showResponsiveStateControls?: boolean;
}

export function ScreenHeader( {
Expand All @@ -45,6 +46,7 @@ export function ScreenHeader( {
selectedPseudoState = 'default',
onChangeViewport,
onChangePseudoState,
showResponsiveStateControls = true,
}: ScreenHeaderProps ) {
return (
<VStack spacing={ 0 }>
Expand All @@ -69,7 +71,11 @@ export function ScreenHeader( {
</Heading>
<VStack spacing={ 2 } alignment="right">
<StateControl
viewportStates={ viewportStates }
viewportStates={
showResponsiveStateControls
? viewportStates
: []
}
pseudoStates={ pseudoStates }
viewportValue={ selectedViewport }
pseudoStateValue={
Expand Down
Loading