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

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

Refer to this article for 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

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

Top ↑

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.

Detailed instructions on moving a block within the editor can be found here.

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

More options:

More options in the buttons block

Hide more settings

The Hide more Settings option hides (or shows) the Block Setting panel in the editor’s sidebar.

Select parent block

The select parent block option will move you to the parent block that contains the Buttons block.

Copy

Copy can be used to copy a selected block and then you can paste it wherever you want in the editor.

Duplicate

Duplicate can be used to duplicate selected block.

Insert before

Insert a new block before the selected block(s).

Insert after

Insert a new block after the selected block(s).

Move to

If you select Move To, you will get a blue line inside your content, you can then use the arrows to move that line up and down to where you want the selected content to be moved into, hitting return on your keyboard at that point moves the block to that position.

Edit as HTML

The Edit as HTML option allows you to modify the HTML code of the embed block.

Lock

The lock option prevents users from moving or deleting the selected block. A pop-up window will appear to set the block locking attribute to the selected block. You can opt to disable movement, prevent removal, or both for the selected block.

Make template part

The make template part allows you to create a new template from the selected block. A pop-up window will appear to name the template part and select the template area.

Add to Reusable blocks

Using the Add to Reusable blocks option lets you add the selected block to a list of reusable blocks, so you can use them on other posts or pages as well.

Group

Select the Group option if you want to create a group of blocks and treat them as a unit. You can for instance add a common background color or other blocks to the group.

Remove Buttons

With the Remove buttons option, you can delete the selected block from your content.

Top ↑

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 for the Individual button:

More options for the individual button in the buttons block

Hide more settings

The Hide more settings option hides (or shows) the Block (Button) Setting panel in the editor’s sidebar.

Select parent block

The select parent block option will move you to the parent block that contains the Button.

Copy

Copy can be used to copy a selected block (button) and then you can paste it into any buttons block.

Duplicate

Duplicate can be used to duplicate selected block (button).

Move to

If you select Move To, you will get a blue line inside your buttons block, you can then use the up and down arrows to move that line left and right to where you want the selected block (button) to be moved into, hitting return on your keyboard at that point moves the block (button) to that position.

Edit as HTML

The Edit as HTML option allows you to modify the HTML code of the block (button).

Lock

The lock option prevents users from moving or deleting the selected block. A pop-up window will appear to set the block locking attribute to the selected block. You can opt to disable movement, prevent removal, or both for the selected block.

Remove Button

With the Remove Button option, you can delete the selected block (button) from your buttons block.

Top ↑

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

Top ↑

For the entire block

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

Layout settings

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.

Dimensions settings

Click on the 3-dot icon in the right top corner in the Dimensions settings to explore all the Dimensions Settings for the entire button block.

Dimensions setting for the buttons block

When the entire block is selected, you have the option to adjust the margin and the block spacing.

Dimension settings for the buttons block

Learn more about Dimension settings in this article: Dimension controls overview.

Advanced settings

Advanced setting for the buttons block

When the entire buttons block is selected – you can add HTML anchor and CSS class(es) to your block.

HTML anchor allows you to make a unique web address for a particular buttons block. Then, you’ll be able to link directly to a buttons block of your page.

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

Top ↑

For individual button

When the individual button is selected, you see a different set of options in the settings sidebar.

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

Color settings

You can set the text and background colors for the button. The color options available will vary based on the theme.

Color settings for the individual button in the buttons block

Typography settings

You can change the font size and the font family of your button text.

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.

Typography settings for the individual button in the buttons block

To change the font size, you can select the numbers 1 (for small), 2 (for medium), 3 (for large) or 4 (for extra large). 

Font size setting for the individual button in the buttons block
k

Click on the slider icon to the right of Size to add custom font size in the text field.

Custom font size setting for the individual button in the buttons block

Clicking on PX will open a drop-down with options for other font units -PX, Em, and Rem. 

Changing the font size unit for the individual button in the buttons block

Click on the Font family drop-down to change the font for the button. The values in the drop-down will vary based on the theme.

Font family setting for the individual button in the buttons block

Dimensions settings

You can set the padding for individual buttons in the buttons block.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 settings in this article: Dimension controls overview.

Border settings

Border settings let you define custom radius value for each button. You can type in a value in the Radius text field or use the slider to adjust the value for the border radius.

Border settings for the individual button in the buttons block

You can define the border radius value using one of the six available unit options.

Border units for the individual button in the buttons block

You can set the same value for border radius for all the four corners of the button. To set different values for each of the corners, click the Link icon.

Setting separate border radius values  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.

Top ↑

Changelog:

  • 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?