Skip to content
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

Block audit: Button #8971

sarahmonster opened this issue Aug 14, 2018 · 9 comments


Copy link

@sarahmonster sarahmonster commented Aug 14, 2018

Block audit

Note: We'll be doing these audits in waves and editing this as we work through the blocks, so this text will be updated and fleshed out as we progress. See the full picture here.


screenshot 2018-08-14 13 42 41

Name: Button
Description: Want visitors to click to subscribe, buy, or read more? Get their attention with a button.
*Category: Layout elements
CSS class: wp-block-button in frontend and editor
Can be converted to: nothing


screenshot 2018-08-14 13 13 52

screenshot 2018-08-14 13 40 46

screenshot 2018-08-14 13 40 40

screenshot 2018-08-14 13 43 16

Primary (toolbar) settings

Block styles

Secondary (sidebar) settings

Color settings: Background color, text color
Advanced: Additional CSS class

Frontend appearance

Gutenberg starter theme:
screenshot 2018-08-20 11 56 44

Atomic Blocks
screenshot 2018-08-20 11 55 14

screenshot 2018-08-20 11 52 31

screenshot 2018-08-20 11 57 23


Individual issues will be opened for these soon

  • Block styles previews have an awkward shadow effect.

  • Outline ceases to be an outline when a background colour is applied—might make sense to contextually adjust this so the "background" colour is used for the outline. (Seems to be what happens on the front-end.)

  • Suffers from block-level float issues. (#8293)

  • Inconsistent bottom-margin between different alignment settings. (#7812)

  • twentyten's theme styling overrides custom text colour, needs more specific CSS to account for more themes.


Individual issues will be opened for these soon

  • Placeholder on button text is confusing—I expected the text to disappear or highlight. Feels buggy when you can't select to delete it.

  • Arrangement of inputs is rather awkward here. They should at least be spaced out a bit more.

  • Would centre-alignment be a better default here?

  • Should buttons appear on the frontend if no text or link has been added?

  • Hover styling can feel very out of place, depending on the theme styling.

@sarahmonster sarahmonster created this issue from a note in The Great Block Audit of 2018 (To do) Aug 14, 2018
@sarahmonster sarahmonster self-assigned this Aug 14, 2018
@sarahmonster sarahmonster moved this from To do to Needs frontend screenshots in The Great Block Audit of 2018 Aug 14, 2018
@sarahmonster sarahmonster changed the title Button Block audit: Button Aug 14, 2018
@sarahmonster sarahmonster moved this from Needs frontend screenshots to Needs documentation review in The Great Block Audit of 2018 Aug 20, 2018

This comment has been minimized.

Copy link

@webmandesign webmandesign commented Aug 22, 2018


I'm not sure if this is the place I should ask for this, but it's related to Button block.

My question is, would it be possible to set a custom button (link) class? Or add such class? And I mean without using JS, a filter hook in PHP would be preferable.

The thing is that a themes already style buttons and they usually use some generic button class such as .button or .btn or similar. If we added such class to the block, I think it might simplify styling buttons.

The desired Button block output HTML would then be (using additional theme-button class):

<div class="wp-block-button">
	<a class="wp-block-button__link theme-button" href="...">...</a>

Thanks for consideration!


This comment has been minimized.

Copy link

@0aveRyan 0aveRyan commented Aug 24, 2018

@webmandesign it's not possible to modify the link markup, but using the Advanced box in the sidebar, you can append a custom class to achieve the same level of customization using CSS.

advanced box in sidebar allows adding css class

button markup

<div class="wp-block-button aligncenter custom-class">
    <a class="wp-block-button__link" href="">button with custom class</a>

The anchor could be targeted using the following CSS:

.wp-block-button.custom-class > a {
  // target all button anchors with .custom-class

And could even be scoped to specific alignments:

.wp-block.button.aligncenter.custom-class > a {
  // special styles only for center-aligned buttons with .custom-class

This comment has been minimized.

Copy link

@webmandesign webmandesign commented Aug 24, 2018

@0aveRyan Thanks for the info. But the "Additional CSS Class" field doesn't do the trick for me as it doesn't apply the class on the link itself. That way I'm still stuck with custom styling the .wp-block-button__link anyway as it can not inherit my .button styles.

What I meant was to suggest the button link class filtering functionality. Would be great if theme authors could hook onto the class and change/append to it. Preferably with PHP filter hook, not JS.


This comment has been minimized.

Copy link

@iamleese iamleese commented Sep 4, 2018

I'm not sure if it's been suggested, but an "Open in New Window" option is needed for this block, too.


This comment has been minimized.

Copy link

@tomusborne tomusborne commented Oct 19, 2018

Is there a reason the button is rounded by default? I feel like rounding the button this much should be opt-in with a class, instead of the other way around.


This comment has been minimized.

Copy link

@beckyresler beckyresler commented Nov 9, 2018

I agree with @iamleese that there needs to be an "Open in New Window" option. It's currently not possible to set a button to do this. If I edit the html to add a target on the link, it breaks the button block.

I also agree with @webmandesign that there should be a way to add a class to the link itself rather than the wrapping div. If my theme has button styles for links, I should be able to use them without having to modify the theme.

That brings me to another question ... why is a button wrapped in a div? What if I want to wrap a button with a paragraph?


This comment has been minimized.

Copy link

@alliecat9lives alliecat9lives commented Jan 7, 2019

How about some sort of visual feedback to confirm that I've successfully finished filling out a button? Right now, if I type in my button text, then my URL, then hit Return or click the Apply arrow button, nothing happens to indicate that I've completed the task.


As a comparison, when I hyperlink text, there's a visual confirmation that I completed my task.



This comment has been minimized.

Copy link

@sashastone sashastone commented Feb 8, 2019

Another Suggestion for the Button Block

Add the option to open the link in a new window.


This comment has been minimized.

Copy link

@karmatosed karmatosed commented Feb 25, 2019

I am closing this as for most points raised in the audit issues have been created. If you would like to see an improvement to this block please make a new issue and it can be discussed out of this audit. Thanks.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
9 participants
You can’t perform that action at this time.