Zoom out view: Device preview button doesn't work when zoom out view is enabled

[t-hamano]

Description

The device preview button is not clickable when the experimental zoom out view is enabled.

From my understanding, when the zoom out view is enabled, one of the following is the expected behavior:

• Disablethe device preview dropdown
• Turn off the zoom out mode when the device preview button is clicked

Step-by-step reproduction instructions

• Enable "Zoom out experiments" on the Gutenberg Experiments page
• open the post editor
• Click the Zoom out mode button
• Click on Tablet or Mobile in the Device Preview dropdown

Screenshots, screen recording, code snippet

bb15fec4fdad4d459422a52b33e5078e.mp4

Environment info

No response

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

[AhmarZaidi]

Hey @t-hamano 👋,
I'd like to work on this issue.

I think this approach gives a more seamless experience:

• Turn off the zoom out mode when the device preview button is clicked

To address this, we can modify the device type selection handler to turn off the zoom out mode before setting the new device type.

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

Line 116 in 5f77458

onSelect={ setDeviceType }

This can be done using:

import { store as blockEditorStore } from '@wordpress/block-editor';

const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
const zoomOutExperimentEnabled = window.__experimentalEnableZoomOutExperiment;

if (zoomOutExperimentEnabled) {
    __unstableSetEditorMode( 'edit' ); // Turn off zoom out mode.
}

This will make sure that the zoom out mode is disabled when a user selects a device type from the preview dropdown.

---

Screen recording:

Screen.capture.issue.65411.mp4

[draganescu]

Is the best way to go here to

• hide/disable the device preview handle when zoomed out
• exit zoom out when changing device preview

Ideally "exit zoom out when changing device preview" so that we keep a fluid overall experienc, but I find it confusing that only desktop can be zoomed out and also, so when zoom out is engaged the device preview should have no active element.

[draganescu]

@AhmarZaidi @t-hamano can you help me and test out #65444 - given #65404 made the control universally available I rushed a fix for this one. 🙇🏻

[AhmarZaidi]

@draganescu I was about to make the same changes except for a check for window.__experimentalEnableZoomOutExperiment; which wouldn't be necessary now since it will be universally available.

Added a comment related to documentation here.

Please feel free to ignore it if it's not necessary.
I think it's good to go.