explaingit

iamjohnwhite/bricks-floating-panels

21PHPAudience · designerComplexity · 2/5Setup · easy

TLDR

A WordPress plugin for Bricks Builder that turns the docked Settings and Structure panels into freely draggable overlays, giving your design canvas more room to work with.

Mindmap

mindmap
  root((bricks-floating-panels))
    What it does
      Panels become draggable
      Three states per panel
      Saves position between sessions
    Panel Controls
      Resize and snap to edge
      Show or hide toggle
      Auto-open on element click
    Experimental Features
      Semi-transparent panels
      Auto-nudge on overlap
      Side-docking mode
    Requirements
      WordPress 5.8 plus
      PHP 7.4 plus
      Bricks Builder active
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Free up canvas space in Bricks Builder by turning docked panels into floating overlays you can move out of the way.

USE CASE 2

Hide both panels entirely for a distraction-free editing view, then bring them back with a toolbar toggle.

USE CASE 3

Use side-docking mode to lock both panels to one side and let the canvas resize instead of being covered.

Tech stack

PHPJavaScriptWordPress

Getting it running

Difficulty · easy Time to first run · 5min

Requires an active Bricks Builder license, the plugin only works inside the Bricks editor interface.

No license information was mentioned in the explanation.

In plain English

Floating Panels for Bricks is a WordPress plugin for people who use the Bricks Builder page editor. Bricks is a visual website builder that runs inside WordPress, and by default its Settings and Structure panels are docked to the side of the screen, which takes up horizontal space and squeezes the canvas where you see your design. This plugin converts those panels into draggable, floating overlays so you can move them anywhere on screen or hide them entirely, giving the canvas more room. Each panel can be in one of three states: locked to its original docked position, floating freely as a movable overlay, or hidden. You switch between states using a small control added to the builder's top toolbar. When a panel floats, you can drag it, resize it, snap it to an edge, and adjust its width using preset size options. Clicking a canvas element automatically opens the Settings panel, and clicking on empty canvas closes it again if it was opened that way. The position and size of each panel are remembered in the browser between sessions. The plugin also includes some optional features that are off by default and marked as experimental. These include making floating panels semi-transparent so you can see the design underneath, automatically nudging a panel out of the way when you click an element it is covering, and a side-docking mode where both panels lock to one side and the canvas adjusts its width to make room rather than the panels floating on top of it. The plugin loads only inside the Bricks builder interface and does not affect the public-facing pages of the website. It requires WordPress 5.8 or newer, PHP 7.4 or newer, and an active installation of Bricks Builder. The repository includes a build script that produces two separate release versions: one for distribution directly from GitHub (which includes an auto-update mechanism), and one for submission to the WordPress.org plugin directory (which strips the update library as required by that platform).

Copy-paste prompts

Prompt 1
I use Bricks Builder and the side panels are eating my canvas space. Show me how to install bricks-floating-panels and set it up so both panels float as overlays.
Prompt 2
How do I enable the experimental auto-nudge feature in bricks-floating-panels so panels move out of the way when I click an element underneath them?
Prompt 3
Walk me through the side-docking mode in bricks-floating-panels, how is it different from floating mode, and when should I use it?
Open on GitHub → Explain another repo

← iamjohnwhite on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.