Button block markup in the front-end

[samikeijonen]

Current button markup in the front-end:

<div class="aligncenter wp-block-button">
<a href="https://github.com/WordPress/gutenberg"><span>Help build Gutenberg</span></a>
</div>

I haven't check that closely but I was wondering why we need <div> wrapper? Could it just be p wrapper which feels more semantic markup.

First suggestion of markup without any testing:

<p class="aligncenter">
<a class="wp-block-button" href="https://github.com/WordPress/gutenberg"><span>Help build Gutenberg</span></a>
</p>

Note that I switched class="wp-block-button" to a element. I assume that many themes have already styles for link that look like a button. Now we just need to manually add that class to a element.

I'm not sure where the extra <span> is needed inside the <a>. Markup could be like this:

<p class="aligncenter">
<a class="wp-block-button" href="https://github.com/WordPress/gutenberg">Help build Gutenberg</a>
</p>

Or

<p class="aligncenter wp-block-button">
<a href="https://github.com/WordPress/gutenberg">Help build Gutenberg</a>
</p>

[karmatosed]

Closing in favour of #2907