elementor / modules / atomic-widgets / styles / style-schema.php

style-schema.php in Elementor Website Builder – more than just a page builder 4.3.0-beta3, at modules/atomic-widgets/styles/style-schema.php

451 lines 17.5 KB

Raw Download Zip

1	<?php
2
3	namespace Elementor\Modules\AtomicWidgets\Styles;
4
5	use Elementor\Modules\AtomicWidgets\DynamicTags\Dynamic_Prop_Types_Mapping;
6	use Elementor\Modules\AtomicWidgets\PropTypes\Background_Image_Overlay_Prop_Type;
7	use Elementor\Modules\AtomicWidgets\PropTypes\Background_Overlay_Prop_Type;
8	use Elementor\Modules\AtomicWidgets\PropTypes\Background_Prop_Type;
9	use Elementor\Modules\AtomicWidgets\PropTypes\Box_Shadow_Prop_Type;
10	use Elementor\Modules\AtomicWidgets\PropTypes\Border_Radius_Prop_Type;
11	use Elementor\Modules\AtomicWidgets\PropTypes\Border_Width_Prop_Type;
12	use Elementor\Modules\AtomicWidgets\PropTypes\Color_Prop_Type;
13	use Elementor\Modules\AtomicWidgets\PropTypes\Dimensions_Prop_Type;
14	use Elementor\Modules\AtomicWidgets\PropTypes\Font_Family_Prop_Type;
15	use Elementor\Modules\AtomicWidgets\PropTypes\Filters\Backdrop_Filter_Prop_Type;
16	use Elementor\Modules\AtomicWidgets\PropTypes\Filters\Filter_Prop_Type;
17	use Elementor\Modules\AtomicWidgets\PropTypes\Layout_Direction_Prop_Type;
18	use Elementor\Modules\AtomicWidgets\PropTypes\Position_Prop_Type;
19	use Elementor\Modules\AtomicWidgets\PropTypes\Primitives\Number_Prop_Type;
20	use Elementor\Modules\AtomicWidgets\PropTypes\Grid_Track_Size_Prop_Type;
21	use Elementor\Modules\AtomicWidgets\PropTypes\Size_Prop_Type;
22	use Elementor\Modules\AtomicWidgets\PropTypes\Primitives\String_Prop_Type;
23	use Elementor\Modules\AtomicWidgets\PropTypes\Stroke_Prop_Type;
24	use Elementor\Modules\AtomicWidgets\PropTypes\Transform\Transform_Prop_Type;
25	use Elementor\Modules\AtomicWidgets\PropTypes\Transition_Prop_Type;
26	use Elementor\Modules\AtomicWidgets\PropTypes\Union_Prop_Type;
27	use Elementor\Modules\AtomicWidgets\PropTypes\Flex_Prop_Type;
28	use Elementor\Modules\AtomicWidgets\PropDependencies\Manager as Dependency_Manager;
29	use Elementor\Modules\AtomicWidgets\PropTypes\Span_Prop_Type;
30
31	if ( ! defined( 'ABSPATH' ) ) {
32	exit; // Exit if accessed directly.
33	}
34
35	class Style_Schema {
36	public static function get() {
37	return apply_filters( 'elementor/atomic-widgets/styles/schema', static::get_style_schema() );
38	}
39
40	public static function get_style_schema(): array {
41	return array_merge(
42	self::get_size_props(),
43	self::get_position_props(),
44	self::get_typography_props(),
45	self::get_spacing_props(),
46	self::get_border_props(),
47	self::get_background_props(),
48	self::get_effects_props(),
49	self::get_layout_props(),
50	self::get_alignment_props(),
51	self::get_special_props(),
52	);
53	}
54
55	private static function get_size_props() {
56	return [
57	'width' => Size_Prop_Type::make()->description( 'The width of the element' ),
58	'height' => Size_Prop_Type::make()->description( 'The height of the element' ),
59	'min-width' => Size_Prop_Type::make()->description( 'The minimum width of the element' ),
60	'min-height' => Size_Prop_Type::make()->description( 'The minimum height of the element' ),
61	'max-width' => Size_Prop_Type::make()->description( 'The maximum width of the element' ),
62	'max-height' => Size_Prop_Type::make()->description( 'The maximum height of the element' ),
63	'overflow' => String_Prop_Type::make()->enum( [
64	'visible',
65	'hidden',
66	'auto',
67	] )->description( 'The overflow CSS property. CSS values: visible, hidden, auto' ),
68	'aspect-ratio' => String_Prop_Type::make()->description( 'Equivalent to CSS aspect-ration property' ),
69	'object-fit' => String_Prop_Type::make()->enum( [
70	'fill',
71	'cover',
72	'contain',
73	'none',
74	'scale-down',
75	] )->description( 'The object-fit CSS. CSS values: fill, cover, contain, none, scale-down' ),
76	'object-position' => Union_Prop_Type::make()
77	->add_prop_type( String_Prop_Type::make()->enum( Position_Prop_Type::get_position_enum_values() ) )
78	->add_prop_type( Position_Prop_Type::make() )
79	->set_dependencies(
80	Dependency_Manager::make( Dependency_Manager::RELATION_AND )
81	->where( [
82	'operator' => 'ne',
83	'path' => [ 'object-fit' ],
84	'value' => 'fill',
85	] )
86	->where( [
87	'operator' => 'exists',
88	'path' => [ 'object-fit' ],
89	] )
90	->get()
91	),
92	];
93	}
94
95	private static function get_position_props() {
96	$non_static_dependency = Dependency_Manager::make( Dependency_Manager::RELATION_AND )
97	->where( [
98	'operator' => 'exists',
99	'path' => [ 'position' ],
100	] )
101	->where( [
102	'operator' => 'ne',
103	'path' => [ 'position' ],
104	'value' => 'static',
105	] )
106	->get();
107
108	return [
109	'position' => String_Prop_Type::make()->enum( [
110	'static',
111	'relative',
112	'absolute',
113	'fixed',
114	'sticky',
115	] )->description( 'The CSS position property specifies the type of positioning method used for an element (static, relative, absolute, fixed, or sticky).' ),
116	'inset-block-start' => Size_Prop_Type::make()
117	->description( 'Size PropType for the inset-block-start CSS property' )
118	->set_dependencies( $non_static_dependency ),
119	'inset-inline-end' => Size_Prop_Type::make()
120	->description( 'Size PropType for the inset-inline-end CSS property' )
121	->set_dependencies( $non_static_dependency ),
122	'inset-block-end' => Size_Prop_Type::make()
123	->description( 'Size PropType for the inset-block-end CSS property' )
124	->set_dependencies( $non_static_dependency ),
125	'inset-inline-start' => Size_Prop_Type::make()
126	->description( 'Size PropType for the inset-inline-start CSS property' )
127	->set_dependencies( $non_static_dependency ),
128	'z-index' => Number_Prop_Type::make()
129	->description( 'The z-index CSS property sets the z-order of a positioned element and its descendants or flex items. It specifies the stack order of elements.' ),
130	'scroll-margin-top' => Size_Prop_Type::make()->units( Size_Constants::anchor_offset() ),
131	];
132	}
133
134	private static function get_typography_props() {
135	return [
136	'font-family' => Font_Family_Prop_Type::make()
137	->description( 'The font family of the text content.' ),
138	'font-weight' => String_Prop_Type::make()->enum( [
139	'100',
140	'200',
141	'300',
142	'400',
143	'500',
144	'600',
145	'700',
146	'800',
147	'900',
148	'normal',
149	'bold',
150	'bolder',
151	'lighter',
152	] )
153	->description( 'The weight (or boldness) of the font. Values should match css font-weight specifications.' ),
154	'font-size' => Size_Prop_Type::make()->units( Size_Constants::typography() )->description( 'The font size in Size PropType Format' ),
155	'color' => Color_Prop_Type::make()
156	->description( 'The text color, specified as a hex code, rgb(a), hsl(a), or a standard css color name.' ),
157	'letter-spacing' => Size_Prop_Type::make()->units( Size_Constants::typography() )->description( 'The spacing between letters in Size PropType format' ),
158	'word-spacing' => Size_Prop_Type::make()->units( Size_Constants::typography() )->description( 'The spacing between words in Size PropType format' ),
159	'column-count' => Number_Prop_Type::make()->description( 'The number of columns the text content should be divided into.' ),
160	'column-gap' => Size_Prop_Type::make()
161	->set_dependencies(
162	Dependency_Manager::make()
163	->where( [
164	'operator' => 'gte',
165	'path' => [ 'column-count' ],
166	'value' => 1,
167	] )
168	->get()
169	),
170	'line-height' => Size_Prop_Type::make()->units( Size_Constants::typography() )->description( 'The line height of the text content in Size PropType format' ),
171	'text-align' => String_Prop_Type::make()->enum( [
172	'start',
173	'center',
174	'end',
175	'justify',
176	] )
177	->description( 'The horizontal alignment of the text content. Allowed values: start, center, end, justify.' ),
178	'font-style' => String_Prop_Type::make()->enum( [
179	'normal',
180	'italic',
181	'oblique',
182	] )
183	->description( 'The font style of the text content. CSS values: normal, italic, oblique' ),
184	// TODO: validate text-decoration in more specific way [EDS-524]
185	'text-decoration' => String_Prop_Type::make()
186	->description( 'The text decoration style. CSS values like: none, underline, overline, line-through, blink, etc.' ),
187	'text-transform' => String_Prop_Type::make()->enum( [
188	'none',
189	'capitalize',
190	'uppercase',
191	'lowercase',
192	] )
193	->description( 'Controls the capitalization of text. CSS values: none, capitalize, uppercase, lowercase' ),
194	'direction' => String_Prop_Type::make()->enum( [
195	'ltr',
196	'rtl',
197	] )->description( 'The text direction. CSS values: ltr (left to right), rtl (right to left)' ),
198	'stroke' => Stroke_Prop_Type::make(),
199	'all' => String_Prop_Type::make()->enum( [
200	'initial',
201	'inherit',
202	'unset',
203	'revert',
204	'revert-layer',
205	] )->description( 'The all CSS property. CSS values: initial, inherit, unset, revert, revert-layer' ),
206	'cursor' => String_Prop_Type::make()->enum( [
207	'pointer',
208	] )
209	->description( 'The type of cursor to be displayed when pointing over the element. E.g., pointer.' ),
210	];
211	}
212
213	private static function get_spacing_props() {
214	return [
215	'padding' => Union_Prop_Type::make()
216	->add_prop_type( Dimensions_Prop_Type::make_with_units( Size_Constants::spacing() ) )
217	->add_prop_type(
218	Size_Prop_Type::make()
219	->units( Size_Constants::spacing() )
220	->description( 'Padding css in Size PropType format' )
221	),
222	'margin' => Union_Prop_Type::make()
223	->add_prop_type( Dimensions_Prop_Type::make_with_units( Size_Constants::spacing_margin() ) )
224	->add_prop_type(
225	Size_Prop_Type::make()
226	->units( Size_Constants::spacing_margin() )
227	->description( 'Margin css in Size PropType format' )
228	),
229	];
230	}
231
232	private static function get_border_props() {
233	return [
234	'border-radius' => Union_Prop_Type::make()
235	->add_prop_type( Border_Radius_Prop_Type::make() )
236	->add_prop_type( Size_Prop_Type::make()->units( Size_Constants::border() ) ),
237	'border-width' => Union_Prop_Type::make()
238	->add_prop_type( Border_Width_Prop_Type::make() )
239	->add_prop_type( Size_Prop_Type::make()->units( Size_Constants::border() ) ),
240	'border-color' => Color_Prop_Type::make()->description( 'The border color, specified as a hex code, rgb(a), hsl(a), or a standard css color name.' ),
241	'border-style' => String_Prop_Type::make()->enum( [
242	'none',
243	'hidden',
244	'dotted',
245	'dashed',
246	'solid',
247	'double',
248	'groove',
249	'ridge',
250	'inset',
251	'outset',
252	] )
253	->description( 'The border style in CSS values' ),
254	'outline-width' => Size_Prop_Type::make()
255	->units( Size_Constants::border() )
256	->description( 'The width of the outline in Size PropType format' ),
257	'outline-color' => Color_Prop_Type::make()->description( 'The color of the outline, specified as a hex code, rgb(a), hsl(a), or a standard css color name.' ),
258	'outline-style' => String_Prop_Type::make()->enum( [
259	'none',
260	'hidden',
261	'dotted',
262	'dashed',
263	'solid',
264	'double',
265	'groove',
266	'ridge',
267	'inset',
268	'outset',
269	] )->description( 'The outline style in CSS values' ),
270	'outline-offset' => Size_Prop_Type::make()->units( Size_Constants::border() )->description( 'The offset of the outline, specified as a length in Size PropType format' ),
271
272	];
273	}
274
275	private static function get_background_props() {
276	// Background image overlay as an exception
277	$background_prop_type = Background_Prop_Type::make();
278	$bg_overlay_prop_type = $background_prop_type->get_shape_field( Background_Overlay_Prop_Type::get_key() );
279	$bg_image_overlay_prop_type = $bg_overlay_prop_type->get_item_type()->get_prop_type( Background_Image_Overlay_Prop_Type::get_key() );
280	Dynamic_Prop_Types_Mapping::make()->get_extended_schema( $bg_image_overlay_prop_type->get_shape() );
281	return [
282	'background' => $background_prop_type,
283	];
284	}
285
286	private static function get_effects_props() {
287	return [
288	'mix-blend-mode' => String_Prop_Type::make()->enum( [
289	'normal',
290	'multiply',
291	'screen',
292	'overlay',
293	'darken',
294	'lighten',
295	'color-dodge',
296	'saturation',
297	'color',
298	'difference',
299	'exclusion',
300	'hue',
301	'luminosity',
302	'soft-light',
303	'hard-light',
304	'color-burn',
305	] )->description( 'Applied as mix-blend mode css effect.' ),
306	'box-shadow' => Box_Shadow_Prop_Type::make(),
307	'opacity' => Size_Prop_Type::make()
308	->description( 'The opacity of the element, specified as a percentage between 0 (fully transparent) and 100 (fully opaque).' )
309	->units( Size_Constants::opacity() )
310	->default_unit( Size_Constants::UNIT_PERCENT ),
311	'filter' => Filter_Prop_Type::make(),
312	'backdrop-filter' => Backdrop_Filter_Prop_Type::make(),
313	'transform' => Transform_Prop_Type::make(),
314	'transition' => Transition_Prop_Type::make(),
315	];
316	}
317
318	private static function get_layout_props() {
319	return [
320	'display' => String_Prop_Type::make()->enum( [
321	'block',
322	'inline',
323	'inline-block',
324	'flex',
325	'inline-flex',
326	'grid',
327	'inline-grid',
328	'flow-root',
329	'none',
330	'contents',
331	] )->description( 'The CSS display property defines the display behavior (the type of rendering box) of an element.' ),
332	'flex-direction' => String_Prop_Type::make()
333	->description( 'The direction of the contained items.' )
334	->enum( [
335	'row',
336	'row-reverse',
337	'column',
338	'column-reverse',
339	] ),
340	'gap' => Union_Prop_Type::make()
341	->add_prop_type( Layout_Direction_Prop_Type::make() )
342	->add_prop_type( Size_Prop_Type::make()->units( Size_Constants::layout() ) ),
343	'flex-wrap' => String_Prop_Type::make()->enum( [
344	'wrap',
345	'nowrap',
346	'wrap-reverse',
347	] )->description( 'Specifies whether the flex items should wrap or not. CSS values: wrap, nowrap, wrap-reverse' ),
348	'flex' => Flex_Prop_Type::make(),
349	'grid-template-columns' => Union_Prop_Type::make()
350	->add_prop_type( String_Prop_Type::make() )
351	->add_prop_type( Grid_Track_Size_Prop_Type::make()->units( Size_Constants::grid_track() ) ),
352	'grid-template-rows' => Union_Prop_Type::make()
353	->add_prop_type( String_Prop_Type::make() )
354	->add_prop_type( Grid_Track_Size_Prop_Type::make()->units( Size_Constants::grid_track() ) ),
355	'grid-auto-flow' => String_Prop_Type::make()
356	->enum( [ 'row', 'column', 'row dense', 'column dense' ] )
357	->description( 'Controls how auto-placed items flow in the grid. CSS values: row, column, row dense, column dense.' ),
358	'grid-auto-rows' => Size_Prop_Type::make()
359	->units( Size_Constants::grid_auto_track() )
360	->default_unit( Size_Constants::UNIT_FR ),
361	'grid-auto-columns' => Size_Prop_Type::make()
362	->units( Size_Constants::grid_auto_track() )
363	->default_unit( Size_Constants::UNIT_FR ),
364	'grid-column' => Span_Prop_Type::make()
365	->regex( '/^(?!.https?:\/\/)(?!.;).*$/' )
366	->description( 'Defines a grid item column placement. Accepts values like span N or any valid CSS grid-column value. Disallows URLs and semicolons.' ),
367	'grid-row' => Span_Prop_Type::make()
368	->regex( '/^(?!.https?:\/\/)(?!.;).*$/' )
369	->description( 'Defines a grid item row placement. Accepts values like span N or any valid CSS grid-row value. Disallows URLs and semicolons.' ),
370	];
371	}
372
373	private static function get_alignment_props() {
374	return [
375	'justify-content' => String_Prop_Type::make()->enum( [
376	'center',
377	'start',
378	'end',
379	'flex-start',
380	'flex-end',
381	'left',
382	'right',
383	'normal',
384	'space-between',
385	'space-around',
386	'space-evenly',
387	'stretch',
388	] )
389	->description( 'Defines how the browser distributes space between and around content items along the main-axis of a flex container. CSS values: center, start, end, flex-start, flex-end, left, right, normal, space-between, space-around, space-evenly, stretch' ),
390	'justify-items' => String_Prop_Type::make()->enum( [
391	'normal',
392	'stretch',
393	'center',
394	'start',
395	'end',
396	'flex-start',
397	'flex-end',
398	'left',
399	'right',
400	'anchor-center',
401	] )->description( 'Defines how the browser distributes space between and around content items along the inline axis of a grid container. CSS values: center, start, end, flex-start, flex-end, left, right' ),
402	'align-content' => String_Prop_Type::make()->enum( [
403	'center',
404	'start',
405	'end',
406	'space-between',
407	'space-around',
408	'space-evenly',
409	] )
410	->description( 'Aligns a flex container\'s lines within when there is extra space in the cross-axis. CSS values: center, start, end, space-between, space-around, space-evenly' ),
411	'align-items' => String_Prop_Type::make()->enum( [
412	'normal',
413	'stretch',
414	'center',
415	'start',
416	'end',
417	'flex-start',
418	'flex-end',
419	'self-start',
420	'self-end',
421	'anchor-center',
422	] )->description( 'Defines the default behavior for how flex items are laid out along the cross axis on the current line. CSS values: normal, stretch, center, start, end, flex-start, flex-end, self-start, self-end, anchor-center' ),
423	'align-self' => String_Prop_Type::make()->enum( [
424	'auto',
425	'normal',
426	'center',
427	'start',
428	'end',
429	'self-start',
430	'self-end',
431	'flex-start',
432	'flex-end',
433	'anchor-center',
434	'baseline',
435	'first baseline',
436	'last baseline',
437	'stretch',
438	] )->description( 'Allows the default alignment (or the one specified by align-items) to be overridden for individual flex items. CSS values: auto, normal, center, start, end, self-start, self-end, flex-start, flex-end, anchor-center, baseline, first baseline, last baseline, stretch' ),
439	'order' => Number_Prop_Type::make()->description( 'Specifies the order of the flex items. Items with lower order values are displayed first.' ),
440	];
441	}
442
443	private static function get_special_props() {
444	return [
445	'content' => String_Prop_Type::make()->description( 'The string content for pseudo-element content property' ),
446	'appearance' => String_Prop_Type::make()->enum( [ 'none', 'auto' ] )->description( 'The appearance of the element. CSS values: none, auto' ),
447	'clip-path' => String_Prop_Type::make()->description( 'The clip-path CSS property defines a shape to be used as clipping region.' ),
448	];
449	}
450	}
451