The Settings panel is where you define the HTML structure of the block and what content it may display. CSS Styles are handled separately in their own dedicated Styles panel.
Settings
The settings panel is specific to each block and displayed under the Block tab of the Editor Right Sidebar panel when any GenerateBlock is selected.
The functions provided by the settings covers:
- Block Parameters
- HTML Element Tag
- HTML Attributes
- SVG Icons & Shapes
- Style Shortcuts
- WordPress Advanced Settings.
Block Parameters
Blocks may require configuring as part of their setup. Some examples include:
- Image Block – selecting the Image Attachment size
- Query Block – adding Parameters to build the WP Query
- Accordion Block – choose the opening and closing behaviour
Tag Name
Set the HTML Element tag for the selected block. The tags available to each block vary depending on the core block type.
Container Block Example tags:
- div
- section
- article
- aside
- header
- footer
- nav
- main
- figure
- a
- ul
- ol
- li
- dl
- dt
- dd
Text Block Example tags:
- p
- span
- div
- H1
- H2
- H3
- H4
- H5
- H6
- a
- button
- figcaption
- li
NOTE: Changing a blocks Tag name may change the block variation, for example a Text block to a Headline but it will not affect the blocks content or any of the attached styles.
HTML Attributes
HTML Attributes add additional information to the blocks HTML that set or alter the blocks behaviour. For example, setting the HREF and REL attributes of a link or adding ALT text to an image.
GenerateBlocks Pro adds an advanced attribute builder found under the Advanced settings. This allows users to add there own custom attributes.
Inline SVG Icons
Text, Headline and Button blocks have the option to insert inline SVG icons which are added to the blocks HTML.
Style Shortcuts
All block Styles are set in the Styles tab.
For some blocks the Settings panel includes Style Shortcuts. These are quick actions that set the Styles for you and are generally available for more complex or commonly required options. For example setting a Grid Blocks layout or applying styles to an Icon.
Advanced Settings
The Advanced settings panel is added to all blocks. This is where you can set the blocks the HTML ID and Additional CSS Class.
GenerateBlocks Pro adds the Advanced Attribute builder in this panel.