Remove alignments from the root level of the site editor #30079
Merged
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
|
Size Change: +22 B (0%) Total Size: 1.41 MB
ℹ️ View Unchanged
|
|
Nice! Before:
After:
I'll leave this one up for additional sanity checks, but this seems a great change to further contextuality. |
|
Tested with the updated emptytheme. I believe the PR is working as intended, but there is no way to set blocks to be truly full width because of a 10px padding on .editor-styles-wrapper and a 8px margin on the body on the front (browser default) which are not overridden. |
Seems good to follow up on separately 👍 👍 |
This is a good point and one I'm not entirely sure how to fix. There are actually two things to fix here:
The second thing to fix is more related to the editor UI. That padding can be useful some times to avoid things touching the "borders" of the canvas in the editor, so I wonder If instead of relying on that padding for that, we should introduce a grayed area/canvas of 10px around the editor canvas that is always there (kind of like the one in the tablet/mobile previews). I do think it's separate from this issue though even if surfaced here by the fact that we're loading the editor styles from Gutenberg. |
|
I think UI-wise we are in a better place to handle interface controls that go all the way to the edge than we used to. But I do agree, the experience is better, and dare I say less "broken looking" than if the padding was zero. So it does seem like the padding should be handled by theme.json, but perhaps also come with a good default. And we probably also need something for non-block-themes, just like the system font change. |
grzim
reviewed
Mar 22, 2021
| wideControlsEnabled: settings.alignWide, | ||
| }; | ||
| }, [] ); | ||
| const layout = useLayout(); |
There was a problem hiding this comment.
I think we can do a destructuring here
const { type, alignments: availableAlignments = DEFAULT_CONTROLS } = useLayout();
packages/block-editor/src/components/block-alignment-control/use-available-alignments.js
Show resolved
Hide resolved
kjellr
reviewed
Mar 22, 2021
jasmussen
approved these changes
Mar 23, 2021
I did notice the editor styles wrapper 10px that @carolinan mentions in the nav editor. For now I can override it. Similarly the nav block’s wrapping That’s something that might affect other blocks. |
This is fixed in #29975: https://github.com/WordPress/gutenberg/pull/29975/files#diff-67a82afbd315a0b5cdb7ef57ee1217941097ae7b6668be90a896c109473c253aR9. |
|
I believe this PR may have had the unintended side effect of making it impossible to use Full Width Blocks at the root level in Template Parts: We have a hybrid theme, designed for the Block Editor but not FSE, that leverages template parts. Some of these template parts definitely want to be full-width. |
3 tasks
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.
This PR does two things: