Button block markup in the front-end

[samikeijonen]

Markup:

<div class="wp-block-button alignnone"><a href="http://wordpress-svn/src/">This is button</a></div>

Markup with background-color:

<div class="wp-block-button aligncenter" style="background-color:#cf2e2e"><a href="#">Modified button</a></div>

• aligncenter doesn't have any effect when testing with default themes.
• Inline styles should be remove as I proposed in Proposal of removing inline styles #2862.
• I don't think styles should apply to outer element, they shoud be targeted to <a> element itself.

Conclusion and proposal

I'd like to propose a little different markup and put styles to <a> element.

<div class="wp-block-button aligncenter"><a href="#" style="background-color:#cf2e2e">Modified button</a></div>

• This is how we do links-look-like-a-buttons right now by adding class to <a> element: <a class="button">This is link like a button</a>
• Naturally CSS would change also.

[mtias]

The button is currently one of the most hideous markup wise for me. Would figure make sense as a wrapper here? Maybe the presence of figure is controlled by the toggle to make it wrap / not wrap.

[samikeijonen]

I don't think <figure> is correct here. I suggested <p> in a11y meeting but it's not really paragraph either:)

I think we should start with a small change and add styles to <a> element and make aligncenter and alignright work.

[afercia]

It's a small step for progressive improvements to the button, make sense to me 🙂

[ramseyp]

Moving the styles from .wp-block-button to wp-block-button a makes sense, noting what @samikeijonen said above. The visuals of the "button" lead one to want to tap or click on the button and that's currently a div, not a link. Styling the link gives a larger target to hit and is more logical, as an a tag is an actionable item, inherently.

The screenshot shows the target area highlighted in Firefox's inspector. You can see the discrepancy between the link and the styled div.

I'm curious (and I'll search back to see what earlier discussions might have been on this), why is the button block not generating an HTML button element? I noticed, as an example, the green "comment" button in the Github issues editor is an actual HTML button.

[samikeijonen]

why is the button block not generating an HTML button element?

It's because button block is "always" going to be a link (<a>) which triggers navigation to a different resource. <button> triggers an action, such as form submission.

[youknowriad]

closed by #3445