Buttons

Usage

Rather than create our own block to handle buttons, we’ve leveraged the community support of the Gutenberg core Buttons block to work with your site styles and provide you with all the options your site requires.

We’ve implemented this with Block Styles. You can select which of the four styles of buttons we’ve implemented from the Block Styles menu, and you can change the styles themselves from the Customizer.

You can change the alignment of these buttons by selecting the parent and changing it from the context menu. Be aware, there’s a common issue with phantom buttons showing up when the children of the Buttons block are deleted but not the parent block.

Button Styles

You can see the four button styles for this website below. The appearance of these are determined by the styles we’ve input into our Customizer styles pane. You can hover them and see how they react.

They will also dynamically switch light mode when placed inside of a block with Reverse Print enabled, such as in a Section or Blocks group.

You can find the Styles menu in the right hand corner of the block sidebar. This will only affect the current button selected. This is how we did it on this page.

You can add another button in line with the others by clicking on the + icon.

Help! My links aren’t working!

Chances are, you’re putting it in the wrong place. There’s an unfortunate naming convention used on the buttons block that has led to a lot of confusion. The Link Rel field is NOT where you should be putting your URL. You want to be putting it in the link field in the context menu.

A link here will link your button to your desired URL.

This will NOT link your button to the entered URL. This field specifies the rel attribute of the link field, which in most cases, is not what you want.