around the actual block content.

Inside Gutenberg editor, the <div> in the red box is a wrapper wrapping <section> which is the actual content. Of course the <div> wrapper is only for Gutenberg Editor to keep tracking and managing the blocks and not rendered in the frontend.

In this case, some CSS applied to the outermost element might not work. For eg, `grid-column` that requires the immediate parent to be a grid. To solve this issue, users can add dynamic classes to outermost block wrapper using Block Wrapper Dynamic Class (under template settings -> Gutenbricks:Block.)

For example, you can declare something like `cold-span-{dynamic_variable}` and the dynamic class will be applied to the block wrapper like this:

col-span-5 has been applied to the block wrapper where "5" is from dynamic_variable.

Now you can see `column-span` working because the block wrapper which is the grid's immediate child has `col-span-5` class.

# Working with WPML or Polylang Both WPML and Polylang are very popular translation plugins. There are two ways to create translated posts or pages: 1. Use the string translator. 2. Create separate pages, each with its own set of blocks. In order for the string translator to function, you must enable **"Save block content in post"** under the Block tab in the settings.

If you are keeping templates in one language only, you must also enable **"Load blocks for all languages"** under the Integrations tab. For Polylang, it loads all the templates by default.

# Road Map

(coming soon) # GB:Meta {% embed url="" %} # ACF ### Overview You can use ACF fields to edit and apply values within blocks. In this case, the data only exists in a particular block. In the example below, you can see the ACF settings on the right-hand side where you can edit the fields. Once updated, the value will instantly update on the block.

You can change group name "ACF Settings" in the settings

### Change Default "ACF Settings" You can change the default "ACF Settings" text in GutenBricks settings under the **Client Experience Tab.**

"ACF Settings" is changed to "My Custom ACF Name"

### Change the Pop-up Text Users are not allowed to edit dynamic data on the canvas. This is due to technical limitations and to provide a better editing experience, as it is easier to edit most dynamic data using forms (e.g., Repeater). GutenBricks displays a pop-up message informing users that they cannot edit the field directly on the canvas. You can change the default pop-up text here:[Custom Pop-up Text](/client-experience/custom-pop-up-text#override-the-dynamic-data-pop-up-text)

### Advanced: Understanding Post ACF Data VS Block ACF Data You can still render ACF data saved within posts, pages, and CPTs. GutenBricks will first look for the data within the block and then move on to looking for data saved within posts, pages, and CPTs. You can programmatically access the values saved in blocks using [gb\_get\_field()](/resources/developer-api/gb_get_field)

# Setting Up ACF We will take a look at how to set up ACF to work with GutenBricks. {% hint style="info" %} This article is about the WordPress plugin GutenBricks, which allows you to create Gutenberg blocks using the Bricks Builder page builder in a no-code approach. Visit [**GutenBricks.com**](https://gutenbricks.com) for more information. {% endhint %} ### TLDR; Do what you normally do with ACF and Bricks, but make sure to set the location rule so that the field group is linked to the template. Read: [#most-important-step-set-location-rule](#most-important-step-set-location-rule "mention") ### Common Workflow Step 1: Create a field group as usual **Step 2: Set the location rule to Bricks Template or individual template post <- MOST IMPORTANT** Step 3: Apply the field values in the Bricks template Step 4: Enter the ACF value in the Gutenberg editor ### Most Important Step: Set Location Rule Once you create a field group, all you have to do is set up a correct location rule to make the field group visible when users edit the block in the Gutenberg editor. There are two common ways: 1. Assigning `Post` to a particular block as shown in the screenshot below. 2. Or less commonly, assigning `Post Type` to `Template.` In this case, the field group will be visible in every block. This can be handy if you have general fields used by every block.

Here, we are assigning the field group to FAQ Bricks Template

# Post Object Field (in-progress) ## ACF {% embed url="" %} # Meta Box # Setting Up Meta Box (In-progress) # Post Field (in-progress) ## Post Field {% embed url="" %} Due to a technical limitation, you must enter this code inside your Query Look section.

Here is the entire code, you can copy and paste ```php if (function_exists('gb_get_field')) { $ids = gb_get_field('mb_bricks_template_user_selected_ice_cream'); } if (empty($ids)) { return [ 'post_type' => 'ice-cream', 'post__in' => [null], // set as [null] so we don't display anything when no selections ]; } return [ 'post_type' => 'ice-cream', 'post__in' => $ids, ]; ``` # Built-in GutenBricks Dynamic Data

