Gấu Bricks - Bricks Builder Child Theme | Enhancing Bricks Builder with simple, useful refinements

Developers
1

Hi,

While using Bricks Builder, I encountered several usability issues. That inspired me to develop Gấu Bricks Child Theme, focusing on practical refinements:

1. “Popup” for the Color Palette selector:

  • Problem: By default, the Color Palette is embedded in the Panel, which is cramped and inconvenient.
  • Solution: I moved it into a separate Popup, much more user-friendly.
  • I wrote a dedicated article about this earlier: Colors Palette Manager/Select in Popup Windows

Color Palette in the Panel
Color Palette in the Panel2559×1388 319 KB

2. Optimized element renaming in the Structure Panel:

  • Problem: Renaming an element was cumbersome:
    • Drag & drop could still be triggered unintentionally.
    • Selecting text blocks for editing was difficult.
    • No visual feedback to indicate “rename mode.”
  • Solution: My refinements include:
    • Blocking drag while renaming.
    • Enabling smooth text block selection.
    • Adding custom styling (color/format) to make the rename state visually clear.
  • I also published a proposal about this: Improve element renaming in Bricks Builder’s Structure Panel

Renaming Elements in the Structure Panel
Renaming Elements in the Structure Panel562×492 17.1 KB

3. “Popup” for the Element Rich Text (Text Edit – TinyMCE):

  • Problem: No fullscreen option and the default font was hard to read.
  • Solution:
    • Added Fullscreen mode for comfortable editing.
    • Applied better fonts and styles for readability.

Custom Element Text
Custom Element Text2559×1392 157 KB

4. Panel Scrollbar:

Problem: Left/right panels have no scrollbar; users cannot manually scroll with a scrollbar when needed.
Solution:

  • Enabled native browser scrollbars for both panels.
  • Styled scrollbars to be slim and consistent with Builder UI.
  • Added filter toggle for optional activation.

Panel Scrollbar
Panel Scrollbar693×704 31.7 KB

5. Vietnam Theme:

  • To celebrate the 80th Anniversary of Vietnam National Day (Sep 2, 1945 – Sep 2, 2025), I added a small feature: an optional Vietnam Theme for Bricks Builder.

80th Anniversary of Vietnam National Day
80th Anniversary of Vietnam National Day641×621 36 KB

Vietnam Theme
Vietnam Theme1200×900 86.5 KB

Thanks
:bear:

1 Like
2

Thanks for your work😄

Unfortunately I’m already using a child theme that gives me gsap etc. I don’t want to be that guy that asks if these enhancements could be implemented by using code snippets. I found you posted them for the rename handling. Any possibility to post them for the other improvements if possible?

Thanks in advance and your work is much appreciated :sparkles:

1 Like
3

Hi @Lukay ,
Thanks for checking out and enjoying my open source code. I will take the time to make it a plugin editon.

And since it’s open source, you can also view and reuse it, integrate it if you want.

Thanks
:bear:

4

Hi,
New Version v1.0.3
Updated with Bricks 2.1.2
Especially with the ability to edit element names in the Structure Panel.

  • Visual styling while renaming: highlight the element being renamed for better visibility.

  • Lock drag/drop of elements while renaming.

  • Allow text selection (highlight part or full text when renaming).

  • Allow paste text via Ctrl/Cmd+V and Context Menu during renaming.
    01

  • Click the icon on the left to enable/disable renaming/drag-drop element
    02
    –
    3

  • You can use the default Enter shortcut to enter renaming state.

@Lukay
I have also separated the source code of the modules. You can refer to the previous research to integrate into your code.
Use the files:

assets/custom-structure-item-renaming.js
assets/custom-structure-item-renaming.css

into your project.

Thanks
:bear:

1 Like
5

Thanks for sharing. Clean code and CSS only fullscreen color control popup is great.

Just share it back here

/*** color-palette-popup.css ***/

/*** after line 53, gradient two tone color for bacjground ***/
background: linear-gradient(to right, var(--builder-bg) 63%, var(--builder-bg-2) 63%);
box-shadow: inset 0 0 0 6px #b05990;

/*** after line 83 and 101, scrollbar ***/
scrollbar-color: var(--builder-color-accent) var(--builder-bg-3);
scrollbar-width: thick;

Using MutationObserver just to handle color palette list toggling seems isn’t really performance-efficient — it’s overkill for such a simple UI change.

A direct event listener or a small state check would be more lightweight and performant in this case.

// color-palette-popup.js
// replace it from line 19 to 35

window.addEventListener('load', () => {
    const innerPanel = document.getElementById('bricks-panel-inner');
    if ( ! innerPanel ) return;

    let colorTimeout;
    innerPanel.addEventListener('click', (event) => {
        const targetEle = event.target;
        if ( targetEle.closest('.bricks-control-preview') && targetEle.closest('div[data-control="color"]') ) {
            clearTimeout(colorTimeout);
            colorTimeout = setTimeout(() => {
                const colorControl = targetEle.closest('.bricks-control-preview');
                const colorPopup = colorControl?.nextElementSibling;
                const colorPalette = colorPopup?.firstElementChild;

                if ( colorPalette?.classList?.contains('color-palette') ) {
                    maybeSetColorsToList(colorPopup);
                }
            }, 300);
        }
    });
})
1 Like
6

Hi @bricksonemore
Thanks for the improved source code. I will update in a patch.
If you have time please go through and evaluate the other features.
Thanks
:bear:

1 Like