Interactive Blocks and Forms

Interactive Blocks and Forms

Use native components for behavior the installed plugins support. GenerateBlocks Pro supplies its own component assets; you do not need to add a separate custom script merely to make its tabs or accordion work.

Choose a component

Need	Native route
Multiple collapsible FAQ items	Pro Accordion
A simple disclosure without Pro	Core Details
Switching between content panels	Pro Tabs
A slide-based content area	Pro Carousel
Block-based menu/header	Pro Navigation and Site Header, in the correct theme/template location
Modal or off-canvas content	Pro Overlay
A form	Pro Forms when installed, enabled and configured

Without the required Pro feature, choose an explicit native fallback such as core Details or anchor-linked sections. Do not silently replace functioning tabs with a static screenshot or add another builder.

Text and Headline icons

The editor label Headline can be a V2 generateblocks/text variation. Inspect the actual block name before treating an existing pattern as legacy. A native icon-bearing Text block saves its icon in span.gb-shape and its nonempty label in a sibling span.gb-text; the outer element does not use the plain gb-text class. Native serialization normally omits the HTML-sourced icon and content fields from comment JSON.

Do not flatten these wrappers or reconstruct a local pattern from its rendered appearance. Read inline content or resolve the referenced pattern first, and preserve the shared reference unless a source edit or independent copy was requested. The corrected native examples cover before/after/icon-only output. Preflight detects the observed wrapper failures; native validation still checks the full pattern.

Accordion essentials

A Pro accordion contains items; each item contains a toggle and content. Use the installed editor's saved structure and generated accessibility wiring. Do not guess child CSS class names: a toggle can use gb-accordion__toggle-{id}, not gb-accordion-toggle-{id}.

Question/toggle and answer padding are both required. Start with suitable values such as 24px inline on desktop and 16px on mobile, then check the actual theme. Open an answer, test keyboard activation and verify the icon has room. Core Details also needs this check.

Tabs

A Tabs block contains a menu and a panel container. The Nth menu item corresponds to the Nth panel. Mark exactly one matching menu item and panel open by default.

In the tested Pro 2.8 beta, use stable IDs and native htmlAttributes for tablist, tab and tabpanel roles when the serializer does not supply them. The plugin runtime manages selection, tab stops and ID-based links. Check click, arrow, Home and End behavior against the installed version.

Forms have configuration as well as markup

The Pro form lives in a form record and is embedded with generateblocks-pro/form-render. The page's embed needs the actual form ID. It cannot use a random layout scope.

Enable the Forms module when needed, create the form and configure its processing actions. Identify recipients, confirmation behavior, integration credentials and submission storage deliberately. A visible submit button is not a configured form.

The tested Pro 2.8 REST base is /wp/v2/gblocks-forms; configuration is under meta._gb_form.config. Discover the installed API rather than deriving the route from the post-type name. Forms and other records can have different capability requirements from ordinary pages.

Use controlled test delivery when checking required fields and success/error states. The bundled example's localhost mail sink is test infrastructure and should not be deployed as a production notification system.

Detailed references: interactive blocks, forms and conditions.

---

Back to wiki home · Reference library