← All changes | modules/shapes/widgets/text-path.php +64 -91 4.3.0-beta3 → 3.4.0-dev9 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(
		@@ -143,13 +125,9 @@
143	125	],
144	126	'dynamic' => [
145	127	'active' => true,
146	128	],
147		- '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' )
151		- ),
	129	+ 'description' => sprintf( esc_html__( 'Want to create custom text paths with SVG? <a target="_blank" href="%s">Learn More</a>', 'elementor' ), 'https://go.elementor.com/text-path-create-paths' ),
152	130	]
153	131	);
154	132
155	133	$this->add_control(
		@@ -249,9 +227,9 @@
249	227	'size',
250	228	[
251	229	'label' => esc_html__( 'Size', 'elementor' ),
252	230	'type' => Controls_Manager::SLIDER,
253		- 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
	231	+ 'size_units' => [ '%', 'px' ],
254	232	'range' => [
255	233	'%' => [
256	234	'min' => 0,
257	235	'max' => 100,
		@@ -257,19 +235,23 @@
257	235	'max' => 100,
258	236	'step' => 10,
259	237	],
260	238	'px' => [
	239	+ 'min' => 0,
261	240	'max' => 800,
262	241	'step' => 50,
263	242	],
264	243	],
265	244	'default' => [
	245	+ 'unit' => 'px',
266	246	'size' => 500,
267	247	],
268	248	'tablet_default' => [
	249	+ 'unit' => 'px',
269	250	'size' => 500,
270	251	],
271	252	'mobile_default' => [
	253	+ 'unit' => 'px',
272	254	'size' => 500,
273	255	],
274	256	'selectors' => [
275	257	'{{WRAPPER}}' => '--width: {{SIZE}}{{UNIT}};',
		@@ -281,17 +263,27 @@
281	263	'rotation',
282	264	[
283	265	'label' => esc_html__( 'Rotate', 'elementor' ),
284	266	'type' => Controls_Manager::SLIDER,
285		- 'size_units' => [ 'deg', 'grad', 'rad', 'turn', 'custom' ],
	267	+ 'size_units' => [ 'deg' ],
	268	+ 'range' => [
	269	+ 'deg' => [
	270	+ 'min' => 0,
	271	+ 'max' => 360,
	272	+ 'step' => 1,
	273	+ ],
	274	+ ],
286	275	'default' => [
287	276	'unit' => 'deg',
	277	+ 'size' => '',
288	278	],
289	279	'tablet_default' => [
290	280	'unit' => 'deg',
	281	+ 'size' => '',
291	282	],
292	283	'mobile_default' => [
293	284	'unit' => 'deg',
	285	+ 'size' => '',
294	286	],
295	287	'selectors' => [
296	288	'{{WRAPPER}}' => '--rotate: {{SIZE}}{{UNIT}};',
297	289	],
		@@ -321,54 +313,35 @@
321	313	'unit' => 'px',
322	314	],
323	315	'size_units' => [ 'px' ],
324	316	],
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	317	],
333	318	]
334	319	);
335	320
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	321	$this->add_responsive_control(
345	322	'word_spacing',
346	323	[
347	324	'label' => esc_html__( 'Word Spacing', 'elementor' ),
348	325	'type' => Controls_Manager::SLIDER,
349		- 'size_units' => [ 'px', 'em', 'rem', 'custom' ],
	326	+ 'size_units' => [ 'px' ],
350	327	'range' => [
351	328	'px' => [
352	329	'min' => -20,
353	330	'max' => 20,
	331	+ 'step' => 1,
354	332	],
355		- 'em' => [
356		- 'min' => -1,
357		- 'max' => 1,
358		- ],
359		- 'rem' => [
360		- 'min' => -1,
361		- 'max' => 1,
362		- ],
363	333	],
364	334	'default' => [
	335	+ 'unit' => 'px',
365	336	'size' => '',
366	337	],
367	338	'tablet_default' => [
	339	+ 'unit' => 'px',
368	340	'size' => '',
369	341	],
370	342	'mobile_default' => [
	343	+ 'unit' => 'px',
371	344	'size' => '',
372	345	],
373	346	'selectors' => [
374	347	'{{WRAPPER}}' => '--word-spacing: {{SIZE}}{{UNIT}};',
		@@ -378,9 +351,9 @@
378	351
379	352	$this->add_control(
380	353	'start_point',
381	354	[
382		- 'label' => esc_html__( 'Starting Point', 'elementor' ) . ' (%)',
	355	+ 'label' => esc_html__( 'Starting Point', 'elementor' ),
383	356	'type' => Controls_Manager::SLIDER,
384	357	'size_units' => [ '%' ],
385	358	'range' => [
386	359	'px' => [
		@@ -458,13 +431,19 @@
458	431	'hover_transition',
459	432	[
460	433	'label' => esc_html__( 'Transition Duration', 'elementor' ),
461	434	'type' => Controls_Manager::SLIDER,
462		- 'size_units' => [ 's', 'ms', 'custom' ],
463	435	'default' => [
	436	+ 'size' => 0.3,
464	437	'unit' => 's',
465		- 'size' => 0.3,
466	438	],
	439	+ 'range' => [
	440	+ 's' => [
	441	+ 'min' => 0,
	442	+ 'max' => 3,
	443	+ 'step' => 0.1,
	444	+ ],
	445	+ ],
467	446	'selectors' => [
468	447	'{{WRAPPER}}' => '--transition: {{SIZE}}{{UNIT}}',
469	448	],
470	449	]
		@@ -538,23 +517,18 @@
538	517	'stroke_width_normal',
539	518	[
540	519	'label' => esc_html__( 'Width', 'elementor' ),
541	520	'type' => Controls_Manager::SLIDER,
542		- 'size_units' => [ 'px', 'em', 'rem', 'custom' ],
543	521	'default' => [
544	522	'size' => 1,
	523	+ 'unit' => 'px',
545	524	],
546	525	'range' => [
547	526	'px' => [
548		- 'min' => 1,
	527	+ 'min' => 0,
549	528	'max' => 20,
	529	+ 'step' => 1,
550	530	],
551		- 'em' => [
552		- 'max' => 2,
553		- ],
554		- 'rem' => [
555		- 'max' => 2,
556		- ],
557	531	],
558	532	'selectors' => [
559	533	'{{WRAPPER}}' => '--stroke-width: {{SIZE}}{{UNIT}}',
560	534	],
		@@ -609,23 +583,18 @@
609	583	'stroke_width_hover',
610	584	[
611	585	'label' => esc_html__( 'Width', 'elementor' ),
612	586	'type' => Controls_Manager::SLIDER,
613		- 'size_units' => [ 'px', 'em', 'rem', 'custom' ],
614	587	'default' => [
615	588	'size' => '',
	589	+ 'unit' => 'px',
616	590	],
617	591	'range' => [
618	592	'px' => [
619		- 'min' => 1,
	593	+ 'min' => 0,
620	594	'max' => 20,
	595	+ 'step' => 1,
621	596	],
622		- 'em' => [
623		- 'max' => 2,
624		- ],
625		- 'rem' => [
626		- 'max' => 2,
627		- ],
628	597	],
629	598	'selectors' => [
630	599	'{{WRAPPER}}' => '--stroke-width-hover: {{SIZE}}{{UNIT}}',
631	600	],
		@@ -636,13 +605,19 @@
636	605	'stroke_transition',
637	606	[
638	607	'label' => esc_html__( 'Transition Duration', 'elementor' ),
639	608	'type' => Controls_Manager::SLIDER,
640		- 'size_units' => [ 's', 'ms', 'custom' ],
641	609	'default' => [
	610	+ 'size' => 0.3,
642	611	'unit' => 's',
643		- 'size' => 0.3,
644	612	],
	613	+ 'range' => [
	614	+ 's' => [
	615	+ 'min' => 0,
	616	+ 'max' => 3,
	617	+ 'step' => 0.1,
	618	+ ],
	619	+ ],
645	620	'selectors' => [
646	621	'{{WRAPPER}}' => '--stroke-transition: {{SIZE}}{{UNIT}}',
647	622	],
648	623	]
		@@ -676,24 +651,20 @@
676	651	*/
677	652	protected function render() {
678	653	$settings = $this->get_settings_for_display();
679	654
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'] );
	655	+ // Get the shape SVG markup.
	656	+ if ( 'custom' !== $settings['path'] ) {
	657	+ $path_svg = Shapes_Module::get_path_svg( $settings['path'] );
	658	+ } else {
	659	+ $url = esc_url( $settings['custom_path']['url'] );
	660	+ // Get the file contents only if it's svg.
	661	+ $path_svg = ( 'svg' === pathinfo( $url, PATHINFO_EXTENSION ) ) ? file_get_contents( $url ) : '';
	662	+ }
684	663
685		- // Remove the HTTP protocol to prevent Mixed Content error.
686		- $path_url = preg_replace( '/^https?:/i', '', $path_url );
	664	+ // Add Text Path text.
	665	+ $this->add_render_attribute( 'text_path', 'class', 'e-text-path' );
687	666
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	667	// Add hover animation.
697	668	if ( ! empty( $settings['hover_animation'] ) ) {
698	669	$this->add_render_attribute( 'text_path', 'class', 'elementor-animation-' . $settings['hover_animation'] );
699	670	}
		@@ -699,8 +670,10 @@
699	670	}
700	671
701	672	// Render.
702	673	?>
703		- <div <?php $this->print_render_attribute_string( 'text_path' ); ?>></div>
	674	+ <div <?php $this->print_render_attribute_string( 'text_path' ); ?> data-text="<?php echo esc_attr( $settings['text'] ); ?>">
	675	+ <?php Utils::print_wp_kses_extended( $path_svg, [ 'svg' ] ); ?>
	676	+ </div>
704	677	<?php
705	678	}
706	679	}