← All changes | includes/widgets/common-base.php +39 -231 4.0.7 → 3.26.2 View file →

		@@ -61,9 +61,9 @@
61	61	* @since 3.4.7
62	62	* @deprecated 3.7.0 Not needed anymore because responsive conditioning in the Editor was fixed in v3.7.0.
63	63	* @access protected
64	64	*
65		- * @param array $args arguments to duplicate per breakpoint.
	65	+ * @param array $args arguments to duplicate per breakpoint
66	66	* @param array $devices_to_exclude
67	67	*
68	68	* @return array responsive device args
69	69	*/
		@@ -93,9 +93,9 @@
93	93	*
94	94	* @since 3.4.7
95	95	* @access private
96	96	*
97		- * @param array $args
	97	+ * @param array $args
98	98	* @param string $breakpoint_key
99	99	* @return array parsed device args
100	100	*/
101	101	private function parse_device_args_placeholders( array $args, $breakpoint_key ) {
		@@ -114,9 +114,9 @@
114	114	return $parsed_args;
115	115	}
116	116
117	117	/**
118		- * @param String $shape Shape name.
	118	+ * @param $shape String Shape name.
119	119	*
120	120	* @return string The shape path in the assets folder.
121	121	*/
122	122	private function get_shape_url( $shape ) {
		@@ -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,
		@@ -264,9 +153,9 @@
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,
266	155	* this function builds both of those selectors easily.
267	156	*
268		- * @param string $rules The CSS rules to apply.
	157	+ * @param $rules string The CSS rules to apply.
269	158	*
270	159	* @return array Selectors with the rules applied.
271	160	*/
272	161	private function get_mask_selectors( $rules ) {
		@@ -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	/**
		@@ -373,106 +263,8 @@
373	263	'condition' => [ '_element_width' => 'initial' ],
374	264	]
375	265	);
376	266
377		- $this->add_control(
378		- '_heading_grid_item',
379		- [
380		- 'type' => Controls_Manager::HEADING,
381		- 'label' => esc_html__( 'Grid Item', 'elementor' ),
382		- 'separator' => 'before',
383		- ]
384		- );
385		-
386		- $this->add_responsive_control(
387		- '_grid_column',
388		- [
389		- 'label' => esc_html__( 'Column Span', 'elementor' ),
390		- 'type' => Controls_Manager::SELECT,
391		- 'options' => [
392		- '' => ' Default',
393		- '1' => '1',
394		- '2' => '2',
395		- '3' => '3',
396		- '4' => '4',
397		- '5' => '5',
398		- '6' => '6',
399		- '7' => '7',
400		- '8' => '8',
401		- '9' => '9',
402		- '10' => '10',
403		- '11' => '11',
404		- '12' => '12',
405		- 'custom' => 'Custom',
406		- ],
407		- 'selectors' => [
408		- '{{WRAPPER}}' => 'grid-column: span {{VALUE}};',
409		- ],
410		- ]
411		- );
412		-
413		- $this->add_responsive_control(
414		- '_grid_column_custom',
415		- [
416		- 'label' => esc_html__( 'Custom', 'elementor' ),
417		- 'type' => Controls_Manager::TEXT,
418		- 'ai' => [
419		- 'active' => false,
420		- ],
421		- 'selectors' => [
422		- '{{WRAPPER}}' => 'grid-column: {{VALUE}}',
423		- ],
424		- 'condition' => [
425		- '_grid_column' => 'custom',
426		- ],
427		- ]
428		- );
429		-
430		- $this->add_responsive_control(
431		- '_grid_row',
432		- [
433		- 'label' => esc_html__( 'Row Span', 'elementor' ),
434		- 'type' => Controls_Manager::SELECT,
435		- 'options' => [
436		- '' => ' Default',
437		- '1' => '1',
438		- '2' => '2',
439		- '3' => '3',
440		- '4' => '4',
441		- '5' => '5',
442		- '6' => '6',
443		- '7' => '7',
444		- '8' => '8',
445		- '9' => '9',
446		- '10' => '10',
447		- '11' => '11',
448		- '12' => '12',
449		- 'custom' => 'Custom',
450		- ],
451		- 'selectors' => [
452		- '{{WRAPPER}}' => 'grid-row: span {{VALUE}};',
453		- ],
454		- ]
455		- );
456		-
457		- $this->add_responsive_control(
458		- '_grid_row_custom',
459		- [
460		- 'label' => esc_html__( 'Custom', 'elementor' ),
461		- 'type' => Controls_Manager::TEXT,
462		- 'separator' => 'after',
463		- 'ai' => [
464		- 'active' => false,
465		- ],
466		- 'selectors' => [
467		- '{{WRAPPER}}' => 'grid-row: {{VALUE}}',
468		- ],
469		- 'condition' => [
470		- '_grid_row' => 'custom',
471		- ],
472		- ]
473		- );
474		-
475	267	// Register Flex controls only if the Container experiment is active.
476	268	if ( $is_container_active ) {
477	269	$this->add_group_control(
478	270	Group_Control_Flex_Item::get_type(),
		@@ -1097,14 +889,12 @@
1097	889	$this->add_control(
1098	890	'_mask_shape',
1099	891	[
1100	892	'label' => esc_html__( 'Shape', 'elementor' ),
1101		- 'type' => Controls_Manager::VISUAL_CHOICE,
1102		- 'label_block' => true,
1103		- 'columns' => 4,
	893	+ 'type' => Controls_Manager::SELECT,
1104	894	'options' => $this->get_shapes(),
1105	895	'default' => 'circle',
1106		- 'selectors' => $this->get_mask_selectors( '-webkit-mask-image: url( ' . ELEMENTOR_ASSETS_URL . 'mask-shapes/{{VALUE}}.svg );' ),
	896	+ 'selectors' => $this->get_mask_selectors( '-webkit-mask-image: url( ' . ELEMENTOR_ASSETS_URL . '/mask-shapes/{{VALUE}}.svg );' ),
1107	897	'condition' => [
1108	898	'_mask_switch!' => '',
1109	899	],
1110	900	]
		@@ -1109,9 +899,9 @@
1109	899	],
1110	900	]
1111	901	);
1112	902
1113		- $this->add_responsive_control(
	903	+ $this->add_control(
1114	904	'_mask_image',
1115	905	[
1116	906	'label' => esc_html__( 'Image', 'elementor' ),
1117	907	'type' => Controls_Manager::MEDIA,
		@@ -1124,8 +914,26 @@
1124	914	'selectors' => $this->get_mask_selectors( '-webkit-mask-image: url( {{URL}} );' ),
1125	915	'condition' => [
1126	916	'_mask_switch!' => '',
1127	917	'_mask_shape' => 'custom',
	918	+ ],
	919	+ ]
	920	+ );
	921	+
	922	+ $this->add_control(
	923	+ '_mask_notice',
	924	+ [
	925	+ 'type' => Controls_Manager::HIDDEN,
	926	+ 'raw' => esc_html__( 'Need More Shapes?', 'elementor' ) .
	927	+ '<br>' .
	928	+ sprintf(
	929	+ '%1$s <a target="_blank" href="https://go.elementor.com/mask-control">%2$s</a>',
	930	+ esc_html__( 'Explore additional Premium Shape packs and use them in your site.', 'elementor' ),
	931	+ esc_html__( 'Learn more', 'elementor' ),
	932	+ ),
	933	+ 'content_classes' => 'elementor-panel-alert elementor-panel-alert-info',
	934	+ 'condition' => [
	935	+ '_mask_switch!' => '',
1128	936	],
1129	937	]
1130	938	);
1131	939