When a block uses the element registry, window.wptElements.buildElementClasses() returns BEM modifier classes to apply to element nodes. These classes follow the pattern:
wpt-{elementname}--{controlname}-{value}
Examples: “ wpt-heading--color-primary wpt-heading--fontsize-3xl wpt-heading--fontweight-bold wpt-heading--textalign-center wpt-description--color-muted wpt-button--style-outline wpt-button--color-secondary wpt-button--size-md wpt-button--radius-full “
Your block’s style.css must include CSS rules for each of these modifiers that your block uses. The element modifier classes drive styling, without matching CSS rules, they have no effect.
Heading Element CSS – Required Modifier Rules
/* ── Color modifiers ────────────────────────────────── */
.wpt-heading--color-text { color: var(--wpt-color-text); }
.wpt-heading--color-primary { color: var(--wpt-color-primary); }
.wpt-heading--color-dark { color: var(--wpt-color-dark); }
.wpt-heading--color-light { color: var(--wpt-color-light); }
.wpt-heading--color-muted { color: var(--wpt-color-muted); }
/* ── Font size modifiers ─────────────────────────────── */
.wpt-heading--fontsize-2xl { font-size: var(--wpt-text-2xl); }
.wpt-heading--fontsize-3xl { font-size: var(--wpt-text-3xl); }
.wpt-heading--fontsize-4xl { font-size: var(--wpt-text-4xl); }
.wpt-heading--fontsize-5xl { font-size: var(--wpt-text-5xl); }
.wpt-heading--fontsize-6xl { font-size: var(--wpt-text-6xl); }
/* ── Font weight modifiers ───────────────────────────── */
.wpt-heading--fontweight-medium { font-weight: var(--wpt-font-medium); }
.wpt-heading--fontweight-semibold { font-weight: var(--wpt-font-semibold); }
.wpt-heading--fontweight-bold { font-weight: var(--wpt-font-bold); }
/* ── Text align modifiers ────────────────────────────── */
.wpt-heading--textalign-left { text-align: left; }
.wpt-heading--textalign-center { text-align: center; }
.wpt-heading--textalign-right { text-align: right; }
Button Element CSS – Required Modifier Rules
/* ── Style modifiers ─────────────────────────────────── */
.wpt-btn--style-filled { background-color: var(--wpt-btn-color, var(--wpt-color-primary)); color: var(--wpt-color-light); border: none; }
.wpt-btn--style-outline { background: transparent; border: 2px solid var(--wpt-btn-color, var(--wpt-color-primary)); color: var(--wpt-btn-color, var(--wpt-color-primary)); }
.wpt-btn--style-plain { background: transparent; border: none; color: var(--wpt-btn-color, var(--wpt-color-primary)); }
/* ── Colour modifiers ────────────────────────────────── */
.wpt-btn--color-primary { --wpt-btn-color: var(--wpt-color-primary); }
.wpt-btn--color-secondary { --wpt-btn-color: var(--wpt-color-secondary); }
.wpt-btn--color-accent { --wpt-btn-color: var(--wpt-color-accent); }
.wpt-btn--color-dark { --wpt-btn-color: var(--wpt-color-dark); }
.wpt-btn--color-light { --wpt-btn-color: var(--wpt-color-light); }
/* ── Size modifiers ──────────────────────────────────── */
.wpt-btn--size-sm { padding: var(--wpt-spacing-xs) var(--wpt-spacing-sm); font-size: var(--wpt-text-sm); }
.wpt-btn--size-md { padding: var(--wpt-spacing-sm) var(--wpt-spacing-md); font-size: var(--wpt-text-base); }
.wpt-btn--size-lg { padding: var(--wpt-spacing-md) var(--wpt-spacing-xl); font-size: var(--wpt-text-lg); }
/* ── Radius modifiers ────────────────────────────────── */
.wpt-btn--radius-none { border-radius: var(--wpt-radius-none); }
.wpt-btn--radius-sm { border-radius: var(--wpt-radius-sm); }
.wpt-btn--radius-md { border-radius: var(--wpt-radius-md); }
.wpt-btn--radius-lg { border-radius: var(--wpt-radius-lg); }
.wpt-btn--radius-full { border-radius: var(--wpt-radius-full); }