Button block default styles not applied to manually added buttons

[bradhogan]

Description

If you create a new page, add an HTML block that let's say includes a simple form code like:

<form><input type="email" placeholder="your@email" value="" name="EMAIL" class="required email" aria-required="true"><input class="wp-block-button__link" type="submit" value="Subscribe →" name="subscribe"></form>

The input button does not use the default button block styles.

Step-by-step reproduction instructions

1. Create new page
2. Add HTML block
3. Add the following <form><input type="email" placeholder="your@email" value="" name="EMAIL" class="required email" aria-required="true"><input class="wp-block-button__link" type="submit" value="Subscribe →" name="subscribe"></form>
4. Notice the button does not use the default styles for the button block

Screenshots, screen recording, code snippet

No response

Environment info

• WP 6.0
• Gutenberg 13.4.0
• Mac 12.3.1
• Chrome Version 102.0.5005.115

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

[kathrynwp]

Hi @bradley2083, thanks for the report.

What theme are you using? With Twenty Twenty-Two, adding your code via the Custom HTML widget pretty well replicated the button style for the Search and Post Comment buttons, though there is a tiny grey border that shouldn't be there. (I also tried adding the class submit to the button in the HTML block, but there was no change to the border.)

Could you please share what theme you're using, as well a screenshot of what you're seeing, showing both an existing button and the button from your custom HTML block?

[bradhogan]

Hey, @kathrynwp.

The reason you're almost seeing the right default button style is because a button already exists on that page (in the comments form). I'm testing in a local environment with no plugins (other than Gutenberg) and the default 2022 theme.

To replicate, create a page with comments disabled and add both of the following:

<button type="button">Click Me!</button>

<input type="submit" value="hello button" />

And you'll see both look like this:

[kathrynwp]

@bradley2083 Gotcha, thanks for the steps to replicate.

My inclination would be to say that's not up to Gutenberg to automatically add styling to arbitrary elements in custom HTML blocks, which seems to be confirmed by @carolinan's comment here:
WordPress/twentytwentyone#862 (comment)

I've pinged Carolina in case they are able to chime in with a second opinion here.

[bradhogan]

@kathrynwp I think at the very least the default button styles set in theme.json should be applied to a button, no? Even if you add something like this using the Custom HTML block the default theme.json button styles don't work:

<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Take action</a></div>

Because the button styles are applied inline.

[kathrynwp]

I understand what you're saying, but I'm thinking that this may be the case because the relevant button CSS is only loaded if a button block is loaded on the page (rather than recreating one with custom HTML) but Carolina can probably shed some light.

[bradhogan]

@kathrynwp Unable to comment on that thread with @carolinan but her last comment mentions how WooCommerce styles forms / buttons using but you need to use the CSS classes, but this is not longer the case in WooCommerce. If you test with Woo and create a blank page with no other buttons and insert their "Hand-picked products" block, you'll see the styles from are somehow applied inline with the appropriate CSS classes (and I assume somehow are pulling in the styles set for the button block in the theme's theme.json. or global styles if the button style has been overridden - at least that's what should happen).

Let me know what you think.

[carolinan]

It depends.

• Twenty Twenty-Two does not style HTML button elements, other block themes might add custom CSS for it.
• Block themes normally load the button block styles only when the button block is on the page. It won't read content inside the HTML block as an actual block.
• In classic themes, the theme author decides how to load the CSS, so it depends.
• With the upcoming version of Gutenberg, themes can style button elements and button blocks in theme.json. This style is applied to the class wp-element-button not wp-block-button__link. And from what I understood, in a block theme, this style will always load even if there is no button block on the page.
• I would not expect Twenty Twenty-Two to support this because the theme also needs to be backwards compatible.

[bradhogan]

@carolinan Do you have a reference to how we'll be able to style wp-element-button in theme.json?

[github-actions]

Help us move this issue forward. This issue is being marked stale since it has no activity after 15 days of requesting more information. Please add info requested so we can help move the issue forward. Note: The triage policy is to close stale issues that need more info and no response after 2 weeks.

[mrfoxtalbot]