Data Key	What For
{gb_block_id}	Unqiue ID for block.
{gb_element_id}	The element ID. Note: Sometimes element ID can be empty.
{gb_query_index}	(since 1.1.20) index of the query item. Important: This does not work in Dynamic Class.
{gb_event_block_load}	JavaScript Event when Block is loaded in Gutenberg editor. SeeGutenBricks Events for Gutenberg Editor
{gb_event_block_remove}	JavaScript Event when Block is removed in Gutenberg editor. SeeGutenBricks Events for Gutenberg Editor
{gb_event_block_prerender}	JavaScript Event when Block is pre-rendered in Gutenberg editor. SeeGutenBricks Events for Gutenberg Editor

# Documenting Blocks {% embed url="" %} # Custom Block Preview {% embed url="" %} # Custom Pop-up Text Add popup text to help users understand more about the individual elements within blocks. {% hint style="info" %} Available in >= 1.1.0 {% endhint %} ### Override the Dynamic Data pop-up text

# Default Page Template You can set up a default page template. So when users create a new page, they can start with the default page template.

Set "GutenBricks Page Template" as default page template.

Now when you create a page, the default page template is "GutenBricks Page Template."

# Gutenberg Editor Custom CSS @since 1.0.8

You can find it under GutenBricks Settings -> Gutenberg Tab

With Gutenberg Editor Custom CSS, you can add your custom CSS for Gutenberg editor. There will be community snippets in the future for you to easily add frequently used CSS snippets. If you have a snippet to share, please email us at # CSS Snippet: Make the block section not full height for ACSS Some users don't like the full window height block section when Automatic CSS is enabled.

You can disable this by this CSS available in [Gutenberg Editor Custom CSS](/customizing-gutenberg/gutenberg-editor-custom-css) Code: ```css /* ACSS: Make the edtitor not full height */ body .is-root-container { min-block-size: unset !important; } body .editor-styles-wrapper.block-editor-writing-flow { min-block-size: unset !important; } ``` # 👩‍💻 Developer API We are trying to include many features for developers. If there are any features you need for development, please feel free to request them at . When third-party add-ons work well in the Gutenberg Editor, they can create a better user experience. We plan to provide hooks and filters for add-on developers to facilitate better integration. # echo:gb\_current\_element\_id returns unique ID @since 1.0.8 {% hint style="warning" %} You must use it within the Bricks Builder element as a code or {echo:gb\_current\_element\_id} {% endhint %} gb\_current\_element\_id() returns the unique element ID that is currently being rendered. You must explicitly allow `gb_current_element_id` using "bricks/code/echo\_function\_names" filter. For more details, please visit ### Example for bricks/code/echo\_function\_names filter ```php add_filter( 'bricks/code/echo_function_names', function() { return [ 'gb_current_element_id', // ... other function names ]; } ); ``` # GutenBricks Events for Gutenberg Editor Since v1.1 GutenBricks blocks triggers custom events when blocks are loaded. These events are useful if you want to run custom JavaScript within Gutenberg Editor. {% hint style="info" %} These events are only available in Gutenberg Editor and NOT frontend. {% endhint %} #### gb:block:init This event is triggered when the block is rendered and initialized with all the editing features. This is when your custom JavaScripts should run. ```javascript jQuery(document).on('load gb:block:init', function(event) { const { clientId, blockElement, block } = event.detail console.log('block is initiated and ready to go', block.blockId); // you can check if the event is triggered for the specific block if (block.blockId === {gb_block_id}) { console.log("I'm the block you're looking for!"); } }); // OR // you can use the dynamic data built specifically for event // you can check out the dynamic data for events below jQuery(document).on('{gb_event_block_load}', function(event) { const { clientId, blockElement, block } = event.detail console.log('block is initiated and ready to go', block.blockId); }); ``` #### gb:block:removed Triggered when the block is removed from the editor. You can use this to clean up. ```javascript jQuery(document).on('load gb:block:removed', function(event) { const { clientId, blockElement, block } = event.detail console.log('block removed', block.blockId); }); ``` #### gb:block:prerendered Triggered when the block content is rendered once in the editor. This content doesn't have editing features instantiated yet. Because it is prerender, the DOM elements are deleted after gb:block:init. It is useful, when you want to add custom loading animation. ```javascript jQuery(document).on('load gb:block:removed', function(event) { const { clientId, blockElement, block } = event.detail console.log('block removed', block.blockId); }); ``` ### Dynamic Data For Events GutenBricks provides dynamic data built for events. These events are triggered when a specific block loads, removes and prerenders (meaning renders static block without editing features.) You can use these dynamic events to run JavaScript functions for any blocks inside the Gutenberg editor.

