← All changes | includes/controls/groups/flex-container.php +66 -80 4.2.0 → 3.7.5 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	],
		@@ -60,13 +60,11 @@
60	60	],
61	61	'responsive' => true,
62	62	];
63	63
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, [
	64	+ $fields['_is_row'] = [
68	65	'type' => Controls_Manager::HIDDEN,
	66	+ 'prefix_class' => 'e-container--',
69	67	'default' => 'row',
70	68	'condition' => [
71	69	'direction' => [
72	70	'row',
		@@ -72,12 +70,13 @@
72	70	'row',
73	71	'row-reverse',
74	72	],
75	73	],
76		- ] );
	74	+ ];
77	75
78		- $fields['_is_column'] = array_merge( $flex_direction_prefix_class, [
	76	+ $fields['_is_column'] = [
79	77	'type' => Controls_Manager::HIDDEN,
	78	+ 'prefix_class' => 'e-container--',
80	79	'default' => 'column',
81	80	'condition' => [
82	81	'direction' => [
83	82	'',
		@@ -84,38 +83,38 @@
84	83	'column',
85	84	'column-reverse',
86	85	],
87	86	],
88		- ] );
	87	+ ];
89	88
90	89	$fields['justify_content'] = [
91		- 'label' => esc_html__( 'Justify Content', 'elementor' ),
	90	+ 'label' => esc_html_x( 'Justify Content', 'Flex Container Control', 'elementor' ),
92	91	'type' => Controls_Manager::CHOOSE,
93	92	'label_block' => true,
94	93	'default' => '',
95	94	'options' => [
96	95	'flex-start' => [
97		- 'title' => esc_html__( 'Start', 'elementor' ),
	96	+ 'title' => esc_html_x( 'Start', 'Flex Container Control', 'elementor' ),
98	97	'icon' => 'eicon-flex eicon-justify-start-h',
99	98	],
100	99	'center' => [
101		- 'title' => esc_html__( 'Center', 'elementor' ),
	100	+ 'title' => esc_html_x( 'Center', 'Flex Container Control', 'elementor' ),
102	101	'icon' => 'eicon-flex eicon-justify-center-h',
103	102	],
104	103	'flex-end' => [
105		- 'title' => esc_html__( 'End', 'elementor' ),
	104	+ 'title' => esc_html_x( 'End', 'Flex Container Control', 'elementor' ),
106	105	'icon' => 'eicon-flex eicon-justify-end-h',
107	106	],
108	107	'space-between' => [
109		- 'title' => esc_html__( 'Space Between', 'elementor' ),
	108	+ 'title' => esc_html_x( 'Space Between', 'Flex Container Control', 'elementor' ),
110	109	'icon' => 'eicon-flex eicon-justify-space-between-h',
111	110	],
112	111	'space-around' => [
113		- 'title' => esc_html__( 'Space Around', 'elementor' ),
	112	+ 'title' => esc_html_x( 'Space Around', 'Flex Container Control', 'elementor' ),
114	113	'icon' => 'eicon-flex eicon-justify-space-around-h',
115	114	],
116	115	'space-evenly' => [
117		- 'title' => esc_html__( 'Space Evenly', 'elementor' ),
	116	+ 'title' => esc_html_x( 'Space Evenly', 'Flex Container Control', 'elementor' ),
118	117	'icon' => 'eicon-flex eicon-justify-space-evenly-h',
119	118	],
120	119	],
121	120	'selectors' => [
		@@ -124,76 +123,81 @@
124	123	'responsive' => true,
125	124	];
126	125
127	126	$fields['align_items'] = [
128		- 'label' => esc_html__( 'Align Items', 'elementor' ),
	127	+ 'label' => esc_html_x( 'Align Items', 'Flex Container Control', 'elementor' ),
129	128	'type' => Controls_Manager::CHOOSE,
130	129	'default' => '',
131	130	'options' => [
132	131	'flex-start' => [
133		- 'title' => esc_html__( 'Start', 'elementor' ),
	132	+ 'title' => esc_html_x( 'Start', 'Flex Container Control', 'elementor' ),
134	133	'icon' => 'eicon-flex eicon-align-start-v',
135	134	],
136	135	'center' => [
137		- 'title' => esc_html__( 'Center', 'elementor' ),
	136	+ 'title' => esc_html_x( 'Center', 'Flex Container Control', 'elementor' ),
138	137	'icon' => 'eicon-flex eicon-align-center-v',
139	138	],
140	139	'flex-end' => [
141		- 'title' => esc_html__( 'End', 'elementor' ),
	140	+ 'title' => esc_html_x( 'End', 'Flex Container Control', 'elementor' ),
142	141	'icon' => 'eicon-flex eicon-align-end-v',
143	142	],
144	143	'stretch' => [
145		- 'title' => esc_html__( 'Stretch', 'elementor' ),
	144	+ 'title' => esc_html_x( 'Stretch', 'Flex Container Control', 'elementor' ),
146	145	'icon' => 'eicon-flex eicon-align-stretch-v',
147	146	],
148	147	],
149	148	'selectors' => [
150		- '{{SELECTOR}}' => '--align-items: {{VALUE}}; --container-widget-width: calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );',
	149	+ '{{SELECTOR}}' => '--align-items: {{VALUE}};',
151	150	],
152	151	'responsive' => true,
153	152	];
154	153
155	154	$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',
	155	+ 'label' => esc_html_x( 'Gap', 'Flex Item Control', 'elementor' ),
	156	+ 'type' => Controls_Manager::SLIDER,
	157	+ 'range' => [
	158	+ 'px' => [
	159	+ 'min' => 0,
	160	+ 'max' => 500,
	161	+ ],
	162	+ '%' => [
	163	+ 'min' => 0,
	164	+ 'max' => 100,
	165	+ ],
	166	+ 'vw' => [
	167	+ 'min' => 0,
	168	+ 'max' => 100,
	169	+ ],
	170	+ 'em' => [
	171	+ 'min' => 0,
	172	+ 'max' => 50,
	173	+ ],
161	174	],
162		- 'separator' => 'before',
	175	+ 'size_units' => [ 'px', '%', 'vw', 'em' ],
163	176	'selectors' => [
164		- '{{SELECTOR}}' => '--gap: {{ROW}}{{UNIT}} {{COLUMN}}{{UNIT}};--row-gap: {{ROW}}{{UNIT}};--column-gap: {{COLUMN}}{{UNIT}};',
	177	+ '{{SELECTOR}}' => '--gap: {{SIZE}}{{UNIT}};',
165	178	],
166	179	'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	180	];
181	181
182	182	$fields['wrap'] = [
183		- 'label' => esc_html__( 'Wrap', 'elementor' ),
	183	+ 'label' => esc_html_x( 'Wrap', 'Flex Container Control', 'elementor' ),
184	184	'type' => Controls_Manager::CHOOSE,
185	185	'options' => [
186	186	'nowrap' => [
187		- 'title' => esc_html__( 'No Wrap', 'elementor' ),
	187	+ 'title' => esc_html_x( 'No Wrap', 'Flex Container Control', 'elementor' ),
188	188	'icon' => 'eicon-flex eicon-nowrap',
189	189	],
190	190	'wrap' => [
191		- 'title' => esc_html__( 'Wrap', 'elementor' ),
	191	+ 'title' => esc_html_x( 'Wrap', 'Flex Container Control', 'elementor' ),
192	192	'icon' => 'eicon-flex eicon-wrap',
193	193	],
194	194	],
195		- 'description' => esc_html__( 'Items within the container can stay in a single line (No wrap), or break into multiple lines (Wrap).', 'elementor' ),
	195	+ 'description' => esc_html_x(
	196	+ 'Items within the container can stay in a single line (No wrap), or break into multiple lines (Wrap).',
	197	+ 'Flex Container Control',
	198	+ 'elementor'
	199	+ ),
196	200	'default' => '',
197	201	'selectors' => [
198	202	'{{SELECTOR}}' => '--flex-wrap: {{VALUE}};',
199	203	],
		@@ -200,37 +204,19 @@
200	204	'responsive' => true,
201	205	];
202	206
203	207	$fields['align_content'] = [
204		- 'label' => esc_html__( 'Align Content', 'elementor' ),
205		- 'type' => Controls_Manager::CHOOSE,
206		- 'label_block' => true,
	208	+ 'label' => esc_html_x( 'Align Content', 'Flex Container Control', 'elementor' ),
	209	+ 'type' => Controls_Manager::SELECT,
207	210	'default' => '',
208	211	'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		- ],
	212	+ '' => esc_html_x( 'Default', 'Flex Container Control', 'elementor' ),
	213	+ 'center' => esc_html_x( 'Center', 'Flex Container Control', 'elementor' ),
	214	+ 'flex-start' => esc_html_x( 'Flex Start', 'Flex Container Control', 'elementor' ),
	215	+ 'flex-end' => esc_html_x( 'Flex End', 'Flex Container Control', 'elementor' ),
	216	+ 'space-between' => esc_html_x( 'Space Between', 'Flex Container Control', 'elementor' ),
	217	+ 'space-around' => esc_html_x( 'Space Around', 'Flex Container Control', 'elementor' ),
	218	+ 'space-evenly' => esc_html_x( 'Space Evenly', 'Flex Container Control', 'elementor' ),
233	219	],
234	220	'selectors' => [
235	221	'{{SELECTOR}}' => '--align-content: {{VALUE}};',
236	222	],