← All changes | includes/controls/groups/flex-container.php +60 -73 4.2.0 → 3.10.0-dev1 View file →

		@@ -25,25 +25,25 @@
25	25	'separator' => 'before',
26	26	];
27	27
28	28	$fields['direction'] = [
29		- 'label' => esc_html__( 'Direction', 'elementor' ),
	29	+ 'label' => esc_html_x( 'Direction', 'Flex Container Control', 'elementor' ),
30	30	'type' => Controls_Manager::CHOOSE,
31	31	'options' => [
32	32	'row' => [
33		- 'title' => esc_html__( 'Row - horizontal', 'elementor' ),
	33	+ 'title' => esc_html_x( 'Row - horizontal', 'Flex Container Control', 'elementor' ),
34	34	'icon' => 'eicon-arrow-' . $end,
35	35	],
36	36	'column' => [
37		- 'title' => esc_html__( 'Column - vertical', 'elementor' ),
	37	+ 'title' => esc_html_x( 'Column - vertical', 'Flex Container Control', 'elementor' ),
38	38	'icon' => 'eicon-arrow-down',
39	39	],
40	40	'row-reverse' => [
41		- 'title' => esc_html__( 'Row - reversed', 'elementor' ),
	41	+ 'title' => esc_html_x( 'Row - reversed', 'Flex Container Control', 'elementor' ),
42	42	'icon' => 'eicon-arrow-' . $start,
43	43	],
44	44	'column-reverse' => [
45		- 'title' => esc_html__( 'Column - reversed', 'elementor' ),
	45	+ 'title' => esc_html_x( 'Column - reversed', 'Flex Container Control', 'elementor' ),
46	46	'icon' => 'eicon-arrow-up',
47	47	],
48	48	],
49	49	'default' => '',
		@@ -49,12 +49,12 @@
49	49	'default' => '',
50	50	// The `--container-widget-width` CSS variable is used for handling widgets that get an undefined width in column mode.
51	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	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;',
	53	+ 'row' => '--flex-direction: row; --container-widget-width: initial; --container-widget-height: 100%; --container-widget-flex-grow: 1;',
	54	+ 'column' => '--flex-direction: column; --container-widget-width: 100%; --container-widget-height: initial; --container-widget-flex-grow: 0;',
	55	+ 'row-reverse' => '--flex-direction: row-reverse; --container-widget-width: initial; --container-widget-height: 100%; --container-widget-flex-grow: 1;',
	56	+ 'column-reverse' => '--flex-direction: column-reverse; --container-widget-width: 100%; --container-widget-height: initial; --container-widget-flex-grow: 0;',
57	57	],
58	58	'selectors' => [
59	59	'{{SELECTOR}}' => '{{VALUE}};',
60	60	],
		@@ -87,35 +87,35 @@
