WordPress
Container Widths
For individual containers, the width can be setOpens in new tab in the Block Editor. This is based on three global settings that can be changed in the Site Editor or in theme.json. Additionally, each container can be customized individually.
No Width (Content Width)--wp--style--global--content-size
Wide Width--wp--style--global--wide-size
Full Width--wp--style--global--full-size
Columns
WordPress allows flexible content arrangements using columns. Uniform spacing is preconfigured. This can be changed in the Site Editor or in theme.json.
Spacing
Both fixed and variable spacing values are used. The variable spacing values are based on CSS clamp() and scale relative to the viewport width.
0px--wp--preset--spacing--0
8px--wp--preset--spacing--1
16px--wp--preset--spacing--2
24px--wp--preset--spacing--3
32px--wp--preset--spacing--4
40px--wp--preset--spacing--5
8px – 16px--wp--preset--spacing--fluid-1
16px – 24px--wp--preset--spacing--fluid-2
24px – 32px--wp--preset--spacing--fluid-3
32px – 40px--wp--preset--spacing--fluid-4
40px – 64px--wp--preset--spacing--fluid-5
16px – 40px--wp--preset--spacing--fluid-6
Breakpoints
Three kinds of breakpoint are at work in a WP Design System site. They come from different places, and only two of them can be changed.
| Breakpoints | Values | Defined in | Adjustable |
|---|---|---|---|
| Viewport breakpoints | Mobile up to 480px, tablet from 480px to 782px, desktop above 782px | settings.viewport in the theme’s theme.json | Yes |
| Block breakpoints | Columns 782px, Media & Text 600px, Navigation 600px | WordPress core itself, compiled into the block styles | No |
| Custom breakpoints | Header 50rem, Sliders 500/700/900px etc. | The stylesheet of the pattern, in the custom build | Yes |