Prompt visitors to take action with a group of button-style links.
The WordPress buttons block is the container for the individual button blocks. It can be used to position the buttons in various ways using block spacing, alignments, top, middle or bottom, and justifications like left, right, center, and space between. You can place buttons horizontally or vertically.
This block is available in the latest version of WordPress and does not require the Gutenberg plugin.
Last updated
For developers
Block Grammar & Markup
<!-- wp:buttons {"align":"wide","layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons alignwide">
<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">My button 1</a></div>
<!-- /wp:button -->
<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">My button 2</a></div>
<!-- /wp:button -->
<!-- wp:button {"tagName":"a"} -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">My button 3</a></div>
<!-- /wp:button -->
<!-- wp:button {"tagName":"button"} -->
<div class="wp-block-button"><button type="button" class="wp-block-button__link wp-element-button">My button 4</button></div>
<!-- /wp:button -->
</div>
<!-- /wp:buttons -->
Block Supports
Optional. Type: Object.
A set of options that enables or disables block controls in the editor, for example gradient colors or padding.
{
"anchor": true,
"align": [
"wide",
"full"
],
"html": false,
"__experimentalExposeControlsToChildren": true,
"spacing": {
"blockGap": true,
"margin": [
"top",
"bottom"
],
"__experimentalDefaultControls": {
"blockGap": true
}
},
"typography": {
"fontSize": true,
"lineHeight": true,
"__experimentalFontFamily": true,
"__experimentalFontWeight": true,
"__experimentalFontStyle": true,
"__experimentalTextTransform": true,
"__experimentalTextDecoration": true,
"__experimentalLetterSpacing": true,
"__experimentalDefaultControls": {
"fontSize": true
}
},
"layout": {
"allowSwitching": false,
"allowInheriting": false,
"default": {
"type": "flex"
}
},
"interactivity": {
"clientNavigation": true
}
}Transforms
Optional. Type: Object.
Transforms provide rules for what a block can be transformed from and what it can be transformed to.
Transforms from: Button. Paragraph.