← All changes | modules/shapes/widgets/text-path.php +66 -110 4.3.4 → 3.5.0-beta1 View file →

		@@ -2,13 +2,11 @@
2	2
3	3	namespace Elementor\Modules\Shapes\Widgets;
4	4
5	5	use Elementor\Controls_Manager;
6		-use Elementor\Core\Kits\Documents\Tabs\Global_Typography;
7		-use Elementor\Group_Control_Typography;
8	6	use Elementor\Modules\Shapes\Module as Shapes_Module;
	7	+use Elementor\Utils;
9	8	use Elementor\Group_Control_Text_Stroke;
10		-use Elementor\Plugin;
11	9	use Elementor\Widget_Base;
12	10
13	11	if ( ! defined( 'ABSPATH' ) ) {
14	12	exit; // Exit if accessed directly.
		@@ -17,8 +15,9 @@
17	15	/**
18	16	* Elementor WordArt widget.
19	17	*
20	18	* Elementor widget that displays text along SVG path.
	19	+ *
21	20	*/
22	21	class TextPath extends Widget_Base {
23	22
24	23	const DEFAULT_PATH_FILL = '#E8178A';
		@@ -29,17 +28,14 @@
29	28	* Retrieve Text Path widget name.
30	29	*
31	30	* @return string Widget name.
32	31	* @access public
	32	+ *
33	33	*/
34	34	public function get_name() {
35	35	return 'text-path';
36	36	}
37	37
38		- public function get_group_name() {
39		- return 'shapes';
40		- }
41		-
42	38	/**
43	39	* Get widget title.
44	40	*
45	41	* Retrieve Text Path widget title.
		@@ -45,8 +41,9 @@
45	41	* Retrieve Text Path widget title.
46	42	*
47	43	* @return string Widget title.
48	44	* @access public
	45	+ *
49	46	*/
50	47	public function get_title() {
51	48	return esc_html__( 'Text Path', 'elementor' );
52	49	}
		@@ -57,8 +54,9 @@
57	54	* Retrieve Text Path widget icon.
58	55	*
59	56	* @return string Widget icon.
60	57	* @access public
	58	+ *
61	59	*/
62	60	public function get_icon() {
63	61	return 'eicon-wordart';
64	62	}
		@@ -69,8 +67,9 @@
69	67	* Retrieve the list of keywords the widget belongs to.
70	68	*
71	69	* @return array Widget keywords.
72	70	* @access public
	71	+ *
73	72	*/
74	73	public function get_keywords() {
75	74	return [ 'text path', 'word path', 'text on path', 'wordart', 'word art' ];
76	75	}
		@@ -75,26 +74,8 @@
75	74	return [ 'text path', 'word path', 'text on path', 'wordart', 'word art' ];
76	75	}
77	76
78	77	/**
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	78	* Register content controls under content tab.
98	79	*/
99	80	protected function register_content_tab() {
100	81	$this->start_controls_section(
		@@ -144,11 +125,12 @@
144	125	'dynamic' => [
145	126	'active' => true,
146	127	],
147	128	'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' )
	129	+ /* translators: 1: Link open tag, 2: Link close tag. */
	130	+ esc_html__( 'Want to create custom text paths with SVG? %1$sLearn More%2$s', 'elementor' ),
	131	+ '<a target="_blank" href="https://go.elementor.com/text-path-create-paths/">',
	132	+ '</a>'
151	133	),
152	134	]
153	135	);
154	136
		@@ -249,9 +231,9 @@
