Zoom Out: Disable zooming out when Distraction Free mode is activated #67028

yogeshbhutkar · 2024-11-15T11:25:49Z

What?

The Zoom Out and Distraction Free Mode features currently have conflicting behaviors. When Distraction Free Mode is enabled, users can still zoom out and add patterns, which undermines the purpose of Distraction Free Mode.

This pull request addresses the issue by resolving these conflicting behaviors to maintain the intended functionality of Distraction Free Mode.

The following are the fixes made in this PR:

If Distraction Free mode is already activated and the user tries to activate the zoomed-out state using the keyboard shortcut, this action will then disable the distraction-free mode.
Zoom Out Toggle will be completely disabled in Distraction Free Mode.
If the Zoom Out state is active and the user decides to enter Distraction Free mode either using the keyboard shortcut or from the options, then the zoom out state will reset and then the Distraction Free mode will be activated.

Why?

The PR ensures Distraction Free Mode functions as intended by preventing disruptive actions like zooming out and adding patterns, preserving focus, and enhancing user experience.

How?

Updated the toggleDistractionFree() function to include resetting the zoom level.
Disable the Zoom Out Toggle when Distraction Free mode is activated.
Update zoom out's callback function to disable distraction-free mode when zoomed out.

Testing Instructions

Go to editing a post.
Turn on Distraction Free Mode.
The Zoomed Out state Toggle should now not be rendered.
If the page is already Zoomed Out, then the page again Zooms In gracefully when distraction-free mode is toggled.

Screenshots or screencast ( Updated )

zoom-out-new-720p.mov

github-actions · 2024-11-15T11:30:01Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: yogeshbhutkar <[email protected]>
Co-authored-by: Mamaduka <[email protected]>
Co-authored-by: t-hamano <[email protected]>
Co-authored-by: draganescu <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

…rs and update Toolbar to hide zoom out under distraction-free

Mamaduka

Thank you, @yogeshbhutkar!

Users can enable distraction-free mode through the Options dropdown, Commands and Keyboard shortcuts. The fix in the MoreMenu component only covers one case.

I think it would be better to update the toggleDistractionFree store action. I pushed similar fix in #66262, you can use it as example.

P.S. Let's also update the PR title/description to better reflect recent changes.

t-hamano · 2024-11-15T13:40:08Z

Thanks for the PR!

Just like Distraction free mode, there is a shortcut for zoom out mode. When zoom out mode is enabled via the keyboard shortcut, it is better to disable Distraction free mode.

…logic on toggle.

…d reset distraction free mode on zoom out

yogeshbhutkar · 2024-11-18T05:00:34Z

Thank you, @yogeshbhutkar!

Users can enable distraction-free mode through the Options dropdown, Commands and Keyboard shortcuts. The fix in the MoreMenu component only covers one case.

I think it would be better to update the toggleDistractionFree store action. I pushed similar fix in #66262, you can use it as example.

P.S. Let's also update the PR title/description to better reflect recent changes.

Hi @Mamaduka, thanks for taking the time to suggest changes. I've refactored the action to reset the zoom when distraction-free mode is activated. This also enabled the changes to be seamlessly integrated with the keyboard shortcuts.

yogeshbhutkar · 2024-11-18T05:03:14Z

Thanks for the PR!

Just like Distraction free mode, there is a shortcut for zoom out mode. When zoom out mode is enabled via the keyboard shortcut, it is better to disable Distraction free mode.

Hi @t-hamano, thanks for taking the time to suggest changes. I've incorporated the change where when the user uses the keyboard shortcut to enable zoom out state and if distraction mode is enabled, then this action will, in turn, disable the distraction-free mode and enable the zoomed-out state.

Mamaduka · 2024-11-19T06:56:27Z

packages/editor/src/components/zoom-out-toggle/index.js

We can revert changes from this file; the zoom-out toggle will be disabled or hidden in distraction-free mode.

Hi @Mamaduka,

