Buttons block

Go to the List of Blocks

Use the Buttons block to add one or more buttons to your page or post.

Add a Button block

To add the Buttons block to a page, click the + Block Inserter button in the top-left corner of the editor and choose the Buttons block.

You can also type /buttons and hit enter in a new paragraph block to quickly insert a 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 Add block button in the bottom right 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.

Block toolbar

To view the block toolbar, click on the block, and the toolbar will be displayed.

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 and a toolbar for the entire block.

For the entire block

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

• Transform to
• Move controls
• Change items justification
• Change vertical alignment
• Align
• Options

Transform to

Click on the Transform button to convert the Buttons block into a Group, Details or Columns block.

Move tools

Use the block-moving tools to move the Buttons block.

The drag or six dots icon allows you to freely reposition the block anywhere within the editor by holding the icon and dragging it to the new location.

You can also use the arrow icons to move the block up or down within the group of nested blocks or when there are multiple blocks.

Get more information about moving a block within the editor.

Align

Use the change alignment tool to align the Buttons block. Choose one of the following options:

• None – leaves the block the current size.
• Wide width – increase the width of the block beyond the content size.
• Full width – extend the block to cover the full width of the screen.

The “Wide width” and “Full width” alignment settings must be enabled by your WordPress theme. 

Change items justification

The items justification setting allows justifying the buttons to the left, center, or right. There is also an option to “Space between items”. If it is selected, the Buttons block will be centered with equal spacing between the buttons. 

Change vertical alignment

Use the change vertical alignment option to align buttons vertically with four possible options:

• Align top
• Align middle
• Align bottom
• Stretch to fill 

More options

The More Options menu represented by three vertical dots on the far right of the toolbar gives you more features such as the ability to duplicate or remove a block.

Read about these and other settings.

For an individual button

If you select a specific button, a new toolbar will appear with these new options:

• Change block style
• Block-moving tools
• Align block
• Justification
• Vertical alignment
• Align text
• Link
• Bold
• Italic
• More Rich Text controls
• Options

Change block style

Use the change block style option to change the style of a particular button. 

Link

Use the link option to add a link to the button. It’s also possible to set it to open the link in a new tab

Read about more link editing options.

Bold and Italics

You can select the text of the block 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 and use the “Italic” option or “Ctrl+I” / “Cmd+I” on your keyboard to italicize it, which usually appears slanted to the right.

More rich text options

The drop-down menu to the left of the More options menu contains a range of additional rich text editing options such as highlighting, inline code, strikethrough, and more.

Read about more rich text editing options.

More options

The More Options menu represented by three vertical dots on the far right of the toolbar gives you more features such as the ability to duplicate or remove a block.

Read about these and other settings.

Block settings

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, click on the Settings button next to the Save/Publish button.

The Buttons block settings panel is divided into three tabs – List View, Settings, and Styles.

List View

The List view tab, represented by three horizontal lines, allows you to re-order single Button blocks within the Buttons block.

Learn more about options and settings available in list view.

Settings

When you select the Social Icons block Settings tab, represented by a gear icon, you will see the following settings in the sidebar:

Layout

The Buttons block provides layout settings to change item justification and orientation.

There is also an option to un-toggle “Allow to wrap to multiple lines” to keep all of the buttons in one horizontal line even on smaller viewports such as mobile.

This article provides details about layout settings. 

Advanced

The Buttons block provides the following Advanced settings options: HTML anchor, Additional CSS Class(es), Additional CSS, and Styles.

Learn more about advanced settings

Styles

When you click on the Styles tab, represented by a half-filled circle, within the Block Settings sidebar, you will see the following options:

Color

The Buttons block provides Color settings options to change the background colors.

See this guide for more information about changing colors.

Typography

The Buttons block provides typography settings to change the font family, size, appearance, line height, letter case, letter spacing, and decoration.

Get more details about changing typography settings.

Dimensions

The Buttons block provides dimensions settings options to change padding and margin size.

Learn more about dimension controls.

Border

Border settings provide options to control the width and radius for the Buttons block.

Learn more about border settings.

Individual button block settings

When an individual button is selected there are several settings and styles you can apply.

Settings

Width

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

Advanced settings

The Button block provides the following Advanced settings options: HTML anchor, Additional CSS Class(es), Additional CSS ,HTML element, Link relation, and Styles.

Use the Link relation setting to add a rel attribute to the button link. This tells browsers and search engines what the relationship is between your page and the page you are linking to.

To learn more about common values, such as nofollow, noopener, and noreferrer, refer to MDN’s documentation on the rel attribute.

Learn more about advanced settings

Styles

When you click on the Styles tab, represented by a half-filled circle, within the Block Settings sidebar, you will see the following options:

It’s possible to change the individual button style depending on your theme. Hover over a particular style to see how a style such as fill or outline will look. Style options may be different depending on your theme.

Color

The Button block provides Color settings options to change the text and background colors

See this guide for more information about changing colors.

Typography

The Button block provides typography settings to change the font family, size, appearance, line height, letter case, letter spacing, and decoration.

Get more details about changing typography settings.

Dimensions

The Button block provides dimensions settings options to change padding and margin size.

Learn more about dimension controls.

Border & Shadow

Border settings provide options to control the width and radius for the Button block. You can also apply a shadow.

Learn more about border & shadow settings.