87	87	],
88	88	] );
89	89
90	90	$fields['justify_content'] = [
91		- 'label' => esc_html__( 'Justify Content', 'elementor' ),
	91	+ 'label' => esc_html_x( 'Justify Content', 'Flex Container Control', 'elementor' ),
92	92	'type' => Controls_Manager::CHOOSE,
93	93	'label_block' => true,
94	94	'default' => '',
95	95	'options' => [
96	96	'flex-start' => [
97		- 'title' => esc_html__( 'Start', 'elementor' ),
	97	+ 'title' => esc_html_x( 'Start', 'Flex Container Control', 'elementor' ),
98	98	'icon' => 'eicon-flex eicon-justify-start-h',
99	99	],
100	100	'center' => [
101		- 'title' => esc_html__( 'Center', 'elementor' ),
	101	+ 'title' => esc_html_x( 'Center', 'Flex Container Control', 'elementor' ),
102	102	'icon' => 'eicon-flex eicon-justify-center-h',
103	103	],
104	104	'flex-end' => [
105		- 'title' => esc_html__( 'End', 'elementor' ),
	105	+ 'title' => esc_html_x( 'End', 'Flex Container Control', 'elementor' ),
106	106	'icon' => 'eicon-flex eicon-justify-end-h',
107	107	],
108	108	'space-between' => [
109		- 'title' => esc_html__( 'Space Between', 'elementor' ),
	109	+ 'title' => esc_html_x( 'Space Between', 'Flex Container Control', 'elementor' ),
110	110	'icon' => 'eicon-flex eicon-justify-space-between-h',
111	111	],
112	112	'space-around' => [
113		- 'title' => esc_html__( 'Space Around', 'elementor' ),
	113	+ 'title' => esc_html_x( 'Space Around', 'Flex Container Control', 'elementor' ),
114	114	'icon' => 'eicon-flex eicon-justify-space-around-h',
115	115	],
116	116	'space-evenly' => [
117		- 'title' => esc_html__( 'Space Evenly', 'elementor' ),
	117	+ 'title' => esc_html_x( 'Space Evenly', 'Flex Container Control', 'elementor' ),
118	118	'icon' => 'eicon-flex eicon-justify-space-evenly-h',
119	119	],
120	120	],
121	121	'selectors' => [
		@@ -124,76 +124,81 @@
124	124	'responsive' => true,
125	125	];
126	126
127	127	$fields['align_items'] = [
128		- 'label' => esc_html__( 'Align Items', 'elementor' ),
	128	+ 'label' => esc_html_x( 'Align Items', 'Flex Container Control', 'elementor' ),
129	129	'type' => Controls_Manager::CHOOSE,
130	130	'default' => '',
131	131	'options' => [
132	132	'flex-start' => [
133		- 'title' => esc_html__( 'Start', 'elementor' ),
	133	+ 'title' => esc_html_x( 'Start', 'Flex Container Control', 'elementor' ),
134	134	'icon' => 'eicon-flex eicon-align-start-v',
135	135	],
136	136	'center' => [
137		- 'title' => esc_html__( 'Center', 'elementor' ),
	137	+ 'title' => esc_html_x( 'Center', 'Flex Container Control', 'elementor' ),
138	138	'icon' => 'eicon-flex eicon-align-center-v',
139	139	],
140	140	'flex-end' => [
141		- 'title' => esc_html__( 'End', 'elementor' ),
	141	+ 'title' => esc_html_x( 'End', 'Flex Container Control', 'elementor' ),
142	142	'icon' => 'eicon-flex eicon-align-end-v',
143	143	],
144	144	'stretch' => [
145		- 'title' => esc_html__( 'Stretch', 'elementor' ),
	145	+ 'title' => esc_html_x( 'Stretch', 'Flex Container Control', 'elementor' ),
146	146	'icon' => 'eicon-flex eicon-align-stretch-v',
147	147	],
148	148	],
149	149	'selectors' => [
150		- '{{SELECTOR}}' => '--align-items: {{VALUE}}; --container-widget-width: calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );',
	150	+ '{{SELECTOR}}' => '--align-items: {{VALUE}};',
151	151	],
152	152	'responsive' => true,
153	153	];
154	154
155	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',
	156	+ 'label' => esc_html_x( 'Gap', 'Flex Item Control', 'elementor' ),
	157	+ 'type' => Controls_Manager::SLIDER,
	158	+ 'range' => [
	159	+ 'px' => [
	160	+ 'min' => 0,
	161	+ 'max' => 500,
	162	+ ],
	163	+ '%' => [
	164	+ 'min' => 0,
	165	+ 'max' => 100,
	166	+ ],
	167	+ 'vw' => [
	168	+ 'min' => 0,
	169	+ 'max' => 100,
	170	+ ],
	171	+ 'em' => [
	172	+ 'min' => 0,
	173	+ 'max' => 50,
	174	+ ],
161	175	],
162		- 'separator' => 'before',
	176	+ 'size_units' => [ 'px', '%', 'vw', 'em', 'rem' ],
163	177	'selectors' => [
164		- '{{SELECTOR}}' => '--gap: {{ROW}}{{UNIT}} {{COLUMN}}{{UNIT}};--row-gap: {{ROW}}{{UNIT}};--column-gap: {{COLUMN}}{{UNIT}};',
	178	+ '{{SELECTOR}}' => '--gap: {{SIZE}}{{UNIT}};',
165	179	],
166	180	'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	];
181	182
182	183	$fields['wrap'] = [
183		- 'label' => esc_html__( 'Wrap', 'elementor' ),
	184	+ 'label' => esc_html_x( 'Wrap', 'Flex Container Control', 'elementor' ),
184	185	'type' => Controls_Manager::CHOOSE,
185	186	'options' => [
186	187	'nowrap' => [
187		- 'title' => esc_html__( 'No Wrap', 'elementor' ),
	188	+ 'title' => esc_html_x( 'No Wrap', 'Flex Container Control', 'elementor' ),
188	189	'icon' => 'eicon-flex eicon-nowrap',
189	190	],
190	191	'wrap' => [
191		- 'title' => esc_html__( 'Wrap', 'elementor' ),
	192	+ 'title' => esc_html_x( 'Wrap', 'Flex Container Control', 'elementor' ),
192	193	'icon' => 'eicon-flex eicon-wrap',
193	194	],
194	195	],
195		- 'description' => esc_html__( 'Items within the container can stay in a single line (No wrap), or break into multiple lines (Wrap).', 'elementor' ),
	196	+ 'description' => esc_html_x(
	197	+ 'Items within the container can stay in a single line (No wrap), or break into multiple lines (Wrap).',
	198	+ 'Flex Container Control',
	199	+ 'elementor'
	200	+ ),
196	201	'default' => '',
197	202	'selectors' => [
198	203	'{{SELECTOR}}' => '--flex-wrap: {{VALUE}};',
199	204	],
		@@ -200,37 +205,19 @@
200	205	'responsive' => true,
201	206	];
202	207
203	208	$fields['align_content'] = [
204		- 'label' => esc_html__( 'Align Content', 'elementor' ),
205		- 'type' => Controls_Manager::CHOOSE,
206		- 'label_block' => true,
	209	+ 'label' => esc_html_x( 'Align Content', 'Flex Container Control', 'elementor' ),
	210	+ 'type' => Controls_Manager::SELECT,
207	211	'default' => '',
208	212	'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		- ],
	213	+ '' => esc_html_x( 'Default', 'Flex Container Control', 'elementor' ),
	214	+ 'center' => esc_html_x( 'Center', 'Flex Container Control', 'elementor' ),
	215	+ 'flex-start' => esc_html_x( 'Flex Start', 'Flex Container Control', 'elementor' ),
	216	+ 'flex-end' => esc_html_x( 'Flex End', 'Flex Container Control', 'elementor' ),
	217	+ 'space-between' => esc_html_x( 'Space Between', 'Flex Container Control', 'elementor' ),
	218	+ 'space-around' => esc_html_x( 'Space Around', 'Flex Container Control', 'elementor' ),
	219	+ 'space-evenly' => esc_html_x( 'Space Evenly', 'Flex Container Control', 'elementor' ),
233	220	],
234	221	'selectors' => [
235	222	'{{SELECTOR}}' => '--align-content: {{VALUE}};',
236	223	],