← All changes | includes/controls/groups/flex-container.php +79 -111 4.1.0 → 3.6.3 View file →

		@@ -18,55 +18,39 @@
18	18	$end = is_rtl() ? 'left' : 'right';
19	19
20	20	$fields = [];
21	21
22		- $fields['items'] = [
23		- 'type' => Controls_Manager::HEADING,
24		- 'label' => esc_html__( 'Items', 'elementor' ),
25		- 'separator' => 'before',
26		- ];
27		-
28	22	$fields['direction'] = [
29		- 'label' => esc_html__( 'Direction', 'elementor' ),
	23	+ 'label' => esc_html_x( 'Direction', 'Flex Container Control', 'elementor' ),
30	24	'type' => Controls_Manager::CHOOSE,
31	25	'options' => [
32	26	'row' => [
33		- 'title' => esc_html__( 'Row - horizontal', 'elementor' ),
	27	+ 'title' => esc_html_x( 'Row', 'Flex Container Control', 'elementor' ),
34	28	'icon' => 'eicon-arrow-' . $end,
35	29	],
36	30	'column' => [
37		- 'title' => esc_html__( 'Column - vertical', 'elementor' ),
	31	+ 'title' => esc_html_x( 'Column', 'Flex Container Control', 'elementor' ),
38	32	'icon' => 'eicon-arrow-down',
39	33	],
40	34	'row-reverse' => [
41		- 'title' => esc_html__( 'Row - reversed', 'elementor' ),
	35	+ 'title' => esc_html_x( 'Reversed Row', 'Flex Container Control', 'elementor' ),
42	36	'icon' => 'eicon-arrow-' . $start,
43	37	],
44	38	'column-reverse' => [
45		- 'title' => esc_html__( 'Column - reversed', 'elementor' ),
	39	+ 'title' => esc_html_x( 'Reversed Column', 'Flex Container Control', 'elementor' ),
46	40	'icon' => 'eicon-arrow-up',
47	41	],
48	42	],
49	43	'default' => '',
50		- // The `--container-widget-width` CSS variable is used for handling widgets that get an undefined width in column mode.
51		- // The `--container-widget-flex-grow` CSS variable is used to give certain widgets a default `flex-grow: 1` value for the `flex row` combination.
52		- 'selectors_dictionary' => [
53		- 'row' => '--flex-direction: row; --container-widget-width: initial; --container-widget-height: 100%; --container-widget-flex-grow: 1; --container-widget-align-self: stretch; --flex-wrap-mobile: wrap;',
54		- 'column' => '--flex-direction: column; --container-widget-width: 100%; --container-widget-height: initial; --container-widget-flex-grow: 0; --container-widget-align-self: initial; --flex-wrap-mobile: wrap;',
55		- 'row-reverse' => '--flex-direction: row-reverse; --container-widget-width: initial; --container-widget-height: 100%; --container-widget-flex-grow: 1; --container-widget-align-self: stretch; --flex-wrap-mobile: wrap-reverse;',
56		- 'column-reverse' => '--flex-direction: column-reverse; --container-widget-width: 100%; --container-widget-height: initial; --container-widget-flex-grow: 0; --container-widget-align-self: initial; --flex-wrap-mobile: wrap;',
57		- ],
58	44	'selectors' => [
59		- '{{SELECTOR}}' => '{{VALUE}};',
	45	+ '{{SELECTOR}}' => '--flex-direction: {{VALUE}};',
60	46	],
61	47	'responsive' => true,
62	48	];
63	49
64		- // Only use the flex direction prefix class inside the editor.
65		- $flex_direction_prefix_class = Plugin::$instance->editor->is_edit_mode() ? [ 'prefix_class' => 'e-con--' ] : [];
66		-
67		- $fields['_is_row'] = array_merge( $flex_direction_prefix_class, [
	50	+ $fields['_is_row'] = [
68	51	'type' => Controls_Manager::HIDDEN,
	52	+ 'prefix_class' => 'e-container--',
69	53	'default' => 'row',
70	54	'condition' => [
71	55	'direction' => [
72	56	'row',
		@@ -72,12 +56,13 @@
72	56	'row',
73	57	'row-reverse',
74	58	],
75	59	],
76		- ] );
	60	+ ];