You can use these dynamic data for events

#### GutenBricks Event: Block Load Triggered when a block is fully loaded with editing features. In normal circumstances, this is the default event to use. #### GutenBricks Event: Block Remove Triggered when a block is removed from the document DOM. You can use this to clean up JavaScript instances to free up the memory and avoid side effects. #### GutenBricks Event: Block Prerender Triggered when the static block is rendered. The static DOM elements lasts very shortly. So we recommend you not to use this to modify element DOMs. Instead you can use it to pre-load any important functions for the block. ### What's inside event.detail #### clientId A unique ID for the block #### domElement The dom element of the block rendered #### block GutenBricks block object # gb\_get\_field() This method allows you to retrieve Block metadata programmatically. **Experimental Feature @since v1.0.0-RC4.2.0** A GutenBricks block can store meta value. If you're using ACF or Metabox fields to create input fields, their values are saved within the block. The values are retrieve as dynamic data in Bricks (For eg. `{acf_example}`) Sometimes, the code editor you're working on may not support dynamic data or has no access to meta data saved in Blocks. For example, the PHP editor inside Bricks Builder's Query Loop does not access Block meta data. **In this case, you can use `gb_get_field($key, $post_id, $args)` function to retrieve the value instead.** * This method works for both ACF and Metabox. * The retrieving hierarchy: * First, it will look for data stored within the block * If not, it returns the value saved on other related sources such as page or template Example:

<?php
// for ACF
if (function_exists('gb_get_field')) {
  $value = gb_get_field('acf_my_value');
}
// for Metabox
if (function_exists('gb_get_field')) {
  $value = gb_get_field('mb_bricks_template_my_value');
}

#### get\_gutenbricks\_meta($key, $post\_id, $args) **$key (required):** key value that you would use inside Bricks builder to retrieve the dynamic data. You will need `acf_` and `mb_bricks_template_` prefixes for them **$post\_id (optional)**: Post, page or CPT where you want to retrieve the data from **$args (optional):** $arg parameter for Metabox's rwmb\_get\_value(). Ignored when the dynamic data is from ACF. # Unique IDs Since RC 4, (tested under RC3.7.x) all the blocks generated by GutenBricks will have unique IDs. A unique ID is made of a combination of the Bricks Builder's original ID and a block ID generated when the user inserts a new block: Example: ``` // Bricks Builder ID brxe-8e9775 // GutenBricks ID with a block ID as a suffix to ensure uniqueness b-8e9775_ls8i5k7o ```

Note: the prefix "brxe" is replaced with "b-" to reduce the length of ID. # Filter: gutenbricks\_bricks\_theme\_name GutenBricks plugin is initiated only when the Bricks theme is activated under the folder name `bricks.` If your theme folder name is different, GutenBricks will not start. This filter allows users to override that theme name so that GutenBricks still works. ```php add_filter('gutenbricks_bricks_theme_name', function ($original_folder_name) { // Here the original_folder_name is 'bricks' // But my bricks theme is under a folder name 'bricks-awesome' return 'bricks-awesome' }); ``` # 🔌 Third Party Integrations We are working hard to provide integrations with third party libraries. ## Integration Request and Bug Reports Please send us bug reports and integration requests at or join our [Slack](https://wiredwp.com/join-our-slack-group) and [Facebook Group!](https://www.facebook.com/groups/wiredwp) ## Compatibility #### For 1.0.0 Release | | Display in Gutenberg | Frontend Render | Versions | | ---------------------- | ------------------------------------------------------------------------ | ----------------------------------------------- | ------------------------- | | Automatic.css | **Integrated** | **It works!** |

2.7.3

2.8.0

