Styling and Responsive Design

Styling and Responsive Design

Keep styling in the block that owns the layout or content. GenerateBlocks can represent ordinary spacing, typography, borders, transitions, states and responsive rules without a separate page stylesheet.

Editable source and compiled output

Attribute	Purpose
styles	Editable declarations and supported selector/at-rule branches
css	Compiled local CSS that matches those declarations
globalClasses	References to shared styles when deliberately authorized or already present

A declaration that exists only in css can disappear when the editor recompiles the block. CSS Mode edits the structured data; there is no cssMode attribute. Compile against the block's actual native class. An Element answer uses an Element selector, not a Text selector merely because it contains prose.

This is a style object, not a complete block to paste into WordPress:

{
  "display": "grid",
  "gridTemplateColumns": "repeat(3,minmax(0,1fr))",
  "gap": "24px",
  "@media (max-width:1024px)": {
    "gridTemplateColumns": "repeat(2,minmax(0,1fr))"
  },
  "@media (max-width:767px)": {
    "gridTemplateColumns": "1fr",
    "gap": "16px"
  }
}

States and selectors

Use a single selector level, such as &:hover, &:focus-visible, &::before or & .child. Flatten &:hover > .child instead of nesting another selector inside a hover branch. One @media, @supports or @container level may combine with that selector level.

For the tested Pro 2.8 beta compiler, use a leading relative selector such as &:is(html[data-theme="dark"] *) for an ancestor theme condition. The alternative html[data-theme="dark"] & compiled incorrectly in the About test. Inspect the generated selector; copying a plausible CSS string is not sufficient.

Preserve necessary spaces around + and - in CSS math. In the tested beta, the native getCss() compiler is asynchronous and must be awaited.

Responsive choices

• Native Tablet & Mobile: @media (max-width:1024px).
• Native Mobile: @media (max-width:767px).
• Preserve deliberate source boundaries such as 768px rather than silently replacing them.
• Let a parent grid/flex rule handle layout changes before repeating overrides on every child.
• Test long headings, narrow cards, images and navigation, not just the outer page width.
• Include reduced-motion handling for transitions and native interactive components where appropriate.

Accordions and theme interference

Give both the question and expanded answer explicit padding. A useful starting point is 24px inline padding on desktop and 16px on mobile, with enough vertical space and room around the icon. Check the open state as well as the closed row.

The theme may override spacing using logical properties such as padding-block-end. Compare computed padding with the intended result; do not assume a stored value won the cascade. An empty editor canvas is a verification limit, not evidence that padding is correct.

What stays outside the default workflow

CSS Mode does not support arbitrary at-rules such as @keyframes, @font-face or @import. Simplify unsupported effects and use available fonts. Do not move a long stylesheet wholesale into Scripts Manager or hide unsupported rules in the css cache. External code requires an explicit request.

Detailed guides: CSS Mode, responsive rules and design quality.

---

Back to wiki home · Reference library