Buttons Block

Go to the List of Blocks

The buttons block allows you to add one or more buttons to your page or post. This block has been available since WordPress 5.4 when the button block was deprecated.

To add a buttons block, click on the (+) Block Inserter icon and select the buttons block.

Adding buttons block
How to add a video block to a post of page

You can also type /buttons and hit the Enter key in a new paragraph block to add one quickly.

How to quickly add buttons block
How to quickly add buttons block

Detailed instructions on adding blocks

The buttons block comes with one individual button block by default. You can customize the text, link, and style for this button. To add more buttons, click the plus (+) icon in the right bottom corner within the buttons block, and a new button will appear. Note that the new button will follow the same style as the existing button.

Adding multiple buttons in the buttons block
Adding multiple buttons in the buttons block

Block Toolbar

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

The buttons block has a toolbar for the individual button as well as a toolbar for the entire block. 

Block toolbar in the buttons block

For the entire block

The main toolbar for the entire block has the following buttons:

  • Transform to
  • Block moving handles
  • Change items justification
  • Change vertical alignment
  • Change alignment
  • More options

Transform to

Allows you to transform the buttons block into a column or a group block.

Transform option in the buttons block

Block moving handles

Block moving handles in the buttons block

Use the block-moving tools to move the block up and down inside the editor. Use the six dots icon to drag and drop the buttons block and reposition it anywhere on the editor.

Get more information about moving a block within the editor.

Change items justification

The items justification setting allows you to justify the items (buttons) to the left, center, or right.

Change items justification in the buttons block

When you set it to ‘Space between items’, the buttons block is centered with equal spacing between the buttons, if you have more than 1 button within the buttons block.

Space between items option in the buttons block

Change vertical alignment

You can align the buttons vertically to the top of the buttons group, middle, or bottom.

Change vertical alignment in the buttons block

Change alignment

The wide width and the full width align options are available if your theme supports them.

Change alignment in the buttons block

For individual button

The toolbar for the individual buttons has the following additional options:

  • Change block style
  • Link
  • Text editing options
  • More options
Block toolbar for the individual button in the buttons block

Change block style

Clicking on the change block style will let you change the style of the button.

Change block style for the individual button in the buttons block

Link

You can add a link to the button using the Link setting. You can also set it to open the link in a new tab.

Link for the individual button in the buttons block

To remove the link, click the button and click Unlink in the Block toolbar.

Unlink for the individual button in the buttons block

Text editing options

Bold

You can select the text of the block (button) and use the Bold option or Ctrl+B / Cmd+B on your keyboard to bold it, which is usually heavier than the surrounding text.

Italic

You can select the text of the block (button) and use the Italic option or Ctrl+I / Cmd+I on your keyboard to italicize it, which usually appears slanted to the right.

More text editing options

More text editing options for the individual button in the buttons block

Inline code

Use inline code feature to format code snippets within your text differently. Not only that, but Inline code formatting also prevents the code to be executed instead of displayed.

Inline image

The inline image feature allows you to add an image into your text. It has one option: enter the desired pixel width for your image.

Keyboard input

Use keyboard input feature to format text snippets within your text differently. (The <kbd> element of HTML will be applied.)

Strikethrough

Strikethrough can be used to place a horizontal line through the middle of the selected text.

Example: Buttons Block

Subscript

Subscript can be used to set a character slightly below the normal line of type.

Example: Buttons Block

Superscript

Superscript can be used to set a character slightly above the normal line of type.

Example: Buttons Block

More Options

These controls give you the option to copy, duplicate, and edit your block as HTML.

Read about these and other settings.

Block Settings

The block settings panel contains customization options specific to the block. To open it, select the block and click the cog icon next to the Publish button.

The cog icon for buttons block to show the Block settings

For the entire block

When the entire buttons block is selected, you have the Layout, Dimensions, and Advanced settings for customization.

Layout

Layout settings for the buttons block

Under Justification settings, you have the following options:

  • Justify items left
  • Justify items center
  • Justify items right
  • Space between items (Only for horizontal orientation. The buttons block is centered with equal spacing between the buttons, if you have more than 1 button within the buttons block.)

You can have buttons stacked horizontally or vertically, depending on the selected orientation.

You can also set the buttons to wrap to multiple lines or display all of them in one line.

This article provides details about layout settings. 

Color

You can set the text and background colors for the button, allowing you to call attention to important content.

Pick a color from the suggestions, or add a custom color using the color picker or by adding a color code. The color options available will vary based on the theme.

Color settings for the individual button in the buttons block

See this guide for more information about changing colors.

Typography

Typography settings allow you to change a button’s font size, appearance, line height, letter casing, and spacing

Typography settings for the individual button in the buttons block

To access all the typography options click on the 3-dot icon in the top right corner of the Typography setting panel. You can also select ‘Reset all’ if you want to reset all the changes you made in the typography settings.

Get more details about changing typography settings.

Dimensions

Dimension controls are used to control how groups of buttons are placed alongside one another, by changing the values for padding, margin, and other dimensions. Click the 3-dot icon in the top right corner in the Dimensions settings panel and click ‘Reset all’ to rest all the changes you made in the Dimensions settings.

Dimension settings for the individual button in the buttons block

Learn more about dimension controls.

Border

Border settings provide options to control the width and radius on each side of the button.

Border settings for the individual button in the buttons block

Learn more about border settings.

For individual button

Styles settings

You can change the style of the individual button.

Style settings for the individual button in the buttons block

Width settings

Each button can have its own width setting inside the buttons block based on a % value.

Width settings for the individual button in the buttons block

Advanced settings

Advanced settings for the individual button in the buttons block

You can add a Link rel attribute to each button in the block. This is a more advanced feature that enables to control the button link’s rel attribute, The rel attribute defines the relationship between a linked resource and the button. Eg: for rel attributes are nofollow, external, stylesheet, pingback, preload, prefetch, prev etc

You can also add HTML anchor and CSS class(es) to each button in the block.

HTML anchor allows you to make a unique web address for an individual button. Then, you’ll be able to link directly to that button on your page.

The Additional CSS class(es) lets you add CSS class(es) to your button, allowing you to write custom CSS and style the button as you see fit.

Based on which style you choose for the button block, WordPress automatically adds a CSS class to that button block. You can find the class in the Advanced settings panel under Additional CSS class(es). You can also add additional classes with spaces.

Changelog:

  • Updated 2022-11-22
    • Change alignment for images
    • Replaced redundant content
  • Updated 2022-08-18
    • Updated content, screenshots, and videos for 6.0.
    • Added explanation for adding individual buttons and style preservation.
    • Added new block toolbar options.
    • Added images and info for space between items and change vertical alignment.
    • Added details for the block settings sidebar info.
    • Updated info for the More options for the individual button block.
    • Removed Text Color from the block toolbar for the individual button block.
    • Added ALT tags for the images.
  • Updated 2022-02-15
    • Updated screenshots to 5.9
    • Updated video to 5.9
    • Added new settings for previous versions
    • Added Live example

Was this article helpful? How could it be improved?

First published

Last updated