Avatar Block Exceeds Editor Width When 'Link to User Profile' Option is Enabled

[Mukulsingh27]

What?

Closes #69180
It fixes the Avatar block width issue in the editor when the "Link to User Profile" option is enabled. Currently, the block extends beyond the editor's maximum width constraints while maintaining correct frontend display.

Why?

The Avatar block's wrapper element is not properly constrained within the editor's width boundaries when the link option is enabled. This creates an inconsistent editing experience, though the frontend display remains unaffected. The fix ensures visual consistency between the editor and frontend rendering.

How?

• Update the editor's HTML markup to fix the issue
• Ref used: Image block

Testing Instructions

Testing Instructions for Keyboard

1. Open the WordPress block editor
2. Add a new Avatar block to your post/page
3. In the block settings sidebar, enable the Link to User Profile option
4. Verify the Avatar block stays within the editor's maximum width
5. Preview the page to confirm the frontend display remains correct

Screenshots or screencast

Before	After

[github-actions]

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: Mukulsingh27 <[email protected]>
Co-authored-by: t-hamano <[email protected]>
Co-authored-by: dhananjaykuber <[email protected]>

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

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @Mukulsingh27! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

[Mukulsingh27]

@t-hamano
As per your suggestion here, I have updated the HTML markup based on the reference from the Image block. It is now looking and working fine.

Old Markup

<a href="#avatar-pseudo-link" class="wp-block-avatar__link">
	<div tabindex="0" draggable="true" class="block-editor-block-list__block wp-block is-selected wp-block-avatar" id="block-4f9782c1-5c00-4bc0-93a2-d4266615a10c" role="document" aria-label="Block: Avatar" data-block="4f9782c1-5c00-4bc0-93a2-d4266615a10c" data-type="core/avatar" data-title="Avatar">
		<div class="components-resizable-box__container has-show-handle" style="position: relative; user-select: auto; width: 96px; height: 96px; max-width: 240px; box-sizing: border-box; flex-shrink: 0;">
			<img src="https://secure.gravatar.com/avatar/729ae85bf62b9917e93538db2f2688ca?d=mm&amp;r=g&amp;s=192" alt="mukul Avatar" class="avatar avatar-96 photo wp-block-avatar__image">
		</div>
	</div>
</a>

New Markup

<div tabindex="0" draggable="true" class="block-editor-block-list__block wp-block is-selected wp-block-avatar" id="block-91bef366-fbcd-4e55-a0c3-b2d68ed5e3e5" role="document" aria-label="Block: Avatar" data-block="91bef366-fbcd-4e55-a0c3-b2d68ed5e3e5" data-type="core/avatar" data-title="Avatar">
	<a href="#avatar-pseudo-link" class="wp-block-avatar__link">
		<div class="components-resizable-box__container has-show-handle" style="position: relative; user-select: auto; width: 96px; height: 96px; max-width: 240px; box-sizing: border-box; flex-shrink: 0;">
			<img src="https://secure.gravatar.com/avatar/729ae85bf62b9917e93538db2f2688ca?d=mm&amp;r=g&amp;s=192" alt="mukul Avatar" class="avatar avatar-96 photo wp-block-avatar__image">
		</div>
	</a>
</div>

[t-hamano]

Thanks for the PR!

The change looks very good, but we will need to address three issues this change introduces.

1. The cursor changes to a pointer when the image is linked. Like other linked blocks, the editor should use the default cursor.
2. We can't click on the block "properly". The blue outline doesn't appear when we click on the block, because that would mean we click on the a element.
3. The a element is 100% wide. The width of the a element should match the width of the image, just like in the frontend.

f7975efbc77c5f46561ee02c8c81aaa6.mp4

For the first and second issues, we will need styles like this in the editor, just like in the Site Logo block:

.wp-block-avatar__link {
	pointer-events: none;
}

For the third issue, we could use the approach in this comment. We will need this style in both the frontend and the editor:

.wp-block-avatar__link {
	display: block;
	justify-self: start;
}

[Mukulsingh27]

Thanks @t-hamano for testing and providing the feedback.

The cursor changes to a pointer when the image is linked. Like other linked blocks, the editor should use the default cursor.

The cursor is now fixed across the block.

However, if we use pointer-events: none;, the resizable box functionality will break because the resize cursors are also wrapped inside the anchor tag. Therefore, an additional style is added to fix the cursor without breaking the resizable box.

We can't click on the block "properly". The blue outline doesn't appear when we click on the block, because that would mean we click on the a element.

This is now fixed. The blue outline is appearing and working fine.

The a element is 100% wide. The width of the a element should match the width of the image, just like in the frontend.

If we use these properties:

.wp-block-avatar__link {
	display: block;
	justify-self: start;
}

Then I doubt that the aligncenter functionality will break. To ensure it works without breaking the functionality, display: inline-block; would be more suitable.

Untitled.mov

Made necessary changes to fix all the issues.

[t-hamano]

@Mukulsingh27 Thanks for the update!

However, if we use pointer-events: none;, the resizable box functionality will break because the resize cursors are also wrapped inside the anchor tag. Therefore, an additional style is added to fix the cursor without breaking the resizable box.

This approach is fine, but it is not recommended to rely on selectors for specific components. What do you think about changing the following configuration, like for the Site Logo block?

<div class="block-editor-block-list__block wp-block wp-block-avatar">
  <div class="components-resizable-box__container>
  <a href="#avatar-pseudo-link" class="wp-block-avatar__link">
      <img class="wp-block-avatar__image">
    </a>
  </div>
</div>

The a element is 100% wide. The width of the a element should match the width of the image, just like in the frontend.

If we use these properties:

.wp-block-avatar__link {
	display: block;
	justify-self: start;
}

Then I doubt that the aligncenter functionality will break. To ensure it works without breaking the functionality, display: inline-block; would be more suitable.

Sorry, this approach was certainly not appropriate. The problems with this approach were recently discussed here:
#69255 (comment)

[Mukulsingh27]

Thanks @t-hamano for sharing the configuration.
I've taken the reference from the site-logo block and updated the avatar block to follow the same structure in terms of markup, removing the CSS dependency. Here is the final version. Can you please confirm? Thanks.

Screen.Recording.2025-03-04.at.5.33.39.PM.mov