Skip to content

Fix: Fixed align right issue on avatar component #67494

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
youknowriad merged 3 commits into from
Dec 4, 2025
Merged

Fix: Fixed align right issue on avatar component #67494

youknowriad merged 3 commits into from
Dec 4, 2025

Conversation

@Mayank-Tripathi32
Copy link
Contributor

@Mayank-Tripathi32 Mayank-Tripathi32 commented Dec 2, 2024 •
edited
Loading

resolves #67493

What?

Added styles for Align Right in editor.scss for block themes to resolve the issue where the Avatar component alignment was not working when the "Link to Profile" option was enabled.

Why?

The Align Right feature for the Avatar component was not functioning as expected in block-based themes (e.g., Twenty Twenty-Four, Twenty Twenty-Five) when the "Link to Profile" option was selected. This PR addresses that issue by ensuring that the alignment works correctly across block themes, ensuring consistency with classic themes like Twenty Twenty-One, where it worked fine.

How?

This PR modifies the editor.scss file to explicitly add and enforce styles for the Align Right option in the block editor for Avatar components.

It adds following style snippet.

.wp-block-avatar.alignright {
	.components-resizable-box__container {
		float: right;
	}
}

Testing Instructions

  1. Activate a block-based theme, e.g., Twenty Twenty-Four or Twenty Twenty-Five.
  2. Add the Avatar component to a post or page using the block editor.
  3. Enable the "Link to Profile" option in the Avatar component settings.
  4. Set the alignment option to "Align Right".
  5. Save and preview the post/page.
  6. Repeat for classic theme.

Screencast

Before

Screen.Recording.2024-12-02.at.10.54.01.PM.mov

After

Screen.Recording.2024-12-02.at.11.08.50.PM.mov

@Mayank-Tripathi32 Mayank-Tripathi32 marked this pull request as ready for review December 2, 2024 17:45
@github-actions
Copy link

github-actions bot commented Dec 2, 2024 •
edited
Loading

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 props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: Mayank-Tripathi32 <[email protected]>
Co-authored-by: ellatrix <[email protected]>
Co-authored-by: youknowriad <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

ellatrix
ellatrix previously requested changes Dec 23, 2024
View reviewed changes
Copy link
Member

@ellatrix ellatrix left a comment

Choose a reason for hiding this comment

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

Hi! Quickly looking at the output of the Avatar block, it seems that the whole block is wrapped in the link, and the link is not part of the block itself. I think fixing that would be the correct approach. Would you be able to try that?

@ellatrix ellatrix added the [Type] Bug An existing feature does not function as intended label Dec 23, 2024
@Mayank-Tripathi32
Copy link
Contributor Author

Mayank-Tripathi32 commented Dec 23, 2024

Hi! Quickly looking at the output of the Avatar block, it seems that the whole block is wrapped in the link, and the link is not part of the block itself. I think fixing that would be the correct approach. Would you be able to try that?

Yes, I will work on it today.

@Mayank-Tripathi32 Mayank-Tripathi32 mentioned this pull request Dec 23, 2024
Open
@Mayank-Tripathi32
Copy link
Contributor Author

Mayank-Tripathi32 commented Dec 23, 2024

Hello @ellatrix,
Thank you for your feedback. I’ve addressed the issue you highlighted regarding the wrapper in the editor incorrectly wrapping the block. I’ve implemented the necessary adjustments and would appreciate it if you could review the changes.

I have also reverted the initial commit related to css changes.

Copilot AI review requested due to automatic review settings August 6, 2025 17:33
@Mayank-Tripathi32 Mayank-Tripathi32 force-pushed the try/fix-67493-align-issue branch from 52d4c5c to 6624d15 Compare August 6, 2025 17:33
Copilot AI reviewed Aug 6, 2025
View reviewed changes
Copy link

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull Request Overview

This PR fixes the alignment issue for the Avatar component in block-based themes when the "Link to Profile" option is enabled. The fix refactors the code structure to eliminate duplicated conditional rendering patterns.

  • Introduces a reusable AvatarLinkWrapper component to handle link wrapping logic
  • Moves the link wrapper logic inside the ResizableAvatar component instead of conditionally rendering it in multiple places
  • Removes duplicated conditional rendering blocks from both CommentEdit and UserEdit functions
Comments suppressed due to low confidence (1)

packages/block-library/src/avatar/edit.js
style={ borderProps.style }
/>
</ResizableBox>
<AvatarLinkWrapper isLink={ attributes.isLink }>
Copy link

Copilot AI Aug 6, 2025

Choose a reason for hiding this comment

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

The AvatarLinkWrapper is placed inside the ResizableAvatar component, which means the link wrapper will be inside the resizable container. This could interfere with the CSS float alignment fix mentioned in the PR description, as the float property on .components-resizable-box__container may not work as expected when it's nested inside a link element.

Copilot uses AI. Check for mistakes.
@Mayank-Tripathi32
Copy link
Contributor Author

Mayank-Tripathi32 commented Aug 6, 2025

rebased with latest trunk.

@t-hamano t-hamano added the [Block] Avatar Affects the Avatar Block label Sep 11, 2025
@youknowriad youknowriad force-pushed the try/fix-67493-align-issue branch from 6624d15 to 206112c Compare December 4, 2025 07:22
@youknowriad
Copy link
Contributor

youknowriad commented Dec 4, 2025

It looks like we dropped the ball in terms of reviews here. Sorry about that.

In my tests this is working great.

Any thoughts @ellatrix

youknowriad
youknowriad approved these changes Dec 4, 2025
View reviewed changes
Copy link
Contributor

@youknowriad youknowriad left a comment

Choose a reason for hiding this comment

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

This makes a lot of sense.

@youknowriad youknowriad dismissed ellatrix’s stale review December 4, 2025 07:26

This is addressed

@youknowriad youknowriad enabled auto-merge (squash) December 4, 2025 07:26
@youknowriad youknowriad merged commit b853dd9 into WordPress:trunk Dec 4, 2025
34 checks passed
@github-actions github-actions bot added this to the Gutenberg 22.3 milestone Dec 4, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot Copilot left review comments

@youknowriad youknowriad youknowriad approved these changes

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

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

@ellatrix ellatrix Awaiting requested review from ellatrix

Assignees

No one assigned

Labels

[Block] Avatar Affects the Avatar Block [Type] Bug An existing feature does not function as intended

Projects

None yet

Milestone

Gutenberg 22.3

Development

Successfully merging this pull request may close these issues.

Avatar Component: Align Right does not work on block themes

4 participants

@Mayank-Tripathi32 @youknowriad @ellatrix @t-hamano