用途
Bricks Elements 技能用于为 Bricks Builder 创建自定义元素。所有元素都继承抽象类 \Bricks\Element,并放置在 includes/elements/ 目录中。
元素类结构
元素类需要定义若干属性:$category(面板中的元素分类)、$name(唯一标识符)、$icon(Themify 图标类)为必需属性;$tag(默认 HTML 标签)、$scripts(JS 依赖)、$css_selector、$draggable、$deprecated、$nestable 为可选属性。类中通常实现 get_label()、get_keywords()、set_control_groups()、set_controls()、render() 以及静态方法 render_builder()。
注册自定义元素
方法一(推荐):使用 bricks/builder/elements 过滤器钩子把元素名加入数组,并在 init 动作(优先级 11)中 require 元素类文件。
方法二:在 init 动作(优先级 11)中调用 \Bricks\Elements::register_element() 注册元素类文件路径。
元素分类
内置分类包括 basic、general、media、wordpress、single、woocommerce(若启用)。可通过 bricks/builder/element_categories 过滤器添加自定义分类,指定 title 与 icon。
控件类型
基础控件:text、textarea、number(可设 min/max/step/default/placeholder)、带单位的 number(units 为 true 时启用 px、%、em、rem、vw、vh)、checkbox、select(含 options、inline、placeholder)、color。
媒体控件:image、image-gallery、icon、video、svg。
高级控件:link、typography、spacing、border、box-shadow、background、query(用于循环元素,支持 popup 与 inline)。
此外还支持控件分组(set_control_groups 与控件中的 group 字段)、条件控件(required 支持单条件与多条件 AND)、separator 分隔控件、repeater 中继器控件(含 titleProperty、fields、default)。
渲染元素
render() 方法中通过 $this->settings 读取设置,使用 set_attribute() 设置属性,render_attributes() 输出属性,最终 echo 输出。动态数据可用 $this->render_dynamic_data() 或 bricks_render_dynamic_data()。链接使用 set_link_attributes() 与 render_attributes()。图标使用 self::render_icon()。图片使用 $this->render_image(),可传 size、class 等参数。
构建器预览
静态方法 render_builder() 输出 type 为 text/x-template 的 script 模板,模板 id 形如 tmpl-bricks-element-my-custom,内部使用 Vue 模板语法,可配合 contenteditable、icon-svg 等组件。
可嵌套元素
设置 $nestable 为 true 并指定 $vue_component 为 bricks-nestable,实现 get_nestable_children() 返回子元素结构,渲染时调用 \Bricks\Frontend::render_children( $this ) 输出子元素。
查询循环元素
继承 Custom_Render_Element,使用 \Bricks\Query 设置查询,通过 $query->render() 渲染循环,完成后必须调用 $query->destroy()。
脚本入队
可通过 $scripts 属性声明内置脚本(如 bricksSplide),或在 enqueue_scripts() 中使用 wp_enqueue_script() 与 wp_enqueue_style() 入队自定义脚本与样式。
元素钩子
可用过滤器修改元素控件(bricks/elements/{name}/controls)、控件分组(bricks/elements/{name}/control_groups)、脚本(bricks/elements/{name}/scripts),以及修改渲染输出(bricks/frontend/render_element)。
完整示例
资料提供了一个 Feature Box 元素示例,展示分类、名称、图标、标签、标签与关键词、控件分组、标题与描述控件等完整写法。
限制
资料未提供该技能的收费、价格、平台支持范围、效果数据或具体使用步骤说明,这些信息暂未提供。