Button Block

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

To add a button, click on the Add Block button and select the Button block. Alternatively, you can start typing /button in a new paragraph block, then press enter.

Use the slash command /button to insert a button block

Detailed instructions on adding blocks can be found here.

Block Interface

Each block comes with unique toolbar icons and specific user controls that allow you to manipulate the block right in the editor.

Right after inserting the block, you can click on the button to type a call to action text. Also, you would be able to paste a URL of the page you’d like to redirect the users to.

Color Scheme

You can choose the text and background colors for your button. Selecting proper colors will help you to make the button stand out and make sure to find a nice contrast for readability purposes.

The button block with custom color settings

Accessibility parameters are implemented within this color picker panel to warn you when the text may become illegible for persons with reading impairments.

Alignment

A block-specific toolbar will appear whenever you select the button block. Three of the options are for the block’s alignment, right, center, and left. Choosing the right or left will allow you to place another block alongside the button block moreover picking center will return the block to its default, taking up the full width of the post or page content.

Responsive Text Alignment

This control offers left, right, and center alignment responsive classes that can be used to realign the block’s position with the same viewport width breakpoints as the grid system. Basically, they work just like the usual alignment classes, except that they have suffixes that represent the breakpoint from which they come to effect.

Realign the button block across the different viewports

This feature is exclusively available within the Conj - eCommerce WordPress Theme which supports these alignment controls in any given post or page template.

Basic Text Formatting

  • Bold

  • Italics

  • Strikethrough

Styles

The button block includes three styles, Rounded, Outline and Squared:

A rounded style gives the button element rounded corners which looks like this:

An example of a button with the rounded style

An outlined button style has a border layout that looks like this:

An example of a button with the outline style

A squared style gives the button element sharp corners which looks like this:

An example of a button with the squared style

In addition to the options found in the block’s toolbar, you may locate the block specific settings in the editor sidebar panel. Clicking on the cog icon next to the publish button will toggle the visibility of this panel.

The button block settings can be found in the sidebar

Advanced

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

When selecting one of the three styles available, this field is pre-populated with the CSS class that targets the chosen style.