Move Color Palette Selector To Top in Color Popup

In Bricks Facebook group a user asks:

In the colors popup in the builder, I’d really like to move the color palette selector from the bottom of the popup to the top – makes a lot more sense to me to have it there…

—

This tutorial shows how we can use MutationObserver interface to watch for changes to the DOM tree for running JavaScript when a div having a data attribute of control set to color is added in the DOM i.e., when the color picker is opened in the Bricks editor.

Before

After

Step 1

Install and activate the Bricks child theme if it is not already active.

Create a directory named assets inside the child theme directory and inside that another directory named js.

Create a file named say builder.js inside the above directory having this code:

document.addEventListener("DOMContentLoaded", () => {
  // Select the node that will be observed for mutations
  const targetNode = document.querySelector("#bricks-panel")

  // Options for the observer (which mutations to observe)
  const config = { childList: true, subtree: true }
  // childList: Set to true to monitor the target node (and, if subtree is true, its descendants) for the addition of new child nodes or removal of existing child nodes. The default value is false.
  // subtree: Set to true to extend monitoring to the entire subtree of nodes rooted at target. All of the other properties are then extended to all of the nodes in the subtree instead of applying solely to the target node. The default value is false.

  // Callback function to execute when mutations are observed
  const callback = (mutationList, observer) => {
    for (const mutation of mutationList) {
      // console.log(mutation.target)
      if (
        mutation.target.hasAttribute("data-control") &&
        mutation.target.getAttribute("data-control") === "color"
      ) {
        const colorPaletteSelector = document.querySelector(
          ".color-palette-selector"
        )
        if (colorPaletteSelector) {
          const colorPaletteSelectorParent = colorPaletteSelector.parentElement
          colorPaletteSelectorParent.prepend(colorPaletteSelector)
        }
      }
    }
  }

  // Create an observer instance linked to the callback function
  const observer = new MutationObserver(callback)

  // Start observing the target node for configured mutations
  observer.observe(targetNode, config)

  // Create style tag and append to head
  document.head.appendChild(document.createElement("style")).innerHTML = `
    [data-control=color] .bricks-control-popup .color-modes {
        margin-bottom: 0;
    }
    
    [data-control=color] .bricks-control-popup .color-palette-selector {
        margin-bottom: 30px;
    }
    `
})

Step 2

Edit child theme’s functions.php.

Change

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

to

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' ) );
	} else {
		wp_enqueue_script( 'builder', get_stylesheet_directory_uri() . '/assets/js/builder.js', [], '1.0.0', true );
	}
} );

Thanks to cmstew and portseif for the JS code on which this is based.