← All changes | includes/widgets/common-base.php +38 -132 4.2.0-dev2 → 3.29.0-dev4 View file →

		@@ -123,105 +123,26 @@
123	123	return ELEMENTOR_ASSETS_URL . 'mask-shapes/' . $shape . '.svg';
124	124	}
125	125
126	126	/**
127		- * Get a list of the available mask shapes.
	127	+ * Return a translated user-friendly list of the available masking shapes.
128	128	*
129		- * @param bool $custom_button Determine if the output should contain `Custom Mask` button.
	129	+ * @param bool $add_custom Determine if the output should contain `Custom` options.
130	130	*
131		- * @return array A list of mask shapes.
	131	+ * @return array Array of shapes with their URL as key.
132	132	*/
133		- private function get_shapes( $custom_button = true ): array {
	133	+ private function get_shapes( $add_custom = true ) {
134	134	$shapes = [
135		- 'circle' => [
136		- 'title' => esc_html__( 'Circle', 'elementor' ),
137		- 'image' => ELEMENTOR_ASSETS_URL . 'mask-shapes/circle.svg',
138		- ],
139		- 'oval-vertical' => [
140		- 'title' => esc_html__( 'Oval vertical', 'elementor' ),
141		- 'image' => ELEMENTOR_ASSETS_URL . 'mask-shapes/oval-vertical.svg',
142		- ],
143		- 'oval-horizontal' => [
144		- 'title' => esc_html__( 'Oval horizontal', 'elementor' ),
145		- 'image' => ELEMENTOR_ASSETS_URL . 'mask-shapes/oval-horizontal.svg',
146		- ],
147		- 'pill-vertical' => [
148		- 'title' => esc_html__( 'Pill vertical', 'elementor' ),
149		- 'image' => ELEMENTOR_ASSETS_URL . 'mask-shapes/pill-vertical.svg',
150		- ],
151		- 'pill-horizontal' => [
152		- 'title' => esc_html__( 'Pill horizontal', 'elementor' ),
153		- 'image' => ELEMENTOR_ASSETS_URL . 'mask-shapes/pill-horizontal.svg',
154		- ],
155		- 'triangle' => [
156		- 'title' => esc_html__( 'Triangle', 'elementor' ),
157		- 'image' => ELEMENTOR_ASSETS_URL . 'mask-shapes/triangle.svg',
158		- ],
159		- 'diamond' => [
160		- 'title' => esc_html__( 'Diamond', 'elementor' ),
161		- 'image' => ELEMENTOR_ASSETS_URL . 'mask-shapes/diamond.svg',
162		- ],
163		- 'pentagon' => [
164		- 'title' => esc_html__( 'Pentagon', 'elementor' ),
165		- 'image' => ELEMENTOR_ASSETS_URL . 'mask-shapes/pentagon.svg',
166		- ],
167		- 'hexagon-vertical' => [
168		- 'title' => esc_html__( 'Hexagon vertical', 'elementor' ),
169		- 'image' => ELEMENTOR_ASSETS_URL . 'mask-shapes/hexagon-vertical.svg',
170		- ],
171		- 'hexagon-horizontal' => [
172		- 'title' => esc_html__( 'Hexagon horizontal', 'elementor' ),
173		- 'image' => ELEMENTOR_ASSETS_URL . 'mask-shapes/hexagon-horizontal.svg',
174		- ],
175		- 'heptagon' => [
176		- 'title' => esc_html__( 'Heptagon', 'elementor' ),
177		- 'image' => ELEMENTOR_ASSETS_URL . 'mask-shapes/heptagon.svg',
178		- ],
179		- 'octagon' => [
180		- 'title' => esc_html__( 'Octagon', 'elementor' ),
181		- 'image' => ELEMENTOR_ASSETS_URL . 'mask-shapes/octagon.svg',
182		- ],
183		- 'parallelogram-right' => [
184		- 'title' => esc_html__( 'Parallelogram right', 'elementor' ),
185		- 'image' => ELEMENTOR_ASSETS_URL . 'mask-shapes/parallelogram-right.svg',
186		- ],
187		- 'parallelogram-left' => [
188		- 'title' => esc_html__( 'Parallelogram left', 'elementor' ),
189		- 'image' => ELEMENTOR_ASSETS_URL . 'mask-shapes/parallelogram-left.svg',
190		- ],
191		- 'trapezoid-up' => [
192		- 'title' => esc_html__( 'Trapezoid Up', 'elementor' ),
193		- 'image' => ELEMENTOR_ASSETS_URL . 'mask-shapes/trapezoid-up.svg',
194		- ],
195		- 'trapezoid-down' => [
196		- 'title' => esc_html__( 'Trapezoid Down', 'elementor' ),
197		- 'image' => ELEMENTOR_ASSETS_URL . 'mask-shapes/trapezoid-down.svg',
198		- ],
199		- 'flower' => [
200		- 'title' => esc_html__( 'Flower', 'elementor' ),
201		- 'image' => ELEMENTOR_ASSETS_URL . 'mask-shapes/flower.svg',
202		- ],
203		- 'sketch' => [
204		- 'title' => esc_html__( 'Sketch', 'elementor' ),
205		- 'image' => ELEMENTOR_ASSETS_URL . 'mask-shapes/sketch.svg',
206		- ],
207		- 'hexagon' => [
208		- 'title' => esc_html__( 'Hexagon Donut', 'elementor' ),
209		- 'image' => ELEMENTOR_ASSETS_URL . 'mask-shapes/hexagon.svg',
210		- ],
211		- 'blob' => [
212		- 'title' => esc_html__( 'Blob', 'elementor' ),
213		- 'image' => ELEMENTOR_ASSETS_URL . 'mask-shapes/blob.svg',
214		- ],
	135	+ 'circle' => esc_html__( 'Circle', 'elementor' ),
	136	+ 'flower' => esc_html__( 'Flower', 'elementor' ),
	137	+ 'sketch' => esc_html__( 'Sketch', 'elementor' ),
	138	+ 'triangle' => esc_html__( 'Triangle', 'elementor' ),
	139	+ 'blob' => esc_html__( 'Blob', 'elementor' ),
	140	+ 'hexagon' => esc_html__( 'Hexagon', 'elementor' ),
215	141	];
216	142
217		- $shapes = array_merge( $shapes, self::get_additional_mask_shapes() );
218		-
219		- if ( $custom_button ) {
220		- $shapes['custom'] = [
221		- 'type' => 'button',
222		- 'title' => esc_html__( 'Custom Mask', 'elementor' ),
223		- ];
	143	+ if ( $add_custom ) {
	144	+ $shapes['custom'] = esc_html__( 'Custom', 'elementor' );
224	145	}
225	146
226	147	return $shapes;
227	148	}
		@@ -226,40 +147,8 @@
226	147	return $shapes;
227	148	}
228	149
229	150	/**
230		- * Get additional mask shapes.
231		- *
232		- * Used to add custom mask shapes to elementor.
233		- *
234		- * @since 3.30.0
235		- *
236		- * @return array A list of additional mask shapes.
237		- */
238		- private static function get_additional_mask_shapes(): array {
239		- static $additional_mask_shapes = null;
240		-
241		- if ( null !== $additional_mask_shapes ) {
242		- return $additional_mask_shapes;
243		- }
244		-
245		- $additional_mask_shapes = [];
246		-
247		- /**
248		- * Additional mask shapes.
249		- *
250		- * Filters the mask shapes used by Elementor to add additional mask shapes.
251		- *
252		- * @since 3.30.0
253		- *
254		- * @param array $additional_mask_shapes Additional mask shapes.
255		- */
256		- $additional_mask_shapes = apply_filters( 'elementor/mask_shapes/additional_shapes', $additional_mask_shapes );
257		-
258		- return $additional_mask_shapes;
259		- }
260		-
261		- /**
262	151	* Gets a string of CSS rules to apply, and returns an array of selectors with those rules.
263	152	* This function has been created in order to deal with masking for image widget.
264	153	* For most of the widgets the mask is being applied to the wrapper itself, but in the case of an image widget,
265	154	* the `img` tag should be masked directly. So instead of writing a lot of selectors every time,
		@@ -275,9 +164,10 @@
275	164	'image' => static::MASK_SELECTOR_IMG,
276	165	];
277	166
278	167	return [
279		- $mask_selectors['default'] . ', ' . $mask_selectors['image'] => $rules,
	168	+ $mask_selectors['default'] => $rules,
	169	+ $mask_selectors['image'] => $rules,
280	170	];
281	171	}
282	172
283	173	/**
		@@ -388,9 +278,9 @@
388	278	[
389	279	'label' => esc_html__( 'Column Span', 'elementor' ),
390	280	'type' => Controls_Manager::SELECT,
391	281	'options' => [
392		- '' => ' ' . esc_html__( 'Default', 'elementor' ),
	282	+ '' => ' Default',
393	283	'1' => '1',
394	284	'2' => '2',
395	285	'3' => '3',
396	286	'4' => '4',
		@@ -401,9 +291,9 @@
401	291	'9' => '9',
402	292	'10' => '10',
403	293	'11' => '11',
404	294	'12' => '12',
405		- 'custom' => esc_html__( 'Custom', 'elementor' ),
	295	+ 'custom' => 'Custom',
406	296	],
407	297	'selectors' => [
408	298	'{{WRAPPER}}' => 'grid-column: span {{VALUE}};',
409	299	],
		@@ -432,9 +322,9 @@
432	322	[
433	323	'label' => esc_html__( 'Row Span', 'elementor' ),
434	324	'type' => Controls_Manager::SELECT,
435	325	'options' => [
436		- '' => ' ' . esc_html__( 'Default', 'elementor' ),
	326	+ '' => ' Default',
437	327	'1' => '1',
438	328	'2' => '2',
439	329	'3' => '3',
440	330	'4' => '4',
		@@ -445,9 +335,9 @@
445	335	'9' => '9',
446	336	'10' => '10',
447	337	'11' => '11',
448	338	'12' => '12',
449		- 'custom' => esc_html__( 'Custom', 'elementor' ),
	339	+ 'custom' => 'Custom',
450	340	],
451	341	'selectors' => [
452	342	'{{WRAPPER}}' => 'grid-row: span {{VALUE}};',
453	343	],
		@@ -1097,11 +987,9 @@
1097	987	$this->add_control(
1098	988	'_mask_shape',
1099	989	[
1100	990	'label' => esc_html__( 'Shape', 'elementor' ),
1101		- 'type' => Controls_Manager::VISUAL_CHOICE,
1102		- 'label_block' => true,
1103		- 'columns' => 4,
	991	+ 'type' => Controls_Manager::SELECT,
1104	992	'options' => $this->get_shapes(),
1105	993	'default' => 'circle',
1106	994	'selectors' => $this->get_mask_selectors( '-webkit-mask-image: url( ' . ELEMENTOR_ASSETS_URL . 'mask-shapes/{{VALUE}}.svg );' ),
1107	995	'condition' => [
		@@ -1109,9 +997,9 @@
1109	997	],
1110	998	]
1111	999	);
1112	1000
1113		- $this->add_responsive_control(
	1001	+ $this->add_control(
1114	1002	'_mask_image',
1115	1003	[
1116	1004	'label' => esc_html__( 'Image', 'elementor' ),
1117	1005	'type' => Controls_Manager::MEDIA,
		@@ -1124,8 +1012,26 @@
1124	1012	'selectors' => $this->get_mask_selectors( '-webkit-mask-image: url( {{URL}} );' ),
1125	1013	'condition' => [
1126	1014	'_mask_switch!' => '',
1127	1015	'_mask_shape' => 'custom',
	1016	+ ],
	1017	+ ]
	1018	+ );
	1019	+
	1020	+ $this->add_control(
	1021	+ '_mask_notice',
	1022	+ [
	1023	+ 'type' => Controls_Manager::HIDDEN,
	1024	+ 'raw' => esc_html__( 'Need More Shapes?', 'elementor' ) .
	1025	+ '<br>' .
	1026	+ sprintf(
	1027	+ '%1$s <a target="_blank" href="https://go.elementor.com/mask-control">%2$s</a>',
	1028	+ esc_html__( 'Explore additional Premium Shape packs and use them in your site.', 'elementor' ),
	1029	+ esc_html__( 'Learn more', 'elementor' ),
	1030	+ ),
	1031	+ 'content_classes' => 'elementor-panel-alert elementor-panel-alert-info',
	1032	+ 'condition' => [
	1033	+ '_mask_switch!' => '',
1128	1034	],
1129	1035	]
1130	1036	);
1131	1037