Tutorial: create Elements using keyboard shortcuts

[bohdanps]

Hello people!

I come from Oxygen Builder and I really missed the Element creation with shortcuts that comes with Hydrogen Addon.

But I figured out a workaround to do it with Bricks so I come to share it with you

The only thing you’ll need is Advanced Themer addon and some JS code I’ll share with you.

Quick demo:

Looks cool and fast, right?

Let’s go:

Step 1

Activate Element Shortcuts in Advanced Themer. It’s in Builder Tweaks → Structure Panel → Element Shortcuts section.

This will add these buttons to the structure panel:

Step 2

Add this JS code to your website (wp_footer hook will do):

document.addEventListener('keydown', function(event) {
    if (event.shiftKey && !event.ctrlKey) {
        switch(event.key) {
            case 'S':
                triggerClickAction('section');
                break;
            case 'B':
                triggerClickAction('button');
                break;
            case 'D':
                triggerClickAction('block');
                break;
            case 'H':
                triggerClickAction('heading');
                break;
            case 'T':
                triggerClickAction('text-basic');
                break;
            case 'I':
                triggerClickAction('image');
                break;
            case 'K':
                triggerClickAction('code');
                break;
            default:
        }
    }
});

function triggerClickAction(dataName) {
    var element = document.querySelector('.brxc-right-sidebar-shortcuts[data-name="' + dataName + '"]');
    if (element) {
        element.click();
    } else {
        console.error("Element with data-name='" + dataName + "' not found");
    }
}

And done! Now you can use Shift + [Letter] combinations to create elements in Bricks.

I only added the most commonly used elements and here is the list:

Shift + S: Section
Shift + B: Button
Shift + D: Block (div)
Shift + H: Heading
Shift + T: Basic text
Shift + I: Image
Shift + K: Code

Basically what this code does is to trigger clicks on Advanced Themer’s Elements Shortcuts and drastically speeds up your workflow.

Limitations

It doesn’t work when you have an empty page, where there is no elements on structure panel (i didn’t bother to figure out why) so you can add a section the old way and then start using the shortcuts.

Happy building

[mclement]

Interesting! I bought Advanced Themer (Sadly no LTD ), I will definitely test this out, thanks for sharing!

[bohdanps]

Made some modifications to avoid JS errors on pages outside Bricks builder:

document.addEventListener('keydown', function(event) {
    // Check if Shift key is pressed
    if (getUrlParameter('bricks') === 'run') {
        if (event.shiftKey && !event.ctrlKey) {
            // Check which key is pressed
            switch(event.key) {
                case 'S':
                    triggerClickAction('section');
                    break;
                case 'B':
                    triggerClickAction('button');
                    break;
                case 'D':
                    triggerClickAction('block');
                    break;
                case 'H':
                    triggerClickAction('heading');
                    break;
                case 'T':
                    triggerClickAction('text-basic');
                    break;
                case 'I':
                    triggerClickAction('image');
                    break;
                case 'K':
                    triggerClickAction('code');
                    break;
                default:
                    //console.log("No action defined for Shift + " + event.key);
            }
        }
    }
});

function triggerClickAction(dataName) {
    // Select the element
    var element = document.querySelector('.brxc-right-sidebar-shortcuts[data-name="' + dataName + '"]');
    
    // Check if the element exists
    if (element) {
        // Trigger click action
        element.click();
    } else {
        console.error("Element with data-name='" + dataName + "' not found");
    }
}

function getUrlParameter(name) {
    name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
    var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
    var results = regex.exec(location.search);
    return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
};

[Sridhar]

Alternative approaches:

Keyboard shortcuts for adding elements in Bricks builder - BricksLabs

[bohdanps]

Cool stuff!

The only problem i see it that Cmd +Shift combo conflicts with some native shortcuts, like D for duplication or P for block wrapping.

That’s why I used Shift + Letter

[Sridhar]

Do you know if it is possible to make the just added element active using JS?

[bohdanps]

Well I never explored that option, didn’t feel the need yet. You mean something like Hydrogen does in Oxygen?

Maybe there is some JS event you can catch after an element is created and trigger a click there.

[Sridhar]

Yes. Well, it’s not something special that Hydrogen does. It’s the way Oxygen works. New elements automatically become active.

Still drives me mad that the newly added element is not active by default in Bricks. The native way of doing this by holding Shift down when an element is added.

[bohdanps]

Yeah, this should be a native feature. Isn’t there any feature request about this?

[maximebeguin]

In AT, holding shift + clicking the element icon on the right will set the newly created element as active. You can leverage that function in your JS code.

[Sridhar]

Yes, gave it a try. Couldn’t get the JS working. This is mainly for others who don’t use my custom Keyboard Maestro setup. Didn’t try harder and left it at that.

JS is not my forte.

[maximebeguin]

you can easily do it by replacing click() by the MouseEvent() function and insert shifKey: true like this:

const event = new MouseEvent('click', {
                    bubbles: true,
                    cancelable: true,
                    shiftKey: true,
              });
element.dispatchEvent(event);

[digisavvy]

Sounds like an excellent feature to request @bohdanps - also, this is SUPER helpful. Well done and thank you!

[digisavvy]

But Matt told us to learn Javascript DEEPLY, Sridhar!

[bohdanps]

Seems like Advanced Themer guys listened to us @Sridhar