Published on Apr 30, 2022

Custom Keyboard Shortcuts in Bricks

Recently gave Bricks another try and the first thing I missed from Oxygen are the incredible keyboard shortcuts made possible by Hydrogen.

In this tutorial I share some JavaScript code I cobbled together to have

1 to 9 to jump to STYLE panels
w to wrap the element in a container
c to add a container
⌃/⌘ + backspace to delete element
⌃/⌘ + d to duplicate/clone element

While these are not complete, they could provide a useful reference for users that are looking for a starting point to do something similar.

Remember that Bricks already comes with a good amount of keyboard shortcuts out of the box.

Note:

Focus needs to be inside the canvas (inner frame) for these custom shortcuts to work.
WPCodeBox is my preferred WordPress snippets manager and that is what we are going to be using here. You could use another one as long as it enables you to restrict the custom css and js to pages by URLs containing a string.
I am not a JavaScript expert.

While we are at it, I will also show how we can add a bit of CSS to make the active element stand out more in the Bricks builder.

Before:

After:

Step 1

Let’s add numbers to the panels.

Click on WPCodeBox in the admin left menu and add a new snippet.

Title: Panel Numbers in Bricks Editor

Type: CSS

Where to run: Custom → Open condition builder → Add Condition → Page URL Contains ?bricks=

Code:

body {
    counter-reset: panel;
}

.bricks-panel-controls .control-group::after {
    counter-increment: panel;
    content: counter(panel);
    position: absolute;
    top: 16px;
    right: 82px;
    width: 20px;
    height: 20px;
    background-color: #3730a3;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

Save and enable.

Step 2

Add another snippet.

Title: Keyboard Shortcuts for Bricks editor

Type: JavaScript

Where to run: Page URL Contains ?bricks=

document.addEventListener('keydown', (e) => {

	// if the cursor is in a editable input field, abort.
	if ( e.target.nodeName == "INPUT" || e.target.nodeName == "TEXTAREA" || e.target.isContentEditable ) {
		return
	}
	
	// 1 - 9 keys.
	const bricksPanelTabs = parent.document.querySelector('#bricks-panel-tabs')
	
	if ( bricksPanelTabs && parseInt(e.key) >= 1 && parseInt(e.key) <= 9 ) {
		// if CONTENT is active, click on STYLE
		if ( bricksPanelTabs.querySelector('li:nth-child(1)').classList.contains('active') ) {
			bricksPanelTabs.querySelector('li:nth-child(2)').click()
		}

		parent.document.querySelector('.bricks-panel-controls .control-group:nth-child(' + parseInt(e.key) + ') .control-group-title > span:nth-child(2)').click()   
	}
	
	// w - wrap in container.
	if ( e.key === 'w' ) {
		parent.document.querySelector('#bricks-structure .element.active .bricks-element-actions li.wrap').click()
	}
	
	// c - add a container.
	if ( e.key === 'c' ) {
		document.activeElement.querySelector('.bricks-element-actions li.add').click()
	}
	
	// ctrl/cmd + backspace/delete - delete element.
	if ( e.key === 'Backspace' && e.metaKey ) {
		parent.document.querySelector('#bricks-structure .element.active .bricks-element-actions li.delete').click()
	}
	
	// ctrl/cmd + d - duplicate/clone element.
	if ( e.key === 'd' && e.metaKey ) {
	    e.preventDefault()
		parent.document.querySelector('#bricks-structure .element.active .bricks-element-actions li.clone').click()
	}

}, false)

Save and enable.

Step 3

Add another snippet. This is to make the active element prominent in the Bricks builder’s structure panel.

Title: Bricks Editor CSS

Type: CSS

Where to run: Page URL Contains ?bricks=

Code:

#bricks-structure .element.active>.structure-item {
    background-color: var(--builder-color-accent);
}

#bricks-structure .element.active>.structure-item input,
#bricks-structure .element.active>.structure-item>.title i,
#bricks-structure .element.active .structure-item .more {
    color: #000;
}

#bricks-structure .element.active>.structure-item input::-moz-selection { /* Code for Firefox */
    color: #fff;
    background: #1a99e0;
}

#bricks-structure .element.active>.structure-item input::selection {
    color: #fff;
    background: #1a99e0;
}

Save and enable.

That’s it!

Oh, one last thing. If by any chance you are a proponent of single key shortcuts for browsing like I am (c to close, a to prev tab, s to next tab, z to go back, x to go fwd, u to copy url, v to view source etc.) and use the awesome Vimium C, you need to add this exclude pattern so our custom shortcuts set up above work in Bricks editor pages uninterrupted: