Collapse All button for Elements in Bricks Editor

Bricks’ editor shows the various buttons to add elements in the left side grouped into different categories.

While it is possible to collapse them all manually, a button/link to do the same would be handy.

Here’s how it can be added in Bricks editor.

Step 1

Inside the function hooked to wp_enqueue_scripts in your child theme’s functions.php, add

// 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 );
}

i.e., (the outer frame part in the following)

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 );
	}
} );

Step 2

Create assets directory and inside that, js directory.

Add a file in the js directory named editor-frame.js having:

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();
      }
    }
  });
});