Design & features

Advanced Features

Features that work across blocks: attributes and anchors, showing content per device or visitor, theming with CSS custom properties, and hooks for developers.

HTML anchor and CSS classes

At the bottom of every block’s Settings tab, Advanced contains:

HTML anchor — a unique name (letters, numbers, hyphens) that becomes the block’s ID. Link to it with #name, e.g. a menu item “Pricing” → /#pricing. On Tab and Toggle Panel blocks the anchor becomes the panel ID, so a link opens that tab directly. (A few inner blocks, such as Process Step, have no anchor.)
Additional CSS class(es) — one or more class names, separated by spaces, for your own CSS.

Custom attributes

Blocks with the Custom attributes panel (in Advanced) can add HTML attributes to their outer element — for analytics, testing or accessibility.

Allowed names: data-* (for example data-track="hero-cta"), title, aria-label, aria-describedby, lang and dir.
Up to 10 attributes per block. Add attribute / Remove attribute manage the list.
Anything else (such as onclick or style) is ignored for safety.

Layouts, flex items and positioning

The Container arranges any blocks in rows, columns or grids with per-device values. Every block placed directly inside it gets a Flex item panel (width, grow, shrink, order, align self), and blocks with the Position panel can be sticky, absolute or fixed.

Showing content conditionally

Visibility panel — hide any block on desktop, tablet or mobile (CSS only).
Login Form and User Profile — different output for logged-in and logged-out visitors.

Rules by role, schedule, URL parameter and more come with Conditional Content in Pro.

Design tokens (for theme developers)

All blocks use CSS custom properties, so a theme (or Appearance → Editor → Styles → Additional CSS) can restyle every block at once:

:root {
	--wpbb-brand: #0a7cff;
	--wpbb-radius: 10px;
}

Main design tokens and their default values
Token	Default	Used for
`--wpbb-ink`	`#232439`	Headings, high-emphasis text
`--wpbb-ink-alt`	`#2c2d45`	Dark panels, icons on mint
`--wpbb-body-text`	`#6d7174`	Body copy
`--wpbb-surface`	`#ffffff`	Page and card surface
`--wpbb-surface-tint`	`#f2f6f6`	Section backgrounds
`--wpbb-brand`	`#f26440`	Primary actions (the coral accent)
`--wpbb-brand-text`	`#c4451f`	Brand colour for small text (4.9:1 contrast on white)
`--wpbb-brand-tint`	`#fdf3f3`	Behind brand icons
`--wpbb-accent-mint`	`#c5ebe9`	Cool icon-badge accent
`--wpbb-border`	`#ebeced`	Borders and dividers
`--wpbb-overlay`	`rgba(11,18,24,.6)`	Scrim over imagery
`--wpbb-radius`	`6px`	Buttons, cards, inputs

More tokens cover spacing, shadows and containers (--wpbb-container-width, --wpbb-content-size, --wpbb-container-gap, --wpbb-section-padding); see assets/css/tokens.css in the plugin. Values set in a block’s Styles tab always win over tokens.

Developer hooks

For developers extending the plugin (in a child theme or a small plugin):

Actions and filters
Hook	Type	Purpose
`wpbb_loaded`	action	The plugin has booted; receives the plugin container.
`wpbb_modules`	filter	Add or change module definitions.
`wpbb_is_module_active`	filter	Force a module on or off.
`wpbb_is_block_enabled`	filter	Force a block on or off.
`wpbb_module_loaded_{slug}`	action	An active module finished loading.
`wpbb_icons`	filter	Add icons to the icon library (`slug => [label, body]`, 24×24 stroke SVG).
`wpbb_migrations`	filter	`version => callable` data migrations.
`wpbb_upgraded`	action	Runs after migrations.
`wpbb_posts_allowed_post_types`	filter	Post types the Posts block may list.
`wpbb_posts_query_args`	filter	Final `WP_Query` arguments of a Posts block.
`wpbb_products_query_args`	filter	Final `WP_Query` arguments of a Products block.
`wpbb_advanced_search_query_args`	filter	`WP_Query` arguments of Advanced Search live results.
`wpbb_dynamic_content_meta_allowed`	filter	Allow or deny a custom field key for the Dynamic Content block.
`wpbb_user_profile_account_url`	filter	The “My account” link of the User Profile block.
`wpbb_style_breakpoints`	filter	Change the tablet/mobile breakpoints (px) used by the front end and the editor.

Example — only list posts from the last 30 days in every Posts block:

add_filter( 'wpbb_posts_query_args', function ( $args ) {
	$args['date_query'] = array( array( 'after' => '30 days ago' ) );
	return $args;
} );

The human-readable source of all compiled scripts is included in the plugin’s src/ folder (build with npm install and npm run build).

In Brigade Blocks Addons Pro

Brigade Blocks Addons Pro is a separate add-on that needs this plugin. It adds a Dynamic Data module:

Loop Builder — query any post type by taxonomy, custom field or author, and design each item yourself with blocks.
Dynamic Tags — live values such as the post title, a custom field, the current year or the visitor’s name inside any text.
Conditional Content — show blocks only to logged-in visitors or certain roles, on a schedule, by URL parameter or device.

On Settings, Pro modules and blocks carry a PRO badge; while Pro is not active they are listed but locked.