Add a theme button in Gutenberg
Use the Button block to link to a page or file, open an existing modal or off-canvas panel, or control a carousel. Its appearance comes from the button styles configured in POM Theme, not from separate Gutenberg color or spacing declarations.
This guide is for content editors using POM Theme in the WordPress block editor. Configure the site's button styles first. Modal, panel and slider actions also require an existing target on the same page.
Add a link
- Go to Pages → Add New, or edit an existing page in the block editor.
- Open the block inserter and choose Button, the theme block. WordPress's separate Buttons block is not the same control.
- Click the visible button text and write a short action, such as “View our services”.
- In the block settings, open Button action, choose Go to URL, and enter Button URL.
- Under Appearance, choose Button style, Button size and Alignment. The floating toolbar also controls alignment. For URL and file actions, Edit button link gives direct access to the destination and new-tab setting; other action-specific controls remain in the sidebar.
- Save, reload the editor, and preview the page. Follow the link on the frontend to verify its destination.
The editor previews the theme's Buttons component, including saved component CSS customizations. It does not activate links or open overlays while you are editing the label.
Choose an action
| Action | What to configure | Expected result |
|---|---|---|
| Go to URL | Button URL; optionally Open in new tab and Link relationship (rel / XFN) | A normal link. New tabs receive noopener noreferrer. |
| Link to a file | File URL or Choose file; optionally Request download | A file link with an optional download attribute. Browsers can ignore downloading across domains. |
| Open modal box | Modal box ID | Opens the existing modal with that ID. Only this action requests the theme's Modal stylesheet and script. |
| Open off-canvas panel | Off-canvas panel ID | Toggles an Offcanvas block or Legacy side panel using the theme's navigation behavior. Inline ranges do not open a dialog. |
| Open AJAX page | Search under Page to open via AJAX | Opens a published page in the theme's Quick View overlay. The ID-based link survives changes to the page slug. |
| Manage slider | Slider ID; Next slide, Previous slide or Custom slide; optionally Change slide on hover | Controls an existing theme carousel. The carousel supplies its assets. |
| Custom action (button element) | An HTML anchor or existing CSS classes recognized by your site | Outputs a non-submitting button. It needs an existing site behavior to perform an action. |
Enter target IDs without #. Start with a letter or underscore and use only letters, numbers, underscores and hyphens. The button does not create its target. File and page links are saved in the content, like other static WordPress links; review them when moving content to another site.
For Modal and off-canvas actions, leave Use native button element enabled for normal Enter and Space keyboard activation. Turning it off uses the legacy link element.
To create a dialog directly in Gutenberg, add a Modal block, copy its Modal ID and use it as the Button's target.
Appearance and icons
- Button style lists enabled styles from the theme settings. Change the shared style there to update matching buttons across the site.
- Full width fills the available container width.
- No alignment wrapper removes the surrounding alignment element; use this when the parent controls the layout.
- Center on mobile matches the theme helper and centers content through 991px, including tablets. It requires an alignment wrapper.
- Select Icon opens the shared theme icon picker. The icon's size, placement and hover effects follow the selected button style.
- Visibility controls the four theme device ranges. Hidden editor blocks remain selectable; verify actual visibility on the frontend.
- Additional CSS classes accepts existing helper classes separated by spaces and does not generate CSS. Use Advanced → HTML anchor to set the button element's ID.
Use a hidden button carefully
Hidden button (stretched link) hides the button face and makes the nearest positioned parent a clickable area. Add a descriptive Accessible name, and keep that area free from other links or controls. The editor displays a labeled placeholder so that the hidden control remains easy to select.
Use a normal visible button when the parent is not positioned or when the area contains multiple interactive elements. A hidden button does not create a positioned card wrapper for you.
Review before publishing
Check the visible label, accessible name, destination, keyboard activation, four device ranges, and the relationship between the trigger and its target. Save and reload after choosing an icon. Check both normal and hover appearances on the frontend.
If an action does nothing, check its ID and confirm that its modal, panel or carousel exists on the same page. If the page selector cannot load, retry the search; the previous selection is preserved. An unavailable style remains identified in the inspector so that you can choose an enabled replacement deliberately.
Related: Configure button styles, Add a theme icon, Review accessibility.