Prompt visitors to take action with a button-style link.
The WordPress button block is the individual button inside the buttons block (a so called child block).
Add a text and link to your button and select its colors, font family and font size. You can also adjust the alignment, padding and width. At this time there is no way to change the border width, style, or border color, only the radius.
Tip: Did you know that you can place inline images or copy paste emojis in the button?
This block is available in the latest version of WordPress and does not require the Gutenberg plugin.
Last updated
For developers
Parent
Optional. Type: Array.
Blocks are able to be inserted into blocks that use InnerBlocks as nested content. Setting parent lets a block require that it is only available when nested within the specified blocks.
[
"core/buttons"
]Context
Context is used to pass values from a block to a descendant block; for example, a query and post template passing the query ID to the inner blocks.
Uses context. Optional. Type: Object.
[
"pattern/overrides",
"postId",
"postType"
]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.
{
"tagName": {
"type": "string",
"enum": [
"a",
"button"
],
"default": "a"
},
"type": {
"type": "string",
"default": "button"
},
"textAlign": {
"type": "string"
},
"url": {
"type": "string",
"source": "attribute",
"selector": "a",
"attribute": "href",
"__experimentalRole": "content"
},
"title": {
"type": "string",
"source": "attribute",
"selector": "a,button",
"attribute": "title",
"__experimentalRole": "content"
},
"text": {
"type": "rich-text",
"source": "rich-text",
"selector": "a,button",
"__experimentalRole": "content"
},
"linkTarget": {
"type": "string",
"source": "attribute",
"selector": "a",
"attribute": "target",
"__experimentalRole": "content"
},
"rel": {
"type": "string",
"source": "attribute",
"selector": "a",
"attribute": "rel",
"__experimentalRole": "content"
},
"placeholder": {
"type": "string"
},
"backgroundColor": {
"type": "string"
},
"textColor": {
"type": "string"
},
"gradient": {
"type": "string"
},
"width": {
"type": "number"
}
}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": false,
"alignWide": false,
"color": {
"__experimentalSkipSerialization": true,
"gradients": true,
"__experimentalDefaultControls": {
"background": true,
"text": true
}
},
"typography": {
"fontSize": true,
"lineHeight": true,
"__experimentalFontFamily": true,
"__experimentalFontWeight": true,
"__experimentalFontStyle": true,
"__experimentalTextTransform": true,
"__experimentalTextDecoration": true,
"__experimentalLetterSpacing": true,
"__experimentalDefaultControls": {
"fontSize": true
}
},
"reusable": false,
"shadow": {
"__experimentalSkipSerialization": true
},
"spacing": {
"__experimentalSkipSerialization": true,
"padding": [
"horizontal",
"vertical"
],
"__experimentalDefaultControls": {
"padding": true
}
},
"__experimentalBorder": {
"color": true,
"radius": true,
"style": true,
"width": true,
"__experimentalSkipSerialization": true,
"__experimentalDefaultControls": {
"color": true,
"radius": true,
"style": true,
"width": true
}
},
"__experimentalSelector": ".wp-block-button .wp-block-button__link",
"interactivity": {
"clientNavigation": true
}
}