50% discount on BricksLabs Pro Membership Lifetime Access. Use coupon: GOBRICKS

Collapse All button for Elements in Bricks Editor

collapse-all-element-groups-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();
      }
    }
  });
});

Leave the first comment