Decouple "zoom/scaling the canvas" from zoom out mode (without mode rename) #65482
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# Conflicts: # packages/block-editor/src/components/block-tools/zoom-out-toolbar.js # packages/block-editor/src/components/tool-selector/index.js # packages/block-editor/src/store/reducer.js # packages/edit-site/src/components/global-styles/screen-style-variations.js # packages/editor/src/components/visual-editor/index.js
# Conflicts: # packages/block-editor/src/hooks/use-zoom-out.js
# Conflicts: # packages/editor/src/components/editor-interface/index.js
getdave
added
[Type] Code Quality
getdave
requested review from
draganescu,
youknowriad,
talldan and
MaggieCabrera
getdave
commented
Sep 19, 2024
Comment on lines
2096
to
2106
| export function zoomLevel( state = 100, action ) { | ||
| switch ( action.type ) { | ||
| case 'SET_ZOOM_OUT': | ||
| return action.zoom; | ||
| case 'RESET_ZOOM': | ||
| return 100; | ||
| } | ||
|
|
||
| return state; | ||
| } | ||
|
|
There was a problem hiding this comment.
Let's make the nomenclature consistent. Is it "zoom-out" or "zoom-level"? type and naming need to be consistent.
There was a problem hiding this comment.
Zoom out is anytime zoom level is less than 1.
There was a problem hiding this comment.
It's usually best to avoid using floating point numbers in JS. I went for 100 to mirror the traditional zoom scale of 0-100.
Is there a reason why you are suggesting 1? Is it used somewhere else already?
getdave
commented
Sep 19, 2024
Comment on lines
+570
to
+582
| export function getZoomLevel( state ) { | ||
| return state.zoomLevel; | ||
| } | ||
|
|
||
| /** | ||
| * Returns whether the editor is considered zoomed out. | ||
| * | ||
| * @param {Object} state Global application state. | ||
| * @return {boolean} Whether the editor is zoomed. | ||
| */ | ||
| export function isZoomOut( state ) { | ||
| return getZoomLevel( state ) < 100; | ||
| } |
There was a problem hiding this comment.
Let's make the nomenclature consistent. Is it "zoom-out" or "zoom-level"? type and naming need to be consistent.
There was a problem hiding this comment.
I think this is all right, zoom out is any zoom level less than 1.
There was a problem hiding this comment.
See #65482 (comment)
getdave
commented
Sep 19, 2024
getdave
commented
Sep 19, 2024
Comment on lines
-13
to
+14
| * A hook used to set the editor mode to zoomed out mode, invoking the hook sets the mode. | ||
| * A hook used to set the zoomed out view, invoking the hook sets the mode. |
There was a problem hiding this comment.
This hook used to set the mode to zoom-out. Now it just sets the zoom level. Is that what we want? It's only used in a single location in Core.
Personally I think it should be deprecated as an API.
There was a problem hiding this comment.
Don't we need the hook for all the effect management it does?
There was a problem hiding this comment.
I guess it could be useful for "zooming the canvas". But note how it's usage has already changed from managing "modes" to managing "scale". It's just a premature API in my opinion.
getdave
changed the title
|
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 If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
Size Change: +535 B (+0.03%) Total Size: 1.77 MB
ℹ️ View Unchanged
|
draganescu
reviewed
Sep 19, 2024
There was a problem hiding this comment.
I think this is great! Nomenclature wise I think "zoom out" is fine as a syntactic sugar for zoom level less than 1. It is a bit confusing that the mode which affects editing and selection is also called zoom out but since that is likely to be deprecated maybe it's fine?
Bug In this PR the Global Styles > Browse styles is better than trunk in that selection is default but the canvas is zoomed out. However, clicking exits the zoomed out view.
Comment on lines
+570
to
+582
| export function getZoomLevel( state ) { | ||
| return state.zoomLevel; | ||
| } | ||
|
|
||
| /** | ||
| * Returns whether the editor is considered zoomed out. | ||
| * | ||
| * @param {Object} state Global application state. | ||
| * @return {boolean} Whether the editor is zoomed. | ||
| */ | ||
| export function isZoomOut( state ) { | ||
| return getZoomLevel( state ) < 100; | ||
| } |
There was a problem hiding this comment.
I think this is all right, zoom out is any zoom level less than 1.
Comment on lines
-13
to
+14
| * A hook used to set the editor mode to zoomed out mode, invoking the hook sets the mode. | ||
| * A hook used to set the zoomed out view, invoking the hook sets the mode. |
There was a problem hiding this comment.
Don't we need the hook for all the effect management it does?
Comment on lines
2096
to
2106
| export function zoomLevel( state = 100, action ) { | ||
| switch ( action.type ) { | ||
| case 'SET_ZOOM_OUT': | ||
| return action.zoom; | ||
| case 'RESET_ZOOM': | ||
| return 100; | ||
| } | ||
|
|
||
| return state; | ||
| } | ||
|
|
There was a problem hiding this comment.
Zoom out is anytime zoom level is less than 1.
This is a strange bug. I ruled out Update: one of the |
|
@draganescu I've normalised everything towards "level" for consistency and to disambiguate it from I also reduced some complexity where I was able. |
getdave
changed the title
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
Decouples concept of "zooming the canvas" from "composing with patterns".
In this PR we retain
zoom-outas the mode name.Alternative to #65265
Why?
See #65265
How?
See #65265
Only difference is that we do not rename the mode - it remains
zoom-out.Testing Instructions
Same as #65265
Testing Instructions for Keyboard
Screenshots or screencast