Avatar Component: Align Right does not work on block themes

[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