Skip to content

Avatar Component: Align Right does not work on block themes #67493

@Mayank-Tripathi32

Description

@Mayank-Tripathi32

Description

related issue #67419

The "Align Right" option for the Avatar component does not function correctly when the "Link to Profile" option is enabled in block-based themes such as Twenty Twenty-Four and Twenty Twenty-Five. However, it works as expected in classic themes like Twenty Twenty-One.

Expected Behavior

  • The Avatar component should align to the right of its container, respecting the selected "Align Right" setting, regardless of the theme.

Actual Behavior

  • In block-based themes (Twenty Twenty-Four, Twenty Twenty-Five), the Avatar component does not align to the right and remains in its default position.
  • In the classic theme (Twenty Twenty-One), the alignment works as expected. (except the issue in resolve avatar block alignment issue. #67419)

Step-by-step reproduction 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.

Screenshots, screen recording, code snippet

Screen.Recording.2024-12-02.at.10.54.01.PM.mov
.wp-block-avatar.alignright {
	.components-resizable-box__container {
		 float: right;
	}
}

Adding following css fixes the issue. Will be opening PR shortly.

Environment info

  • WP 6.7.1
  • Gutenberg Version 19.8.0-rc.1
  • Mac M2 (macos 14.5)
  • Chrome

Please confirm that you have searched existing issues in the repo.

  • Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

  • Yes

Please confirm which theme type you used for testing.

  • Block
  • Classic
  • Hybrid (e.g. classic with theme.json)
  • Not sure

Metadata

Metadata

Labels

[Block] AvatarAffects the Avatar Block[Status] In ProgressTracking issues with work in progress[Type] BugAn existing feature does not function as intended

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions