CODEWITHSUNDEEP
javascriptphpcsswordpresselementor
user2232355
user2232355

Reputation: 315

Elementor Custom Widget Color Control does not work in live editing

I am working on a custom widget and I want to add styling configuration to the widget. One small problem that I found is that the color control in live editing does not work (It will work for preview and after save then reload).

As shown below, Tab's title and content font color does not change in live editor. elementor live editor

When you click on preview, it works as expected. Elementor in preview mode

I started with the sample code provided on the Elementor Developers page:

echo '<h2 class="title" style="color: ' . $settings['title_color'] . '"> .. </h2>';

However I am getting the same results as describe in the first section.

I then tried to pass parameters to css class, as suggested in this stack overflow post. Though it was successfully set, but it was not set correctly.
My php file:

echo "<p id='narrative' style=' --fontColor : ".$settings['content_color']."'></p>";

In my css file:

#narrative {color: var(--fontColor);}

enter image description here
When I check on dev tool:
enter image description here

I am not really sure what went wrong, greatly appreciate if anyone could point me to the right direction. Thank you.

Upvotes: 2

Views: 1283

Answers (1)

user2232355
user2232355

Reputation: 315

After reading through the sample source code on Elementor Code Reference.

I found out that I missed out a two important steps:

  1. add selector to your class attribute when adding new color control:
$this->add_control(
    'border_color',
    [
        'label' => __( 'Border Color', 'elementor' ),
        'type' => \Elementor\Controls_Manager::COLOR,
        'selectors' => [
            '{{WRAPPER}} .title' => 'color: {{VALUE}};', <-- add selector
        ],
    ]
);
  1. (Important) Add _content_template() function, this function is to generate live preview: Just to note that any for loops in this function should be written in javascript with <# #> instead of php in render().
<h2 class="title"> .. </h2>';

Upvotes: 1

Related Questions