0
297
VistasElementor Custom Widget Color Control no funciona en la edición en vivo
Estoy trabajando en un widget personalizado y quiero agregar una configuración de estilo al widget. Un pequeño problema que encontré es que el control de color en la edición en vivo no funciona (funcionará para la vista previa y después de guardar y luego volver a cargar).
Como se muestra a continuación, el título de la pestaña y el color de la fuente del contenido no cambian en el editor en vivo. 
Cuando hace clic en la vista previa, funciona como se esperaba. 
Comencé con el código de muestra proporcionado en la página de Desarrolladores de Elementor :
echo '<h2 class="title" style="color: ' . $settings['title_color'] . '"> .. </h2>';Sin embargo, obtengo los mismos resultados que los descritos en la primera sección.
Luego traté de pasar parámetros a la clase css, como se sugiere en esta publicación de desbordamiento de pila. Aunque se configuró con éxito, pero no se configuró correctamente.
Mi archivo php:
echo "<p id='narrative' style=' --fontColor : ".$settings['content_color']."'></p>";En mi archivo css:
#narrative {color: var(--fontColor);} 
Cuando compruebo la herramienta de desarrollo:
No estoy muy seguro de lo que salió mal, agradezco mucho si alguien pudiera indicarme la dirección correcta. Gracias.
1 Respuestas
Responde la pregunta0
Después de leer el código fuente de muestra en Elementor Code Reference .
Descubrí que me perdí dos pasos importantes:
- agregue selector a su atributo de clase al agregar un nuevo control de color:
$this->add_control( 'border_color', [ 'label' => __( 'Border Color', 'elementor' ), 'type' => \Elementor\Controls_Manager::COLOR, 'selectors' => [ '{{WRAPPER}} .title' => 'color: {{VALUE}};', <-- add selector ], ] );- (Importante) Agregue la función _content_template(), esta función es para generar una vista previa en vivo: solo tenga en cuenta que cualquier bucle for en esta función debe escribirse en javascript con
<# #>en lugar de php en render().
<h2 class="title"> .. </h2>';