CSS Patterns: Block Structure and BEM Naming

All wpTruss blocks follow a consistent CSS class naming pattern. Understanding this pattern makes block CSS predictable and prevents naming collisions between blocks.

BEM Root Class

Every block has a root BEM class: wpt-{slug}. Replace {slug} with your block’s folder name.

wpt-feature-card          Root element
wpt-feature-card__heading Child element
wpt-feature-card__description  Child element
wpt-feature-card__button  Child element
wpt-feature-card--theme-dark   Modifier
wpt-feature-card--bg-primary   Modifier

The root class goes on the outermost element. It must match what getblockwrapper_attributes() receives in render.php.

Block-Local CSS Custom Properties

Spacing and layout values flow from attributes to CSS via block-local custom properties, not via modifier classes. This is the correct pattern:

// render.php — sets the custom property as an inline style
<section style="--wpt-feature-card-padding: var(--wpt-spacing-xl);">

/* style.css — consumes the custom property with a fallback */
.wpt-feature-card {
    padding: var(--wpt-feature-card-padding, var(--wpt-spacing-xl));
}

This pattern decouples the attribute value (which uses scale keys like xl, 3xl) from the actual CSS property value, without needing modifier classes like wpt-feature-card--padding-xl. Modifier classes for spacing are an anti-pattern in wpTruss.