The editor adds a CSS side panel and an element navigation bar

The styles box, the trail of parent elements and the list of children floated over the selected element and covered what was being edited. Each now has a fixed place, and the person editing chooses whether to see it.

The CSS sidebar

• Active classes, grouped by variant (base, sm:, md:, hover:), removable with one click.
• Project classes in a separate block.
• Suggestions while typing, from two characters on.
• Free values: ten fields (width, height, spacing, font, colour, background, corners) that accept 25px, 1.5rem or #123456.
• Inline CSS: the whole style attribute in a text field.
• Computed styles: twenty properties with the value the browser actually applied.

The navigation bar

A fixed strip shows the parents and the children of what is selected. One click moves up or down the hierarchy, which solves the case of selecting a container that is entirely covered by its content.

Replace

Next to Copy and Paste, a button swaps the selected element for the copied block.

Both panels start switched off and the choice is kept in the browser. They work in the editing bar of the published page and in the panel editor.

Source: Core · req-106 · BATCH-106