All wpTruss blocks must follow the fixed panel order. Never deviate.
Correct Panel Order
Panel 1) Structure (initialOpen: true)
headingLevel, semanticRole
Panel 2) Design (initialOpen: false) — MANDATORY IN EVERY BLOCK
themeMode, backgroundColor
Heading element controls
Description element controls
Button element controls (primary and secondary if block has CTAs)
Panel 3) Content (initialOpen: false)
Text fields, image uploads, repeater items, URLs
Panel 4) Spacing (initialOpen: false)
blockPadding, blockGap, spacingBottom
Panel 5) Layout (initialOpen: false)
textAlign, tabletColumns, hideOnMobile, hideOnTablet, hideOnDesktop
Panel 6) AEO Schema (initialOpen: false) — only for FAQ, Pricing, Reviews, Stats blocks
[WordPress Advanced panel] — injected automatically by WordPress, never add manually
Panel 2) Design is mandatory in every block. An old version of the block constitution said to omit Panel 2 for element-based blocks. This was incorrect. Panel 2 is where element controls live — removing it means the site owner has no way to control heading colour, font size, button style, or dark/light mode for that block.
Panel 2: Design: Mandatory Content
Every block’s Design panel must include at minimum:
el( PanelBody, { title: '🎨 Design', initialOpen: false },
el( SelectControl, {
label: 'Theme Mode', value: attr.themeMode || 'light',
options: [
{ label: 'Light', value: 'light' },
{ label: 'Dark', value: 'dark' },
],
onChange: function(v) { setAttr({ themeMode: v }); }
}),
el( SelectControl, {
label: 'Background', value: attr.backgroundColor || 'light',
options: [
{ label: 'Light', value: 'light' },
{ label: 'Surface', value: 'surface' },
{ label: 'Primary', value: 'primary' },
{ label: 'Secondary', value: 'secondary' },
{ label: 'Dark', value: 'dark' },
],
onChange: function(v) { setAttr({ backgroundColor: v }); }
})
)
For blocks with CTAs, add primary and secondary button controls in Panel 2 (style, colour, size, radius — four controls per button variant).