Fix increasingly big canvas in the post editor when editing patterns #62360
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
talldan
added
[Type] Bug
|
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: +1.46 kB (+0.08%) Total Size: 1.75 MB
ℹ️ View Unchanged
|
talldan
added
the
Backport to WP 6.7 Beta/RC
youknowriad
reviewed
Jun 6, 2024
| } else if ( baseStyles.includes( TYPEWRITER_STYLE ) ) { | ||
| baseStyles = baseStyles.filter( | ||
| ( style ) => style !== TYPEWRITER_STYLE | ||
| ); |
There was a problem hiding this comment.
So first, I think this fix is fine and we can ship it as is if you like.
But I have a couple thoughts:
Removing the style shouldn't be needed. I think the issue is that we're providing the value of the setting by reading the exact same settings. I think this hook shouldn't be using the "editorSettings" from the editor package. Instead it should be using the "settings" prop of the Layout component.
The second thing is that I think that this code should probably move within the editor package somewhere. Because I believe this padding should probably be applied to the editor every time "posts/pages" are rendered in post-only mode regardless of whether it's the post editor or site editor or some other page.
Both of these comments can be addressed separately though.
There was a problem hiding this comment.
Thanks for the speedy review.
I can follow up on that, though it'll be next week as it's end of day for me now and I'll only be back working on Monday.
There was a problem hiding this comment.
Right, why does the TYPEWRITER_STYLE need to be removed if this is the only place where it's adding it to the baseStyles?
There was a problem hiding this comment.
It looks like it's due to editorSettings.styles being mutated, so it should be an easy fix to prevent that. I've pushed some commits to the PR.
There was a problem hiding this comment.
I've gone ahead and merged the PR, but happy to revisit in a follow-up if there's any further feedback.
youknowriad
approved these changes
Jun 6, 2024
talldan
deleted the
fix/exponentially-growing-canvas-for-post-editor-patterns
branch
ellatrix
added a commit
that referenced
this pull request
Jun 11, 2024
…62360) * Fix big canvas in the post editor when editing patterns * Avoid adding multiple padding rules * Revert "Avoid adding multiple padding rules" This reverts commit 91edeb9. * Revert "Fix big canvas in the post editor when editing patterns" This reverts commit 37326a9. * Ensure `useEditorStyles` recomputes whenever the postType changes * Fix mutation of `editorSettings.styles` resulting in editor styles incorrectly persisting and being duplicated ---- Co-authored-by: talldan <talldanwp@git.wordpress.org> Co-authored-by: youknowriad <youknowriad@git.wordpress.org> Co-authored-by: ellatrix <ellatrix@git.wordpress.org>
ellatrix
added a commit
that referenced
this pull request
Jun 11, 2024
…62360) * Fix big canvas in the post editor when editing patterns * Avoid adding multiple padding rules * Revert "Avoid adding multiple padding rules" This reverts commit 91edeb9. * Revert "Fix big canvas in the post editor when editing patterns" This reverts commit 37326a9. * Ensure `useEditorStyles` recomputes whenever the postType changes * Fix mutation of `editorSettings.styles` resulting in editor styles incorrectly persisting and being duplicated ---- Co-authored-by: talldan <talldanwp@git.wordpress.org> Co-authored-by: youknowriad <youknowriad@git.wordpress.org> Co-authored-by: ellatrix <ellatrix@git.wordpress.org>
patil-vipul
pushed a commit
to patil-vipul/gutenberg
that referenced
this pull request
Jun 17, 2024
…ordPress#62360) * Fix big canvas in the post editor when editing patterns * Avoid adding multiple padding rules * Revert "Avoid adding multiple padding rules" This reverts commit 91edeb9. * Revert "Fix big canvas in the post editor when editing patterns" This reverts commit 37326a9. * Ensure `useEditorStyles` recomputes whenever the postType changes * Fix mutation of `editorSettings.styles` resulting in editor styles incorrectly persisting and being duplicated ---- Co-authored-by: talldan <talldanwp@git.wordpress.org> Co-authored-by: youknowriad <youknowriad@git.wordpress.org> Co-authored-by: ellatrix <ellatrix@git.wordpress.org>
ellatrix
removed
the
Backport to WP 6.7 Beta/RC
|
This was cherry-picked to the wp/6.6 branch. |
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?
There seems to have been a bug introduced lately to editing patterns in the post editor. The editor canvas has lots of empty space at the bottom that grows increasingly bigger as more content is added.
This PR fixes it.
How?
I tracked it down to a
padding-bottom: 40vhthat's added in theuseEditorStyleshook. It shouldn't be added for patterns, but it looks like the React hook is missing thepostTypedependency.Then a second issue is that some code needs to be added to remove the styles when already added.
Thirdly, I added an extra check to make sure multiple padding rules aren't being added.
Testing Instructions
Screenshots or screencast
Before
After