The Button + Image block doesn't allow adding styles only for the text without affecting the image

[adrianahdez]

Description

When I attempt to create an underline effect for the text on hover, it's impossible to apply it solely to the text without affecting the image, due to the inappropriate HTML rendering.

Expected behaviour: Add an underline effect on hover only for the text in a text+image button block.
Current behaviour: The underline applies to both the text and the image.

NOTE: I can't use the text-decoration: underline; rule because it doesn't match my design.

Step-by-step reproduction instructions

For example, I have this button + image block, created in Editor:

When I add an underline effect on hover 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 <span> 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:

See how the block is rendered by default:

<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 :(

Let me know of any suggestions. Thanks for reading :-)

Screenshots, screen recording, code snippet

No response

Environment info

Wordpress version: 6.4.3
Gutenberg version: 16.2-16.7

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

[t-hamano]

Hi @adrianahdez,

Have you tried text-underline-offset? Besides text-underline-offset, text-decoration-thickness and text-decoration-color may also be useful.

The screenshot below is an example of defining a hover style that applies a custom underline to a Button block via the Global Styles panel.

Alternatively, you can wrap the text in an arbitrary element by applying some formatting to the text node. You may be able to apply styles to this element.

[adrianahdez]

Hi @t-hamano,
thanks, it's a good solution!!
But it still seems to me that it needs too many lines:

It requires 4 lines:

a:hover {
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-decoration-color: currentColor;
    text-underline-offset: 10px;
}

When I could achieve it in a single line:

span:hover {
    border-bottom: 1px solid currentColor;
}

So, I am still thinking that it would be a good idea for every element to have its own HTML tag, to have more control over them. But yes, your solution is also very good! It helped me a lot because I had to create a custom block to achieve this effect, and now with this I can remove it and use native blocks

Thanks.

[t-hamano]

So, I am still thinking that it would be a good idea for every element to have its own HTML tag, to have more control over them.

This is a complex problem. This is because the image included in the style we are trying to achieve is part of the editable button text. It would be difficult to automatically detect only the text that comes before an inline image and wrap it in a span tag.

Another approach is to add your own inline format via Formatting Toolbar API. This will allow you to wrap some text with arbitrary elements or apply classes.

[t-hamano]

Hi @adrianahdez,

I would like to close this issue since there is already CSS or API to solve the problem reported in this issue. If there is something I missed, please feel free to comment.