Keyboard shortcuts for adding elements in Bricks builder

Keyboard shortcuts for adding elements in Bricks builder

Advanced Themer is going to add a handy feature where pressing Cmd/Ctrl + Shift will show numbers in the right sidebar element shortcuts. Typing a number clicks the corresponding button, thereby adding that element in the Bricks editor.

While that is a good idea, I prefer being able to add elements based on the element names. Like this:

Keyboard shortcutElement it adds
Cmd + Shift + SSection
Cmd + Shift + CContainer
Cmd + Shift + BBlock
Cmd+ Shift + DDiv
Cmd+ Shift + HHeading
Cmd+ Shift + PBasic Text (Paragraph)
Cmd+ Shift + IImage
Cmd+ Shift + KCode
Cmd+ Shift + LText Link

This can be done using the Mac Workflow for Adding Elements in Bricks Editor.

Another benefit (a personal preference) of this over the upcoming AT feature is that the newly added element gets focus/becomes active after it is added.

If you are on Windows or want to do this w/o Keyboard Maestro, you could use the following JavaScript code after enabling right element shortcuts sidebar in Advanced Themer’s settings (Builder Tweaks → Structure Panel → General Tweaks: Enable shortcuts for creating new elements):

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

	// ctrl/cmd + shift + s - add Section.
	if (e.key === 's' && (e.ctrlKey || e.metaKey) && e.shiftKey) {
		e.stopPropagation()
		e.preventDefault()

		parent.document.querySelector('.brxce-panel-shortcut__container [data-panel="section"]').click()
	}

	// ctrl/cmd + shift + c - add Container.
	if (e.key === 'c' && (e.ctrlKey || e.metaKey) && e.shiftKey) {
		e.preventDefault()

		parent.document.querySelector('.brxce-panel-shortcut__container [data-panel="container"]').click()
	}

	// ctrl/cmd + shift + b - add Block.
	if (e.key === 'b' && (e.ctrlKey || e.metaKey) && e.shiftKey) {
		e.preventDefault()

		parent.document.querySelector('.brxce-panel-shortcut__container [data-panel="block"]').click()
	}

	// ctrl/cmd + shift + d - add Div.
	if (e.key === 'd' && (e.ctrlKey || e.metaKey) && e.shiftKey) {
		e.preventDefault()

		parent.document.querySelector('.brxce-panel-shortcut__container [data-panel="div"]').click()
	}

	// ctrl/cmd + shift + h - add Heading.
	if (e.key === 'h' && (e.ctrlKey || e.metaKey) && e.shiftKey) {
		e.preventDefault()

		parent.document.querySelector('.brxce-panel-shortcut__container [data-panel="heading"]').click()
	}

	// ctrl/cmd + shift + p - add Basic Text.
	if (e.key === 'p' && (e.ctrlKey || e.metaKey) && e.shiftKey) {
		e.preventDefault()

		parent.document.querySelector('.brxce-panel-shortcut__container [data-panel="text-basic"]').click()
	}

	// ctrl/cmd + alt + l - add Text Link.
	if (e.key === 'l' && (e.ctrlKey || e.metaKey) && e.shiftKey) {
		e.preventDefault()

		parent.document.querySelector('.brxce-panel-shortcut__container [data-panel="text-link"]').click()
	}

	// ctrl/cmd + shift + i - add Image.
	if (e.key === 'i' && (e.ctrlKey || e.metaKey) && e.shiftKey) {
		e.preventDefault()

		parent.document.querySelector('.brxce-panel-shortcut__container [data-panel="image"]').click()
	}

	// ctrl/cmd + shift + k - add Code.
	if (e.key === 'k' && (e.ctrlKey || e.metaKey) && e.shiftKey) {
		e.preventDefault()

		parent.document.querySelector('.brxce-panel-shortcut__container [data-panel="code"]').click()
	}

}, false)

It does not seem possible to prevent triggering Chrome’s default behavior of opening the last closed tab with Cmd + Shift + T when using the JS approach. Therefore, I removed it from the above code and you could instead use Cmd + Shift + P.

As to how to run this code, here’s one way – using WPCodeBox:

AT is likely going to add a shortcuts manager in a future version.

For now, I will continue to use my custom Keyboard Maestro workflow since

  • it makes more sense to me to press an associated letter than a number
  • I want the newly added to become active
  • I can use the keyboard shortcuts on any Bricks site regardless of whether AT is running or not

Update 1:
https://forum.bricksbuilder.io/t/tutorial-create-elements-using-keyboard-shortcuts/19923/2

Reference

https://wpdevdesign.com/custom-keyboard-shortcuts-in-bricks/

Get access to all 537 Bricks code tutorials with BricksLabs Pro

Leave the first comment