Left Structure Panel in Bricks Editor

Eric shared some CSS code in the Bricks Facebook group to move the structure panel in between the element panel and canvas here.

I think it makes more sense to move the structure panel all the way to the left to maintain the hierarchy of all elements and then see/edit the properties for the selected element.

This layout reduces hand fatigue considerably by avoiding moving the mouse all the way to the right and back to the left multiple times, especially when working on large displays.

Below are the steps to achieve this layout in the Bricks builder editor with WPCodeBox when using Advanced Themer:

Step 1

Add a new CSS snippet in WPCB.

When done, it should look like this:

CSS:

/* Move structure panel to left */
body #bricks-structure {
    order: -1;
    padding-left: 52px; /* to make room for AT shortcuts panel (40 + 12) */
    width: 360px !important; /* delete this line if you want resizable structure panel */
}

/* Move AT shortcuts panel to the left */
#bricks-structure[data-has-shortcuts-sidebar="true"] .brxce-panel-shortcut__wrapper {
    left: 0;
}

/* Avoid stretching labels inside the Structure Panel */

#bricks-structure .structure-item .actions {
    display: none;
}

#bricks-structure .structure-item:hover .actions {
    display: flex;
}

/* Make the structure panel content take up full width */
body #bricks-structure[data-has-shortcuts-sidebar="true"] #bricks-panel-header,
body #bricks-structure[data-has-shortcuts-sidebar="true"] main.panel-content {
    grid-column: 1/3;
}

/* Make element context menu appear on top */
#bricks-builder-context-menu {
    z-index: 2003 !important;
}

If you prefer the structure panel to be resizable delete 360px width for body #bricks-structure.

PHP condition:

<?php 
bricks_is_builder_main();

Step 2

Regarding the width of the element panel, since the elements shortcut panel takes up 40px width you may want to increase its width.

Add this JS snippet:

document.addEventListener("DOMContentLoaded", (e) => {
    ADMINBRXC.vueState.panelWidth = 360
});

Condition:

<?php 

bricks_is_builder();

Thanks to Maxime for some code.
https://advancedthemer.com/avoid-stretching-labels-inside-the-structure-panel/