Responsive Styles Viewport labels are inconsistent between Post Editor and Global Styles.

[jordesign]

Description

The naming used for viewport labels differs between the two surfaces:

• Post Editor / Editor canvas (preview + responsive controls): Desktop / Tablet / Mobile
• Global Styles: Default / Tablet / Mobile

This discrepency could be confusing for users.

Steps to reproduce

1. Open a post in the Post Editor and open the viewport / responsive controls. Observe the labels: Desktop / Tablet / Mobile.
2. Open Global Styles and open its viewport controls. Observe the labels: Default / Tablet / Mobile.

Expected

Both surfaces use the same label for the same viewport — either both use "Desktop" or both use "Default", consistently.

Actual

Post Editor uses "Desktop", Global Styles uses "Default". The other two labels (Tablet, Mobile) match.

Reporter's own words

Viewport naming is inconsistent between the Styles section and the Site Editor.

Environment

• WordPress 7.1 RC1

[hbhalodia]

Hi @jordesign, I am not sure it could be a inconsitent behaviour here, as you see the post editor it shows you the preview that is how you are seeing, while the global styles says to style the content based on the device type.

IMO, we should update the Post Editor dropdown, when responsive style is on, it should show the default label and if off (current screenshot you shared), it should show the desktop label. Also here is the code shown below, it has some conditional to update the description based on that.

gutenberg/packages/editor/src/components/preview-dropdown/index.js

Lines 143 to 149 in 8680224

	{
	value: 'Desktop',
	label: __( 'Desktop' ),
	icon: desktop,
	info: isResponsiveEditing
	? __( 'Style all viewports.' )
	: __( 'Preview desktop viewport.' ),

This should change to,

diff --git a/packages/editor/src/components/preview-dropdown/index.js b/packages/editor/src/components/preview-dropdown/index.js
index cae29240f8..74463d8040 100644
--- a/packages/editor/src/components/preview-dropdown/index.js
+++ b/packages/editor/src/components/preview-dropdown/index.js
@@ -142,7 +142,10 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
        const choices = [
                {
                        value: 'Desktop',
-                       label: __( 'Desktop' ),
+                       // While styling, this choice targets every viewport rather than
+                       // desktop alone, so it takes the same "Default" label the viewport
+                       // control in Global Styles uses.
+                       label: isResponsiveEditing ? __( 'Default' ) : __( 'Desktop' ),
                        icon: desktop,
                        info: isResponsiveEditing
                                ? __( 'Style all viewports.' )

Also, the desktop viewport is mapped to default as per this,

gutenberg/packages/editor/src/utils/device-type.js

Lines 25 to 29 in 8680224

	export const VIEWPORT_STATE_BY_DEVICE_TYPE = {
	Desktop: 'default',
	Tablet: '@tablet',
	Mobile: '@mobile',
	};

So we should update to add the default when responsive style is on, which would mimic the exactly how global styles would work.

Thanks,