Fix legacy button center alignments inside the buttons block #29281
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] Regression
talldan
added
the
Backport to WP 6.7 Beta/RC
|
Size Change: +410 B (0%) Total Size: 1.38 MB
ℹ️ View Unchanged
|
talldan
changed the title
|
Thanks for working on this. Before:
After:
The usual justifications work fine as well. It also appears that you've threaded the needle of not adding additional specificity to the rules for newly created blocks, well done.
It appears the primary problem with left and right alignments is that the container, Buttons, is now
But for a non-migrated block, of course we can't really change that with CSS, because we don't know how to ambiguate between non migrated or not. But there's maybe a hack, probably best to explore separately:
To convert that inspecting to CSS, this should work: Since the data-align/left properties would not be present on new blocks, the CSS should be properly scoped to legacy blocks. The frontend should work fine. |
|
Thanks for the review and suggestions, @jasmussen. I think I'll try to tackle the left/right alignments separately. |
jasmussen
approved these changes
Feb 25, 2021
noisysocks
pushed a commit
that referenced
this pull request
Mar 1, 2021
* Fix buttons > button alignments in the editor * Move style to the right place in stylesheet * Fix typo * Apply change in front-end too and adjust editor styles to match * Adjust margins * Add some more commentary
noisysocks
removed
the
Backport to WP 6.7 Beta/RC
noisysocks
pushed a commit
that referenced
this pull request
Mar 1, 2021
* Fix buttons > button alignments in the editor * Move style to the right place in stylesheet * Fix typo * Apply change in front-end too and adjust editor styles to match * Adjust margins * Add some more commentary
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.
Description
Partly addresses #28957.
How this regression came about is a bit of a long story.
Before #26380, users could set their own alignment on button blocks inside the buttons container. #26380 removed the alignment options, but blocks still kept their visual alignments.
At a similar time #23168 made the buttons block a flex container. Individually aligned button blocks within buttons stopped working and there was no way to remove the alignments.
This change restores the visual appearance of center aligned button blocks within the buttons block.
I haven't been able to find a solution for left/right alignments (yet).
How has this been tested?
E2E tests are hard to implement, so no automated testing. Visual regression testing would be ideal for this issue.
Screenshots
Editor
Front end
Types of changes
Bug fix (non-breaking change which fixes an issue)
Checklist: