Elementor Atomic Builder 扩展实战指南从自定义 Widget 到编辑器包与 MCP 的完整技能示例【免费下载链接】elementorThe most advanced frontend drag drop page builder. Create high-end, pixel perfect websites at record speeds. Any theme, any page, any design.项目地址: https://gitcode.com/GitHub_Trending/el/elementorElementor 的 Atomic Builderv4 架构为第三方开发者提供了一套全新的元素构建体系而docs/atomic-builder/examples/目录下的技能示例文档则是一份可直接运行、逐条修正过的参考答案。本文以该示例集为骨架系统梳理七个扩展技能创建原子 Widget、扩展 Prop 类型、添加动态标签、注入编辑器包、扩展变量类型、内部扩展 CSS 转换器与交互运行时的完整实现路径包含全部可复制的 PHP / Twig / TypeScript 代码、Hook 与 Filter 注册方式、External / Internal 能力边界判定并结合 modules/atomic-widgets 等仓库源码印证底层实现。读完本文你将能够独立判断一个扩展需求属于第三方插件可独立交付还是必须提交 Core PR并据此完成从元素注册、属性解析到编辑器 UI 注入的端到端开发。一、示例集定位技能清单与路由入口docs/atomic-builder/examples/README.md是 Atomic Builder 全部 Cursor 技能的可运行参考示例索引。它对应.cursor/skills/下的技能定义供 Agent 工作流以及 v4 扩展开发时使用。示例与技能的对应关系如下Skill 技能示例文件判定结论atomic-builder-extend路由入口仅作路由器无独立示例Relevant—— 保留为入口路由器create-atomic-widget最小问候 Widget 注册Relevant—— 修正了技能骨架中的命名空间与 Section API 问题extend-prop-typesSize 类型 样式转换器Relevant—— 修正了技能中转换器 FQCN 与取值形态add-dynamic-tag文本动态标签 原子桥接Relevant—— 澄清了自动映射机制与完整 Hook 路径add-editor-package编辑器包 App Bar 注入Relevant—— 注册了一个具体的 Editor V2 包extend-variables自定义 Token 类型PHP JSRelevant—— 修正了 size/editor 解析措辞internal-extend-css-converter属性转换器模式Relevant—— 仅限 Core无公开发现 Hookinternal-extend-interactions编辑器控件 Schema 过滤Relevant—— 完整交付需 Core PR纯编辑器集成不充分需要说明的是atomic-builder-extend技能本身不是一个可独立实现的能力它只负责将开发意图路由到上述七个技能之一。在 Agent 工作流中它充当意图路由器先加载该技能确定方向再打开对应的示例文件动手实现。二、能力边界判定External 与 Internal每个扩展技能都按谁能完整交付文档所述结果被划分为两类这是动手前必须判断的第一件事详见 skills-scope.md徽标含义谁能交付External完整结果可通过第三方插件借助公开的 WordPress Hook/Filter 与自有编辑器包交付无需改动 Elementor Core任何开发者Internal完整结果需要针对 Elementor Core 提交 PR或采用私有、未集成的变通方案。部分外部 API 的存在不改变此分类Elementor Core/Pro 维护者或社区提交并被接受的 Core PR各技能的具体分类如下来源skills-scope.mdSkill范围实现位置公开面 / 注意事项create-atomic-widgetExternal第三方插件仓库插件自有命名空间如MyPlugin\AtomicWidgets不改 Coreelementor/widgets/register、elementor/elements/elements_registered内置元素目录变更是 Core-onlyextend-prop-typesExternal插件自有 Prop 类型与转换器编辑器 TS 通过elementor/editor/v2/packages注册不改 CoreProp 类型优先渲染/导入/导出有差异时才需要转换器修改 Coreprop-types/全局词表是 Core-onlyadd-dynamic-tagExternal插件自有Tag子类与注册不改 Coreelementor/dynamic_tags/registerelementor/atomic/dynamic-tags/select_control_*Filter类别→Schema 自动映射无公开 Filter自定义映射需手动合并 prop 联合类型add-editor-packageExternal插件自有elementor/...包通过elementor/editor/v2/packages注册不改 Coreelementor/editor/v2/packages 自有包init()修改 Core 包是 Core-onlyextend-variablesExternal插件自有变量 Prop 类型与转换器编辑器包init()中调用registerVariableType不改 Coreelementor/variables/register style-schema 转换器 Hook 自有包init()改动内置 size 类型或 Pro 门控超出本技能范围internal-extend-css-converterInternalFork/clone 仓库后在modules/atomic-widgets/css-converter/实现并提交 Core PR无公开发现 Hook转换器/展开器只能经 Core 工厂类注册导入 UI 只运行 Core 注册者internal-extend-interactionsInternalmodules/interactions/前端运行时packages/packages/core/editor-interactions/编辑器提交 Core PR前端无公开注册 Hook新触发器/效果必须改 Core关键结论当技能被判定为 Internal 时纯插件方案无法交付完整结果。例如internal-extend-css-converter与internal-extend-interactions即使调用编辑器侧公开 API 完成了部分集成只要发布页运行时属于交付目标就不算满足该技能的要求。开始实现前务必先核对技能自身的 Scope 横幅与 Implementation location 章节。三、前置条件运行本示例集中的所有技能需要满足两项前提见 examples/README.md激活e_atomic_elements实验Atomic Builder 体系由该实验开关控制激活方式参见 getting-started/experiments.mdPropValues 采用{ $$type, value }形态原子属性的数据信封约定参见 fundamentals/prop-value.md。这是理解后续所有转换器、动态标签绑定与变量类型代码的基础。四、示例一创建原子 WidgetExternal示例文件 create-atomic-widget.md 是 v4 新元素开发的主路径其代码改编自modules/atomic-widgets/elements/atomic-divider/仓库中的Atomic_Divider实现并修正了原始技能骨架中的命名空间错误。4.1 最小 WidgetPHP原子 Widget 不再使用传统的register_controls()get_style_controls()而是通过define_props_schema()、define_atomic_controls()、define_base_styles()三个受保护方法声明数据与界面?php namespace MyPlugin\AtomicWidgets; use Elementor\Modules\AtomicWidgets\Controls\Section; use Elementor\Modules\AtomicWidgets\Controls\Types\Text_Control; use Elementor\Modules\AtomicWidgets\Elements\Base\Atomic_Widget_Base; use Elementor\Modules\AtomicWidgets\Elements\Base\Has_Template; use Elementor\Modules\AtomicWidgets\PropTypes\Attributes_Prop_Type; use Elementor\Modules\AtomicWidgets\PropTypes\Classes_Prop_Type; use Elementor\Modules\AtomicWidgets\PropTypes\Primitives\String_Prop_Type; use Elementor\Modules\AtomicWidgets\Styles\Style_Definition; use Elementor\Modules\AtomicWidgets\Styles\Style_Variant; use Elementor\Modules\Components\PropTypes\Overridable_Prop_Type; class My_Atomic_Greeting extends Atomic_Widget_Base { use Has_Template; public static function get_element_type(): string { return e-my-greeting; } public function get_title() { return esc_html__( Greeting, my-plugin ); } public function get_icon() { return eicon-heading; } protected static function define_props_schema(): array { return [ classes Classes_Prop_Type::make()-default( [] ), title String_Prop_Type::make()-default( Hello ), attributes Attributes_Prop_Type::make()-meta( Overridable_Prop_Type::ignore() ), ]; } protected function define_atomic_controls(): array { return [ Section::make() -set_label( __( Content, my-plugin ) ) -set_id( content ) -set_items( [ Text_Control::bind_to( title ) -set_label( __( Title, my-plugin ) ), ] ), ]; } protected function define_base_styles(): array { return [ base Style_Definition::make() -add_variant( Style_Variant::make() ), ]; } protected function get_templates(): array { return [ my-plugin/elements/my-greeting __DIR__ . /my-greeting.html.twig, ]; } }4.2 Twig 模板原子 Widget 的渲染模板使用 Twig 语法从settings读取属性值并接收转换器注入的base_styles与interaction_id{% set classes settings.classes | merge( [ base_styles.base ] ) | join( ) %} p class{{ classes }}>add_action( elementor/widgets/register, function ( \Elementor\Widgets_Manager $manager ) { $manager-register( new \MyPlugin\AtomicWidgets\My_Atomic_Greeting() ); } );4.4 测试与 MCP JSON 构建原子 Widget 基类提供generate()构建器可配合String_Prop_Type::generate()便捷地构造测试数据或供 MCP 构建 JSONuse Elementor\Modules\AtomicWidgets\PropTypes\Primitives\String_Prop_Type; $element My_Atomic_Greeting::generate() -settings( [ title String_Prop_Type::generate( Hello, world! ), ] ) -build();4.5 容器Container注意事项容器与普通原子 Widget 的差异在于容器继承Atomic_Element_Base使用Has_Element_Template通过$this-meta( is_container, true )标记并注册在elementor/elements/elements_registered上此外Element_Builder::make()使用get_type()而非get_element_type()。4.6 本示例修正的技能骨架问题示例明确指出了原技能骨架中的四处偏差开发时可对照避免踩坑基类位于Elements\Base\命名空间下而非Elements\控件使用Section::make()-set_items([ Text_Control::bind_to( key ) ])不是传统的add_control()原始类型Privimitives位于PropTypes\Primitives\命名空间Has_Templatetrait 要求实现get_templates()方法必须开启e_atomic_elements实验。五、示例二扩展 Prop 类型External示例 extend-prop-types.md 讲解如何为原子体系新增一种 Prop 类型。仓库中最小的端到端参考是内置的size类型对modules/atomic-widgets/prop-types/size-prop-type.phpProp 类型定义与modules/atomic-widgets/props-resolver/transformers/styles/size-transformer.php样式转换器。5.1 PHP 转换器转换器接收的是 PropValue 的内层 payload即value字段而非完整的{ $$type, value }信封?php namespace MyPlugin\Transformers; use Elementor\Modules\AtomicWidgets\PropsResolver\Props_Resolver_Context; use Elementor\Modules\AtomicWidgets\PropsResolver\Transformer_Base; class My_Size_Transformer extends Transformer_Base { public function transform( $value, Props_Resolver_Context $context ) { $size $value[size]; $unit $value[unit]; if ( custom $unit ) { return $size; } if ( auto $unit ) { return auto; } return $size . $unit; } }5.2 注册到样式上下文优先级 20 覆盖 Core 的 10add_action( elementor/atomic-widgets/styles/transformers/register, function ( $registry ) { $registry-register( size, new \MyPlugin\Transformers\My_Size_Transformer() ); }, 20 );该 Hook 收到( Transformers_Registry $registry, Props_Resolver $resolver )两个参数。注册的 key 必须与 Prop 类型的get_key()/ 存储的$$type一致。5.3 TypeScript 镜像elementor/editor-props编辑器侧通过createPropUtils配合elementor/schema的 Zod 校验建立类型镜像import { createPropUtils } from elementor/editor-props; import { z } from elementor/schema; export const mySizePropTypeUtil createPropUtils( size, z.strictObject( { unit: z.enum( [ px, em, rem, %, vh, vw, custom, auto ] ), size: z.number(), } ) );5.4 转换器注册上下文转换器并非只在样式渲染时存在不同阶段使用不同的注册 Hook 后缀上下文Hook 后缀设置渲染settings/transformers/register样式渲染styles/transformers/register导入import/transformers/register导出export/transformers/register纯解析plain/transformers/register5.5 MCP JSON Schema 过滤如需在交给 LLM 转换前按 Prop 类型调整 JSON Schema使用过滤器filteradd_filter( elementor/atomic-widgets/llm-json-schema, function ( $schema, $prop_type ) { return $schema; }, 10, 2 );5.6 约束链式转换深度上限为3PropValue 上disabled: true时解析结果为nullUnion_Prop_Type通过Union_Prop_Type::make()-add_prop_type()组合而成不可子类化。六、示例三添加动态标签External示例 add-dynamic-tag.md 演示如何把 WordPress 数据接入 v4 属性体系——这是原子属性中桥接动态数据的必需通道。6.1 注册标签与分组?php use Elementor\Core\DynamicTags\Tag; use Elementor\Modules\DynamicTags\Module as DynamicTagsModule; add_action( elementor/dynamic_tags/register, function ( $manager ) { \Elementor\Plugin::$instance-dynamic_tags-register_group( my-plugin, [ title My Plugin, ] ); $manager-register( new \MyPlugin\Tags\Store_Hours() ); } ); class Store_Hours extends Tag { public function get_name() { return store-hours; } public function get_title() { return esc_html__( Store Hours, my-plugin ); } public function get_group() { return my-plugin; } public function get_categories() { return [ DynamicTagsModule::TEXT_CATEGORY ]; } protected function register_controls() { $this-add_control( field, [ type select, label Field, section content, default hours, options [ hours Hours, phone Phone, ], ] ); } public function render() { echo esc_html( $this-get_settings( field ) ); } }可转换为原子的控件类型包括text、textarea、select、number、switcher、choose、query、date_time、media。6.2 非标准控件的强制原子转换对于不受支持的控件可通过force_convert_to_atomic强制整标签转换未受支持的控件会被跳过而不是把整个标签排除在原子体系之外public function get_editor_config() { return array_merge( parent::get_editor_config(), [ force_convert_to_atomic true, ] ); }6.3 动态下拉选项原子选择器add_filter( elementor/atomic/dynamic-tags/select_control_options, function ( $options, $control, $tag ) { if ( store-hours ( $tag[name] ?? ) ) { $options[custom:key] Custom label; } return $options; }, 10, 3 );6.4 自动映射行为Dynamic_Prop_Types_Mapping将 Prop类型映射到标签类别例如String_Prop_Type→TEXT_CATEGORY然后将Dynamic_Prop_Type并入联合类型并设置allowed_tag_names。映射是基于类别的并非自由格式的 Schema 交集。相关的挂载点包括Widget 属性elementor/atomic-widgets/props-schema仅样式颜色elementor/atomic-widgets/styles/schema选择退出自动映射-meta( Dynamic_Prop_Type::ignore() )。渲染侧由Dynamic_Transformer在以下两个 Hook 上处理elementor/atomic-widgets/settings/transformers/registerelementor/atomic-widgets/styles/transformers/register导入/导出则使用ImportExport\Dynamic_Transformer注册在导入/导出转换器 Hook 上。6.5 保存的绑定形态动态绑定保存为标准的$$type信封结构{ $$type: dynamic, value: { name: store-hours, group: my-plugin, settings: { field: hours } } }七、示例四添加编辑器包External示例 add-editor-package.md 是向 Editor V2 注入编辑器 UI 与编辑器内 MCP 工具的主路径。它的定位与 PHP 侧modules/mcp/的能力不同——这里是插件自有的前端包。仓库中的参考实现为modules/site-navigation/module.php与packages/packages/core/editor-site-navigation/。7.1 PHP注册包add_filter( elementor/editor/v2/packages, function ( array $packages ) { return array_merge( $packages, [ editor-my-feature ] ); } ); add_filter( elementor/editor/v2/scripts/env, function ( array $env ) { $env[elementor/editor-my-feature] [ enabled true ]; return $env; } );7.2 JSsrc/init.ts 从src/index.ts再导出构建脚本footer会自动调用window.elementorV2.{camelCasePackage}?.init?.()因此包名editor-my-feature对应editorMyFeatureimport { injectIntoPageIndication, toolsMenu } from elementor/editor-app-bar; import { getMCPByDomain } from elementor/editor-mcp; import { z } from elementor/schema; import { MyIndicator } from ./components/my-indicator; import { useMyToggleProps } from ./hooks/use-my-toggle-props; export function init() { injectIntoPageIndication( { id: my-indicator, component: MyIndicator, } ); toolsMenu.registerToggleAction( { id: toggle-my-panel, priority: 20, useProps: useMyToggleProps, } ); const mcp getMCPByDomain( my_feature, { instructions: Short hint for agents, docs: Full domain documentation, } ); mcp.addTool( { name: my_tool, description: Does something in the editor, schema: { elementId: z.string().describe( Target element id ), }, handler: async ( { elementId } ) Handled ${ elementId }, } ); }// src/index.ts export { init } from ./init;7.3 常用注入 API区域API所属包ShellinjectIntoTop、injectIntoLogicelementor/editorApp BarinjectIntoPageIndication、toolsMenu.registerToggleActionelementor/editor-app-bar样式页签injectIntoStyleTabelementor/editor-editing-panel元素面板injectTabelementor/editor-elements-panel样式仓库stylesRepository.registerelementor/editor-styles-repositoryv1 桥接registerDataHook、blockCommand、__privateListenToelementor/editor-v1-adapters7.4 MCP 命名空间与 Schema 约定MCP 域名必须匹配/^[a-z_]$/小写字母 下划线Schema 值使用elementor/schema的 Zod 对象而不是纯 JSON Schema。7.5 验证清单包出现在编辑器的网络 bundle 中UI 渲染在所选插槽位置开启 Angie / WebMCP 实验后MCP 工具可见。八、示例五扩展变量类型External示例 extend-variables.md 演示自定义 Kit Token变量类型。完整的交付需要四部分PHP 类型注册 样式 Schema 联合 PHP 样式转换器仅前端需要解析时 编辑器registerVariableType。内置变量 key 包括global-color-variable、global-font-variable、global-size-variable、global-custom-size-variable。8.1 PHP注册变量类型必须在 WordPressinit之前注册监听器该 Hook 在init上触发add_action( elementor/variables/register, function ( \Elementor\Modules\Variables\Classes\Variable_Types_Registry $registry ) { $registry-register( \My\Shadow_Variable_Prop_Type::get_key(), \My\Shadow_Variable_Prop_Type::make() ); } );8.2 样式 Schema 联合add_filter( elementor/atomic-widgets/styles/schema, function ( array $schema ) { // Add your variable $$type to the union for relevant style keys. return $schema; } );实现时可镜像仓库中的modules/variables/classes/style-schema.php与size-style-schema.php。8.3 PHP 样式转换器前端需把 id 解析为 var() 时Style_Transformers仅为color 与 font注册了Global_Variable_Transformersize 类 token 没有对应的 PHP 转换器add_action( elementor/atomic-widgets/styles/transformers/register, function ( $registry ) { $registry-register( global-shadow-variable, new \My\Shadow_Variable_Transformer() ); } );编辑器画布使用StyleVariablesRenderer输出:root { --label: value }JS 侧内置 size 类型使用EmptyTransformer而非默认的variableTransformer。8.4 JS在编辑器 v2 包的init()中调用registerVariableType不要修改 Core 的register-variable-types.tsx应在插件自有包中注册import { registerVariableType, variableTransformer } from elementor/editor-variables; import { stringPropTypeUtil } from elementor/editor-props; import { BrushIcon } from elementor/icons; import { shadowVariablePropTypeUtil } from ./prop-types/shadow-variable-prop-type; export function init() { registerVariableType( { key: shadowVariablePropTypeUtil.key, icon: BrushIcon, propTypeUtil: shadowVariablePropTypeUtil, fallbackPropTypeUtil: stringPropTypeUtil, variableType: shadow, defaultValue: 0 2px 4px rgba(0,0,0,0.1), styleTransformer: variableTransformer, } ); }必填字段为key、icon、propTypeUtil、fallbackPropTypeUtil、variableType完整字段与valueField契约见 variables/types.md 的registerVariableType字段契约章节。关键提醒缺少 JS 注册步骤时仅 PHP 的类型可通过 REST / MCP / CSS 工作但永远不会出现在编辑器的 Add Variable 下拉中。若没有 npm 构建管线也可通过window.elementorV2.{camelCasePackage}全局对象为延迟加载脚本注册参考 editor-packages/extending-editor.md。8.5 REST / MCP 的职责边界elementor/v1/variables/*与 MCP 的elementor/manage-global-variable只能校验已注册的类型不能定义新类型。变量模块仅在e_atomic_elements实验开启时加载。九、示例六内部扩展 CSS 转换器Internal示例 internal-extend-css-converter.md 适用于导入/迁移阶段把遗留 CSS 声明映射为原子Style_SchemaPropValues 的场景——它不是渲染期的样式转换器。核心限制是不存在公开的 WordPress 发现 Hook第三方只能提交 Core PR或使用私有Css_Converter实例。9.1 属性转换器参考Size_Property_Converter?php namespace Elementor\Modules\AtomicWidgets\CssConverter\Converters; use Elementor\Modules\AtomicWidgets\CssConverter\Conversion_Context; use Elementor\Modules\AtomicWidgets\CssConverter\Property_Converter_Base; use Elementor\Modules\AtomicWidgets\PropTypes\Size_Prop_Type; class My_Property_Converter extends Property_Converter_Base { private string $property; public function __construct( string $property ) { $this-property $property; } protected function get_supported_properties(): array { return [ $this-property ]; } protected function do_convert( Conversion_Context $context, array $rule ): bool { $context-set_prop( $this-property, Size_Prop_Type::generate( [ size 10, unit px, ] ) ); return true; } }注册位置在Converter_Registry_Factory::real_converters()私有方法位于同一文件中。9.2 简写展开器Shorthand Expander子类化Shorthand_Expander_Base需要实现protected get_supported_properties(): arrayprotected do_expand( array $rule ): array可选expand_null()用于重置扇出reset fan-out在Expander_Registry_Factory::create()中注册——顺序很重要展开器按先匹配先生效处理。9.3 覆盖率 CI新增属性需加入对应家族的常量STRING_PROPERTIES、SIZE_PROPERTIES、OTHER_PROPERTIES等covered_properties()会合并它们。对应测试为test-css-converter-rest-api.php::test_coverage__every_style_schema_property_is_hardcoded_as_covered——每个Style_Schemakey 必须出现在覆盖率中。侧边 longhands如padding-top使用Object_Side_Merge_Converter/Object_Field_Merge_Converter且不一定是顶层 Schema key。9.4 公开路径选项提交 Core PR将展开器/转换器加入modules/atomic-widgets/css-converter/下的工厂类插件内部工具使用手工构造的Css_Converter与自定义注册表不会接入 Core 导入 UI。注意elementor/atomic-widgets/styles/schema过滤器只扩展样式 Schema不会注册转换器。十、示例七内部扩展交互运行时Internal示例 internal-extend-interactions.md 说明交互能力的边界完整交付需要 Core PR因为发布页运行时没有公开注册 Hook仅编辑器侧集成不足以满足技能要求。10.1 数据模型interactions属性由version与items[]组成其中每个interaction-itemPropValue 包含interaction_id、trigger、animation、breakpoints。10.2 PHP扩展存储 Schemaadd_filter( elementor/atomic-widgets/interactions/schema, function ( array $schema ) { // $schema holds Interaction_Item_Prop_Type shape entries. return $schema; } );若允许值发生变化还需同步更新modules/interactions/props/下的Validation、Presets与 PropType 的-meta( pro, … )。10.3 编辑器控件 仓库Core 模式参考packages/packages/core/editor-interactions/src/init.tsimport { getMCPByDomain } from elementor/editor-mcp; import { createInteractionsProvider, initMcpInteractions, interactionsRepository, registerInteractionsControl, } from elementor/editor-interactions; export function init() { interactionsRepository.register( createInteractionsProvider( { key: my-interactions-source, priority: 50, actions: { all: () [] }, } ) ); registerInteractionsControl( { type: trigger, component: MyTriggerControl, options: [ load, scrollIn ], } ); initMcpInteractions( getMCPByDomain( interactions, { instructions: Short hint, docs: Full interactions domain docs, } ) ); }包注册走elementor/editor/v2/packages见示例四。但仅凭编辑器侧工作不能完成该技能——发布页运行时仍需要 Core。Core 免费版编辑器仅注册trigger: load|scrollInPro 通过elementor-pro非 Core的配套包解锁额外触发器。10.4 前端运行时仅 Core PR 可改modules/interactions/assets/js/interactions-utils.js中的运行时校验逻辑如下function isSupportedInteraction( animationConfig ) { if ( ! [ load, scrollIn, scrollOut ].includes( animationConfig.trigger ) ) { return false; } if ( custom animationConfig.effect ) { return false; } return true; }触发器hover、click、scrollOn在运行时被跳过预设效果fade/slide/scale经getKeyframes()渲染不受isSupportedInteraction()门控编辑器使用独立的isSupportedInteractionItem()由registerInteractionsControl的 options 驱动。10.5 第三方插件不能做什么不修改 Core 的interactions.js/interactions-utils.js就无法在线上站点添加新的 Motion.js 效果不存在可通过 WordPress Hook 注册前端触发器/效果的通道仅凭编辑器包工作无法满足本技能。window.elementorModules.interactions仅向 Pro 暴露共享工具函数不是效果注册 API。Pro 字段通过 PHP PropTypes 的-meta( pro, Presets::ADDITIONAL_* )门控编辑器侧 Pro 通过 elementor-pro 中配套的registerInteractionsControloptions 解锁。十一、Agent 工作流中的推荐使用方式综合 examples/README.md 与 skills-scope.md推荐的标准流程为路由意图加载atomic-builder-extend技能把开发意图映射到七个技能之一判定范围核对 skills-scope.md 的表格——Internal 技能CSS 转换器、交互运行时需规划 Core PR插件方案无法完整交付打开示例实现前先阅读对应的示例文件本文第四至十节即其完整内容而非直接照抄技能骨架示例修正了骨架中的命名空间、FQCN、取值形态等错误交叉核对文档技能本质是清单而非文档副本实现时仍需对照docs/atomic-builder/下的主题文档如 fundamentals/prop-value.md、fundamentals/transformers.md、dynamic-tags/extending.md 等确认细节重新核对技能横幅动手前再次检查技能自身的 Scope 横幅与 Implementation location 章节及注意事项。十二、小结本示例集的价值在于它把七个扩展技能的应然描述与实然代码对齐修正了技能骨架中的错误并给出明确的 External / Internal 边界判定。对第三方开发者而言create-atomic-widget、extend-prop-types、add-dynamic-tag、add-editor-package、extend-variables 五个 External 技能可在不改动 Elementor Core 的前提下独立交付而 internal-extend-css-converter 与 internal-extend-interactions 属于 Core 能力必须走 PR 流程。所有代码示例均可直接复制到插件中运行前提是激活e_atomic_elements实验并可在仓库源码modules/atomic-widgets/、packages/packages/core/editor-interactions/、modules/interactions/等中找到对应的原生实现作为对照参考。【免费下载链接】elementorThe most advanced frontend drag drop page builder. Create high-end, pixel perfect websites at record speeds. Any theme, any page, any design.项目地址: https://gitcode.com/GitHub_Trending/el/elementor创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考