Every block must support light and dark theme modes and a set of background colour variants. These are applied as modifier classes on the root element.
Required Theme Modifier Classes
/* ── Theme mode ──────────────────────────────────────────── */
.wpt-{slug}--theme-light { color: var(--wpt-color-text); }
.wpt-{slug}--theme-dark { color: var(--wpt-color-light); }
/* ── Background colour modifiers ─────────────────────────── */
.wpt-{slug}--bg-light { background-color: var(--wpt-color-light); }
.wpt-{slug}--bg-surface { background-color: var(--wpt-color-surface); }
.wpt-{slug}--bg-primary { background-color: var(--wpt-color-primary); color: var(--wpt-color-light); }
.wpt-{slug}--bg-secondary { background-color: var(--wpt-color-secondary); color: var(--wpt-color-light); }
.wpt-{slug}--bg-dark { background-color: var(--wpt-color-dark); color: var(--wpt-color-light); }
Auto-Inverting Heading and Description Text
On coloured backgrounds, headings and descriptions need to invert to ensure readability. Add these rules to every block:
/* Headings invert on coloured backgrounds */
.wpt-{slug}--bg-primary .wpt-{slug}__heading,
.wpt-{slug}--bg-secondary .wpt-{slug}__heading,
.wpt-{slug}--bg-dark .wpt-{slug}__heading,
.wpt-{slug}--theme-dark .wpt-{slug}__heading {
color: var(--wpt-color-light);
}
/* Descriptions mute on coloured backgrounds */
.wpt-{slug}--bg-primary .wpt-{slug}__description,
.wpt-{slug}--bg-secondary .wpt-{slug}__description,
.wpt-{slug}--bg-dark .wpt-{slug}__description,
.wpt-{slug}--theme-dark .wpt-{slug}__description {
color: var(--wpt-color-light);
opacity: 0.85;
}
Responsive Visibility Classes
@media (max-width: 640px) {
.wpt-{slug}--hide-mobile { display: none !important; }
}
@media (min-width: 641px) and (max-width: 1024px) {
.wpt-{slug}--hide-tablet { display: none !important; }
}
@media (min-width: 1025px) {
.wpt-{slug}--hide-desktop { display: none !important; }
}