## ACSS 2.8.0 ### \[RESOLVED] The issue with full-width Gutenberg Editing GutenBricks is loading old ACSS's CSS file. ### # ACSS 2.8.0 Section padding missing Reported by Dave Foy. ### \[RESOLVED] Issue with sections with no paddings {% embed url="" %} ACSS 2.8.0 introduced a new CSS rule that removes padding from a section nested in another section. This caused an issue when the user used the Post Content element to render WordPress content while wrapping the Post Content element with a section. This will remove all the padding within all the otherwise top-level sections. ```css :where(section:not(section section)) { padding-block: var(--section-space-m); padding-inline: var(--section-padding-x); } ``` Since GutenBricks 1.0.0-rc2.6 we've decided to add the following CSS for ACSS > 2.8.0 to solve this issue: ```css /* GutenBricks ACSS nested section patch */ :where(.brxe-post-content section:not(.brxe-post-content section section)) { padding-block: var(--section-space-m); padding-inline: var(--section-padding-x); } ``` A special thanks to Dave Foy and Chad Botha for spotting and debugging this bug. # ACF / Meta Box integration Both ACF and Meta Box are developed and supported as a twin. There might be plugin-specific functions and fields in the future, then we will create separate content for them. {% hint style="warning" %} For CSS variables\ When using ACF/Meta Box variables as CSS variables, please set the values with var() because var({acf\_some\_value}) format is not working properly at the moment. v1.0.0 {% endhint %} ## Supported Fields for Inline Editing (v1.0.0-RC.3) These fields are the ones that appear on the right panel of the Gutenberg editor and allow you to control the blocks. | Field Name | Supported? | | --------------------- | ------------------------------------------------------------------------------------ | | Text | **Yes** | | Text Area | [**Yes**](#user-content-fn-1)[^1] | | Range | [**Yes**](#user-content-fn-1)[^1] | | Image | **Suported with possible limitations** | | Select | [**Yes**](#user-content-fn-1)[^1] | | Checbox List | [**Yes**](#user-content-fn-1)[^1] | | Checkbox (True False) | [**Yes**](#user-content-fn-1)[^1] | | Radio | [**Yes**](#user-content-fn-1)[^1] | | Time Picker | [**Yes**](#user-content-fn-1)[^1] | | Date Picker | [**Yes**](#user-content-fn-1)[^1] | | Date Time Picker | [**Yes**](#user-content-fn-1)[^1] | | Color | [**Yes**](#user-content-fn-1)[^1] | | Email | [**Yes**](#user-content-fn-1)[^1] | | Url | [**Yes**](#user-content-fn-1)[^1] | | Password | **Will not support due to security implications** | [^1]: # ❤️ Our Approach and Philosophy ## Our Approach At GutenBricks, we use our own plugins in-house as well as many popular add-ons for our agency clients. So integration with these tools is not only crucial to our plugin users but also to us. When it comes to integration and building a product, we wanted to first define our position as another plugin and mindset being a crossroad of plugins. * We are an adapter. So we will adapt to any edge cases of integration. * We are part of the Bricks ecosystem. We want to protect and grow this ecosystem together through open communication and collaboration. * We respect Bricks Builder as our mothership and will respect its product directions and philosophy as our foundation. # Known issues and bugs 1. You can only embed one block with filters per page (@since 1.1.15.1 )\ This is due to a technical difficulty. This is the same with FacetWP. 2. (Resolved in 1.1.23) When using query loops, taxonomy controlled by ACF or Meta Box or GB:Meta might not behave properly when the same block is used multiple times on the same page. The workaround is to create a separate block. 3. The pagination are not stable at the moment. We have a solution. Please stay tuned. # Current Changelog **v.1.1.25 (Jul, 29, 2025)** * FIXED: Dynamic data not rendered properly within Gutenberg editor **v.1.1.24 (June, 23, 2025)** * FIXED: Block not showing in the editor * FIXED: Block rendering too slow * FIXED: GB:Meta images not showing alt text * FIXED: Bricks query duplicates * FIXED: Aria label not being applied properly **v.1.1.21-RC1 (May, 27, 2025)** * FIXED: Dynamic class doesn't work within loops * ADD: CSS editor snippet to disable lightbox clicking **v.1.1.20.2 (May 9, 2025)** * ADD: Number and Range for GB:Meta * ADD: Add {gb\_query\_index} dynamic data. See [Built-in GutenBricks Dynamic Data](/dynamic-data/built-in-gutenbricks-dynamic-data) * FIXED: Performance issue loading the block **v1.1.19.7 (May 8, 2025)** * FIXED: When selecting video file using media, it also shows non-video files * FIXED: Filter CSS is broken when a filter value is selected * FIXED: WYSIWYGEditor not changing value properly **v1.1.19.4** * NEW: Custom CSS to enfource GutenBricks block width * FIXED: Octal escape sequences in CSS breaking the Gutenberg editor For eg, \201E * FIXED: When description has a new line it breaks the blocks * FIXED: Blocks not loading because of the version is not properly applied **v1.1.19** * IMPROVED: User now can expand nested accordion items within InnerBlocks * NEW: Opacity for color selector * FIXED: Remove `_load_textdomain_just_in_time` error message * FIXED: Blocks not loading in WordPress 6.8 * FIXED: Queried elements not loading * FIXED: MetaBox AIO not being recognized * FIXED: non-ACF get\_field() function falsely marks ACF as active * FIXED: Image not selectable in Gutenberg editor * FIXED: Bricks' Rich Text element not displaying classes * FIXED: Hide block templates if they are not in "publish" status.
**v1.1.18.1 - Beta (Mar 27, 2025)** * FIXED: WPML issue where the template was not retrieved by languages * FIXED: WPML translated image becomes blank when it is wrapped in \ * FIXED: WPML Button not translated when texts are wrapped in \ **v1.1.18 - Beta (Mar 26, 2025)** * FIXED: Only the InnerBlock restriction in the last variant is valid, overriding others * FIXED: The parent content is appears again before the content inside InnerBlock * FIXED: InnerBlock widget should not appear in Bricks Builder when it's not GutenBricks block template
**v1.1.17.4 - Beta (Mar 16, 2025)** * CHANGE: Remove the testing warning and add "tested up to..." message (Thanks to Matt Hias' advice)
**v1.1.17.3 - Beta (Mar 5, 2025)** * FIXED: Fixed ID not being applied properly. * FIXED: Assets are not loading in GutenBricks settings page * FIXED: When duplicate pages or posts, the text encoding breaks. * FIXED: Link editing issue where parent takes over children's link data * FIXED: ACF/MetaBox data conflicting with GB:Meta * FIXED:: Blocks with the same block id coming from different posts are not duplicating the contents anymore.
**v1.1.17 - Beta1 (Feb 11, 2025)** * CHANGED: Change the dev environment to prepare for v2.0 * IMPROVED: New post selector * IMPROVED: Add max block number inside InnerBlock * FEATURE: Option to disable a wrapper element wrapping around innerBlock (Special thanks to [David Kuhlmann](https://github.com/schrittweiter-gmbh)) * FIXED: WSForm not being rendered inside Gutenberg editor * FIXED: Link not editable when user selects a text inside **v1.1.16 (Jan 23, 2025) MERGED INTO v1.1.17** * FIXED: FacetWP filter doesn't work * FIXED: Duplicated carousel contents sometimes * FIXED: Polylang String/DeepL translations not being updated * FIXED: Video and other form fields not saving * FIXED: Post selector crashes when post title is empty * FIXED: Style editor not rendering style properly * ADD: if-so integrator * ADD: Add nofollow to links * UPDATED: Editor CSS now compatible with Bricks 1.12 **v1.1.14 (Oct 29, 2024)** * FIXED: CSS not rendered properly when elements are deeply nested. **v1.1.12 (Oct 24, 2024)** * FEATURE: Add a toggle for WPML to load blocks for all the languages\ ![](https://115503993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVRpgq7lelxP9PFleE0QT%2Fuploads%2FKHl5b8pCFsdfMWcBNQ7f%2FScreenshot%202024-10-24%20at%208.21.49%E2%80%AFPM.png?alt=media\&token=f11fb577-1024-4e79-9934-2a98e8d594f0) * FIXED: Block document not loading * FIXED: Removed width: 100% from the block wrapper to fix width issue in InnerBlock **v1.1.11 (Oct 23, 2024)** * FIXED: Text fields' allowed headings and styles are not correct when used in variants * FIXED: CSS issues where ACSS applies unwanted CSS to children of data-souce="editor" * FIXED: Querying post items duplicates **v1.1.10 (Oct 18, 2024)** * FIXED: Polylang activation was not properly detected by GutenBricks. (Thanks to Cees) **v1.1.9 (Oct 18, 2024)** * FIXED: InnerBlock text colors not applied correctly within CoreFramework * FIXED: Remove warnings from bricks\_is\_builder() is not a function (thanks to Michael) * FIXED: Hide settings tab from tabs when there is no tab * FIXED: When ACSS is present, remove CSS for font-size within GutenBricks * FIXED: Style Editor duplicates when there are more than one variant. **v1.1.8.1 (Oct 16, 2024)** * FIXED: ACF / ACF Pro error message when ACF Pro resides within Advanced Themer * NEW: Add custom \