Bricks 区块草稿状态控制：一键把区块设为「草稿」不渲染

更新（2025 年 6 月 26 日）：该功能自 Bricks 2.0（beta） 起已内置到 Bricks 核心，无需再用下面的代码。见作者推文。若你仍在用 2.0 之前的版本，或想在自己插件里复刻这套控制，下面的代码依然有参考价值。

Laurent Drapeau 在 Bricks Facebook 群组里分享了一段代码，用来在 Bricks 编辑器中快速把某个区块（Section）标记为「Draft（草稿）」，这样它就不会在前端输出。

同样的效果也可以用 Bricks 的条件逻辑（Conditions）功能实现，但这个方法的操作更顺手——直接在元素设置里勾个复选框就行。

下面是作者稍微改进过的版本，避免了 PHP 8 里「Undefined array key」这类警告。

代码放在子主题的 functions.php，或任意代码片段插件（code snippets plugin）里。

代码（仅区块元素生效）

// Add Section Status Control & Settings + Render
add_filter( 'bricks/elements/section/control_groups', function( $control_groups ) {
	$control_groups['draft_controls'] = [
		'tab' => 'content', // or 'style'
		'title' => esc_html__( 'Section Status', 'my_plugin' ),
	];
	return $control_groups;
} );
add_filter( 'bricks/elements/section/controls', function( $controls ) {
	$controls['draft_controls_active'] = [
		'tab' => 'content',
		'group' => 'draft_controls',
		'label' => esc_html__( 'Draft section', 'my_plugin' ),
		'type' => 'checkbox',
	];
	return $controls;
} );
add_filter( 'bricks/element/render', function( $render, $element ) {
	if ( $element->name === 'section' && isset( $element->settings["draft_controls_active"] ) && $element->settings["draft_controls_active"] == true ) {
		$render = false;
	}
	return $render;
}, 10, 2 );

这段代码做了三件事：

1. 注册控制组：通过 bricks/elements/section/control_groups 过滤器，在区块元素的「内容」标签页下新增一个名为「Section Status」的控制组。

2. 注册复选框：通过 bricks/elements/section/controls 过滤器，在该组里加一个 draft_controls_active 复选框，勾选即表示「此区块是草稿」。

3. 拦截渲染：通过 bricks/element/render 过滤器，当区块元素设置了 draft_controls_active 且值为 true 时，把 $render 置为 false，区块就不输出了。

效果：编辑器里每个区块的「内容」标签页都会多出一个「Draft section」复选框，勾上后前端立即不显示该区块。

进阶：给所有元素加草稿控制

上面的代码只作用于区块（section）。想给所有元素都加上草稿开关，用下面这版——它在 init 钩子里遍历 \Bricks\Elements::$elements，为每个元素动态注册相同的控制组和控制：

// Add Draft status control groups and control to all the elements.
add_action( 'init', function() {
	$elements = \Bricks\Elements::$elements;
	$names = array_keys( $elements );
	foreach( $names as $name ) {
		add_filter( "bricks/elements/{$name}/control_groups", 'bl_add_control_groups' );
		add_filter( "bricks/elements/{$name}/controls", 'bl_add_controls' );
	}
}, 30 );
function bl_add_control_groups( $control_groups ) {
	$control_groups['draft_controls'] = [
		'tab' => 'content',
		'title' => esc_html__( 'Set Draft Status', 'my_plugin' ),
	];
	return $control_groups;
}
function bl_add_controls( $controls ) {
	$controls['draft_controls_active'] = [
		'tab' => 'content',
		'group' => 'draft_controls',
		'label' => esc_html__( 'Draft status', 'my_plugin' ),
		'type' => 'checkbox',
	];
	return $controls;
}
add_filter( 'bricks/element/render', function( $render, $element ) {
	if ( isset( $element->settings["draft_controls_active"] ) && $element->settings["draft_controls_active"] == true ) {
		$render = false;
	}
	return $render;
}, 10, 2 );

注意这版和第一版的差别：bricks/element/render 回调里不再判断 $element->name === 'section'，所以对所有元素生效；而控制注册部分改成了 init 钩子里循环注册，配合两个具名函数 bl_add_control_groups / bl_add_controls，避免匿名回调重复注册。

相关阅读：

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

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

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

参考

• Filter: bricks/elements/{element_name}/control_groups

• Filter: bricks/elements/{element_name}/controls

• Filter: bricks/element/render

• Step 3 of Create my custom conditional visibility feature in Bricks theme without add-on

适用场景与常见误区

适合：页面里有些区块还在调、不想让访客看到，又不想整页存草稿的场景——给区块加草稿开关，随存随隐藏。误区：一是只对区块元素生效，普通容器/组件没这开关，需要时按本文进阶给所有元素加；二是草稿只在前端隐藏、编辑器里仍可见，别以为「编辑器看不到=访客也看不到」；三是忘了清理试用完的草稿区块，上线后留一堆隐藏元素。它是临时开关，长期不用就删掉。

延伸阅读

• 想要现成外贸独立站，从零搭出能收询盘的站？看 铲子铺 chanzipu 的外贸建站教程（同用 Bricks）

常见问题（FAQ）

草稿开关对所有元素生效吗？ 默认只对区块（Section）元素生效；要给所有元素加，按本文进阶方案扩展。

草稿区块访客能看到吗？ 不能，草稿状态只在访客端隐藏，编辑器里你仍看得到以便继续改。

和整页存草稿有什么区别？ 整页草稿整个页面不发布；区块草稿只藏单个区块，其余照常上线。

草稿区块要清理吗？ 要，长期不用的隐藏区块上线后及时删，别留一堆无用元素。

• 相关阅读：Bricks Setup 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.

获取报价 →浏览全部教程