BricksLabs Navigator - now with Synced CSS Editor, BEM class generator and CSS variables context menu

These have been added to the free BricksLabs Bricks Navigator plugin:

CSS Editor (Beta)

An inline collapsible CSS editor panel in the Bricks element panel with two-way binding between CSS and controls. Editable CSS maps back to layout controls; unmappable properties are stored in the element’s Custom CSS field.

BEM Classes (Beta)

A BEM class action on each structure panel layer to assign global classes in BEM format with a checkbox to move ID styles to the class.

CSS Variables Context Menu (Beta)

Right-click any CSS value input in the Bricks editor to insert a CSS variable from your registered custom properties - with live preview on hover.

The plugin already has:

Auto-select Class

Provides a checkbox so that when an element with a CSS class is selected in the editor, the first unlocked class in the classes panel is automatically activated.

Keyboard Shortcuts

Adding common elements in Bricks editor is now a single key-press away.

  • S: Section

  • C: Container

  • B: Block

  • H: Heading

  • T: Basic Text

  • I: Image

  • L: Text Link

  • W: Wrap with Block

  • R: Rich Text

  • D: Div

Alt+H: Toggle :hover

Main feature

This plugin adds a handy “Bricks” menu item in the WP admin bar for directly editing Pages and Templates with Bricks, as well as quickly navigating to various areas within the site and external sites relevant for the users of Bricks Builder.

A very useful feature is being able to directly view the list of all Templates and Pages and edit any of them with Bricks directly with a single click without going to Templates and Pages list screens first.

The admin bar can also be enabled in Bricks editor pages via the plugin’s settings page at Bricks → Bricks Navigator.

Links to Bricks-specific plugins’ settings page are also provided.

Links to community sites, internal and external Bricks links can be enabled in the plugin’s settings page.

A “new tab” icon is provided for site-specific menu items added by the plugin to open that menu item in a new tab.

All external links open in a new tab.

-–

https://wordpress.org/plugins/brickslabs-bricks-navigator/

2 Likes