Buttons

Prompt visitors to take action with a group of button-style links.

• Name: core/buttons
• Category: design
• API Version: 3
• Block Type: Static (saved in post content)
• Keywords: link

Block Relationships

Allowed inner blocks:
– core/button

Attributes

Defined via the attributes property in block.json.

This block has no custom attributes.

Supports

Defined via the supports property in block.json.

• anchor: true
• align: "wide", "full"
• html: false
• color:
  • gradients: true
  • text: false
• spacing:
  • blockGap: ["horizontal","vertical"]
  • padding: true
  • margin: ["top","bottom"]
• typography:
  • fontSize: true
  • lineHeight: true
• layout:
  • allowSwitching: false
  • allowInheriting: false
  • default: {"type":"flex"}
• interactivity:
  • clientNavigation: true
• listView: true
• contentRole: true

Block Markup

This is a static block. The markup is saved directly in the post content.

<!-- 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 -->

Source

• block.json (reference)
• Source directory — browse edit.js, save.js, index.php, and more.