List of controls supported by gb_blocks service while registering Gutenberg blocks
These are the controls currently supported by the gb-blocks service while registering controls for a Gutenberg block
| Control Key (type) | Core Datatype | Element Description |
text |
String | Standard single-line textual form field input. |
textarea |
String | Multi-line textual box element optimized for extensive paragraph narratives. |
number |
Number | Integer or float numeric entry control. |
small-number |
Number | Compact numeric utility input with explicit min/max scale attributes. |
select |
String | Dropdown selector box element populating static dropdown configurations. |
toggle |
Boolean | True/false binary switch element representing application flags. |
radio |
String | Mutually exclusive radio selection groups. |
checkbox |
Array | Multiple selection array field grouping lists of items. |
single-checkbox |
Boolean | Standalone singular checkbox form interface element. |
image |
Object | Media attachment selector capturing ID, Source URL, and Alternative text object trees. |
file |
Object / Array | (New) Flexible media asset selector for specific MIME types (e.g., PDF, Video) supporting single/multiple file configurations. |
post-select |
String / Array | (New) REST-driven selector to fetch post assets. Supports multiple selections and explicit rest_base mappings for non-standard plurals. |
taxonomy-select |
String / Array | (New) REST-driven selector for taxonomy items. Requires rest_base overrides for special taxonomy names (e.g., post_tag $\rightarrow$ tags). |
filtered-post-select |
String / Array | (New) Advanced query selector enabling fixed filtering, fully interactive dropdown filters, or mixed query constraints. |
attributes-repeater |
Array | Row item builder tracking variable sets of explicit metadata properties (name, type, value). |
row_repeater |
Array | Dynamic nested layout matrix looping configured fields dynamically across multiple rows. It supports three distinct structural presentation modes (table, card, and card-collapsed) as well as responsive column column-width modifiers (full, half, third, quarter) for sub-fields |
innerblocks |
String | Area allowing insertion of child Gutenberg layout sub-components inside the primary block frame. |
title |
String | Specialized semantic input field explicitly targeted for Title mappings. |
purpose |
String | Semantic multi-line text input field mapped explicitly for structural explanations. |
query |
String | High-capacity multi-line input block explicitly intended for typing database syntax queries. |
date |
String | Standard system calendar input utilizing standardized string patterns. |
service |
String | Input targeting technical path pointers to executable logic targets. |
awesome_code |
String | High-volume multi-line input canvas tailored for writing code. |
env_path |
String | Dedicated text control designed to map precise runtime dot-notation location mappings. |
Here is how you register them, each filed used by your block. The “sections” allows you to register the tabs, that are visible in the blocks
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
[arr.create o.set='template.controls'] [sections new] [name _value='section_content' /] [title _value="Content" /] [icon _value="edit" /] [fields new] { "type": "title", "name": "author", "label": "Author ", "attr_name": "content.author", "validation": { "required": true } } [/fields] [fields new] { "type": "textarea", "name": "service-description", "label": "Testimonial", "attr_name": "content.description" } [/fields] [/sections] [sections new] [name _value='section_style' /] [title _value="Style" /] [icon _value="admin-settings" /] [fields new] { "type": "text", "name": "button-text", "label": "Class for Author", "attr_name": "style.author_class", "default": "bg-warning" } [/fields] [/sections] [/arr.create] |
Detailed Control Documentation & Examples
All control definitions are structured as structured JSON nodes within a [fields new] block entry inside a section template layout.
Simple Text Inputs (type: "text")
|
1 2 3 4 5 6 7 8 9 10 |
[fields new] { "type": "text", "name": "custom-button-text", "label": "Button Label", "attr_name": "settings.button_text", "default": "Click Here", "placeholder": "Enter link text..." } [/fields] |
Multi-line Text Area (type: "textarea")
|
1 2 3 4 5 6 7 8 9 |
[fields new] { "type": "textarea", "name": "block-description", "label": "Detailed Description", "attr_name": "content.description", "default": "Enter description text here." } [/fields] |
Full-Sized Numbers (type: "number")
Captures unrestricted float or integer values.
|
1 2 3 4 5 6 7 8 9 |
[fields new] { "type": "number", "name": "item-stock-count", "label": "Total Items in Stock", "attr_name": "inventory.stock", "default": 10 } [/fields] |
Small Range Numbers (type: "small-number")
A constrained slider style input enforcing minimum and maximum numerical parameters.
|
1 2 3 4 5 6 7 8 9 10 11 |
[fields new] { "type": "small-number", "name": "layout-padding", "label": "Vertical Padding (rem)", "attr_name": "style.padding", "min": 1, "max": 5, "default": 2 } [/fields] |
Selection Dropdowns (type: "select")
Populates a standardized single-choice select dropdown picklist.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
[fields new] { "type": "select", "name": "theme-style", "label": "Visual Scheme", "attr_name": "style.theme", "default": "light", "options": [ {"label": "Light Theme", "value": "light"}, {"label": "Dark Mode", "value": "dark"}, {"label": "High Contrast Blue", "value": "contrast"} ] } [/fields] |
Binary Toggle Switch (type: "toggle")
Renders a stylized true/false dashboard toggle control.
|
1 2 3 4 5 6 7 8 9 |
[fields new] { "type": "toggle", "name": "enable-fixed-header", "label": "Stick Header to Top", "attr_name": "settings.is_sticky", "default": false } [/fields] |
WordPress Media Library Images (type: "image")
Triggers the native WordPress Media Upload modal frame to save a complete image object metadata tree (id, url, alt, title).
|
1 2 3 4 5 6 7 8 |
[fields new] { "type": "image", "name": "background-media", "label": "Hero Banner Image", "attr_name": "media.hero_image" } [/fields] |
Attributes Definition Repeater (type: "attributes-repeater")
An input field group built explicitly for mapping sets of raw key-value structural custom attributes (name, type, value).
|
1 2 3 4 5 6 7 8 |
[fields new] { "type": "attributes-repeater", "name": "meta-attributes", "label": "Custom Tag Metadata Attributes", "attr_name": "data.custom_attributes" } [/fields] |
Custom Column Field Matrices (type: "row_repeater")
Allows complex item sets to loop dynamically inside predefined parameters via sub-field configurations. It supports three distinct structural presentation modes (table, card, and card-collapsed) as well as responsive column column-width modifiers (full, half, third, quarter) for sub-fields.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
[fields new] { "type": "row_repeater", "name": "pricing-features-list", "label": "Feature Inclusion Rows", "attr_name": "content.features", "repeater_fields": [ {"name": "feature_title", "type": "text", "label": "Feature Highlight Name"}, {"name": "is_included", "type": "toggle", "label": "Included in Tiers", "default": true} ] } [/fields] |
Table Layout (layout: "table")
-
Best Used For: 3–4 concise, short metadata inputs (e.g., small numbers, simple flags, standard strings).
-
Mechanics: Renders fields side-by-side inside a compact grid-row matrix arrangement. This is the default structural presentation mode if no explicit
layoutparameter is supplied
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
[fields new] { "type": "row_repeater", "name": "pricing-table-items", "label": "Pricing Tiers Grid Items", "attr_name": "content.items", "layout": "table", "repeater_fields": [ { "type": "text", "name": "tier_title", "label": "Tier Title" }, { "type": "select", "name": "tier_status", "label": "Status", "options": [ {"label": "Active Option", "value": "active"}, {"label": "Archived Option", "value": "disabled"} ] } ] } [/fields] |
Card Layout (layout: "card")
-
Best Used For: Larger content sets (4–8 interactive input parameters) containing high-volume controls like
textarea,image, or script fields. -
Mechanics: Bundles each repeater item row inside an independent visual pane. Sub-fields accept responsive width modifiers (
width) to align side-by-side or occupy full rows within the card container:-
"full": Spans across the entire row width. -
"half": Occupies $50\%$ of the row width (Default sub-field fallback assignment). -
"third": Occupies $33.33\%$ of the row width. -
"quarter": Occupies $24\%$ of the row width.
-
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
[fields new] { "type": "row_repeater", "name": "feature-cards-collection", "label": "Feature Item Cards Showcase", "attr_name": "content.features", "layout": "card", "repeater_fields": [ { "type": "title", "name": "title", "label": "Feature Title", "width": "full" }, { "type": "textarea", "name": "description", "label": "Feature Description", "width": "full" }, { "type": "image", "name": "image", "label": "Feature Icon Image", "width": "half" }, { "type": "select", "name": "colorway", "label": "Color Styling Theme", "width": "half" }, { "type": "text", "name": "cta_label", "label": "Action Button Label", "width": "third" }, { "type": "text", "name": "cta_url", "label": "Target Destination", "width": "third" } ] } [/fields] |
Collapsed Card Layout (layout: "card-collapsed")
-
Best Used For: High-volume entry records (e.g., hundreds of rows) or complex nodes with many fields per row.
-
Mechanics: Renders each item row as a collapsed accordion pane. It requires the
summary_fieldproperty to determine which sub-field variable value is mapped to the header label for identification.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
[fields new] { "type": "row_repeater", "name": "unabridged-faq-accordion", "label": "Frequently Asked Questions Data Stack", "attr_name": "content.faq_records", "layout": "card-collapsed", "summary_field": "faq_question", "repeater_fields": [ { "type": "text", "name": "faq_question", "label": "Question Heading Phrase", "width": "full" }, { "type": "textarea", "name": "faq_answer", "label": "Detailed Response Text", "width": "full" } ] } [/fields] |
Core Gutenberg Nested Areas (type: "innerblocks")
Embeds a native layout container inside your block configuration frame, allowing other system blocks to be placed inside it.
|
1 2 3 4 5 6 7 8 |
[fields new] { "type": "innerblocks", "name": "nested-grid-content", "label": "Drop Additional Appended Layout Components Here", "attr_name": "layout.inner_content" } [/fields] |
Custom Header Field Title Type (type: "title")
A semantic optimization variations text element explicitly tailored for layout block headlines.
|
1 2 3 4 5 6 7 8 9 |
[fields new] { "type": "title", "name": "section-heading", "label": "Main Layout Heading Title", "attr_name": "content.main_heading", "default": "Default Header Title Text" } [/fields] |
Structural Description Field (type: "purpose")
A descriptive text area designed explicitly for adding clarifying code notes.
|
1 2 3 4 5 6 7 8 |
[fields new] { "type": "purpose", "name": "editorial-intent", "label": "Core Explanation Context Purpose", "attr_name": "meta.purpose_notes" } [/fields] |
Deep Database Query Inputs (type: "query")
A clean multi-line input panel built to safely take query definitions.
|
1 2 3 4 5 6 7 8 |
[fields new] { "type": "query", "name": "data-select-syntax", "label": "SQL Statement Code Query", "attr_name": "database.query_statement" } [/fields] |
Standard Calendar Selectors (type: "date")
A calendar prompt utilizing standard date selector field values.
|
1 2 3 4 5 6 7 8 |
[fields new] { "type": "date", "name": "expiration-timeline", "label": "Target Deadline Expiry Date", "attr_name": "timeline.expire_date" } [/fields] |
Executable Service Address Routing (type: "service")
Captures internal service paths used for dynamic backend execution routing.
|
1 2 3 4 5 6 7 8 9 |
[fields new] { "type": "service", "name": "target-logic-route", "label": "Backend Execution Service Route Path", "attr_name": "execution.service_path", "placeholder": "e.g., math.plus_one" } [/fields] |
Structural Script Blocks (type: "awesome_code")
An expansive text area with optimized scaling rules for pasting dynamic application templates.
|
1 2 3 4 5 6 7 8 |
[fields new] { "type": "awesome_code", "name": "inline-scripting-canvas", "label": "Raw Framework Layout Code Script Block", "attr_name": "scripting.raw_code" } [/fields] |
Dot-Notation Location Maps (type: "env_path")
An input tailored for setting precise environment lookup paths.
|
1 2 3 4 5 6 7 8 9 |
[fields new] { "type": "env_path", "name": "target-lookup-variable", "label": "Variable Storage Environment Dot-Path Pointer", "attr_name": "lookup.environment_path", "placeholder": "e.g., template.data.slide" } [/fields] |
Multi-Choice Exclusions (type: "radio")
Renders grouped, mutually exclusive options.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
[fields new] { "type": "radio", "name": "alignment-options", "label": "Container Component Text Alignment", "attr_name": "style.text_align", "default": "left", "options": [ {"label": "Left Aligned Layout", "value": "left"}, {"label": "Centered Orientation", "value": "center"}, {"label": "Right Aligned Layout", "value": "right"} ] } [/fields] |
Checkbox Matrix Arrays (type: "checkbox")
Renders lists enabling multi-option array collection outputs.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
[fields new] { "type": "checkbox", "name": "displayable-sub-elements", "label": "Visible Content Sub-Elements Elements", "attr_name": "display.visible_items", "default": ["title", "media"], "options": [ {"label": "Headline Text Block", "value": "title"}, {"label": "Uploaded Media Assets", "value": "media"}, {"label": "Subdescription Paragraph Text", "value": "desc"} ] } [/fields] |
Isolated Standalone Checkbox (type: "single-checkbox")
Renders an independent checkbox field saving simple boolean options.
|
1 2 3 4 5 6 7 8 9 |
[fields new] { "type": "single-checkbox", "name": "new-tab-toggle", "checkboxLabel": "Open hyperlinks inside a separate browser tab", "attr_name": "behavior.new_tab", "default": true } [/fields] |
File Upload Fields (type: "file")
Used for selecting media items from the media library that are not images, with strict MIME type constraints.
Variant A: Single PDF Selection
|
1 2 3 4 5 6 7 8 9 10 |
[fields new] { "type": "file", "name": "brochure", "label": "Brochure PDF", "attr_name": "content.brochure", "allowed_types": ["application/pdf"], "multiple": false } [/fields] |
Variant B: Multiple Video Selection
|
1 2 3 4 5 6 7 8 9 10 |
[fields new] { "type": "file", "name": "gallery-videos", "label": "Videos", "attr_name": "content.videos", "allowed_types": ["video"], "multiple": true } [/fields] |
Relationship Selectors (type: "post-select" & type: "taxonomy-select")
These fetch relational entities from the WordPress REST API into the visual block setup workspace.
Core Endpoint Routing Resolution Mechanics
-
post-select: By default, the system appends an"s"to the target post type slug to find its endpoint (e.g.,postbecomesposts,pagebecomespages). If a Custom Post Type does not follow standard English pluralization, you must explicitly declare therest_baseproperty (e.g.,post_type: "alumni"requires"rest_base": "alumni";post_type: "person"requires"rest_base": "people"). -
taxonomy-select: No automatic pluralization occurs. The taxonomy slug is queried exactly as declared. However, special native taxonomies require explicit overrides; for instance, the built-inpost_tagslug requires"rest_base": "tags".
Variant A: Single Post Selection
|
1 2 3 4 5 6 7 8 9 10 |
[fields new] { "type": "post-select", "name": "related-post", "label": "Related Post", "attr_name": "content.relatedPost", "post_type": "post", "multiple": false } [/fields] |
Variant B: Multiple Page Selection with Explicit Custom Pluralization Override
|
1 2 3 4 5 6 7 8 9 10 11 |
[fields new] { "type": "post-select", "name": "team-profile", "label": "Select Members", "attr_name": "content.team_members", "post_type": "person", "rest_base": "people", "multiple": true } [/fields] |
Variant C: Multi-Select Categories
|
1 2 3 4 5 6 7 8 9 10 |
[fields new] { "type": "taxonomy-select", "name": "categories", "label": "Categories", "attr_name": "content.categories", "taxonomy": "category", "multiple": true } [/fields] |
Variant D: Multi-Select Tags with REST-Base Override
|
1 2 3 4 5 6 7 8 9 10 |
[fields new] { "type": "taxonomy-select", "name": "tags", "label": "Tags", "attr_name": "content.tags", "taxonomy": "post_tag", "rest_base": "tags" } [/fields] |
Hierarchical Cascading Selectors (type: "filtered-post-select")
Enables advanced lookup capabilities by querying items based on taxonomies before selecting a post. It operates in three distinct configuration modes:
Variant A: Fixed Filter Mode (Silent Pre-Filtering)
The search results immediately restrict listings to the specified term constraints. No filter selection dropdown interfaces are shown to the editor user.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
[fields new] { "type": "filtered-post-select", "name": "news-post", "label": "News Post", "post_type": "post", "filters": [ { "taxonomy": "category", "label": "Category", "ui": "dropdown", "terms": [ { "slug": "css", "name": "CSS" }, { "id": 3, "name": "Jquery" } ] } ] } [/fields] |
Variant B: Interactive Filter Mode (Dynamic User UI Dropdowns)
Renders dynamic selection inputs ahead of the main post results list. The editor user uses these inputs to adjust the query scope dynamically.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
[fields new] { "type": "filtered-post-select", "name": "related-post", "label": "Related Post", "post_type": "post", "filters": [ { "taxonomy": "category", "label": "Category" }, { "taxonomy": "post_tag", "label": "Tag", "rest_base": "tags" } ] } [/fields] |
Variant C: Mixed Filter Mode (Combined Fixed Rules + Interactive UI)
Enforces a hardcoded structural filter context silently while exposing additional secondary options as user-facing dropdown elements.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
[fields new] { "type": "filtered-post-select", "name": "curated-post", "label": "Curated Post Selection", "post_type": "post", "filters": [ { "taxonomy": "category", "terms": [{ "id": 3, "name": "News" }] }, { "taxonomy": "post_tag", "label": "Narrow by Tag", "rest_base": "tags", "ui": "dropdown" } ] } [/fields] |
Sample code to parse repeater fields
This code securely parses the dynamic repeater rows by iterating over the configuration parameters using the framework’s strict loop patterns.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
//* ========================================================================= 3. RENDERING LAYOUT MARKUP BLOCK (team_library.render_team_layout) ========================================================================= *// [templates.add main] <div class="awesome-team-grid-wrapper"> //* Isolate the array list pointer target smoothly *// [env.set active_rows=profiles.member_rows /] [if.not_empty active_rows] <div class="team-layout-flexbox"> //* Loop rows to generate markup matching user entries *// [loop.init iterator="active_rows" current_item="member" index="idx"] <div class="profile-item-card-pane"> [if.not_empty member.member_pic.url] <div class="profile-avatar-frame"> <img src="[str.get member.member_pic.url /]" alt="[str.get member.member_name default='Member Photo' /]" /> </div> [/if.not_empty] <div class="profile-details-content"> <h4 class="profile-name">[str.get member.member_name default='Anonymous Member' /]</h4> <p class="profile-role-badge">[str.get member.member_role default='Associate Staff' /]</p> </div> </div> [/loop.init] </div> [/if.not_empty] </div> [/templates.add] |