77	61
78		- $fields['_is_column'] = array_merge( $flex_direction_prefix_class, [
	62	+ $fields['_is_column'] = [
79	63	'type' => Controls_Manager::HIDDEN,
	64	+ 'prefix_class' => 'e-container--',
80	65	'default' => 'column',
81	66	'condition' => [
82	67	'direction' => [
83	68	'',
		@@ -84,38 +69,66 @@
84	69	'column',
85	70	'column-reverse',
86	71	],
87	72	],
88		- ] );
	73	+ ];
89	74
	75	+ $fields['align_items'] = [
	76	+ 'label' => esc_html_x( 'Align Items', 'Flex Container Control', 'elementor' ),
	77	+ 'type' => Controls_Manager::CHOOSE,
	78	+ 'default' => '',
	79	+ 'options' => [
	80	+ 'flex-start' => [
	81	+ 'title' => esc_html_x( 'Flex Start', 'Flex Container Control', 'elementor' ),
	82	+ 'icon' => 'eicon-flex eicon-align-start-v',
	83	+ ],
	84	+ 'center' => [
	85	+ 'title' => esc_html_x( 'Center', 'Flex Container Control', 'elementor' ),
	86	+ 'icon' => 'eicon-flex eicon-align-center-v',
	87	+ ],
	88	+ 'flex-end' => [
	89	+ 'title' => esc_html_x( 'Flex End', 'Flex Container Control', 'elementor' ),
	90	+ 'icon' => 'eicon-flex eicon-align-end-v',
	91	+ ],
	92	+ 'stretch' => [
	93	+ 'title' => esc_html_x( 'Stretch', 'Flex Container Control', 'elementor' ),
	94	+ 'icon' => 'eicon-flex eicon-align-stretch-v',
	95	+ ],
	96	+ ],
	97	+ 'selectors' => [
	98	+ '{{SELECTOR}}' => '--align-items: {{VALUE}};',
	99	+ ],
	100	+ 'responsive' => true,
	101	+ ];
	102	+
