DOM Button Block
The DOM Button block displays a button or link with custom styling or the button style inherited from the theme and plugin “button” class CSS rules. It is designed to be used as a nested child in other blocks, but works equally well as a block on the root level. Click here to view examples and tutorials for custom styling the button.
- Button Options : The button action can be a link to a URL or target a PopUp block on this page. [tutorial]
- Button Styling : By default the button will inherit “button” styles from wordpress and stylesheets, you may ignore this behavior and customize the button. [tutorial]
- Block Settings
- Button Alignment : Align the button left, center or right within it’s available space.
- Center Button in Mobile : By default the object will be centered in mobile mode. Turning this setting off allows it to be aligned left or right instead.
- Margins : All AMP Publisher blocks have a Top Margin and Bottom Margin setting allowing you to create space without having to insert a spacing block. [tutorial]
Object Map (DOM)
- root object (div) untargeted node : Container object used to manage button layout in root DOM or other blocks.
- button (tag varies) targeted node from Button Styling panel : The button or link object, gets styling from “button” class or custom settings.
- Insert a DOM Button block into the page or into another block.
- Enter a Link URL or PopUp ID. [tutorial]
- Enter button text directly in the block editor. If left blank, the button will use “Read More…” by default.
- Open the Block Settings panel in the block inspector (sidebar).
- Choose a Button Alignment, this may also be chosen from the block toolbar.
- Turn on the Center Button in Mobile setting if you wish to override the alignment setting in mobile mode.
- All AMP Publisher blocks have Top Margin and Bottom Margin settings. [tutorial]
- Button Styling
- “Button” CSS Class : By default the “button” CSS class will be included on this object. Turn it off to have either no styling (textual link) or to create your own custom button style.
- Custom Styling : Turn off the “button” class and you get a full set of styling options to modify the button as much or little as you wish. [tutorial]