Improve element renaming in Bricks Builder’s Structure Panel

Feature Requests / Improvements
1

In Bricks Builder, when renaming elements in the Structure Panel, users face:

  • Unwanted drag & drop: typing in the rename field can still trigger drag & drop, moving elements unintentionally.
  • Difficulty selecting text blocks: trying to select a block or portion of text for editing often triggers drag instead.
  • No visual distinction while renaming: by default Bricks does not provide styling (color/format) to indicate the rename state, making it less clear to the user.

Solution:

JS: When entering rename mode (focus on input/contenteditable), block drag by intercepting

;(() => {
    'use strict';
    /** StructureEditDragGuard (lite)
     */
    const shouldBlock = el =>
        el.matches('#bricks-structure .structure-item .title input:not(.readonly)');

    const stop = e => {
        if (shouldBlock(e.target)) e.stopPropagation();
    };

    document.addEventListener('pointerdown', stop, true);
    document.addEventListener('mousedown', stop, true);
    document.addEventListener('touchstart', stop, {capture: true, passive: true});
})();

CSS: Add styling (highlight background, border, or font style) while in rename mode to provide clear visual feedback.

#bricks-structure .structure-item input:not(.readonly) {
    height: 100%;
    font-weight: 600;
}

#bricks-structure .element.active > .structure-item:has(> .title > input:not(.readonly)) {
    background-color: var(--builder-bg-green);
    color: var(--builder-color-green);
    caret-color: currentColor;
    box-shadow: inset 0 0 0 1px var(--builder-color-green);
    cursor: text;
}

This has been implemented in my Gấu Bricks Child Theme.

Thanks
:bear: