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.

Note

When any element is selected and the + button clicked, all the previously-collapsed categories will become expanded. Hence this solution is not 100% solid and should be treated as a temporary workaround until hopefully Bricks team adds this option natively.

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();
      }
    }
  });
});
Instant access to 390+ Bricks code tutorials with BricksLabs Pro

Leave the first comment