-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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.
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
Zoom Out: Bundle behavior in block-editor and add story #66240
Conversation
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. |
scale: 'default', | ||
frameSize: '40px', | ||
} | ||
: {}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is the main change in this PR, basically the zoom-out behavior is absorbed into the block-editor.
@@ -61,7 +56,6 @@ function DocumentTools( { className, disableBlockTools = false } ) { | |||
showIconLabels: get( 'core', 'showIconLabels' ), | |||
isDistractionFree: get( 'core', 'distractionFree' ), | |||
isVisualMode: getEditorMode() === 'visual', | |||
isZoomedOutView: isZoomOut(), |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is just a small cleanup, a value that was not used.
const { unlock } = __dangerousOptInToUnstableAPIsOnlyForCoreModules( | ||
'I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.', | ||
'@wordpress/edit-site' | ||
); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ideally setZoomLevel shouldn't be a private API, I think a block-editor setting makes sense for the zoom level setting but I'm keeping that separate.
Also, it seems the value of zoom-level doesn't have any impact, it should probably correspond to the applied scale.
> | ||
<EnableZoomOut /> | ||
<BlockCanvas height="500px" styles={ editorStyles }> | ||
<style>{ contentCss }</style> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This highlighted that third-party block editors need to load the "content.css" file from the block-editor package within the iframe. I would love if this was not necessary (and absorbed by the component automatically instead). cc @ellatrix in case you have ideas.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Not sure I'm following. Shouldn't it be merged into editorStyles
?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@ellatrix No, editorStyles
seem to be rewritten to add the wrapper... and I think that breaks some of the "content" styles that we provide.
@ntsekouras not related to these styles at all, because the styles here are the "content" styles that should apply within the iframe, the rest is just editor styles, ui styles...
<div | ||
className="editor-zoom-out" | ||
onKeyDown={ ( event ) => event.stopPropagation() } | ||
style={ { background: '#ddd', border: '1px solid gray' } } |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The background style shouldn't be necessary, at the moment when the scaling is applied, the "iframe" content is scaled but there's still a "white" background around the iframe content, I believe this style should be bundled within the block-editor package and the iframe should have the same gray background applied within the iframe.
@@ -0,0 +1,39 @@ | |||
export const pattern = `<!-- wp:cover {"customOverlayColor":"#eb4c77","contentPosition":"center center","isDark":false,"align":"full","style":{"spacing":{"padding":{"top":"6vw","right":"6vw","bottom":"6vw","left":"6vw"},"margin":{"top":"0"}}}} --> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is just a random pattern I took from the pattern library to show case the zoom-out in storybook.
Size Change: +13 B (0%) Total Size: 1.77 MB
ℹ️ View Unchanged
|
Flaky tests detected in 03d8b4d. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/11405092796
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'll leave the storybook part for others to review better, but the rest looks good to me. Thanks!
What?
While trying zoom-out in a personal experiment, I noticed that to be able to enable Zoom-out, setting the zoom-level is not enough, you have to also pass some extra arguments to the iframe.
These extra things shouldn't be needed and the canvas should be smart enough to adapt directly.
This PR solves that and also adds a storybook story in order to be able to check that third-part block editors can enable zoom-out without too much hassle.
Testing Instructions
1- Check zoom-out scaling
2- Run storybook
npm run storybook:dev
and check that the "zoom-out" story scales properly.