I am going to close this issue as the original report was based on an incorrect expectation about how custom HTML should be styled. Thanks again for the report @bradley2083 and please feel free to reopen this, if necessary.

[bradhogan]

@mrfoxtalbot I'm reopening because I don't see why there shouldn't be a way to apply the core button block style to anything that uses wp-element-button. It would be very useful to have the ability to add this class to an HTML element and auto pull in the default styles. If for example, a person decides to drop in the HTML embed for their Mailchimp newsletter sign up, the style for the button wouldn't match the theme and there would be no way to match it unless they add custom CSS (not the goal of Gutenberg..). A more simple solution imo would be to have them add wp-element-block.

[mrfoxtalbot]

Thank you for your reply @bradley2083. I was looking at it from a "this is not a bug per se" perspective but I have reopened the issue and labeled this as "Enhancement".

[bradhogan]

@mrfoxtalbot Thank you!

[carolinan]

@bradley2083 I would like to understand where you are seeing .wp-element-button being used but not working?

[bradhogan]

@carolinan this comment explains how to replicate

[carolinan]

@bradley2083 But the example theme does not support the feature.

[carolinan]

Twenty Twenty-Two was built before button elements were supported in theme.json.
To support button elements in twenty Twenty-Two, you have to update theme.json, or, use a child theme with an updated theme.json.

[bradhogan]

@carolinan To replicate:

1. Choose any theme you feel has a sufficient theme.json
2. Create a page that does not have a button present anywhere on the page (not in the comments, not in the header, etc.)
3. In the content editor, add <button type="button">Click Me!</button> and <input type="submit" value="hello button" />
4. Notice the default button styles as applied in theme.json are not fully present

[carolinan]

And if you include the expected CSS class wp-element-button?
What does this mean "in the content editor" : Is it a paragraph? A HTML block, or a custom block?

[bradhogan]

Hey, @carolinan. If I add wp-element-button to input or button elements in a Custom HTML block like:

<button type="button" class="wp-button-element">Click Me!</button>

<input type="submit" value="hello button" class="wp-button-element" />

The buttons do not pull in the default styles of the core button block set in the theme.json.

When you say "update theme.json", do you have an example of that? I believe any environment / theme I've tested has an updated theme.json but would love to rule that out as an issue just not seeing any docs on actually "updating theme.json".

Thanks!

[carolinan]

I don't think that elements inside the html block are rendered as blocks, I am sceptical to that working, it needs to be tested. I don't think these classes will be detected and the styles loaded.

With updating theme.json I mean adding styles to elements.button.

#40260

[github-actions]

Help us move this issue forward. This issue is being marked stale since it has no activity after 15 days of requesting more information. Please add info requested so we can help move the issue forward. Note: The triage policy is to close stale issues that need more info and no response after 2 weeks.

[bradhogan]

@carolinan I don't believe even the comment form button takes on all of the default theme styles from the theme's theme.json for a button, right? Adding the ability for any button or input that has .wp-element-button to pull in the theme.json styles would solve this.

[carolinan]

The default themes support different versions of WordPress, so you will get different results.
The wp-element-button is not supported in the older themes.

[bradhogan]

@carolinan I think this is actually working with the latest options for theme.json. I was putting the theme button styles in styles > blocks > core/button rather than styles > elements > button. Looking through the Twenty Twenty Three theme was helpful. Thanks!

[eZoulou]

Hi there,
Thanks for raising the issue and for the provided solution.
But it only works because in this precise case, button block has a corresponding HTML element.
What if one wants to use default cover or columns styles for example?
This can be the case when you insert gutenberg markup via javascript, or PHP somehow.
Regards

[carolinan]

@eZoulou Hi! Kindly use the WordPress support forum for support.
Because the issue you mentioned is separate from the original issue, and because the issue has been closed, you are unlikely to receive a reply with a solution for your use case here.

When you render block markup with PHP, you need to do it correctly before wp_head(), and then output that code where you want the block to show in the body, that is the only way the styles will be loaded.

[eZoulou]

Hi @carolinan.
You're right, thanks for answering.
... and for your great articles on fullsiteediting.com! :-)