90	103	$fields['justify_content'] = [
91		- 'label' => esc_html__( 'Justify Content', 'elementor' ),
	104	+ 'label' => esc_html_x( 'Justify Content', 'Flex Container Control', 'elementor' ),
92	105	'type' => Controls_Manager::CHOOSE,
93	106	'label_block' => true,
94	107	'default' => '',
95	108	'options' => [
96	109	'flex-start' => [
97		- 'title' => esc_html__( 'Start', 'elementor' ),
	110	+ 'title' => esc_html_x( 'Flex Start', 'Flex Container Control', 'elementor' ),
98	111	'icon' => 'eicon-flex eicon-justify-start-h',
99	112	],
100	113	'center' => [
101		- 'title' => esc_html__( 'Center', 'elementor' ),
	114	+ 'title' => esc_html_x( 'Center', 'Flex Container Control', 'elementor' ),
102	115	'icon' => 'eicon-flex eicon-justify-center-h',
103	116	],
104	117	'flex-end' => [
105		- 'title' => esc_html__( 'End', 'elementor' ),
	118	+ 'title' => esc_html_x( 'Flex End', 'Flex Container Control', 'elementor' ),
106	119	'icon' => 'eicon-flex eicon-justify-end-h',
107	120	],
108	121	'space-between' => [
109		- 'title' => esc_html__( 'Space Between', 'elementor' ),
	122	+ 'title' => esc_html_x( 'Space Between', 'Flex Container Control', 'elementor' ),
110	123	'icon' => 'eicon-flex eicon-justify-space-between-h',
111	124	],
112	125	'space-around' => [
113		- 'title' => esc_html__( 'Space Around', 'elementor' ),
	126	+ 'title' => esc_html_x( 'Space Around', 'Flex Container Control', 'elementor' ),
114	127	'icon' => 'eicon-flex eicon-justify-space-around-h',
115	128	],
116	129	'space-evenly' => [
117		- 'title' => esc_html__( 'Space Evenly', 'elementor' ),
	130	+ 'title' => esc_html_x( 'Space Evenly', 'Flex Container Control', 'elementor' ),
118	131	'icon' => 'eicon-flex eicon-justify-space-evenly-h',
119	132	],
120	133	],
121	134	'selectors' => [
		@@ -123,77 +136,50 @@
123	136	],
124	137	'responsive' => true,
125	138	];
126	139
127		- $fields['align_items'] = [
128		- 'label' => esc_html__( 'Align Items', 'elementor' ),
129		- 'type' => Controls_Manager::CHOOSE,
130		- 'default' => '',
131		- 'options' => [
132		- 'flex-start' => [
133		- 'title' => esc_html__( 'Start', 'elementor' ),
134		- 'icon' => 'eicon-flex eicon-align-start-v',
	140	+ $fields['gap'] = [
	141	+ 'label' => esc_html_x( 'Gap', 'Flex Item Control', 'elementor' ),
	142	+ 'type' => Controls_Manager::SLIDER,
	143	+ 'range' => [
	144	+ 'px' => [
	145	+ 'min' => 0,
	146	+ 'max' => 500,
135	147	],
136		- 'center' => [
137		- 'title' => esc_html__( 'Center', 'elementor' ),
138		- 'icon' => 'eicon-flex eicon-align-center-v',
	148	+ '%' => [
	149	+ 'min' => 0,
	150	+ 'max' => 100,
139	151	],
140		- 'flex-end' => [
141		- 'title' => esc_html__( 'End', 'elementor' ),
142		- 'icon' => 'eicon-flex eicon-align-end-v',
	152	+ 'vw' => [
	153	+ 'min' => 0,
	154	+ 'max' => 100,
143	155	],
144		- 'stretch' => [
145		- 'title' => esc_html__( 'Stretch', 'elementor' ),
146		- 'icon' => 'eicon-flex eicon-align-stretch-v',
147		- ],
148	156	],
	157	+ 'size_units' => [ 'px', '%', 'vw' ],
149	158	'selectors' => [
150		- '{{SELECTOR}}' => '--align-items: {{VALUE}}; --container-widget-width: calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );',
	159	+ '{{SELECTOR}}' => '--gap: {{SIZE}}{{UNIT}};',
151	160	],
152	161	'responsive' => true,
153	162	];
154	163
155		- $fields['gap'] = [
156		- 'label' => esc_html__( 'Gaps', 'elementor' ),
157		- 'type' => Controls_Manager::GAPS,
158		- 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
159		- 'default' => [
160		- 'unit' => 'px',
161		- ],
162		- 'separator' => 'before',
163		- 'selectors' => [
164		- '{{SELECTOR}}' => '--gap: {{ROW}}{{UNIT}} {{COLUMN}}{{UNIT}};--row-gap: {{ROW}}{{UNIT}};--column-gap: {{COLUMN}}{{UNIT}};',
165		- ],
166		- 'responsive' => true,
167		- 'conversion_map' => [
168		- 'old_key' => 'size',
169		- 'new_key' => 'column',
170		- ],
171		- 'upgrade_conversion_map' => [
172		- 'old_key' => 'size',
173		- 'new_keys' => [ 'column', 'row' ],
174		- ],
175		- 'validators' => [
176		- 'Number' => [
177		- 'min' => 0,
178		- ],
179		- ],
180		- ];
181		-
182	164	$fields['wrap'] = [
183		- 'label' => esc_html__( 'Wrap', 'elementor' ),
	165	+ 'label' => esc_html_x( 'Wrap', 'Flex Container Control', 'elementor' ),
184	166	'type' => Controls_Manager::CHOOSE,
185	167	'options' => [
186	168	'nowrap' => [
187		- 'title' => esc_html__( 'No Wrap', 'elementor' ),
	169	+ 'title' => esc_html_x( 'No Wrap', 'Flex Container Control', 'elementor' ),
188	170	'icon' => 'eicon-flex eicon-nowrap',
189	171	],
190	172	'wrap' => [
191		- 'title' => esc_html__( 'Wrap', 'elementor' ),
	173	+ 'title' => esc_html_x( 'Wrap', 'Flex Container Control', 'elementor' ),
192	174	'icon' => 'eicon-flex eicon-wrap',
193	175	],
194	176	],
195		- 'description' => esc_html__( 'Items within the container can stay in a single line (No wrap), or break into multiple lines (Wrap).', 'elementor' ),
	177	+ 'description' => esc_html_x(
	178	+ 'Define whether the items are forced in a single line (No Wrap) or can be flowed into multiple lines (Wrap)',
	179	+ 'Flex Container Control',
	180	+ 'elementor'
	181	+ ),
196	182	'default' => '',
197	183	'selectors' => [
198	184	'{{SELECTOR}}' => '--flex-wrap: {{VALUE}};',
199	185	],
		@@ -200,37 +186,19 @@
200	186	'responsive' => true,
201	187	];
202	188
203	189	$fields['align_content'] = [
204		- 'label' => esc_html__( 'Align Content', 'elementor' ),
205		- 'type' => Controls_Manager::CHOOSE,
206		- 'label_block' => true,
	190	+ 'label' => esc_html_x( 'Align Content', 'Flex Container Control', 'elementor' ),
	191	+ 'type' => Controls_Manager::SELECT,
207	192	'default' => '',
208	193	'options' => [
209		- 'flex-start' => [
210		- 'title' => esc_html__( 'Start', 'elementor' ),
211		- 'icon' => 'eicon-justify-start-v',
212		- ],
213		- 'center' => [
214		- 'title' => esc_html__( 'Middle', 'elementor' ),
215		- 'icon' => 'eicon-justify-center-v',
216		- ],
217		- 'flex-end' => [
218		- 'title' => esc_html__( 'End', 'elementor' ),
219		- 'icon' => 'eicon-justify-end-v',
220		- ],
221		- 'space-between' => [
222		- 'title' => esc_html__( 'Space Between', 'elementor' ),
223		- 'icon' => 'eicon-justify-space-between-v',
224		- ],
225		- 'space-around' => [
226		- 'title' => esc_html__( 'Space Around', 'elementor' ),
227		- 'icon' => 'eicon-justify-space-around-v',
228		- ],
229		- 'space-evenly' => [
230		- 'title' => esc_html__( 'Space Evenly', 'elementor' ),
231		- 'icon' => 'eicon-justify-space-evenly-v',
232		- ],
	194	+ '' => esc_html_x( 'Default', 'Flex Container Control', 'elementor' ),
	195	+ 'center' => esc_html_x( 'Center', 'Flex Container Control', 'elementor' ),
	196	+ 'flex-start' => esc_html_x( 'Flex Start', 'Flex Container Control', 'elementor' ),
	197	+ 'flex-end' => esc_html_x( 'Flex End', 'Flex Container Control', 'elementor' ),
	198	+ 'space-between' => esc_html_x( 'Space Between', 'Flex Container Control', 'elementor' ),
	199	+ 'space-around' => esc_html_x( 'Space Around', 'Flex Container Control', 'elementor' ),
	200	+ 'space-evenly' => esc_html_x( 'Space Evenly', 'Flex Container Control', 'elementor' ),
233	201	],
234	202	'selectors' => [
235	203	'{{SELECTOR}}' => '--align-content: {{VALUE}};',
236	204	],