Avatar block: fix broken alignments in the editor #58114
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
MaggieCabrera
added
[Type] Bug
|
Size Change: -4 B (0%) Total Size: 1.7 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in 06356ab. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/7624691744
|
|
/cc @carolinan |
carolinan
approved these changes
Jan 24, 2024
There was a problem hiding this comment.
I don't recall why the <div> was included for the user avatar but not the comments avatar, perhaps it was some sort of left over from the post author block. It doesn't look like this div was ever needed.
Even if extenders have targeted this div for any reason, which seems highly unlikely, and even though they would need to update their styles in that case, it is more important that the alignments work.
The alignment worked until WordPress 6.3, where the changes to the layout class names broke it. We need to test these type of changes more carefully.
(I suspect that the alignment issues with the latest post block may be for the same reason.)
it probably worked if the selector was different. Also, the extra div is not in the frontend (the alignments were only failing in the editor) so this one is safe to merge knowing theme specific CSS won't be affected unless it's specific for the editor |
cbravobernal
changed the title
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?
Closes #54714
Right alignments don't work in the editor (and presumably left alignments on RTL mode was broken too) for the avatar block
Why?
An extra div in the editor was causing the global alignment rules to not apply correctly:
body .is-layout-constrained > .alignright { float: right; }was never working for the block
How?
I removed the extra div, I couldn't find a reason for it there, and it's been there since block creation
Testing Instructions
Insert the avatar block in the editor
Align it left right or center, it should work both in the editor and the frontend
Testing Instructions for Keyboard
Screenshots or screencast
Before:
After: