按钮

提示访客通过一组按钮样式的链接采取行动。

• 名称: core/buttons
• 类别: 设计
• API 版本: 3
• 块类型: 静态（保存在文章内容中）
• 关键词: link

块关系

允许的内部块:
– core/button

属性

通过 attributes 属性在 block.json 中定义。

此块没有自定义属性。

支持

通过 supports 属性在 block.json 中定义。

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

块标记

这是一个 静态块。标记直接保存在文章内容中。

<!-- 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">我的按钮 1</a></div>
    <!-- /wp:button -->

    <!-- wp:button -->
    <div class="wp-block-button"><a class="wp-block-button__link wp-element-button">我的按钮 2</a></div>
    <!-- /wp:button -->

    <!-- wp:button {"tagName":"a"} -->
    <div class="wp-block-button"><a class="wp-block-button__link wp-element-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">我的按钮 4</button></div>
    <!-- /wp:button -->
</div>
<!-- /wp:buttons -->

来源

• block.json (参考)
• 源目录 — 浏览 edit 和 save 源文件，index.php 等。