Button Block

·

The button block allows you to add buttons linking to other pages on your site or to an external page. 

In order to add a button block, click on the Block Inserter icon.

You can also type /button and hit enter in a new paragraph block to add one quickly.

Detailed instructions on adding blocks can be found here.

Block Toolbar

Each block has its own block-specific controls that allow you to manipulate the block right in the editor.

You can click on the block to reveal the toolbar.
You can click on the block to reveal the toolbar.

Once you add the block, you can click on the button to type a call to action text, and you can paste a URL of the page you’d like to redirect the users to. You can also format the text as bold, italics and strikethrough.

Alignment

When you select your button block, a toolbar will appear. Three of the options are for the block’s alignment: right, center, and left. Choosing right or left will allow you to place another block alongside the button block. Choosing center will return the block to its default, taking up the full width of the post or page.

Block Settings Panel

Every block has specific options in the editor sidebar in addition to the options found in the block toolbar. If you do not see the sidebar, simply click the ‘cog’ icon next to the Publish button.

Button Block Panel
Button Block Panel

Styles

On the Styles tab, you can set the button border layout to roundedoutlined and squared

Block Button Styles Tab
Block Button Styles Tab

Color Settings

You can choose the text and background colors for your button.

Block Button Color Settings Tab
Block Button Color Settings Tab

Select colors that will make the button stand out and make sure to find a nice contrast for readability purposes. Accessibility parameters are built into the new editor to warn you when the text may become illegible for persons with reading impairments.

Advanced

The advanced tab lets you add a CSS class to your block, allowing you to write custom CSS and style the block as you see fit.

Block Settings Advanced