Bricks 构建器快捷键添加元素

Advanced Themer（下文简称 AT）打算加一个很实用的功能：按下 Cmd/Ctrl + Shift 会在右侧边栏的元素快捷键上显示数字，输入数字就会点击对应按钮，从而在 Bricks 编辑器里添加该元素。

想法虽好，但作者更偏好按元素名称来添加元素，像这样：

键盘快捷键	添加的元素
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（段落）
Cmd + Shift + I	Image
Cmd + Shift + K	Code
Cmd + Shift + L	Text Link

这个方案可以用 Mac Workflow for Adding Elements in Bricks Editor（Keyboard Maestro 工作流）实现。

相比 AT 即将推出的功能，这个方案还有一个好处（个人偏好）：新添加的元素会立刻获得焦点/变为激活状态。

如果你用的是 Windows，或者不想用 Keyboard Maestro，可以在 AT 设置里启用右侧元素快捷键侧边栏（Builder Tweaks → Structure Panel → General Tweaks：Enable shortcuts for creating new elements）之后，用下面的 JavaScript 代码：

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)

用 JS 方案似乎无法阻止 Chrome 对 Cmd + Shift + T 的默认行为（重新打开最近关闭的标签页），所以作者从代码里删掉了 T 的绑定——你可以改用 Cmd + Shift + P。

至于这段代码怎么运行，这里有一种方式——用 WPCodeBox：

AT 后续版本很可能会加一个快捷键管理器。

目前作者会继续用自定义 Keyboard Maestro 工作流，因为：

• 按关联的字母比按数字更符合直觉
• 希望新添加的元素自动变为激活状态
• 无论 AT 是否运行，都能在任何 Bricks 站点上使用这些快捷键

Update 1：论坛相关讨论：https://forum.bricksbuilder.io/t/tutorial-create-elements-using-keyboard-shortcuts/19923/2

参考

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

💡 译者注：原文代码中 Text Link 的注释写的是 ctrl/cmd + alt + l，实际判断条件仍是 shiftKey（与原表格 Cmd+Shift+L 一致），属原文笔误，代码未改动；另外原文对「T 被删后改用 P」的建议与 P 已绑定 Basic Text 存在冲突，系原文自身问题，照实保留。