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

[dhananjaykuber]

Fixes #69180

What?

Fixes the Avatar block width issue in the editor when "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?

Removed unwanted a tag wrapper from the editor

Testing Instructions

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

[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: dhananjaykuber <[email protected]>

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

[t-hamano]

Thanks for the PR!

The block HTML is expected to be as consistent as possible between the editor and the frontend. Therefore, removing the a wrapper just to solve the symptom may not be the right approach.

The first thing to check is the difference in HTML structure between the frontend and the editor.

It looks like this in trunk.

Frontend:

<div class="wp-block-avatar">
  <a class="wp-block-avatar__link">
    <img class="wp-block-avatar__image" >
  </a>
</div>

Editor:

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

Ideally, the HTML on the editor side should be as follows. This is similar to a linked Image block:

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

I think we need to fix this HTML first. The Image block approach may be helpful.