Thank you for taking the time to review the PR. The changes in this file address the feedback provided in this comment: WordPress/gutenberg#67028 (issuecomment-2478844725).

Regarding the zoom-out toggle, should it be made entirely inaccessible, including via keyboard shortcuts? Or, as per @t-hamano's comment, should the current implementation be retained, allowing keyboard shortcuts to zoom out, which would automatically disable distraction-free mode?

Looking forward to your guidance.

This component renders the UI element for the toggle; changing logic here doesn't change login for keyboard shortcuts. Since the button will be disabled or hidden, there's no need for logic updates.

Keyboard shortcut behavior can be handled in a separate PR.

Mamaduka · 2024-11-19T06:59:29Z

packages/editor/src/store/actions.js

+			// Exit zoom out state when toggling distraction free mode.
+			unlock( registry.dispatch( blockEditorStore ) ).resetZoomLevel();


Let's move this into the registry.batch block above.

P.S. The inline comment seems redundant here.

Mamaduka · 2024-11-19T07:00:48Z

packages/editor/src/components/header/index.js

+					<ZoomOutToggle
+						disabled={ forceDisableBlockTools || isDistractionFree }
+					/>


It looks like other settings buttons in the header are hidden via CSS. I wonder if we should do the same here.

cc @draganescu

gutenberg/packages/editor/src/components/header/style.scss

Lines 257 to 261 in 564f069

& > .editor-header__toolbar .editor-document-tools__document-overview-toggle,

& > .editor-header__settings > .editor-preview-dropdown,

& > .editor-header__settings > .interface-pinned-items {

display: none;

}

Hi @Mamaduka,

Based on the comment above, if I use CSS to hide the button, a potential issue arises: pressing cmd + shift + 0 will still trigger the zoom-out action via the shortcut, as the logic resides in the callback function within the ZoomOutToggle component.

useShortcut( 'core/editor/zoom', () => { if ( isZoomOut ) { resetZoomLevel(); } else { setZoomLevel( 'auto-scaled' ); } } );

To address this, I see two potential solutions:

Update the callback function inside useShortcut to include a check for isDistractionFree.

Avoid rendering the ZoomOutToggle component when isDistractionFree mode is enabled and not use CSS to hide.

I’d appreciate your input on which approach would be preferable.

The useShortcut also accepts options argument, and we can disable the shortcut when isDistractionFree is true.

Example:

gutenberg/packages/editor/src/components/global-keyboard-shortcuts/index.js

Lines 46 to 56 in 564f069

useShortcut(

'core/editor/toggle-mode',

() => {

switchEditorMode(

getEditorMode() === 'visual' ? 'text' : 'visual'

);

},

{

isDisabled: isModeToggleDisabled,

}

);

Personally, I'd like the Zoom Out button to be hidden rather than disabled when the Distraction free mode is enabled. What do you think?

I don't know why the other buttons are hidden with CSS, but as for the Zoom Out toggle button, it looks fine to render it conditionally using useViewportMatch etc 🤔

I don't know why the other buttons are hidden with CSS

I don't know this either; it could be related to animations. Let's follow the current example from the core for hiding similar buttons; if the hiding method is changed in the future, we can do that in one go.

yogeshbhutkar · 2024-11-19T09:07:53Z

I've made the patches as per our discussion and the PR is now ready to be reviewed again. Thanks for all the suggestions @Mamaduka and @t-hamano.

Mamaduka

Thanks for the follow-ups, @yogeshbhutkar!

Everything works as expected ✅

Zoom Out: Enhance ZoomOutModeInserters to support distraction-free mode

d69ae8f

yogeshbhutkar marked this pull request as ready for review November 15, 2024 11:29

yogeshbhutkar requested a review from ellatrix as a code owner November 15, 2024 11:29

Refactor: Remove distraction-free mode checks from ZoomOutModeInserte…

51ea6fd

…rs and update Toolbar to hide zoom out under distraction-free

