-
Notifications
You must be signed in to change notification settings - Fork 4.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
The Button + Image block doesn't allow adding styles only for the text without affecting the image #60239
Comments
Hi @adrianahdez, Have you tried text-underline-offset? Besides 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. |
Hi @t-hamano, It requires 4 lines:
When I could achieve it in a single line:
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. |
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. |
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. |
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:
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:
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
The text was updated successfully, but these errors were encountered: