Block button resize inline image UI is unusable when button has a link set up

[Julianoe]

Description

When you add an inline image to a button that has a link already set up, the link popover element is hiding the "size inline image" popover that is impossible to use.

You have to remove the link, resize the image, reset the link.

I'm not sure how much this is related to #23375
I want to point out that I was trying to make a "button with icon" element with default block editor options... that is currently almost impossible. see #16513

Step-by-step reproduction instructions

1. create a button
2. add link to button
3. add inline image to button
4. try to resize the image

Screenshots, screen recording, code snippet

Environment info

• WP 6.1 on default 2022 or 2023 theme
• tested on up to date Firefox and Chromium
• up to date Linux Manjaro

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

[Mamaduka]

Thanks for contributing, @Julianoe!

I was able to reproduce the issue during today's bug scrub. Therefore, I'm going to remove the "Needs Testing" label.

[cuemarie]

This impacts inline images in Paragraph blocks as well.

[richtabor]

Yea, this should be visible somehow:

[Julianoe]

Simply bumping this because to confirm it's still an issue.

[adrianahdez]

I would like to add another issue with this kind of block.
When I try to create an underline effect to the text on hover, it is impossible to do it only for the text without the image take the effect, because of inapropiate HTML.

For example, I have this button + image block

When I add an underline effect using any css way to do it (using ::after pseudo-element, the border-bottom property, etc.) it will apply to the entire button including the image, and I want it to apply only to the text.

Before you suggest using the text-decoration: underline; CSS rule... yes, that works, but I need to clarify that this rule does not match my design needs, because the line gets too close to the text, so for this case I would need that the text has its own HTML tag, such as a or any.

The result with text-decoration: underline; looks like the following (this is NOT what I want):

This is what I want to achieve:

And currently, it is not possible with the native button+image block. The problem is that the text in the rendered HTML doesn't have an exclusive own HTML tag, I mean its parent tag (<a>) includes the text and also the image:

<div class="wp-block-buttons">
<!-- wp:button {"textAlign":"left","backgroundColor":"transparent","textColor":"blue","style":{"elements":{"link":{"color":{"text":"var:preset|color|blue"}}}},"className":"is-style-fill"} -->
  <div class="wp-block-button is-style-fill wp-block-button__clear-style--text-icon">
    <a class="wp-block-button__link has-blue-color has-transparent-background-color has-text-color has-background has-link-color has-text-align-left wp-element-button" href="https://google.com">
    Conoce más 
    <img class="wp-image-64" style="width: 43px;" src="...path/to/the/image.jpg" alt="">
    </a>
  </div>
</div>

This problem could be solved if you wrap the button text in its own new tag, like a span, for independent CSS styling of each element:

<div class="wp-block-buttons">
<!-- wp:button {"textAlign":"left","backgroundColor":"transparent","textColor":"blue","style":{"elements":{"link":{"color":{"text":"var:preset|color|blue"}}}},"className":"is-style-fill"} -->
  <div class="wp-block-button is-style-fill wp-block-button__clear-style--text-icon">
    <a class="wp-block-button__link has-blue-color has-transparent-background-color has-text-color has-background has-link-color has-text-align-left wp-element-button" href="https://google.com">
        <span>Conoce más </span>
        <img class="wp-image-64" style="width: 43px;" src="...path/to/the/image.jpg" alt="">
    </a>
  </div>
</div>

For now, the only solution I see is to create a new custom block for a custom button because the native block won't let me achieve such a simple thing :(

I'm not sure if maybe I should open a new issue for this. Let me know of any suggestions. Thanks for reading

UPDATE: I added a new issue here