PluginProbe
Elementor Website Builder – more than just a page builder / 4.3.0-beta3
Elementor Website Builder – more than just a page builder v4.3.0-beta3
4.3.0-beta3 4.3.0-beta2 4.3.0-beta1 4.2.4 4.2.3 4.2.2 4.2.1 4.2.0 4.1.5 4.2.0-beta2 4.2.0-dev2 4.2.0-beta1 4.1.4 4.1.3 4.1.2 4.1.1 4.1.0 4.1.0-beta3 4.1.0-dev3 4.0.9 4.1.0-beta2 4.1.0-dev2 4.0.8 4.1.0-beta1 4.1.0-dev1 All 452 releases
← All changes | modules/atomic-widgets/module.php +258 -35 4.2.44.3.0-beta3 View file →
@@ -6,9 +6,18 @@
6 6 use Elementor\Core\Common\Modules\Ajax\Module as Ajax;
7 7 use Elementor\Core\Experiments\Manager as Experiments_Manager;
8 8 use Elementor\Elements_Manager;
9 9 use Elementor\Modules\AtomicWidgets\Ajax\Render_Element_Action;
10 +use Elementor\Modules\AtomicWidgets\DynamicTags\Dynamic_Prop_Type;
10 11 use Elementor\Modules\AtomicWidgets\DynamicTags\Dynamic_Tags_Module;
12 +use Elementor\Modules\AtomicWidgets\PlainResolvers\Plain_Resolvers_Registry;
13 +use Elementor\Modules\AtomicWidgets\PlainResolvers\Plain_Values_Resolver;
14 +use Elementor\Modules\AtomicWidgets\PlainResolvers\Resolvers\Boolean_Plain_Resolver;
15 +use Elementor\Modules\AtomicWidgets\PlainResolvers\Resolvers\Dynamic_Plain_Resolver;
16 +use Elementor\Modules\AtomicWidgets\PlainResolvers\Resolvers\Passthrough_Plain_Resolver;
17 +use Elementor\Modules\AtomicWidgets\PlainResolvers\Resolvers\Number_Plain_Resolver;
18 +use Elementor\Modules\AtomicWidgets\PlainResolvers\Resolvers\Size_Plain_Resolver;
19 +use Elementor\Modules\AtomicWidgets\PlainResolvers\Resolvers\String_Plain_Resolver;
11 20 use Elementor\Modules\AtomicWidgets\Elements\Atomic_Youtube\Atomic_Youtube;
12 21 use Elementor\Modules\AtomicWidgets\Elements\Div_Block\Div_Block;
13 22 use Elementor\Modules\AtomicWidgets\Elements\Flexbox\Flexbox;
14 23 use Elementor\Modules\AtomicWidgets\Elements\Grid\Grid;
@@ -17,8 +26,14 @@
17 26 use Elementor\Modules\AtomicWidgets\Elements\Atomic_Paragraph\Atomic_Paragraph;
18 27 use Elementor\Modules\AtomicWidgets\Elements\Atomic_Button\Atomic_Button;
19 28 use Elementor\Modules\AtomicWidgets\Elements\Atomic_Divider\Atomic_Divider;
20 29 use Elementor\Modules\AtomicWidgets\Elements\Atomic_Svg\Atomic_Svg;
30 +use Elementor\Modules\AtomicWidgets\Elements\Atomic_Accordion\Atomic_Accordion;
31 +use Elementor\Modules\AtomicWidgets\Elements\Atomic_Accordion\Atomic_Accordion_Item\Atomic_Accordion_Item;
32 +use Elementor\Modules\AtomicWidgets\Elements\Atomic_Accordion\Atomic_Accordion_Item_Content\Atomic_Accordion_Item_Content;
33 +use Elementor\Modules\AtomicWidgets\Elements\Atomic_Accordion\Atomic_Accordion_Item_Header\Atomic_Accordion_Item_Header;
34 +use Elementor\Modules\AtomicWidgets\Elements\Atomic_Accordion\Atomic_Accordion_Item_Icon\Atomic_Accordion_Item_Icon;
35 +use Elementor\Modules\AtomicWidgets\Elements\Atomic_Accordion\Atomic_Accordion_Item_Title\Atomic_Accordion_Item_Title;
21 36 use Elementor\Modules\AtomicWidgets\Elements\Atomic_Tabs\Atomic_Tabs\Atomic_Tabs;
22 37 use Elementor\Modules\AtomicWidgets\Elements\Atomic_Tabs\Atomic_Tabs_Menu\Atomic_Tabs_Menu;
23 38 use Elementor\Modules\AtomicWidgets\Elements\Atomic_Tabs\Atomic_Tab\Atomic_Tab;
24 39 use Elementor\Modules\AtomicWidgets\Elements\Atomic_Tabs\Atomic_Tabs_Content_Area\Atomic_Tabs_Content_Area;
@@ -31,12 +46,14 @@
31 46 use Elementor\Modules\AtomicWidgets\PropsResolver\Transformers\Image_Src_Transformer;
32 47 use Elementor\Modules\AtomicWidgets\PropsResolver\Transformers\Image_Transformer;
33 48 use Elementor\Modules\AtomicWidgets\PropsResolver\Transformers\Import\Image_Src_Import_Transformer;
34 49 use Elementor\Modules\AtomicWidgets\PropsResolver\Transformers\Import\Svg_Src_Import_Transformer;
50 +use Elementor\Modules\AtomicWidgets\PropsResolver\Transformers\Icon_Transformer;
35 51 use Elementor\Modules\AtomicWidgets\PropsResolver\Transformers\Svg_Src_Transformer;
36 52 use Elementor\Modules\AtomicWidgets\PropsResolver\Transformers\Import_Export_Plain_Transformer;
37 53 use Elementor\Modules\AtomicWidgets\PropsResolver\Transformers\Settings\Classes_Transformer;
38 54 use Elementor\Modules\AtomicWidgets\PropsResolver\Transformers\Settings\Date_Time_Transformer;
55 +use Elementor\Modules\AtomicWidgets\PropsResolver\Transformers\Settings\Escaped_Html_Transformer;
39 56 use Elementor\Modules\AtomicWidgets\PropsResolver\Transformers\Settings\Html_V2_Transformer;
40 57 use Elementor\Modules\AtomicWidgets\PropsResolver\Transformers\Settings\Html_V3_Transformer;
41 58 use Elementor\Modules\AtomicWidgets\PropsResolver\Transformers\Settings\Link_Transformer;
42 59 use Elementor\Modules\AtomicWidgets\PropsResolver\Transformers\Plain_Transformer;
@@ -82,8 +99,9 @@
82 99 use Elementor\Modules\AtomicWidgets\PropTypes\Time_Range_Prop_Type;
83 100 use Elementor\Modules\AtomicWidgets\PropTypes\Filters\Backdrop_Filter_Prop_Type;
84 101 use Elementor\Modules\AtomicWidgets\PropTypes\Filters\Filter_Prop_Type;
85 102 use Elementor\Modules\AtomicWidgets\PropTypes\Gradient_Color_Stop_Prop_Type;
103 +use Elementor\Modules\AtomicWidgets\PropTypes\Escaped_Html_Prop_Type;
86 104 use Elementor\Modules\AtomicWidgets\PropTypes\Html_V2_Prop_Type;
87 105 use Elementor\Modules\AtomicWidgets\PropTypes\Html_V3_Prop_Type;
88 106 use Elementor\Modules\AtomicWidgets\PropTypes\Layout_Direction_Prop_Type;
89 107 use Elementor\Modules\AtomicWidgets\PropTypes\Flex_Prop_Type;
@@ -90,8 +108,9 @@
90 108 use Elementor\Modules\AtomicWidgets\PropTypes\Link_Prop_Type;
91 109 use Elementor\Modules\AtomicWidgets\PropTypes\Classes_Prop_Type;
92 110 use Elementor\Modules\AtomicWidgets\PropTypes\Image_Prop_Type;
93 111 use Elementor\Modules\AtomicWidgets\PropTypes\Image_Src_Prop_Type;
112 +use Elementor\Modules\AtomicWidgets\PropTypes\Icon_Prop_Type;
94 113 use Elementor\Modules\AtomicWidgets\PropTypes\Svg_Src_Prop_Type;
95 114 use Elementor\Modules\AtomicWidgets\PropTypes\Dimensions_Prop_Type;
96 115 use Elementor\Modules\AtomicWidgets\PropTypes\Position_Prop_Type;
97 116 use Elementor\Modules\AtomicWidgets\PropTypes\Shadow_Prop_Type;
@@ -112,8 +131,13 @@
112 131 use Elementor\Modules\AtomicWidgets\Styles\Size_Constants;
113 132 use Elementor\Modules\AtomicWidgets\Styles\Style_Schema;
114 133 use Elementor\Modules\AtomicWidgets\CssConverter\Css_Converter_REST_API;
115 134 use Elementor\Modules\AtomicWidgets\Database\Atomic_Widgets_Database_Updater;
135 +use Elementor\Modules\AtomicWidgets\Elements\Atomic_Background_Video\Atomic_Background_Video;
136 +use Elementor\Modules\AtomicWidgets\Elements\Atomic_Background_Video\Atomic_Background_Video_Content\Atomic_Background_Video_Content;
137 +use Elementor\Modules\AtomicWidgets\Elements\Atomic_Background_Video\Atomic_Background_Video_Controls\Atomic_Background_Video_Controls;
138 +use Elementor\Modules\AtomicWidgets\Elements\Atomic_Background_Video\Atomic_Background_Video_Pause\Atomic_Background_Video_Pause;
139 +use Elementor\Modules\AtomicWidgets\Elements\Atomic_Background_Video\Atomic_Background_Video_Play\Atomic_Background_Video_Play;
116 140 use Elementor\Modules\AtomicWidgets\Elements\Atomic_Tabs\Atomic_Tab_Content\Atomic_Tab_Content;
117 141 use Elementor\Modules\AtomicWidgets\Elements\Atomic_Collection_Loop\Collection_Loop_Promotion;
118 142 use Elementor\Modules\AtomicWidgets\Elements\Atomic_Form\Atomic_Form;
119 143 use Elementor\Modules\AtomicWidgets\Elements\Atomic_Form\Atomic_Form_Promotion;
@@ -118,8 +142,12 @@
118 142 use Elementor\Modules\AtomicWidgets\Elements\Atomic_Form\Atomic_Form;
119 143 use Elementor\Modules\AtomicWidgets\Elements\Atomic_Form\Atomic_Form_Promotion;
120 144 use Elementor\Modules\AtomicWidgets\Elements\Atomic_Form\Form_Success_Message\Form_Success_Message;
121 145 use Elementor\Modules\AtomicWidgets\Elements\Atomic_Form\Form_Error_Message\Form_Error_Message;
146 +use Elementor\Modules\AtomicWidgets\Elements\Atomic_List\Atomic_List\Atomic_List;
147 +use Elementor\Modules\AtomicWidgets\Elements\Atomic_List\Atomic_List_Item\Atomic_List_Item;
148 +use Elementor\Modules\AtomicWidgets\Elements\Atomic_List\Atomic_List_Item_Content\Atomic_List_Item_Content;
149 +use Elementor\Modules\AtomicWidgets\Elements\Atomic_List\Atomic_List_Item_Marker\Atomic_List_Item_Marker;
122 150 use Elementor\Modules\AtomicWidgets\PropTypeMigrations\Migrations_Orchestrator;
123 151 use Elementor\Plugin;
124 152 use Elementor\Widgets_Manager;
125 153 use Elementor\Modules\AtomicWidgets\Library\Atomic_Widgets_Library;
@@ -128,8 +156,9 @@
128 156 use Elementor\Modules\AtomicWidgets\PropsResolver\Transformers\Settings\Time_Range_Transformer;
129 157 use Elementor\Modules\AtomicWidgets\PropsResolver\Transformers\Styles\Perspective_Origin_Transformer;
130 158 use Elementor\Modules\AtomicWidgets\PropTypes\Query_Prop_Type;
131 159 use Elementor\Modules\AtomicWidgets\PropTypes\Transform\Perspective_Origin_Prop_Type;
160 +use Elementor\Modules\AtomicWidgets\Utils\Atomic_Prop_Remap;
132 161 use Elementor\Modules\AtomicWidgets\Utils\Utils;
133 162 use Elementor\Modules\AtomicWidgets\Elements\Atomic_Self_Hosted_Video\Atomic_Self_Hosted_Video;
134 163 use Elementor\Modules\AtomicWidgets\PropsResolver\Transformers\Styles\Span_Transformer;
135 164 use Elementor\Modules\AtomicWidgets\PropsResolver\Transformers\Video_Src_Transformer;
@@ -134,8 +163,11 @@
134 163 use Elementor\Modules\AtomicWidgets\PropsResolver\Transformers\Styles\Span_Transformer;
135 164 use Elementor\Modules\AtomicWidgets\PropsResolver\Transformers\Video_Src_Transformer;
136 165 use Elementor\Modules\AtomicWidgets\PropTypes\Font_Family_Prop_Type;
137 166 use Elementor\Modules\AtomicWidgets\PropTypes\Span_Prop_Type;
167 +use Elementor\Modules\AtomicWidgets\PropTypes\Primitives\Boolean_Prop_Type;
168 +use Elementor\Modules\AtomicWidgets\PropTypes\Primitives\Number_Prop_Type;
169 +use Elementor\Modules\AtomicWidgets\PropTypes\Primitives\String_Prop_Type;
138 170 use Elementor\Modules\AtomicWidgets\PropTypes\Video_Src_Prop_Type;
139 171
140 172 if ( ! defined( 'ABSPATH' ) ) {
141 173 exit; // Exit if accessed directly.
@@ -142,22 +174,25 @@
142 174 }
143 175
144 176 class Module extends BaseModule {
145 177 const EXPERIMENT_NAME = 'e_atomic_elements';
146 - const ENFORCE_CAPABILITIES_EXPERIMENT = 'atomic_widgets_should_enforce_capabilities';
147 - const EXPERIMENT_EDITOR_MCP = 'editor_mcp';
178 + const EXPERIMENT_LIST = 'e_list';
179 + const EXPERIMENT_ICON_BUTTON = 'e_icon_button';
180 + const EXPERIMENT_ACCORDION = 'e_accordion';
181 + const EXPERIMENT_ICON_LIBRARY = 'e_svg_library';
148 182
149 183 const PACKAGES = [
150 184 'editor-canvas',
151 - 'editor-controls', // TODO: Need to be registered and not enqueued.
185 + 'editor-controls',
152 186 'editor-editing-panel',
153 - 'editor-elements', // TODO: Need to be registered and not enqueued.
154 - 'editor-props', // TODO: Need to be registered and not enqueued.
155 - 'editor-styles', // TODO: Need to be registered and not enqueued.
187 + 'editor-elements',
188 + 'editor-props',
189 + 'editor-styles',
156 190 'editor-styles-repository',
157 191 'editor-interactions',
158 192 'editor-templates',
159 193 'editor-design-system',
194 + 'editor-site-settings',
160 195 ];
161 196
162 197 public function get_name() {
163 198 return 'atomic-widgets';
@@ -169,14 +204,19 @@
169 204 if ( ! self::is_active() ) {
170 205 return;
171 206 }
172 207
173 - $this->register_experimental_features();
208 + $this->register_list_experiment();
209 + $this->register_icon_button_experiment();
210 + $this->register_accordion_experiment();
211 + $this->register_icon_library_experiment();
212 +
174 213 $this->register_hooks();
175 214
176 215 add_filter( 'elementor/editor/v2/packages', fn ( $packages ) => $this->add_packages( $packages ) );
177 216 add_filter( 'elementor/editor/localize_settings', fn ( $settings ) => $this->add_styles_schema( $settings ) );
178 217 add_filter( 'elementor/editor/localize_settings', fn ( $settings ) => $this->add_supported_units( $settings ) );
218 + add_filter( 'elementor/editor/localize_settings', fn ( $settings ) => $this->move_background_video_to_panel_end( $settings ) );
179 219 add_filter( 'elementor/widgets/register', fn ( Widgets_Manager $widgets_manager ) => $this->register_widgets( $widgets_manager ) );
180 220 add_filter( 'elementor/usage/elements/element_title', fn ( $title, $type ) => $this->get_element_usage_name( $title, $type ), 10, 2 );
181 221
182 222 add_action( 'elementor/elements/elements_registered', fn ( $elements_manager ) => $this->register_elements( $elements_manager ) );
@@ -191,8 +231,10 @@
191 231 add_action( 'elementor/atomic-widgets/settings/transformers/register', fn ( $transformers ) => $this->register_settings_transformers( $transformers ) );
192 232 add_action( 'elementor/atomic-widgets/styles/transformers/register', fn ( $transformers ) => $this->register_styles_transformers( $transformers ) );
193 233 add_action( 'elementor/atomic-widgets/import/transformers/register', fn ( $transformers ) => $this->register_import_transformers( $transformers ) );
194 234 add_action( 'elementor/atomic-widgets/export/transformers/register', fn ( $transformers ) => $this->register_export_transformers( $transformers ) );
235 + add_action( 'elementor/atomic-widgets/plain/transformers/register', fn ( $transformers ) => $this->register_plain_transformers( $transformers ) );
236 + add_action( 'elementor/atomic-widgets/settings-resolvers/register', fn ( $registry ) => $this->register_settings_resolvers( $registry ) );
195 237 add_action( 'elementor/editor/templates/panel/category', fn () => $this->render_panel_category_chip() );
196 238 }
197 239
198 240 public static function get_experimental_data() {
@@ -209,49 +251,58 @@
209 251 ],
210 252 ];
211 253 }
212 254
213 - private function register_experimental_features() {
255 + /**
256 + * Dev-only gate that keeps the V4 List element off trunk while it is built across
257 + * several pull requests. Remove it once the element passes QA.
258 + */
259 + private function register_list_experiment() {
214 260 Plugin::$instance->experiments->add_feature( [
215 - 'name' => 'e_indications_popover',
216 - 'title' => esc_html__( 'V4 Indications Popover', 'elementor' ),
217 - 'description' => esc_html__( 'Enable V4 Indication Popovers', 'elementor' ),
261 + 'name' => self::EXPERIMENT_LIST,
262 + 'title' => esc_html__( 'List', 'elementor' ),
263 + 'description' => esc_html__( 'Enable the V4 List element.', 'elementor' ),
218 264 'hidden' => true,
219 265 'default' => Experiments_Manager::STATE_INACTIVE,
266 + 'release_status' => Experiments_Manager::RELEASE_STATUS_DEV,
220 267 ] );
268 + }
221 269
270 + /**
271 + * Dev-only gate that keeps the V4 Icon Button element off trunk while it is built across
272 + * several pull requests. Remove it once the element passes QA.
273 + */
274 + private function register_icon_button_experiment() {
222 275 Plugin::$instance->experiments->add_feature( [
223 - 'name' => self::ENFORCE_CAPABILITIES_EXPERIMENT,
224 - 'title' => esc_html__( 'Enforce atomic widgets capabilities', 'elementor' ),
225 - 'description' => esc_html__( 'Enforce atomic widgets capabilities.', 'elementor' ),
276 + 'name' => self::EXPERIMENT_ICON_BUTTON,
277 + 'title' => esc_html__( 'Icon Button', 'elementor' ),
278 + 'description' => esc_html__( 'Enable the V4 Icon Button element.', 'elementor' ),
226 279 'hidden' => true,
227 - 'default' => Experiments_Manager::STATE_ACTIVE,
280 + 'default' => Experiments_Manager::STATE_INACTIVE,
228 281 'release_status' => Experiments_Manager::RELEASE_STATUS_DEV,
229 282 ] );
283 + }
230 284
231 - Plugin::$instance->experiments->add_feature([
232 - 'name' => self::EXPERIMENT_EDITOR_MCP,
233 - 'title' => esc_html__( 'Editor MCP for atomic widgets', 'elementor' ),
234 - 'description' => esc_html__( 'Editor MCP for atomic widgets.', 'elementor' ),
285 + private function register_accordion_experiment() {
286 + Plugin::$instance->experiments->add_feature( [
287 + 'name' => self::EXPERIMENT_ACCORDION,
288 + 'title' => esc_html__( 'Accordion', 'elementor' ),
289 + 'description' => esc_html__( 'Enable the V4 Accordion element.', 'elementor' ),
235 290 'hidden' => true,
236 - 'default' => Experiments_Manager::STATE_ACTIVE,
291 + 'default' => Experiments_Manager::STATE_INACTIVE,
237 292 'release_status' => Experiments_Manager::RELEASE_STATUS_DEV,
238 - ]);
293 + ] );
294 + }
239 295
240 - Plugin::$instance->experiments->add_feature([
241 - 'name' => Migrations_Orchestrator::EXPERIMENT_BC_MIGRATIONS,
242 - 'title' => esc_html__( 'Backward compatibility migrations', 'elementor' ),
243 - 'description' => esc_html__( 'Enable automatic prop type migrations for atomic widgets', 'elementor' ),
296 + private function register_icon_library_experiment() {
297 + Plugin::$instance->experiments->add_feature( [
298 + 'name' => self::EXPERIMENT_ICON_LIBRARY,
299 + 'title' => esc_html__( 'SVG Library', 'elementor' ),
300 + 'description' => esc_html__( 'Enable SVG library support in the SVG element.', 'elementor' ),
244 301 'hidden' => true,
245 - 'default' => Experiments_Manager::STATE_ACTIVE,
302 + 'default' => Experiments_Manager::STATE_INACTIVE,
246 303 'release_status' => Experiments_Manager::RELEASE_STATUS_DEV,
247 - ]);
248 -
249 - // When a new feature affects settings or style schema, global class, interactions, variable, etc
250 - // anything in need of addressing migration for BC purposes, add it here.
251 - $migrations_affecting_features = [];
252 -
253 - Migrations_Orchestrator::register_affecting_feature_flag_hooks( $migrations_affecting_features );
304 + ] );
254 305 }
255 306
256 307 private function register_hooks() {
257 308 Dynamic_Tags_Module::instance()->register_hooks();
@@ -260,13 +311,36 @@
260 311 ( new Atomic_Widget_Styles() )->register_hooks();
261 312 ( new Atomic_Widget_Base_Styles() )->register_hooks();
262 313 ( new Atomic_Widgets_Library() )->register_hooks();
263 314 ( new Atomic_Import_Export() )->register_hooks();
315 + Atomic_Prop_Remap::register_builtin_handlers();
264 316 ( new Atomic_Widgets_Database_Updater() )->register();
265 317 ( new Css_Converter_REST_API() )->register_hooks();
266 318 ( new Pro_Promotion_Data_Preservation() )->register_hooks();
319 +
320 + add_filter( 'elementor/allowed_html_wrapper_tags', [ $this, 'add_inline_html_tags' ] );
267 321 }
268 322
323 + public function add_inline_html_tags( array $tags ): array {
324 + return array_merge( $tags, [
325 + 'b',
326 + 'i',
327 + 'em',
328 + 'u',
329 + 'ul',
330 + 'ol',
331 + 'li',
332 + 'blockquote',
333 + 'del',
334 + 'br',
335 + 'span',
336 + 'strong',
337 + 'sup',
338 + 'sub',
339 + 's',
340 + ] );
341 + }
342 +
269 343 private function add_packages( $packages ) {
270 344 return array_merge( $packages, self::PACKAGES );
271 345 }
272 346
@@ -287,8 +361,34 @@
287 361
288 362 return $settings;
289 363 }
290 364
365 + /**
366 + * Background Video is a container element, so core lists it among the atomic *elements*, which
367 + * always precede the atomic *widgets* in the widgets panel — `Document::get_config()` builds the
368 + * panel list as `array_merge( $elements_config, $widget_types_config )`, and the panel renders
369 + * tiles in that insertion order (there is no per-tile ordering field). The spec requires the tile
370 + * at the very bottom of the Atomic Elements section, after Divider and Video (both widgets), so we
371 + * re-append its config last in the initial document's widget list that seeds the editor cache.
372 + */
373 + private function move_background_video_to_panel_end( $settings ) {
374 + $type = Atomic_Background_Video::get_element_type();
375 +
376 + if ( empty( $settings['initial_document']['widgets'][ $type ] ) ) {
377 + return $settings;
378 + }
379 +
380 + $widgets = $settings['initial_document']['widgets'];
381 + $config = $widgets[ $type ];
382 +
383 + unset( $widgets[ $type ] );
384 + $widgets[ $type ] = $config;
385 +
386 + $settings['initial_document']['widgets'] = $widgets;
387 +
388 + return $settings;
389 + }
390 +
291 391 private function register_widgets( Widgets_Manager $widgets_manager ) {
292 392 $widgets_manager->register( new Atomic_Heading() );
293 393 $widgets_manager->register( new Atomic_Image() );
294 394 $widgets_manager->register( new Atomic_Paragraph() );
@@ -298,8 +398,21 @@
298 398 $widgets_manager->register( new Atomic_Divider() );
299 399 $widgets_manager->register( new Atomic_Self_Hosted_Video() );
300 400 }
301 401
402 + private function register_list_element( Elements_Manager $elements_manager ) {
403 + if ( ! Plugin::$instance->experiments->is_feature_active( self::EXPERIMENT_LIST ) ) {
404 + return $this;
405 + }
406 +
407 + $elements_manager->register_element_type( new Atomic_List() );
408 + $elements_manager->register_element_type( new Atomic_List_Item() );
409 + $elements_manager->register_element_type( new Atomic_List_Item_Marker() );
410 + $elements_manager->register_element_type( new Atomic_List_Item_Content() );
411 +
412 + return $this;
413 + }
414 +
302 415 private function register_elements( Elements_Manager $elements_manager ) {
303 416 $elements_manager->register_element_type( new Div_Block() );
304 417 $elements_manager->register_element_type( new Flexbox() );
305 418 $elements_manager->register_element_type( new Grid() );
@@ -309,8 +422,23 @@
309 422 $elements_manager->register_element_type( new Atomic_Tab() );
310 423 $elements_manager->register_element_type( new Atomic_Tabs_Content_Area() );
311 424 $elements_manager->register_element_type( new Atomic_Tab_Content() );
312 425
426 + $this->register_list_element( $elements_manager );
427 +
428 + $elements_manager->register_element_type( new Atomic_Accordion() );
429 + $elements_manager->register_element_type( new Atomic_Accordion_Item() );
430 + $elements_manager->register_element_type( new Atomic_Accordion_Item_Header() );
431 + $elements_manager->register_element_type( new Atomic_Accordion_Item_Title() );
432 + $elements_manager->register_element_type( new Atomic_Accordion_Item_Icon() );
433 + $elements_manager->register_element_type( new Atomic_Accordion_Item_Content() );
434 +
435 + $elements_manager->register_element_type( new Atomic_Background_Video() );
436 + $elements_manager->register_element_type( new Atomic_Background_Video_Content() );
437 + $elements_manager->register_element_type( new Atomic_Background_Video_Controls() );
438 + $elements_manager->register_element_type( new Atomic_Background_Video_Play() );
439 + $elements_manager->register_element_type( new Atomic_Background_Video_Pause() );
440 +
313 441 if ( \Elementor\Utils::has_pro() && Plugin::$instance->experiments->is_feature_active( 'e_pro_atomic_form' ) ) {
314 442 $elements_manager->register_element_type( new Atomic_Form() );
315 443 $elements_manager->register_element_type( new Form_Success_Message() );
316 444 $elements_manager->register_element_type( new Form_Error_Message() );
@@ -328,8 +456,9 @@
328 456 $transformers->register( Classes_Prop_Type::get_key(), new Classes_Transformer() );
329 457 $transformers->register( Image_Prop_Type::get_key(), new Image_Transformer() );
330 458 $transformers->register( Image_Src_Prop_Type::get_key(), new Image_Src_Transformer() );
331 459 $transformers->register( Svg_Src_Prop_Type::get_key(), new Svg_Src_Transformer() );
460 + $transformers->register( Icon_Prop_Type::get_key(), new Icon_Transformer() );
332 461 $transformers->register( Video_Src_Prop_Type::get_key(), new Video_Src_Transformer() );
333 462 $transformers->register( Link_Prop_Type::get_key(), new Link_Transformer() );
334 463 $transformers->register( Query_Prop_Type::get_key(), new Query_Transformer() );
335 464 $transformers->register( Attributes_Prop_Type::get_key(), new Attributes_Transformer() );
@@ -337,8 +466,9 @@
337 466 $transformers->register( Date_Range_Prop_Type::get_key(), new Date_Range_Transformer() );
338 467 $transformers->register( Time_Range_Prop_Type::get_key(), new Time_Range_Transformer() );
339 468 $transformers->register( Html_V2_Prop_Type::get_key(), new Html_V2_Transformer() );
340 469 $transformers->register( Html_V3_Prop_Type::get_key(), new Html_V3_Transformer() );
470 + $transformers->register( Escaped_Html_Prop_Type::get_key(), new Escaped_Html_Transformer() );
341 471 }
342 472
343 473 private function register_styles_transformers( Transformers_Registry $transformers ) {
344 474 $transformers->register_fallback( new Plain_Transformer() );
@@ -431,12 +561,47 @@
431 561 $transformers->register( Image_Src_Prop_Type::get_key(), new Image_Src_Export_Transformer() );
432 562 $transformers->register( Svg_Src_Prop_Type::get_key(), new Svg_Src_Export_Transformer() );
433 563 }
434 564
565 + public function register_plain_transformers( Transformers_Registry $transformers ) {
566 + $transformers->register_fallback( new Plain_Transformer() );
567 + }
568 +
569 + private function register_settings_resolvers( Plain_Resolvers_Registry $registry ): void {
570 + $registry->register_fallback( new Passthrough_Plain_Resolver() );
571 + $registry->register( Number_Prop_Type::get_key(), new Number_Plain_Resolver() );
572 + $registry->register( Boolean_Prop_Type::get_key(), new Boolean_Plain_Resolver() );
573 + $registry->register( String_Prop_Type::get_key(), new String_Plain_Resolver() );
574 + $registry->register( Size_Prop_Type::get_key(), new Size_Plain_Resolver() );
575 + }
576 +
577 + public function get_settings_plain_values_resolver(): Plain_Values_Resolver {
578 + static $resolver = null;
579 +
580 + if ( null !== $resolver ) {
581 + return $resolver;
582 + }
583 +
584 + $registry = new Plain_Resolvers_Registry();
585 +
586 + do_action( 'elementor/atomic-widgets/settings-resolvers/register', $registry );
587 +
588 + $resolver = new Plain_Values_Resolver( $registry );
589 +
590 + $registry->register( Dynamic_Prop_Type::get_key(), new Dynamic_Plain_Resolver( $resolver ) );
591 + $registry->register( Escaped_Html_Prop_Type::get_key(), new String_Plain_Resolver() );
592 +
593 + return $resolver;
594 + }
595 +
435 596 public static function is_active(): bool {
436 597 return Plugin::$instance->experiments->is_feature_active( self::EXPERIMENT_NAME );
437 598 }
438 599
600 + public static function is_svg_library_active(): bool {
601 + return Plugin::$instance->experiments->is_feature_active( self::EXPERIMENT_ICON_LIBRARY );
602 + }
603 +
439 604 private function get_element_usage_name( $title, $type ) {
440 605 $element_instance = Plugin::$instance->elements_manager->get_element_types( $type );
441 606 $widget_instance = Plugin::$instance->widgets_manager->get_widget_types( $type );
442 607
@@ -465,10 +630,10 @@
465 630 }
466 631
467 632 private function render_panel_category_chip() {
468 633 ?><# if ( 'v4-elements' === name ) { #>
469 - <span class="elementor-panel-heading-category-chip">
470 - <?php echo esc_html__( 'New', 'elementor' ); ?><i class="eicon-info"></i>
634 + <span class="elementor-panel-heading-category-chip" aria-label="<?php echo esc_attr__( 'New', 'elementor' ); ?>">
635 + <i class="eicon-info" aria-hidden="true"></i>
471 636 <span class="e-promotion-react-wrapper" data-promotion="v4_chip"></span>
472 637 </span>
473 638 <# } #><?php
474 639 }
@@ -483,8 +648,66 @@
483 648 '.e-heading-base a, .e-paragraph-base a { all: unset; cursor: pointer; }',
484 649 'form[data-element_type="e-form"].form-state-success [data-element_type="e-form-success-message"],',
485 650 'form[data-element_type="e-form"].form-state-error [data-element_type="e-form-error-message"]',
486 651 '{ display: block; }',
652 + // Base style is `display: none`. In the editor, still show the slot when it is
653 + // selected (navigator / canvas), when a nested child is selected, or when empty
654 + // so the plus/drop target has a hit area. Frontend and unselected Normal stay hidden.
655 + '.elementor-edit-mode [data-element_type="e-form-success-message"]:is(.elementor-element-editable, :has(.elementor-element-editable), :has(> .elementor-empty-view)),',
656 + '.elementor-edit-mode [data-element_type="e-form-error-message"]:is(.elementor-element-editable, :has(.elementor-element-editable), :has(> .elementor-empty-view))',
657 + '{ display: block; }',
658 + '.e-background-video { position: relative; overflow: hidden; }',
659 + '.e-background-video__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; z-index: 0; }',
660 + '.e-background-video__content { position: relative; z-index: 1; flex: 1 1 auto; }',
661 + // Editor empty state: content is a nested flex child inside padded root (overflow:hidden).
662 + // Let content shrink to the inner flex area, then grow the empty-view to fill it.
663 + '.elementor-edit-mode .e-background-video__content.e-atomic-element:has(> .elementor-empty-view) { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }',
664 + '.elementor-edit-mode .e-background-video__content.e-atomic-element:has(> .elementor-empty-view) > .elementor-empty-view.elementor-empty-view { position: relative; flex: 1 1 auto; min-height: 120px; height: auto; width: 100%; }',
665 + '.elementor-edit-mode .e-background-video__content.e-atomic-element:has(> .elementor-empty-view) > .elementor-empty-view > .elementor-first-add { position: absolute; inset: 0; width: 100%; height: 100%; }',
666 + '.e-background-video__controls { z-index: 2; }',
667 + '.e-background-video__play, .e-background-video__pause { appearance: none; -webkit-appearance: none; }',
668 + '.e-background-video.e-background-video--playing .e-background-video__play { display: none; }',
669 + '.e-background-video.e-background-video--paused .e-background-video__pause { display: none; }',
670 + // No state pinned (editor "States" unselected): hide the controls wrapper and both buttons. The
671 + // two `:not` guards lift specificity above the atomic base style so `display: none` wins. The
672 + // button rules are kept because the buttons can be reparented out of the wrapper. On the
673 + // frontend Alpine always sets one of the state classes from real playback, so the controls show
674 + // there with exactly one button.
675 + '.e-background-video:not(.e-background-video--playing):not(.e-background-video--paused) .e-background-video__controls,',
676 + '.e-background-video:not(.e-background-video--playing):not(.e-background-video--paused) .e-background-video__play,',
677 + '.e-background-video:not(.e-background-video--playing):not(.e-background-video--paused) .e-background-video__pause { display: none; }',
678 + // Accordion: `<summary>` already loses its native marker via `display: flex` on the header's
679 + // base style in Chrome/Firefox, but Safari renders `::-webkit-details-marker` regardless of
680 + // `display`, so a stray triangle would sit next to our chevron unless the pseudo-element is
681 + // killed explicitly. `list-style: none` is kept for completeness (browsers that box the
682 + // marker as a list-item marker box), the `::-webkit-details-marker` rule is what actually
683 + // fixes Safari.
684 + '.e-accordion-item-header-base { list-style: none; }',
685 + '.e-accordion-item-header-base::-webkit-details-marker { display: none; }',
686 + // Animated expand/collapse via `::details-content` (block-size 0 -> auto) needs
687 + // `interpolate-size: allow-keywords` on the <details> element to let `block-size: auto`
688 + // participate in the transition. Graceful degradation is deliberate here, but the two failure
689 + // modes are different: `interpolate-size` is a real CSS property with a valid selector
690 + // (`.e-accordion-item-base`), so that rule always PARSES everywhere — an unsupporting browser
691 + // just drops the one unknown *declaration* inside it (inert on its own; harmless). The two
692 + // `::details-content` rules are different: `::details-content` is an unrecognised
693 + // pseudo-element there, which invalidates the *whole selector*, so the *entire rule* is
694 + // dropped, not just a declaration. That whole-rule drop is what structurally guarantees
695 + // "collapse to 0" and "expand on [open]" can never apply one without the other — both live
696 + // behind the identical `::details-content` requirement, so an unsupporting browser parses
697 + // neither and simply keeps the browser's native <details> toggle (content already shown/hidden
698 + // correctly without any CSS from us): an instant toggle, never a silently blanked panel.
699 + '.e-accordion-item-base { interpolate-size: allow-keywords; }',
700 + '.e-accordion-item-base::details-content {',
701 + 'block-size: 0; overflow: hidden;',
702 + 'transition: block-size .3s ease, content-visibility .3s ease allow-discrete;',
703 + '}',
704 + '.e-accordion-item-base[open]::details-content { block-size: auto; }',
705 + // Accordion icon slot: see docs/accordion_v4_icon_slot_behaviors.md
706 + '.e-accordion-item-icon-base.e-accordion-item-icon-base .e-svg-base { width: auto; height: 100%; max-width: 100%; }',
707 + '.e-accordion-item-icon-base.e-accordion-item-icon-base .e-svg-base svg { width: auto !important; }',
708 + '.e-accordion-item-icon-base svg { transition: transform .3s ease; }',
709 + '.e-accordion-item-base[open] > summary .e-accordion-item-icon-base svg { transform: rotate(180deg); }',
487 710 ] );
488 711 wp_add_inline_style( 'elementor-frontend', $inline_css );
489 712 wp_add_inline_style( 'elementor-editor', $inline_css );
490 713 }