Fix: restore editor canvas padding in classic themes#76864
Fix: restore editor canvas padding in classic themes#76864Shekhar0109 wants to merge 1 commit intoWordPress:trunkfrom
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. |
t-hamano
left a comment
t-hamano
left a comment
There was a problem hiding this comment.
Thanks for the PR! It works well in all cases for my test. I tested this PR using Twenty Twenty.
Default
classic.css is enqueued, and a default 8px padding overrides zero padding derived from default theme.json
Add theme.json to theme
Add the following theme.json to the theme:
{
"version": 3,
"styles": {
"spacing": {
"padding": { "top": "1em", "right": "1em", "bottom": "1em", "left": "1em" }
}
}
}classic.css is NOT enqueued, and the padding defined in theme.json is applied correctly.
Ultimately, this pull request simply increases the CSS specificity of the selector to which padding is applied from 0-0-1 to 0-1-0.
I believe this approach will have no negative consequences, but since we are in the RC phase, let me double-check it. cc @WordPress/gutenberg-core
t-hamano
added
Global Styles
github-project-automation
bot
moved this to 🔎 Needs Review
in WordPress 7.0 Editor Tasks
t-hamano
moved this from 🏗️ In Progress
to 🔎 Needs Review
in WordPress 7.0 Editor Tasks
|
@t-hamano Thanks for reviewing and testing the PR. I appreciate the feedback and confirmation that the fix works well. Please let me know if any further changes are needed. |
2 participants
What?
Closes #76863
This PR restores the expected
8pxpadding around the editor canvas when using classic themes. In WordPress 7.0 / Gutenberg, the padding defined inhtml :where(.editor-styles-wrapper)can be overridden bybody { padding: 0 }introduced by global styles. As a result, the editor content touches the canvas edges.Why?
Classic themes expect the editor canvas to have a default
8pxpadding. When this padding is overridden, the text appears flush with the edges of the editor iframe, which negatively affects the editing experience and makes the editor visually inconsistent with previous versions.How?
This change moves the padding declaration from
html :where(.editor-styles-wrapper)to.editor-styles-wrapper. Applying the padding directly to.editor-styles-wrapperensures it cannot be unintentionally overridden by global styles affecting thebody. The existing full-width block margin compensation logic remains unchanged.Testing Instructions
Expected result: The editor canvas should display
8pxpadding around the content instead of the text touching the edges.Testing Instructions for Keyboard
Taband arrow keys.