BlockCanvas: Fix the height prop and width of the block editor#65977
Merged
BlockCanvas: Fix the height prop and width of the block editor#65977
Conversation
youknowriad
added
[Type] Bug
youknowriad
requested review from
ajlende,
draganescu,
ellatrix,
oandregal and
talldan
|
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. |
youknowriad
commented
Oct 9, 2024
| $prev-container-width: var(--wp-block-editor-iframe-zoom-out-prev-container-width, 100vw); | ||
| width: $prev-container-width; | ||
| margin-left: calc(-1 * (#{$prev-container-width} - #{$container-width}) / 2); | ||
| } |
Contributor
Author
There was a problem hiding this comment.
I moved these tiles to style.scss instead of content.scss because AFAIK these apply to elements that are rendered outside of the iframe.
|
Size Change: +48 B (0%) Total Size: 1.77 MB
ℹ️ View Unchanged
|
draganescu
reviewed
Oct 9, 2024
| style={ { | ||
| ...props.style, | ||
| height: props.style?.height, | ||
| border: 0, |
Contributor
There was a problem hiding this comment.
Where was this border coming from that it has to be reset here?
Contributor
Author
There was a problem hiding this comment.
The browser default for iframes.
Contributor
There was a problem hiding this comment.
Oh, maybe a tiny comment would help.
draganescu
reviewed
Oct 9, 2024
Contributor
draganescu
left a comment
draganescu
left a comment
There was a problem hiding this comment.
Smoke testing the zoom out feature didn't produce any issues for me. I dont understand the border situation, also why did moving the styles fix the issue, or was moving the styles unrelated to height?
Contributor
Author
|
the Third-party block editor implementations don't load "content" styles outside the iframe (content). So moving the styles out of the content styles into their right place fixes the issue for the "height". |
draganescu
approved these changes
Oct 9, 2024
Contributor
draganescu
left a comment
draganescu
left a comment
There was a problem hiding this comment.
For me nothing is broken here. 
oandregal
approved these changes
Oct 9, 2024
ajlende
approved these changes
Oct 9, 2024
Contributor
ajlende
left a comment
ajlende
left a comment
There was a problem hiding this comment.
TIL. Thanks for the fix!
Contributor
|
Should this be backported to 6.7? |
Contributor
Author
|
It's not necessary for 6.7, it's mostly for npm package users. |
Contributor
|
I need this backported for #66034. I'll get that setup. |
|
There was a conflict while trying to cherry-pick the commit to the wp/6.7 branch. Please resolve the conflict manually and create a PR to the wp/6.7 branch. PRs to wp/6.7 are similar to PRs to trunk, but you should base your PR on the wp/6.7 branch instead of trunk. |
jeryj
pushed a commit
that referenced
this pull request
Oct 15, 2024
Co-authored-by: youknowriad <youknowriad@git.wordpress.org> Co-authored-by: draganescu <andraganescu@git.wordpress.org> Co-authored-by: oandregal <oandregal@git.wordpress.org> Co-authored-by: ajlende <ajlende@git.wordpress.org>
Contributor
|
Backport here: #66129 |
ajlende
pushed a commit
that referenced
this pull request
Oct 16, 2024
Co-authored-by: youknowriad <youknowriad@git.wordpress.org> Co-authored-by: draganescu <andraganescu@git.wordpress.org> Co-authored-by: oandregal <oandregal@git.wordpress.org> Co-authored-by: ajlende <ajlende@git.wordpress.org>
ajlende
pushed a commit
that referenced
this pull request
Oct 16, 2024
Co-authored-by: youknowriad <youknowriad@git.wordpress.org> Co-authored-by: draganescu <andraganescu@git.wordpress.org> Co-authored-by: oandregal <oandregal@git.wordpress.org> Co-authored-by: ajlende <ajlende@git.wordpress.org>
ajlende
pushed a commit
that referenced
this pull request
Oct 16, 2024
Co-authored-by: youknowriad <youknowriad@git.wordpress.org> Co-authored-by: draganescu <andraganescu@git.wordpress.org> Co-authored-by: oandregal <oandregal@git.wordpress.org> Co-authored-by: ajlende <ajlende@git.wordpress.org>
jeryj
pushed a commit
that referenced
this pull request
Oct 17, 2024
Co-authored-by: youknowriad <youknowriad@git.wordpress.org> Co-authored-by: draganescu <andraganescu@git.wordpress.org> Co-authored-by: oandregal <oandregal@git.wordpress.org> Co-authored-by: ajlende <ajlende@git.wordpress.org>
draganescu
added a commit
that referenced
this pull request
Oct 17, 2024
Co-authored-by: youknowriad <youknowriad@git.wordpress.org> Co-authored-by: draganescu <andraganescu@git.wordpress.org> Co-authored-by: oandregal <oandregal@git.wordpress.org> Co-authored-by: ajlende <ajlende@git.wordpress.org>
Contributor
|
@ajlende @jeryj @youknowriad As I understand it this ended up being backported as part of #66182. I'm going to update the labels accordingly. |
getdave
added
Backported to WP Core
This was referenced Oct 26, 2024
karthick-murugan
pushed a commit
to karthick-murugan/gutenberg
that referenced
this pull request
Nov 13, 2024
…ress#65977) Co-authored-by: youknowriad <youknowriad@git.wordpress.org> Co-authored-by: draganescu <andraganescu@git.wordpress.org> Co-authored-by: oandregal <oandregal@git.wordpress.org> Co-authored-by: ajlende <ajlende@git.wordpress.org>
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
6 participants
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.
closes #65976
What?
When building third-party block editors, you can set the height of the block canvas using the height prop in theory. (See https://wordpress.org/gutenberg-framework/docs/intro)
This regressed recently it seems. There are also other related issues:
This PR addresses all of these issues.
How?
Iframecomponent.Testing Instructions
1- Run storybook locally
npm run storybook:dev2- Open the playground box story
3- Notice that the height of the canvas is set to 500px, there's no extra border for the iframe and that the width of the canvas is 100%
I think some of the regressions were related to zoom-out, so make sure to test zoom-out as well.