249	231	'size',
250	232	[
251	233	'label' => esc_html__( 'Size', 'elementor' ),
252	234	'type' => Controls_Manager::SLIDER,
253		- 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
	235	+ 'size_units' => [ '%', 'px' ],
254	236	'range' => [
255	237	'%' => [
256	238	'min' => 0,
257	239	'max' => 100,
		@@ -257,19 +239,23 @@
257	239	'max' => 100,
258	240	'step' => 10,
259	241	],
260	242	'px' => [
	243	+ 'min' => 0,
261	244	'max' => 800,
262	245	'step' => 50,
263	246	],
264	247	],
265	248	'default' => [
	249	+ 'unit' => 'px',
266	250	'size' => 500,
267	251	],
268	252	'tablet_default' => [
	253	+ 'unit' => 'px',
269	254	'size' => 500,
270	255	],
271	256	'mobile_default' => [
	257	+ 'unit' => 'px',
272	258	'size' => 500,
273	259	],
274	260	'selectors' => [
275	261	'{{WRAPPER}}' => '--width: {{SIZE}}{{UNIT}};',
		@@ -281,17 +267,27 @@
281	267	'rotation',
282	268	[
283	269	'label' => esc_html__( 'Rotate', 'elementor' ),
284	270	'type' => Controls_Manager::SLIDER,
285		- 'size_units' => [ 'deg', 'grad', 'rad', 'turn', 'custom' ],
	271	+ 'size_units' => [ 'deg' ],
	272	+ 'range' => [
	273	+ 'deg' => [
	274	+ 'min' => 0,
	275	+ 'max' => 360,
	276	+ 'step' => 1,
	277	+ ],
	278	+ ],
286	279	'default' => [
287	280	'unit' => 'deg',
	281	+ 'size' => '',
288	282	],
289	283	'tablet_default' => [
290	284	'unit' => 'deg',
	285	+ 'size' => '',
291	286	],
292	287	'mobile_default' => [
293	288	'unit' => 'deg',
	289	+ 'size' => '',
294	290	],
295	291	'selectors' => [
296	292	'{{WRAPPER}}' => '--rotate: {{SIZE}}{{UNIT}};',
297	293	],
		@@ -297,44 +293,9 @@
297	293	],
298	294	]
299	295	);
300	296
301		- $this->add_control(
302		- 'text_heading',
303		- [
304		- 'label' => esc_html__( 'Text', 'elementor' ),
305		- 'type' => Controls_Manager::HEADING,
306		- ]
307		- );
308		-
309	297	$this->add_group_control(
310		- Group_Control_Typography::get_type(),
311		- [
312		- 'name' => 'text_typography',
313		- 'selector' => '{{WRAPPER}}',
314		- 'global' => [
315		- 'default' => Global_Typography::TYPOGRAPHY_TEXT,
316		- ],
317		- 'fields_options' => [
318		- 'font_size' => [
319		- 'default' => [
320		- 'size' => '20',
321		- 'unit' => 'px',
322		- ],
323		- 'size_units' => [ 'px' ],
324		- ],
325		- // Text decoration isn't an inherited property, so it's required to explicitly
326		- // target the specific `textPath` element.
327		- 'text_decoration' => [
328		- 'selectors' => [
329		- '{{WRAPPER}} textPath' => 'text-decoration: {{VALUE}};',
330		- ],
331		- ],
332		- ],
333		- ]
334		- );
335		-
336		- $this->add_group_control(
337	298	Group_Control_Text_Stroke::get_type(),
338	299	[
339	300	'name' => 'text_stroke',
340	301	'selector' => '{{WRAPPER}} textPath',
		@@ -345,30 +306,26 @@
345	306	'word_spacing',
346	307	[
347	308	'label' => esc_html__( 'Word Spacing', 'elementor' ),
348	309	'type' => Controls_Manager::SLIDER,
349		- 'size_units' => [ 'px', 'em', 'rem', 'custom' ],
	310	+ 'size_units' => [ 'px' ],
350	311	'range' => [
351	312	'px' => [
352	313	'min' => -20,
353	314	'max' => 20,
	315	+ 'step' => 1,
354	316	],
355		- 'em' => [
356		- 'min' => -1,
357		- 'max' => 1,
358		- ],
359		- 'rem' => [
360		- 'min' => -1,
361		- 'max' => 1,
362		- ],
363	317	],
364	318	'default' => [
	319	+ 'unit' => 'px',
365	320	'size' => '',
366	321	],
367	322	'tablet_default' => [
	323	+ 'unit' => 'px',
368	324	'size' => '',
369	325	],
370	326	'mobile_default' => [
	327	+ 'unit' => 'px',
371	328	'size' => '',
372	329	],
373	330	'selectors' => [
374	331	'{{WRAPPER}}' => '--word-spacing: {{SIZE}}{{UNIT}};',
		@@ -378,9 +335,9 @@
378	335
379	336	$this->add_control(
380	337	'start_point',
381	338	[
382		- 'label' => esc_html__( 'Starting Point', 'elementor' ) . ' (%)',
	339	+ 'label' => esc_html__( 'Starting Point', 'elementor' ),
383	340	'type' => Controls_Manager::SLIDER,
384	341	'size_units' => [ '%' ],
385	342	'range' => [
386	343	'px' => [
		@@ -458,13 +415,19 @@
458	415	'hover_transition',
459	416	[
460	417	'label' => esc_html__( 'Transition Duration', 'elementor' ),
461	418	'type' => Controls_Manager::SLIDER,
462		- 'size_units' => [ 's', 'ms', 'custom' ],
463	419	'default' => [
	420	+ 'size' => 0.3,
464	421	'unit' => 's',
465		- 'size' => 0.3,
466	422	],
	423	+ 'range' => [
	424	+ 's' => [
	425	+ 'min' => 0,
	426	+ 'max' => 3,
	427	+ 'step' => 0.1,
	428	+ ],
	429	+ ],
467	430	'selectors' => [
468	431	'{{WRAPPER}}' => '--transition: {{SIZE}}{{UNIT}}',
469	432	],
470	433	]
		@@ -538,23 +501,18 @@
538	501	'stroke_width_normal',
539	502	[
540	503	'label' => esc_html__( 'Width', 'elementor' ),
541	504	'type' => Controls_Manager::SLIDER,
542		- 'size_units' => [ 'px', 'em', 'rem', 'custom' ],
543	505	'default' => [
544	506	'size' => 1,
	507	+ 'unit' => 'px',
545	508	],
546	509	'range' => [
547	510	'px' => [
548		- 'min' => 1,
	511	+ 'min' => 0,
549	512	'max' => 20,
	513	+ 'step' => 1,
550	514	],
551		- 'em' => [
552		- 'max' => 2,
553		- ],
554		- 'rem' => [
555		- 'max' => 2,
556		- ],
557	515	],
558	516	'selectors' => [
559	517	'{{WRAPPER}}' => '--stroke-width: {{SIZE}}{{UNIT}}',
560	518	],
		@@ -609,23 +567,18 @@
609	567	'stroke_width_hover',
610	568	[
611	569	'label' => esc_html__( 'Width', 'elementor' ),
612	570	'type' => Controls_Manager::SLIDER,
613		- 'size_units' => [ 'px', 'em', 'rem', 'custom' ],
614	571	'default' => [
615	572	'size' => '',
	573	+ 'unit' => 'px',
616	574	],
617	575	'range' => [
618	576	'px' => [
619		- 'min' => 1,
	577	+ 'min' => 0,
620	578	'max' => 20,
	579	+ 'step' => 1,
621	580	],
622		- 'em' => [
623		- 'max' => 2,
624		- ],
625		- 'rem' => [
626		- 'max' => 2,
627		- ],
628	581	],
629	582	'selectors' => [
630	583	'{{WRAPPER}}' => '--stroke-width-hover: {{SIZE}}{{UNIT}}',
631	584	],
		@@ -636,13 +589,19 @@
636	589	'stroke_transition',
637	590	[
638	591	'label' => esc_html__( 'Transition Duration', 'elementor' ),
639	592	'type' => Controls_Manager::SLIDER,
640		- 'size_units' => [ 's', 'ms', 'custom' ],
641	593	'default' => [
	594	+ 'size' => 0.3,
642	595	'unit' => 's',
643		- 'size' => 0.3,
644	596	],
	597	+ 'range' => [
	598	+ 's' => [
	599	+ 'min' => 0,
	600	+ 'max' => 3,
	601	+ 'step' => 0.1,
	602	+ ],
	603	+ ],
645	604	'selectors' => [
646	605	'{{WRAPPER}}' => '--stroke-transition: {{SIZE}}{{UNIT}}',
647	606	],
648	607	]
		@@ -676,24 +635,19 @@
676	635	*/
677	636	protected function render() {
678	637	$settings = $this->get_settings_for_display();
679	638
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'] );
	639	+ // Get the shape SVG markup.
	640	+ if ( 'custom' !== $settings['path'] ) {
	641	+ $path_svg = Shapes_Module::get_path_svg( $settings['path'] );
	642	+ } else {
	643	+ $path = get_attached_file( $settings['custom_path']['id'] );
	644	+ $path_svg = Shapes_Module::read_svg( $path );
	645	+ }
684	646
685		- // Remove the HTTP protocol to prevent Mixed Content error.
686		- $path_url = preg_replace( '/^https?:/i', '', $path_url );
	647	+ // Add Text Path text.
	648	+ $this->add_render_attribute( 'text_path', 'class', 'e-text-path' );
687	649
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	650	// Add hover animation.
697	651	if ( ! empty( $settings['hover_animation'] ) ) {
698	652	$this->add_render_attribute( 'text_path', 'class', 'elementor-animation-' . $settings['hover_animation'] );
699	653	}
		@@ -699,8 +653,10 @@
699	653	}
700	654
701	655	// Render.
702	656	?>
703		- <div <?php $this->print_render_attribute_string( 'text_path' ); ?>></div>
	657	+ <div <?php $this->print_render_attribute_string( 'text_path' ); ?> data-text="<?php echo esc_attr( $settings['text'] ); ?>">
	658	+ <?php Utils::print_wp_kses_extended( $path_svg, [ 'svg' ] ); ?>
	659	+ </div>
704	660	<?php
705	661	}
706	662	}