Skip to content

Avatar: Fix global border styles generation #53007

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 1 commit into from
Jul 27, 2023
Merged

Avatar: Fix global border styles generation #53007

merged 1 commit into from
Jul 27, 2023

Conversation

aaronrobertshaw
Copy link
Contributor

Fixes: #48253

What?

Updates the selector used for the Avatar block's global border styles so they target the same element as the block instance styles are applied to.

Why?

Without this fix global border styles for the Avatar block target the wrapper instead of the inner image.

How?

Define the correct selector for the border feature via the Selectors API.

Testing Instructions

  1. Edit a template or post and add a few Avatar blocks including one that links to the user profile
  2. Switch to the Site Editor > Global Styles > Blocks > Avatar
  3. Apply a global styles border
  4. Switch back to the editor and ensure the global border styles target the Avatar block's img element
  5. Save the post or template and confirm the correct styling on the frontend
  6. Test that you can override the global border styles with block instance border styles still

Screenshots or screencast

Before After
Screenshot 2023-07-27 at 2 46 48 pm Screenshot 2023-07-27 at 2 47 02 pm
Screen.Recording.2023-07-27.at.2.50.09.pm.mp4

@aaronrobertshaw aaronrobertshaw added [Type] Bug An existing feature does not function as intended [Block] Avatar Affects the Avatar Block labels Jul 27, 2023
@aaronrobertshaw aaronrobertshaw self-assigned this Jul 27, 2023
kevin940726
kevin940726 approved these changes Jul 27, 2023
View reviewed changes
Copy link
Member

@kevin940726 kevin940726 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 👍

cbravobernal
cbravobernal approved these changes Jul 27, 2023
View reviewed changes
Copy link
Contributor

@cbravobernal cbravobernal left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Working as expected. Thanks!

@cbravobernal cbravobernal merged commit a1c149d into trunk Jul 27, 2023
@cbravobernal cbravobernal deleted the fix/avatar-global-border-styles branch July 27, 2023 10:13
@github-actions github-actions bot added this to the Gutenberg 16.4 milestone Jul 27, 2023
@iamtakashi iamtakashi mentioned this pull request Aug 15, 2023
Merged
justintadlock added a commit to x3p0-dev/x3p0-ideas that referenced this pull request May 11, 2024
@justintadlock
Remove old Avatar border-radius fixed.
2cc586d 
This was corrected in Core: WordPress/gutenberg#53007
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@kevin940726 kevin940726 kevin940726 approved these changes

@cbravobernal cbravobernal cbravobernal approved these changes

@glendaviesnz glendaviesnz Awaiting requested review from glendaviesnz

@ajitbohra ajitbohra Awaiting requested review from ajitbohra ajitbohra is a code owner

Assignees

@aaronrobertshaw aaronrobertshaw

Labels
[Block] Avatar Affects the Avatar Block [Type] Bug An existing feature does not function as intended
Projects
None yet
Milestone
Gutenberg 16.4
Development

Successfully merging this pull request may close these issues.

Global Styles: Border customisation is not applied correctly
3 participants
@aaronrobertshaw @kevin940726 @cbravobernal