为 Bricks 编辑器添加一键折叠所有元素按钮

Bricks 编辑器在左侧把各种用于添加元素的按钮按不同分类分组展示。

虽然可以手动把它们全部折叠，但如果有一个按钮/链接能一键完成同样的事，会方便很多。

下面介绍如何在 Bricks 编辑器中添加它。

注意：当任意元素被选中并点击 + 按钮时，所有之前被折叠的分类都会重新展开。因此这个方案并非 100% 完美，应视为一个临时变通方案，期待 Bricks 团队日后原生加入该选项。关于把这类脚本以片段方式管理，可参考 在 Bricks 中使用 WPCodeBox 管理专属代码片段。

第一步：入队脚本

在你子主题 functions.php 中挂在 wp_enqueue_scripts 上的函数里，添加：

// Enqueue file on the builder panel (outer frame)
if ( bricks_is_builder_main() ) {
	wp_enqueue_script( 'editor-frame', get_stylesheet_directory_uri() . '/assets/js/editor-frame.js', [], '1.0.0', true );
}

也就是（下面代码中的外框部分）：

add_action( 'wp_enqueue_scripts', function() {
	// Enqueue your files on the canvas & frontend, not the builder panel. Otherwise custom CSS might affect builder)
	if ( ! bricks_is_builder_main() ) {
		wp_enqueue_style( 'bricks-child', get_stylesheet_uri(), ['bricks-frontend'], filemtime( get_stylesheet_directory() . '/style.css' ) );
	}

	// Enqueue file on the builder panel (outer frame)
	if ( bricks_is_builder_main() ) {
		wp_enqueue_script( 'editor-frame', get_stylesheet_directory_uri() . '/assets/js/editor-frame.js', [], '1.0.0', true );
	}
} );

第二步：editor-frame.js

创建 assets 目录，在其中再创建 js 目录。

在 js 目录里添加一个名为 editor-frame.js 的文件，内容如下：

document.addEventListener("DOMContentLoaded", (event) => {
  const collapseAll = document.createElement("div");

  const topToolbarLeftGroup = document.querySelector(
    "#bricks-toolbar .group-wrapper.left"
  );

  topToolbarLeftGroup.appendChild(collapseAll);

  collapseAll.style.cssText +=
    "margin-left: 12px; display: flex; align-items: center;";

  collapseAll.innerHTML =
    '<button style="font-size: 1.1rem; letter-spacing: 1px; color: #999; border: none; background: none; height: 100%;">COLLAPSE ALL</button>';

  // Add a click event listener to the collapseAll div's button
  collapseAll.querySelector("button").addEventListener("click", function () {
    // Get all the bricks panel elements categories
    const bricksPanelElementsCategories = document.querySelectorAll(
      "#bricks-panel-elements-categories > li"
    );

    // Loop through the bricks panel elements categories
    for (let i = 0; i < bricksPanelElementsCategories.length; i++) {
      // Get the bricks panel elements category
      const bricksPanelElementsCategory = bricksPanelElementsCategories[i];

      // Get the bricks panel elements category's .category-title
      const categoryTitle =
        bricksPanelElementsCategory.querySelector(".category-title");

      // if expanded, click to close
      if (categoryTitle.classList.contains("expand")) {
        categoryTitle.click();
      }
    }
  });
});

小结

通过在编辑器外框（bricks_is_builder_main()）中入队一段 editor-frame.js，在顶部工具栏左侧注入一个 COLLAPSE ALL 按钮，点击时遍历 #bricks-panel-elements-categories > li 并收起所有已展开的分类，即可获得一键折叠左侧元素面板的能力。注意它属于临时方案，选中元素后再点 + 会重新展开分类。

站长

Ray Chan

WordPress Developer & Bricks Specialist

WordPress developer with 10+ years of client builds. Switched to Bricks in 2023 — now builds fast WordPress sites and migrates legacy Elementor/Divi projects.

获取报价 →浏览全部教程