Building Dynamic Gutenberg Blocks inside Awesome XP

Note: This requires Awesome XP or Awesome Enterprise version 3.2.2

With Awesome XP / Awesome Enterprise version 3.2.2, you can seamlessly create fully native Gutenberg blocks without relying on Advanced Custom Fields (ACF) or heavy compilation workflows. This allows you to centralize your layouts, controls, and front-end code entirely inside WordPress runtime.

To create a block, simply navigate to Add Awesome Gutenberg Blocks in your dashboard. Each block is powered by a single post containing three structured templates: Register, Render, and Controls.

1. The Register Template

This template registers the block with WordPress at runtime and maps it to the respective render and control services.

⚠️ Important: Ensure the block configuration name maps correctly to your service names.

XHTML

[templates.add register] [gt_blocks.register] [config] [name]single-awesomexmp-testimonial[/name] [title]Single Awesome AI Testimonial[/title] [icon]format-quote[/icon] [category]common[/category] [/config] [render_service _value="gb_blocks.single-testimonial.render" /] [controls_service _value="gb_blocks.single-testimonial.controls" /] [/gt_blocks.register] [/templates.add]

1 2 3 4 5 6 7 8 9 10 11 12

[templates.add register]   [gt_blocks.register]     [config]       [name]single-awesomexmp-testimonial[/name]       [title]Single Awesome AI Testimonial[/title]       [icon]format-quote[/icon]       [category]common[/category]     [/config]     [render_service _value="gb_blocks.single-testimonial.render" /]     [controls_service _value="gb_blocks.single-testimonial.controls" /]   [/gt_blocks.register] [/templates.add]

2. The Render Template

This template handles the server-side code generating the block’s front-end HTML. Variable inputs are cleanly safely mapped from the block’s data object using [template.get].

XHTML

//** Template: render Purpose: This is the server-side code that generates the block's final HTML. The block's attributes are available in the `template.attributes` environment variable. **// [templates.add render] <figure class="wp-block-awesome-testimonial"> <blockquote> <p>[template.get content.description default="Click to edit the testimonial text..." /]</p> </blockquote> <figcaption> — <cite class="[template.get style.author_class /]">[template.get content.author default="Author Name" /]</cite> </figcaption> </figure> [/templates.add]

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

//**   Template: render   Purpose: This is the server-side code that generates the block's final HTML.   The block's attributes are available in the `template.attributes` environment variable. **// [templates.add render]   <figure class="wp-block-awesome-testimonial">     <blockquote>       <p>[template.get content.description default="Click to edit the testimonial text..." /]</p>     </blockquote>     <figcaption>       — <cite class="[template.get style.author_class /]">[template.get content.author default="Author Name" /]</cite>     </figcaption>   </figure> [/templates.add]

3. The Controls Template

Instead of rigid definitions, the settings sidebar is driven dynamically by an array structure. This maps your settings directly into specific data keys (content.* or style.*).

XHTML

//** Template: controls Purpose: Defines the settings that appear in the Gutenberg sidebar. (Note: The frontend JavaScript part for handling these controls is not covered here, this template just defines what the block's attributes are.) **// [templates.add controls] //** This template would typically be fetched by JavaScript in the editor to build the controls in the inspector sidebar. For now, it serves as a definition of our attributes: - content: The text of the testimonial. - author: The name of the person who gave the testimonial. **// [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] [template.return template.controls /] [/templates.add]

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 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59

//**   Template: controls   Purpose: Defines the settings that appear in the Gutenberg sidebar.   (Note: The frontend JavaScript part for handling these controls is not covered here,   this template just defines what the block's attributes are.) **// [templates.add controls]   //**     This template would typically be fetched by JavaScript in the editor     to build the controls in the inspector sidebar.          For now, it serves as a definition of our attributes:     - content: The text of the testimonial.     - author: The name of the person who gave the testimonial.   **//       [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]     [template.return template.controls /]    [/templates.add]

And here is the entire code together for the module.