WordPress Block Editor – Buttons Block

This tutorial is part of our series on How To Use The WordPress Block Editor (Gutenberg).

• To learn more about using the WordPress block editor interface, go here: The WordPress Block Editor – Content Area
• To learn more about using blocks, see this tutorial: How To Use WordPress Block Editor Blocks

***

Buttons Block – Description

The Buttons block lets you add one or multiple buttons to your content and link these to other pages on your site or to an external page.

Use this block to call attention to important elements on your posts or pages and prompt your visitors to take a desired action.

How To Use The Buttons Block

In this section, we’ll cover:

• How to add a Buttons block to your content.
• How to edit and configure your Buttons block and block settings.
• How to remove the Buttons block from your content.

For more details on using blocks (e.g. how to move blocks around your content), see this tutorial: How To Use Blocks.

Adding A Buttons Block

To add a Buttons block to your content:

• Either:
  • Click on the ‘Add Block’ tool in the Editing Toolbar section and select the Buttons block (in Most Used or Design section),
  • Add a Buttons block in the Content Area.
  • Select pre-designed buttons in the Block Patterns Directory tab of the ‘Add Block’ tool. To learn more about using Block Patterns in your content, see this tutorial: How To Use Blocks.
• Use the tools in the Buttons Block Editor or Block Settings section to edit and format your Button.

Let’s go through the above steps.

First, create a new post or page or open an existing post or page and either:

Click on the ‘Add Block’ tool and select a ‘Buttons’ block…

Or, select a Buttons block using the Inserter tool in the Content Area.

Either of these options will add a Buttons block to your content.

You can also add predesigned buttons to your content from the Block Patterns directory.

After adding a Buttons block, you can:

• Add and edit your button text,
• Add more buttons inside your Buttons block,
• Reorder your buttons,
• Add a hyperlink to your buttons,
• Edit and configure block settings (e.g. colors, borders),
• Save, publish, or update your post or page.

How To Add More Buttons Inside The Buttons Block

To add a new button inside the Buttons block:

• Select the Button block to make it active,
• Click the Add Button tool [+]
• A new button will be inserted into the block.
• Click on the button to add or edit your button’s text.

How To Reorder Buttons Inside Your Buttons Block

To reorder a button inside the Buttons block:

• Select the Button block to make it active,
• Click on a button to select it.
• Use the left and right arrows in the block editor menu to move the button left or right.

How To Add A Hyperlink To A Button

To add a hyperlink to a button inside the Buttons block:

• Select the Button block to make it active,
• Click on a button to select it.
• Click on the hyperlink icon in the block editor menu (-).
• Search and select a post or page to add an internal link or type in/paste in an external URL.
• Select whether or not to open the link in a new tab.
• Click the arrow icon, press enter, or select an item to add the link to your button.
• Tip #1: Test your button link to make sure you’ve entered the link correctly.
• Tip #2: To unlink a button, select the button and click the unlink (broken) hyperlink icon.

Repeat the above process to add hyperlinks to additional buttons.

How To Delete Buttons Inside Your Buttons Block

To delete a button inside the Buttons block:

• Select the Button block to make it active,
• Click on a button to select it.
• Click on the More Options menu (vertical ellipsis) and select Remove block.
• The button you have selected will be deleted.

Repeat the above to delete multiple buttons inside the Buttons block.

How To Edit A Buttons Block

To edit a Buttons block:

• Click inside the Buttons block to select it.
• Use the Block Editor tools to:
  • Change your button text.
  • Format your button text (bold, italics, strikethrough, etc.).
  • Add a hyperlink to the button.
  • Change the alignment of your button.
• Use the Block Settings to:
  • Change the style of your button.
  • Change the button background color.
  • Change the button text color.
  • Change the button’s border

Let’s take a quick look at some of the functions listed above.

The Buttons block editor is different than the block editor of a button that has been added to the block.

This is the Buttons block editor…

And this is the editor of an individual button…

To select the Buttons block editor, either:

• Click somewhere on the block (not on a button),
• Click on a button, then hover over the button icon and select the parent Buttons block above it.

Selecting the Buttons block editor gives you different options than the ones you will see when editing a button inside the Buttons block.

The Buttons block editor options include:

• Change Alignment:
  • Wide width – A wide-aligned block sticks out on either side of your regular content.
  • Full width – This stretches the block area to cover the entire width of the browser window (normal content remains within margins on either side).
• Change Content Justification:
  • Justify content left – Move all of the content inside the block to the left.
  • Justify content center – Center all of the content inside the block.
  • Justify content right – Move all of the content insider the block to the right.

Note: Your theme must support the ‘Wide width’ and ‘Full width’ options. Not all themes support these options.

Change Button Alignment

To change the alignment of your buttons in your content:

• Select a button inside the Buttons block.
• Hover over the Buttons block icon in the block editor menu, then select the parent Buttons block icon above it.
• Click on the Change content justification tool and select one of the options (left, center, or right)
• Use the Buttons block editor and block settings section to control the placement of the buttons inside the block. This includes alignment and whether to display the buttons in a row or column inside the block.

