把色板选择器移到颜色弹窗顶部

在 Bricks Facebook 群里，有用户提问：

在构建器的颜色弹窗里，我很想把色板选择器（color palette selector）从弹窗底部挪到顶部——放在那里对我来说合理得多……

Update

正如 Maxime 在这个帖子里指出的，这个需求根本不需要 JS——直接用 CSS 的 order 属性就能实现。

虽然下面的 JS 方案对这个任务来说不是必需的，但当你要实现“只有 MutationObserver 才能做到的事情”时，它仍是一个很方便的参考。

本教程展示如何用 MutationObserver 接口监听 DOM 树的变化：当带 data-control 属性且值为 color 的 div 被插入 DOM（也就是在 Bricks 编辑器里打开颜色选择器）时，执行 JavaScript。

之前

之后

Step 1

如果 Bricks 子主题还没启用，先安装并激活它。

在子主题目录里创建 assets 目录，再在里面创建 js 目录。

在上面的目录里创建一个名为 builder.js 的文件，内容如下：

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

相关阅读：

• Bricks 内容切换器：纯 CSS 方案（radio + :has 实现标签切换）

• Bricks 用 ACF Checkbox 字段渲染自定义 SVG 图标列表

• Bricks 按 ACF Gallery 图片数量做动态条件输出

Step 2

编辑子主题的 functions.php。

把

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

改成

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

感谢 cmstew 和 portseif 提供了本教程所基于的 JS 代码。

💡 译者注：只是想把色板选择器挪到弹窗顶部的话，优先用作者 Update 里说的 CSS order 属性方案，零 JS 成本；MutationObserver 方案的真正价值在于提供了一种“监听某个元素被插入 DOM 后再执行 JS”的可复用模式，比如编辑器面板里的其他自定义增强。

适用场景与取舍

这个需求的本质是「编辑器面板的个人工作流优化」，适合天天在构建器里挑颜色的人。两种方案要分清：只想挪位置，用 CSS order 属性就够了，零 JS、零维护成本，是首选；MutationObserver 方案的价值不在挪这一下，而在它示范了「监听某个元素被插入 DOM 后再执行 JS」这个可复用模式——你可以用它做编辑器里的其他自定义增强（比如自动展开某面板、给元素加快捷键）。所以选哪个，看你要的只是位置，还是一整套编辑器增强。

常见问题（FAQ）

Q：挪色板选择器一定要写 JS 吗？ A：不用。作者 Update 里给的 CSS order 方案就能把选择器挪到顶部，零 JS 成本，优先用这个。

Q：那 MutationObserver 方案有什么用？ A：它示范了「元素插入 DOM 后再跑 JS」的可复用模式，适合做编辑器里的其他自定义增强，不止挪色板。

Q：改了构建器面板会影响前台吗？ A：不影响，这些都是编辑器后台的行为，前台渲染和样式与之无关。

延伸阅读

• 想要现成外贸独立站模板与建站实战？看 铲子铺 chanzipu 的外贸建站教程（同用 Bricks，从零搭出能收询盘的站）
• 相关阅读：Bricks Form Builder Complete Guide

站长

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.

获取报价 →浏览全部教程