Buttons
Overview
A flexible container for grouping buttons, with controls for direction, alignment, justification, and gap across breakpoints. Contains two button types: a fully customizable Button and a theme‑driven Theme Button.
Usage
The Buttons block is a flex container purpose‑built for grouping button elements. It supports two child block types:
- Button (
method/button) — A standalone button with full in‑editor styling controls for color, padding, typography, border, and shadow. - Theme Button (
method/theme-button) — A button that uses predefined style sets and icon options defined by the child theme through PHP filters.
Insert a Buttons block, then add either Button or Theme Button children. Configure the group’s flex direction, alignment, justification, and gap. Each button gets its own link and label.
Child Blocks
Buttons Container (method/buttons)
- Block name:
method/buttons - Category:
method-layout-blocks - Render type: Dynamic (PHP
render_callback) - Inner blocks: Yes —
method/buttonandmethod/theme-button
The flex wrapper for button children.
| Attribute | Type | Default | Description |
|---|---|---|---|
responsiveSettings | object | (standard breakpoints) | Flex layout, spacing, and gap per breakpoint |
Control sets: MethodAlignmentControls (alignItems, justifyContent, flexDirection), MethodSpacingControls (padding all sides, margin all sides, gap horizontal/vertical), MethodResponsiveTabs, MethodStyleTag, useResponsiveSetter
Button (method/button)
- Parent:
method/buttons
A fully custom‑styled button.
| Attribute | Type | Default | Description |
|---|---|---|---|
textColor | string | — | Button text color |
bgColor | string | — | Button background color |
bgGradient | string | — | Button background gradient |
btnLabel | string | — | Button label text (supports bold/italic via RichText) |
link | object | — | Link with url and opensInNewTab |
responsiveSettings | object | (standard breakpoints) | Padding, typography, border, shadow per breakpoint |
Control sets: MethodSpacingControls (padding), MethodTypographyControls, MethodBorderControls, MethodShadowControl, MethodColorControls (textColor, bgColor), MethodLinkToolbar, MethodResponsiveTabs, MethodStyleTag, useResponsiveSetter
Theme Button (method/theme-button)
- Parent:
method/buttons,method/flex
A button with predefined styles from the child theme.
| Attribute | Type | Default | Description |
|---|---|---|---|
btnStyle | string | — | Selected style key from method_block_theme_button_styles filter |
labelStyle | string | — | Selected label style class from method_block_theme_label_styles filter |
beforeIcon | string | — | Icon key for icon before the label |
afterIcon | string | — | Icon key for icon after the label |
btnLabel | string | — | Button label text |
link | object | — | Link with url and opensInNewTab |
Inspector controls: Label (TextControl), Button Style (SelectControl, if styles registered), Label Style (SelectControl, if styles registered), Icon Before/After Label (SelectControl, if icons registered).
Control sets: MethodLinkToolbar only. All visual styling is handled by the child theme’s CSS classes.
Data
The Theme Button block receives its configuration via wp_localize_script on the themeButtonData global:
wp_localize_script('method-theme-button-block-editor-script', 'themeButtonData', array(
'buttonStyles' => apply_filters('method_block_theme_button_styles', $defaults),
'buttonStylesLabel' => apply_filters('method_block_theme_button_styles_label', 'Button Styles'),
'labelStyles' => apply_filters('method_block_theme_label_styles', $defaults),
'buttonIcons' => apply_filters('method_block_theme_button_icons', $defaults),
'afterLabel' => apply_filters('method_block_theme_button_after_label', ''),
'beforeLabel' => apply_filters('method_block_theme_button_before_label', ''),
));Frontend Rendering
Buttons container:
<div class="method-buttons" id="method-{id}">
{button children}
</div>Button (with link):
<a target="_self|_blank" href="{url}" class="method-button" id="method-{id}">
<span class="method-button-label">{label}</span>
</a>Theme Button (with link, icons, and style):
<a target="_self|_blank" href="{url}"
class="method-theme-button method-theme-button-{btnStyle}" id="method-{id}">
<span class="method-button-icon method-button-icon-before">{svg}</span>
<span class="method-button-label {labelStyle}">{label}</span>
<span class="method-button-icon method-button-icon-after">{svg}</span>
</a>Filters
The Theme Button block is designed for deep child theme customization through these PHP filters:
| Filter | Expected Return | Description |
|---|---|---|
method_block_theme_button_styles | array or false | Key‑value pairs of style slug → label (e.g., ['primary' => 'Primary', 'outline' => 'Outline']). Returns false to hide the control. |
method_block_theme_button_styles_label | string | Label for the button styles SelectControl (default: "Button Styles") |
method_block_theme_label_styles | array or false | Key‑value pairs of CSS class → label for label style options |
method_block_theme_button_icons | array or false | Associative array of icon key → { label, svg } objects |
method_block_theme_button_before_label | string | Default SVG/HTML inserted before the label (used when no per‑icon selection is available) |
method_block_theme_button_after_label | string | Default SVG/HTML inserted after the label |