Buttons

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

Category:

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 -->
</div>
<!-- /wp:buttons -->

Block Attributes

Optional. Type: Object.

Attributes provide the structured data needs of a block. They can exist in different forms when they are serialized, but they are declared together under a common interface.

Documentation

{
  "layout": {
    "type": "object"
  },
  "anchor": {
    "type": "string",
    "source": "attribute",
    "attribute": "id",
    "selector": "*"
  }
}

Block Supports

Optional. Type: Object.

A set of options that enables or disables block controls in the editor, for example gradient colors or padding.

Documentation

{
  "anchor": true,
  "align": [
    "wide",
    "full"
  ],
  "__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
    }
  },
  "__experimentalLayout": {
    "allowSwitching": false,
    "allowInheriting": false,
    "default": {
      "type": "flex"
    }
  }
}

Transforms

Optional. Type: Object.

Transforms provide rules for what a block can be transformed from and what it can be transformed to.

Documentation

Transforms from: Button. Paragraph.