Understanding block controls (typography, spacing, borders)
Most blocks share a common set of style controls in the right-hand sidebar
Most blocks share a common set of style controls in the right-hand sidebar, letting you fine-tune how a block looks without needing custom code. These controls typically live under two tabs when a block is selected: Settings and Styles (naming may vary slightly by WordPress version) – styling options are usually grouped under “Styles” or further down the Settings panel.
Typography
- Font size – often a dropdown of preset sizes (Small, Medium, Large, etc.) rather than a free numeric field, keeping sizing consistent across the site. Avoid using “Custom” sizes unless there’s a good reason – it’s easy to end up with inconsistent text sizes across pages.
- Line height – controls the vertical spacing between lines of text within a paragraph or heading. Increasing this can make dense text blocks easier to read; decreasing it can tighten up short headings.
- Font weight/appearance – some blocks (especially Paragraph and Heading) expose a weight/style dropdown (Regular, Medium, Bold, Italic) separate from the inline Bold/Italic toolbar buttons – this sets the default weight for the whole block rather than a selected portion of text.
- Letter case – occasionally available (e.g. uppercase for small labels) but use sparingly, as all-caps text is harder to read and can be mistaken for shouting by screen readers depending on configuration.
Spacing (margin and padding)
- Padding – the space inside a block, between its content and its edge. Increasing padding on a Group or Cover block, for example, gives content more breathing room without changing the block’s outer position. Padding can often be set per side (top/right/bottom/left) or linked together with a single value.
- Margin – the space outside a block, between it and neighbouring blocks. Useful for pulling blocks closer together or adding separation. Unlike padding, margin doesn’t affect the block’s own background or border – it only affects spacing relative to what’s around it.
- Block gap – on container blocks (like Group or Columns), there’s sometimes a separate “block gap” setting controlling the space between the child blocks inside it, distinct from the container’s own padding.
- Spacing controls usually use preset steps (matching the theme’s spacing scale, e.g. small/medium/large or a numbered scale) rather than arbitrary pixel values – stick to these presets where possible for visual consistency across the site, rather than typing in custom pixel/percentage values.
Borders
- Border controls typically let you set width, colour, style (solid/dashed/dotted), and radius (corner roundness) independently.
- Width and radius can often be set per-side or per-corner (unlink the sides using the small chain icon if you only want, say, rounded top corners).
- A common use is adding a subtle border or radius to a Group or Image block to visually separate it from surrounding content, or rounding an image’s corners to soften a page layout.
Background and text colour
Worth mentioning alongside these, since it’s usually in the same panel: many blocks (Group, Cover, Buttons) let you set a background colour and/or text colour directly, picked from the theme’s defined colour palette rather than a free colour picker – stick to the palette so colours stay consistent with the diocese’s branding, rather than using “Custom colour” unless there’s a specific need.
Tip: Not every block exposes every control – availability depends on the block and sometimes the theme. If you can’t find a spacing or border option on a particular block, try wrapping it in a Group block, which usually has the fullest set of style controls.
Conversation
Leave a Reply
You must be logged in to post a comment.
Thanks for the feedback. Let us know what was missing and we will improve this page.
Thank you for your feedback.