Question

Color control not rendering in custom widget

  • 19 August 2021
  • 0 replies
  • 8 views

I have a custom widget that is using the color control to style an inline SVG. Everything works great except I can’t get the control to render in the actual HTML, only in the {{wrapper}}. This works but I need to add a gradient to the SVG using the color-stop attribute. When I try to style the color-stop using the {{wrapper}}, some default color is overriding and I can’t force it to take precedence. When I try to pull the color value into actual protected function render(), data doesn’t appear… 

// Color Control
$this->add_control(
'border_color',
[
'label' => __( 'Border Color', 'plugin-name' ),
'type' => \Elementor\Controls_Manager::COLOR,
'scheme' => [
'type' => \Elementor\Scheme_Color::get_type(),
'value' => \Elementor\Scheme_Color::COLOR_2,
],
'selectors' => [
// THIS works but I can't get the user set color to appear
'{{WRAPPER}} .section-border-stop' => 'stop-color: {{VALUE}}',
// '{{WRAPPER}} .section-border' => 'fill: {{VALUE}}',
],
]
);

// Color Render
protected function render() {
$settings = $this->get_settings_for_display();

echo '
<div class="section-border-container">
<svg class="section-border border-' . $settings['border_direction'] . '" viewBox="0 0 4000 250" fill="url(#gradient0)">
<linearGradient id="gradient0" x1="0" x2="0" y1="1" y2="0">
<stop class="section-border-stop" offset="0%" stop-opacity="0"/>
<stop class="section-border-stop" offset="50%"stop-opacity="1"/>
</linearGradient>
<path class="st0" d="M4000,280.35c0-46.42,0-173.19,0-219.61c-37.25,3.85-74.46,7.82-111.76,11.49c-13.9,1.37-27.99,2.37-42.06,2.84
c-7.54,0.25-15.23-1.04-22.87-1.52c-8.84-0.55-17.77-1.54-26.56-1.27c-12.21,0.37-24.35,1.62-36.46,2.71
c-5.82,0.52-8.28-0.47-8.77-3.95c-1.53-11.04-14.16-17.83-33.64-17.69c-32.73,0.24-64.64,3.84-96.01,8.96
c-11.57,1.89-22.88,1.97-34.72,1.5c-12.71-0.5-25.55,0.26-38.33,0.17c-21.56-0.15-43.12-0.68-64.69-0.76
c-12.29-0.05-23.36,2.17-33.36,6.6c-15.34,6.8-32.69,9.94-52.38,8.85c-11.01-0.61-21.66,0.6-31.29,4.29
c-4.59,1.76-10.09,2.75-15.24,4.01c-16.12,3.94-29.91,1.17-38.56-9.37c-6.21-7.57-14.84-10.81-28.57-11.68
c-10.78-0.68-21.71-1.92-31.91-3.99c-25.14-5.12-48.78-2.52-72.22,3.26c-7.08,1.75-14.07,4.02-21.49,4.78
c-5.27,0.54-11.65-0.47-16.77-1.78c-60.68-15.55-123.75-20.9-189.54-15.23c-2.37,0.2-4.78,0.28-7.13,0.54
c-12.02,1.33-21.25,0.61-27.96-6.9c-10.14-11.34-30.47-15.47-50.26-15.8c-33.16-0.57-66.45,1.22-99.68,2.16
c-10,0.28-20.1,1.96-28.65-2.92c-1.75-1-5.64-0.62-8.3-1.23c-6.98-1.6-14.9-2.64-20.49-5.28c-10.77-5.08-23.41-4.9-35.6-5.32
c-26.7-0.92-52.47,2.26-77.6,7.36c-3.24,0.66-6.7,1.19-10.11,1.28c-25.55,0.71-51.11,1.76-76.67,1.74
c-15.07-0.01-30.1-1.96-45.2-2.69c-45.81-2.22-91.6-0.81-137.36,0.75c-5.9,0.2-9.75-0.48-13.63-3.3c-2.78-2.02-8.02-3.83-12.43-4.06
c-33.37-1.69-66.6-0.63-99.44,3.21c-9.61,1.12-18.56,1.72-28.12-0.48c-5.73-1.32-12.61-1.76-18.82-1.48
c-34.12,1.56-66.71-3.21-99.26-7.81c-6.25-0.88-12.04-3.82-17.01-6.46c-6.26-3.33-12.72-4.79-21.42-4.85
c-43.42-0.3-86.85-1.77-130.23-1.33c-37.45,0.38-75.28,0.4-111.82,6.63c-2.04,0.35-4.26,0.52-6.1,1.09
c-17.36,5.39-35.97,7.11-55.53,7.25c-7.06,0.05-14.91,1.6-20.9,3.81c-8.66,3.2-17.42,4.08-27.28,3.91c-8.98-0.15-18,0.46-27,0.5
c-5.76,0.03-12.12,0.45-17.18-0.74c-13.16-3.11-26.4-3.64-39.95-1.92c-24.43,3.11-50.58,4.22-72.72,10.21
c-36.85,9.96-75.69,13.25-114.71,17.22c-14.49,1.47-27.84,4.12-40.09,9.46c-9.04,3.94-21.02,1.94-30.25-1.09
c-6.79-2.23-13.15-2.76-20.43-2.68c-29.83,0.32-59.68,0.94-89.5,0.64c-37.06-0.37-72.09-5.44-104.08-16.79
c-5.4-1.92-12.5-2.44-18.97-3.13c-5.41-0.57-11.07-0.7-16.58-0.55c-6.06,0.17-12.07,0.96-18.12,1.37
c-11.26,0.77-22.81,2.71-33.76,1.93c-20.09-1.43-38.53,1.15-57.3,4.34c-13.76,2.34-27.79,4.34-41.93,5.65
c-7.3,0.68-15.15-0.9-22.68-0.66c-11.86,0.37-23.65,1.41-35.47,2.17c-0.79,0.05-1.6,0.16-2.32,0.34
c-15.56,3.97-30.75,3.14-46.78,0.2c-14.77-2.71-30.08-1.64-44.45,2.17c-0.97,0.26-2.15,0.41-2.84,0.83
c-12.86,7.81-28.37,4.82-43.34,3.44c-10.68-0.99-21.01-1.26-31.49,0.89c-30.29,6.21-61.46,8.06-93.35,5.56
c-1.82-0.14-3.96-0.28-5.31-0.89c-11.08-5.01-23.6-3.76-36.06-2.95c-5.03,0.33-10.12,0.42-15.11,0.9c-5.72,0.55-9.7,0.21-13.31-3.14
c-4.5-4.17-12.9-4.2-20.29-3.17c-12.15,1.69-23.92,4.29-36.1,5.91c-8.42,1.12-17.26,1.18-25.89,1.82
c-4.72,0.35-9.51,0.68-14.04,1.47c-17.55,3.04-33.18,1.08-47.17-5.6c-13.64-6.52-29.62-6.64-46.16-5.92
c-7.02,0.3-14.33,0.16-21.22-0.63c-20.51-2.34-40.61-2.21-60.58,1.66c-10.01,1.94-21.71,2.26-30.04,5.52
c-13.3,5.22-28.5,6.41-42.77,9.5c-6.53,1.41-12.16,0.53-18.25-1.29c-27.26-8.11-55.29-14.65-86.63-15.76
c-15.83-0.56-31.49-2.84-47.2-4.44C22.91,43.97,11.47,42.65,0,41.39c0,52.87,0,186.09,0,238.96H4000z"/>
</svg>
</div>
';
}

 


0 replies

Be the first to reply!

Reply