Edit Button Styles, Colors, Borders, and Link

To edit your button styles, colors, borders, and linking options:

• Select the button inside the Buttons block.
• Enable the Settings panel by clicking on the Settings icon (gear icon).
• Select a style (e.g. fill, outline)
• Select the text and background colors from the preset palette, or choose a custom color. You can select the option of solid or gradient background color.
• Set the border radius in the Border settings section. Note: A radius of “0” creates a square button. Increasing the value of the radius creates a rounder border.
• If adding a link to your button, select whether to open the destination link in a new tab or in the same window. If you don’t understand what “Link rel” means, just leave this field alone.

Remember to update and publish your post or page to save your settings.

How To Remove A Buttons Block

To delete or remove the buttons block from your content:

• Click inside the Buttons block to select it.
• Select the ‘More Options’ tool in the Block Editor.
• Click on ‘Remove Block’.
• Note: You can also delete any buttons inside the block until no buttons remain, then repeat the above process to remove the entire Buttons block from your post or page.

Additionally…

• You can reposition your block using the ‘Move Up’ and ‘Move Down’ arrows or the Drag and Drop handle tool (see this tutorial if you need help with this step: How To Use Blocks).
• You can also convert a Buttons block into a Reusable block.

Buttons Block Tools, Options & Settings

The Buttons block includes tools, options, and settings for:

• Buttons Block Editor
• Buttons Block Settings

Buttons Block Editor

The Button block editor includes tools that let you perform the following operations:

• Change block type or style (See ‘Button Block – Additional Info’ section below.)
• Drag block
• Move block up and down
• Change content justification:
  • Justify content left
  • Justify content center
  • Justify content right
• More Options – See How To Use Blocks to learn how to use this section.

Buttons Block Settings

Buttons block settings include:

• Block description area
  • Transform to variation – Select an option from the dropdown menu:
    • Horizontal – Buttons display in a row.
    • Vertical – Buttons display in a column.
• Advanced Settings – See How To Use Blocks for more information about this section.
  • HTML Anchor – Create a unique web address to send users directly to this block using a unique jump link URL. To learn more about using HTML Anchors, see our tutorial on How To Use Blocks.
  • Additional CSS Class(es) – This field lets you add multiple CSS classes to your block separated with spaces. This allows you to write custom CSS and style the block as you see fit. Note: This requires having knowledge of CSS (Cascading Style Sheets).

As explained earlier, each button has its own editor and settings.

Button Editor

Button edit options include:

• Change block type or style – Clicking on this icon with a button selected brings up button styles options.
• Drag block – Clicking on this icon with a button selected lets you reorder buttons inside a Buttons block with multiple buttons added.
• Move button left or right – Reorder buttons within a Buttons block.
• Link/Unlink – Add a hyperlink to your button (or unlink it).
• Button text formatting options:
  • Bold – Add bold formatting to the button text.
  • Italics – Add italics to button text.
  • More rich text controls – See How To Use Blocks to learn more about using rich text control settings.
• More Options – See How To Use Blocks to learn how to use this section.

Button Settings

Select a button and click on the Settings icon (gear icon) to view or edit the following options:

• Block description area
• Button Styles – The styles displayed in this section depend on the theme and plugins installed on your site. For example, Fill, Outline, etc.
  • Default Style – Use the drop-down menu to select a default style for the block.
• Color Settings
  • Text Color
  • Background Color (Solid, Gradient)
• Border Settings
  • Border Radius (set radius value using the slider or enter a number from 0-50)
  • Reset button.
• Width Settings
  • Select the width of your button (25%, 50%, 75%, 100%)
• Link Settings
  • Open link in new tab – Turn on to open link in a new browser tab or leave disabled and the link will open in the same browser.
  • Link rel – When you link to a page on another site and select the option to open the link in a new tab, you can expose your site to performance and security issues. To avoid this, WordPress automatically includes rel="noopener" or rel="noreferrer" attributes to your links. Ignore this section if you don’t understand what it means.
• Advanced Settings
  • HTML Anchor – Create a unique web address to send users directly to a section of your page using a unique jump link URL. To learn more about using HTML Anchors, see our tutorial on How To Use Blocks.
  • Additional CSS Class(es) – This field lets you add multiple CSS classes to your block separated with spaces. This allows you to write custom CSS and style the block as you see fit. Note: This requires having knowledge of CSS (Cascading Style Sheets).

Buttons Block – Additional Info

The Buttons block can be converted into the following block types:

• Group block
• Reusable block

Notes:

• Make sure you’re in the Buttons block to change block types, not inside the editor of a specific button, as this will bring up the block styles menu, not the change block types menu.

• Installing plugins or themes on your site may also add new functionality, options, or settings to Buttons blocks.

Congratulations! Now you know how to use the WordPress content editor’s Buttons block.

For tutorials on how to use other blocks, go here: WordPress Block Editor – How To Use Blocks

***

Updated: July 5th, 2024