Mamaduka requested changes Nov 15, 2024

View reviewed changes

Mamaduka added [Type] Bug An existing feature does not function as intended [Feature] Distraction Free A preference in the Post and Site Editor that limits distractions to focus the editing experience [Feature] Zoom Out labels Nov 15, 2024

Mamaduka requested a review from t-hamano November 15, 2024 13:22

yogeshbhutkar added 2 commits November 18, 2024 09:59

Refactor: Update toggleDistractionFree to include resetting zoom out …

ab28e26

…logic on toggle.

Refactor: Update ZoomOutToggle to disable in distraction-free mode an…

b037bf4

…d reset distraction free mode on zoom out

yogeshbhutkar changed the title ~~Zoom Out: Enhance ZoomOutModeInserters to support distraction-free mode~~ Zoom Out: Disable zooming out when Distraction Free mode is activated Nov 18, 2024

yogeshbhutkar requested a review from Mamaduka November 18, 2024 05:24

Mamaduka reviewed Nov 19, 2024

View reviewed changes

Mamaduka requested a review from draganescu November 19, 2024 07:18

Refactor: Use CSS to hide the ZoomOutToggle

bcd29c4

yogeshbhutkar requested a review from Mamaduka November 19, 2024 09:07

Mamaduka approved these changes Nov 19, 2024

View reviewed changes

Mamaduka merged commit c772226 into WordPress:trunk Nov 19, 2024
63 checks passed

github-actions bot added this to the Gutenberg 19.8 milestone Nov 19, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Zoom Out: Disable zooming out when Distraction Free mode is activated #67028

Zoom Out: Disable zooming out when Distraction Free mode is activated #67028

yogeshbhutkar commented Nov 15, 2024 •

edited

Loading

github-actions bot commented Nov 15, 2024 •

edited

Loading

Mamaduka left a comment

t-hamano commented Nov 15, 2024

yogeshbhutkar commented Nov 18, 2024

yogeshbhutkar commented Nov 18, 2024

Mamaduka Nov 19, 2024

yogeshbhutkar Nov 19, 2024

Mamaduka Nov 19, 2024

Mamaduka Nov 19, 2024

Mamaduka Nov 19, 2024

yogeshbhutkar Nov 19, 2024

Mamaduka Nov 19, 2024

t-hamano Nov 19, 2024

Mamaduka Nov 19, 2024

yogeshbhutkar commented Nov 19, 2024

Mamaduka left a comment

		// Exit zoom out state when toggling distraction free mode.
		unlock( registry.dispatch( blockEditorStore ) ).resetZoomLevel();

	& > .editor-header__toolbar .editor-document-tools__document-overview-toggle,
	& > .editor-header__settings > .editor-preview-dropdown,
	& > .editor-header__settings > .interface-pinned-items {
	display: none;
	}

	useShortcut(
	'core/editor/toggle-mode',
	() => {
	switchEditorMode(
	getEditorMode() === 'visual' ? 'text' : 'visual'
	);
	},
	{
	isDisabled: isModeToggleDisabled,
	}
	);

Zoom Out: Disable zooming out when Distraction Free mode is activated #67028

Zoom Out: Disable zooming out when Distraction Free mode is activated #67028

Conversation

yogeshbhutkar commented Nov 15, 2024 • edited Loading

What?

Why?

How?

Testing Instructions

Screenshots or screencast ( Updated )

github-actions bot commented Nov 15, 2024 • edited Loading

Mamaduka left a comment

Choose a reason for hiding this comment

t-hamano commented Nov 15, 2024

yogeshbhutkar commented Nov 18, 2024

yogeshbhutkar commented Nov 18, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yogeshbhutkar commented Nov 19, 2024

Mamaduka left a comment

Choose a reason for hiding this comment

yogeshbhutkar commented Nov 15, 2024 •

edited

Loading

github-actions bot commented Nov 15, 2024 •

edited

Loading