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.
You can also type /buttons and hit the Enter key in a new paragraph block to add one quickly.
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.
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.
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
Allows you to transform the buttons block into a column or a group block.
Block moving handles
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.
Change items justification
The items justification setting allows you to justify the items (buttons) to the left, center, or right.
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.
Change vertical alignment
You can align the buttons vertically to the top of the buttons group, middle, or bottom.
The wide width and the full width align options are available if your theme supports them.
The toolbar for the individual buttons has the following additional options:
- Change block style
- Text editing options
- More options
Change block style
Clicking on the change block style will let you change the style of the button.
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.
To remove the link, click the button and click Unlink in the Block toolbar.
Text editing options
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.
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
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.
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.
Use keyboard input feature to format text snippets within your text differently. (The
<kbd> element of HTML will be applied.)
Strikethrough can be used to place a horizontal line through the middle of the selected text.
Subscript can be used to set a character slightly below the normal line of type.
Example: Buttons Block
Superscript can be used to set a character slightly above the normal line of type.
Example: Buttons Block
These controls give you the option to copy, duplicate, and edit your block as HTML.
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.
When the entire buttons block is selected, you have the Layout, Dimensions, and Advanced settings for customization.
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.
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.
Typography settings allow you to change a button’s font size, appearance, line height, letter casing, and spacing
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.
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.
Border settings provide options to control the width and radius on each side of the button.
You can change the style of the individual button.
Each button can have its own width setting inside the buttons block based on a % value.
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.
- 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