← All changes | modules/shapes/widgets/text-path.php +67 -82 4.1.0-dev1 → 3.4.3 View file →

		@@ -5,10 +5,9 @@
5	5	use Elementor\Controls_Manager;
6	6	use Elementor\Core\Kits\Documents\Tabs\Global_Typography;
7	7	use Elementor\Group_Control_Typography;
8	8	use Elementor\Modules\Shapes\Module as Shapes_Module;
9		-use Elementor\Group_Control_Text_Stroke;
10		-use Elementor\Plugin;
	9	+use Elementor\Utils;
11	10	use Elementor\Widget_Base;
12	11
13	12	if ( ! defined( 'ABSPATH' ) ) {
14	13	exit; // Exit if accessed directly.
		@@ -17,8 +16,9 @@
17	16	/**
18	17	* Elementor WordArt widget.
19	18	*
20	19	* Elementor widget that displays text along SVG path.
	20	+ *
21	21	*/
22	22	class TextPath extends Widget_Base {
23	23
24	24	const DEFAULT_PATH_FILL = '#E8178A';
		@@ -29,17 +29,14 @@
29	29	* Retrieve Text Path widget name.
30	30	*
31	31	* @return string Widget name.
32	32	* @access public
	33	+ *
33	34	*/
34	35	public function get_name() {
35	36	return 'text-path';
36	37	}
37	38
38		- public function get_group_name() {
39		- return 'shapes';
40		- }
41		-
42	39	/**
43	40	* Get widget title.
44	41	*
45	42	* Retrieve Text Path widget title.
		@@ -45,8 +42,9 @@
45	42	* Retrieve Text Path widget title.
46	43	*
47	44	* @return string Widget title.
48	45	* @access public
	46	+ *
49	47	*/
50	48	public function get_title() {
51	49	return esc_html__( 'Text Path', 'elementor' );
52	50	}
		@@ -57,8 +55,9 @@
57	55	* Retrieve Text Path widget icon.
58	56	*
59	57	* @return string Widget icon.
60	58	* @access public
	59	+ *
61	60	*/
62	61	public function get_icon() {
63	62	return 'eicon-wordart';
64	63	}
		@@ -69,8 +68,9 @@
69	68	* Retrieve the list of keywords the widget belongs to.
70	69	*
71	70	* @return array Widget keywords.
72	71	* @access public
	72	+ *
73	73	*/
74	74	public function get_keywords() {
75	75	return [ 'text path', 'word path', 'text on path', 'wordart', 'word art' ];
76	76	}
		@@ -75,26 +75,8 @@
75	75	return [ 'text path', 'word path', 'text on path', 'wordart', 'word art' ];
76	76	}
77	77
78	78	/**
79		- * Get style dependencies.
80		- *
81		- * Retrieve the list of style dependencies the widget requires.
82		- *
83		- * @since 3.24.0
84		- * @access public
85		- *
86		- * @return array Widget style dependencies.
87		- */
88		- public function get_style_depends(): array {
89		- return [ 'widget-text-path' ];
90		- }
91		-
92		- public function has_widget_inner_wrapper(): bool {
93		- return ! Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' );
94		- }
95		-
96		- /**
97	79	* Register content controls under content tab.
98	80	*/
99	81	protected function register_content_tab() {
100	82	$this->start_controls_section(
		@@ -144,11 +126,12 @@
144	126	'dynamic' => [
145	127	'active' => true,
146	128	],
147	129	'description' => sprintf(
148		- '%1$s <a target="_blank" href="https://go.elementor.com/text-path-create-paths/">%2$s</a>',
149		- esc_html__( 'Want to create custom text paths with SVG?', 'elementor' ),
150		- esc_html__( 'Learn more', 'elementor' )
	130	+ /* translators: %1$s Link open tag, %2$s: Link close tag. */
	131	+ esc_html__( 'Want to create custom text paths with SVG? %1$sLearn More%2$s', 'elementor' ),
	132	+ '<a target="_blank" href="https://go.elementor.com/text-path-create-paths/">',
	133	+ '</a>'
151	134	),
152	135	]
153	136	);
154	137
		@@ -249,9 +232,9 @@
249	232	'size',
250	233	[
251	234	'label' => esc_html__( 'Size', 'elementor' ),
252	235	'type' => Controls_Manager::SLIDER,
253		- 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
	236	+ 'size_units' => [ '%', 'px' ],
254	237	'range' => [
255	238	'%' => [
256	239	'min' => 0,
257	240	'max' => 100,
		@@ -257,19 +240,23 @@
257	240	'max' => 100,
258	241	'step' => 10,
259	242	],
260	243	'px' => [
	244	+ 'min' => 0,
261	245	'max' => 800,
262	246	'step' => 50,
263	247	],
264	248	],
265	249	'default' => [
	250	+ 'unit' => 'px',
266	251	'size' => 500,
267	252	],
268	253	'tablet_default' => [
	254	+ 'unit' => 'px',
269	255	'size' => 500,
270	256	],
271	257	'mobile_default' => [
	258	+ 'unit' => 'px',
272	259	'size' => 500,
273	260	],
274	261	'selectors' => [
275	262	'{{WRAPPER}}' => '--width: {{SIZE}}{{UNIT}};',
		@@ -281,17 +268,27 @@
281	268	'rotation',
282	269	[
283	270	'label' => esc_html__( 'Rotate', 'elementor' ),
284	271	'type' => Controls_Manager::SLIDER,
285		- 'size_units' => [ 'deg', 'grad', 'rad', 'turn', 'custom' ],
	272	+ 'size_units' => [ 'deg' ],
	273	+ 'range' => [
	274	+ 'deg' => [
	275	+ 'min' => 0,
	276	+ 'max' => 360,
	277	+ 'step' => 1,
	278	+ ],
	279	+ ],
286	280	'default' => [
287	281	'unit' => 'deg',
	282	+ 'size' => '',
288	283	],
289	284	'tablet_default' => [
290	285	'unit' => 'deg',
	286	+ 'size' => '',
291	287	],
292	288	'mobile_default' => [
293	289	'unit' => 'deg',
	290	+ 'size' => '',
294	291	],
295	292	'selectors' => [
296	293	'{{WRAPPER}}' => '--rotate: {{SIZE}}{{UNIT}};',
297	294	],
		@@ -332,43 +329,31 @@
332	329	],
333	330	]
334	331	);
335	332
336		- $this->add_group_control(
337		- Group_Control_Text_Stroke::get_type(),
338		- [
339		- 'name' => 'text_stroke',
340		- 'selector' => '{{WRAPPER}} textPath',
341		- ]
342		- );
343		-
344	333	$this->add_responsive_control(
345	334	'word_spacing',
346	335	[
347	336	'label' => esc_html__( 'Word Spacing', 'elementor' ),
348	337	'type' => Controls_Manager::SLIDER,
349		- 'size_units' => [ 'px', 'em', 'rem', 'custom' ],
	338	+ 'size_units' => [ 'px' ],
350	339	'range' => [
351	340	'px' => [
352	341	'min' => -20,
353	342	'max' => 20,
	343	+ 'step' => 1,
354	344	],
355		- 'em' => [
356		- 'min' => -1,
357		- 'max' => 1,
358		- ],
359		- 'rem' => [
360		- 'min' => -1,
361		- 'max' => 1,
362		- ],
363	345	],
364	346	'default' => [
	347	+ 'unit' => 'px',
365	348	'size' => '',
366	349	],
367	350	'tablet_default' => [
	351	+ 'unit' => 'px',
368	352	'size' => '',
369	353	],
370	354	'mobile_default' => [
	355	+ 'unit' => 'px',
371	356	'size' => '',
372	357	],
373	358	'selectors' => [
374	359	'{{WRAPPER}}' => '--word-spacing: {{SIZE}}{{UNIT}};',
		@@ -378,9 +363,9 @@
378	363
379	364	$this->add_control(
380	365	'start_point',
381	366	[
382		- 'label' => esc_html__( 'Starting Point', 'elementor' ) . ' (%)',
	367	+ 'label' => esc_html__( 'Starting Point', 'elementor' ),
383	368	'type' => Controls_Manager::SLIDER,
384	369	'size_units' => [ '%' ],
385	370	'range' => [
386	371	'px' => [
		@@ -458,13 +443,19 @@
458	443	'hover_transition',
459	444	[
460	445	'label' => esc_html__( 'Transition Duration', 'elementor' ),
461	446	'type' => Controls_Manager::SLIDER,
462		- 'size_units' => [ 's', 'ms', 'custom' ],
463	447	'default' => [
	448	+ 'size' => 0.3,
464	449	'unit' => 's',
465		- 'size' => 0.3,
466	450	],
	451	+ 'range' => [
	452	+ 's' => [
	453	+ 'min' => 0,
	454	+ 'max' => 3,
	455	+ 'step' => 0.1,
	456	+ ],
	457	+ ],
467	458	'selectors' => [
468	459	'{{WRAPPER}}' => '--transition: {{SIZE}}{{UNIT}}',
469	460	],
470	461	]
		@@ -538,23 +529,18 @@
538	529	'stroke_width_normal',
539	530	[
540	531	'label' => esc_html__( 'Width', 'elementor' ),
541	532	'type' => Controls_Manager::SLIDER,
542		- 'size_units' => [ 'px', 'em', 'rem', 'custom' ],
543	533	'default' => [
544	534	'size' => 1,
	535	+ 'unit' => 'px',
545	536	],
546	537	'range' => [
547	538	'px' => [
548		- 'min' => 1,
	539	+ 'min' => 0,
549	540	'max' => 20,
	541	+ 'step' => 1,
550	542	],
551		- 'em' => [
552		- 'max' => 2,
553		- ],
554		- 'rem' => [
555		- 'max' => 2,
556		- ],
557	543	],
558	544	'selectors' => [
559	545	'{{WRAPPER}}' => '--stroke-width: {{SIZE}}{{UNIT}}',
560	546	],
		@@ -609,23 +595,18 @@
609	595	'stroke_width_hover',
610	596	[
611	597	'label' => esc_html__( 'Width', 'elementor' ),
612	598	'type' => Controls_Manager::SLIDER,
613		- 'size_units' => [ 'px', 'em', 'rem', 'custom' ],
614	599	'default' => [
615	600	'size' => '',
	601	+ 'unit' => 'px',
616	602	],
617	603	'range' => [
618	604	'px' => [
619		- 'min' => 1,
	605	+ 'min' => 0,
620	606	'max' => 20,
	607	+ 'step' => 1,
621	608	],
622		- 'em' => [
623		- 'max' => 2,
624		- ],
625		- 'rem' => [
626		- 'max' => 2,
627		- ],
628	609	],
629	610	'selectors' => [
630	611	'{{WRAPPER}}' => '--stroke-width-hover: {{SIZE}}{{UNIT}}',
631	612	],
		@@ -636,13 +617,19 @@
636	617	'stroke_transition',
637	618	[
638	619	'label' => esc_html__( 'Transition Duration', 'elementor' ),
639	620	'type' => Controls_Manager::SLIDER,
640		- 'size_units' => [ 's', 'ms', 'custom' ],
641	621	'default' => [
	622	+ 'size' => 0.3,
642	623	'unit' => 's',
643		- 'size' => 0.3,
644	624	],
	625	+ 'range' => [
	626	+ 's' => [
	627	+ 'min' => 0,
	628	+ 'max' => 3,
	629	+ 'step' => 0.1,
	630	+ ],
	631	+ ],
645	632	'selectors' => [
646	633	'{{WRAPPER}}' => '--stroke-transition: {{SIZE}}{{UNIT}}',
647	634	],
648	635	]
		@@ -676,24 +663,20 @@
676	663	*/
677	664	protected function render() {
678	665	$settings = $this->get_settings_for_display();
679	666
680		- // Get the path URL.
681		- $path_url = ( 'custom' === $settings['path'] )
682		- ? wp_get_attachment_url( $settings['custom_path']['id'] )
683		- : Shapes_Module::get_path_url( $settings['path'] );
	667	+ // Get the shape SVG markup.
	668	+ if ( 'custom' !== $settings['path'] ) {
	669	+ $path_svg = Shapes_Module::get_path_svg( $settings['path'] );
	670	+ } else {
	671	+ $url = esc_url( $settings['custom_path']['url'] );
	672	+ // Get the file contents only if it's svg.
	673	+ $path_svg = ( 'svg' === pathinfo( $url, PATHINFO_EXTENSION ) ) ? file_get_contents( $url ) : '';
	674	+ }
684	675
685		- // Remove the HTTP protocol to prevent Mixed Content error.
686		- $path_url = preg_replace( '/^https?:/i', '', $path_url );
	676	+ // Add Text Path text.
	677	+ $this->add_render_attribute( 'text_path', 'class', 'e-text-path' );
687	678
688		- // Add Text Path attributes.
689		- $this->add_render_attribute( 'text_path', [
690		- 'class' => 'e-text-path',
691		- 'data-text' => htmlentities( esc_attr( $settings['text'] ) ),
692		- 'data-url' => esc_url( $path_url ),
693		- 'data-link-url' => esc_url( $settings['link']['url'] ?? '' ),
694		- ] );
695		-
696	679	// Add hover animation.
697	680	if ( ! empty( $settings['hover_animation'] ) ) {
698	681	$this->add_render_attribute( 'text_path', 'class', 'elementor-animation-' . $settings['hover_animation'] );
699	682	}
		@@ -699,8 +682,10 @@
699	682	}
700	683
701	684	// Render.
702	685	?>
703		- <div <?php $this->print_render_attribute_string( 'text_path' ); ?>></div>
	686	+ <div <?php $this->print_render_attribute_string( 'text_path' ); ?> data-text="<?php echo esc_attr( $settings['text'] ); ?>">
	687	+ <?php Utils::print_wp_kses_extended( $path_svg, [ 'svg' ] ); ?>
	688	+ </div>
704	689	<?php
705	690	}
706	691	}