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 shortcut | Element it adds |
Cmd + Shift + S | Section |
Cmd + Shift + C | Container |
Cmd + Shift + B | Block |
Cmd+ Shift + D | Div |
Cmd+ Shift + H | Heading |
Cmd+ Shift + P | Basic Text (Paragraph) |
Cmd+ Shift + I | Image |
Cmd+ Shift + K | Code |
Cmd+ Shift + L | Text 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/