Global Settings
A site-wide design system you configure once and reuse across every Styble block.
Global Settings is Styble Pro's central design system. Instead of picking colors, fonts, button styles and shadows by hand on every block, you define them once here and every Styble block stays on-brand automatically. Settings are stored at the site level and turned into CSS variables and classes that all blocks share.
Where to find it
Global Settings lives in a dedicated sidebar panel inside the WordPress block editor — it is not a separate admin page.
- Open any page or post in the block editor.
- Click the options (three-dot) menu at the top right, or the Styble logo icon in the editor header.
- Choose Styble Global to open the Styble Global Settings sidebar.
The panel is available on every post and page, because Global Settings are shared site-wide — wherever you open it, you are editing the same design system.
How it works
- One sidebar, stacked panels. All settings are grouped into collapsible panels in a single sidebar: Color Palette, Typography, Buttons, Shadow, Responsive Breakpoints and Custom CSS.
- Auto-saved with the post. Changes are kept in sync as you edit, and they are saved automatically when you Publish or Update the post. A Save Settings button is also available at the top of the sidebar for an immediate save.
- Reused across blocks. The values you set are exposed to every Styble block as shared design tokens, so the same colors, fonts and shadows are available in each block's controls.
- Generates CSS. Styble compiles your settings into root CSS variables (for example
--styble-primary,--sp-styble-font-size-heading-1,--styble-shadow-light-2dp) and shared classes that are output on the front end and reflected live in the editor.
Edit once, update everywhere
Because blocks reference the global tokens, changing a global color or font restyles every block that uses it — no need to edit blocks one by one.
The panels
| Panel | What you configure |
|---|---|
| Colors | Color palettes (stacks), individual color keys and gradient presets. |
| Typography | Heading and body type scales, fonts, custom font styles and link colors. |
| Buttons | Primary and secondary button styling applied across blocks. |
| Shadows | Reusable box-shadow presets. |
| Breakpoints | Tablet and mobile responsive breakpoints. |
| Custom CSS | Site-wide custom CSS. |
Next steps
- Start with Colors to pick a palette.
- Set your type scale and fonts in Typography.
- Build a layout with the Container block, which uses these tokens.