Elementor widget animation setup
<script>
window.effect1ElementId = '<?php echo esc_js($effect2_id); ?>';
window.effectFontSize = '<?php echo esc_js($font_size); ?>';
window.effectTag = '<?php echo esc_js($tag); ?>';
</script><script>
" >
</script><script>
</script>';
self::$script_loaded = true;
}
if(!is_admin())
{
?>
<script>
window.effectFontSize = '<?php echo esc_js($font_size); ?>';
</script><script>
" >
</script>– **Properly registered and enqueued** all scripts and styles using Elementor's recommended approach.
– Added `enqueue_scripts()` method to handle all script/style registration cleanly.
– Removed direct “ and “ tags from the `render()` method to fix WordPress Coding Standards violations.
– Utilized Elementor's built-in methods `get_script_depends()` and `get_style_depends()` to ensure the scripts and styles load appropriately.
This ensures compliance with Elementor and WordPress best practices.
wp_register_style('eatw-effect2-style', EATW_PLUGIN_URL . 'css/effect2.css');
wp_register_script('eatw-effect1', EATW_PLUGIN_URL . 'js/effect1.js', ['jquery'], '1.0', true);
wp_register_script('eatw-effect2', EATW_PLUGIN_URL . 'js/effect2.js', ['jquery'], '1.0', true);
wp_register_script('eatw-datgui', EATW_PLUGIN_URL . 'js/dat.gui.min.js', [], '1.0', true);
we need this based on effect selected
### Adjust your `render()` method to conditionally enqueue the required assets:
Replace your current `render()` method and remove `get_script_depends()` and `get_style_depends()` methods. Instead, enqueue the scripts conditionally directly within the render method.
### Corrected and optimized render method:
protected function render() {
$settings = $this->get_settings_for_display();
$tag = $settings['heading_tag'];
$text = $settings['content'];
$effect = $settings['font_effect'];
$widget_id = $this->get_id();
if ('effect-one' === $effect) {
wp_enqueue_style('eatw-effect1-style', EATW_PLUGIN_URL . 'css/effect1.css', [], '1.0');
wp_enqueue_script('eatw-effect1', EATW_PLUGIN_URL . 'js/effect1.js', ['jquery'], '1.0', true);
$effect_id = 'effect1-' . $widget_id;
echo "<div id='" . esc_attr($effect_id) . "' class='variable-font-content effect-one'>";
echo "<{$tag}>" . esc_html($text) . "</{$tag}>";
echo "</div>";
echo "<script>
window.effect1ElementId = '" . esc_js($effect_id) . "';
</script>";
} elseif ('effect-two' === $effect) {
wp_enqueue_style('eatw-effect2-style', EATW_PLUGIN_URL . 'css/effect2.css', [], '1.0');
wp_enqueue_script('eatw-datgui', EATW_PLUGIN_URL . 'js/dat.gui.min.js', [], '1.0', true);
wp_enqueue_script('eatw-effect2', EATW_PLUGIN_URL . 'js/effect2.js', ['jquery'], '1.0', true);
$effect_id = 'effect2-' . $widget_id;
echo "<div id='" . esc_attr($effect_id) . "' class='variable-font-content effect-two'>";
echo "<{$tag}>" . esc_html($text) . "</{$tag}>";
echo "</div>";
echo "<script>
window.effectFontSize = '" . esc_js($settings['text_typography_font_size']['size'] . $settings['text_typography_font_size']['unit']) . "';
</script>";
}
}### Explanation:
– **Conditional enqueueing:** `wp_enqueue_script()` and `wp_enqueue_style()` are used inside the `render()` method depending on the selected effect, ensuring scripts and styles are loaded only when needed.
– **No global enqueue:** Removed `get_script_depends()` and `get_style_depends()` methods because assets are conditionally loaded.
This ensures compliance with WordPress and Elementor standards while maintaining performance by loading assets only as needed.
<script>
window.effectFontSize = '<?php echo esc_js($font_size); ?>';
</script><script>
" >
</script>How this will work when add to wp_enueue
### Here’s how you should do it properly:
**Step 1: Enqueue the Script**
First, enqueue your script correctly in your `render()` method or another appropriate method:
wp_enqueue_script(
'eatw-effect2',
EATW_PLUGIN_URL . 'js/effect2.js',
['jquery'],
'1.0',
true
);**Step 2: Pass PHP variables to JavaScript using `wp_localize_script()`**
Right after enqueuing your script, you can use:
wp_localize_script(
'eatw-effect2', // Script handle
'eatwEffectSettings', // JS object name accessible from your JS file
[
'effectFontSize' => $font_size
]
);This will create a global JavaScript object called `eatwEffectSettings`.
### Your corrected implementation:
Replace your `render()` method's relevant portion with the following:
if ('effect-two' === $effect) {
wp_enqueue_style('eatw-effect2-style', EATW_PLUGIN_URL . 'css/effect2.css', [], '1.0');
wp_enqueue_script('eatw-datgui', EATW_PLUGIN_URL . 'js/dat.gui.min.js', [], '1.0', true);
wp_enqueue_script('eatw-effect2', EATW_PLUGIN_URL . 'js/effect2.js', ['jquery'], '1.0', true);
wp_localize_script(
'eatw-effect2',
'eatwEffectSettings',
[
'effectFontSize' => $font_size,
]
);
$effect_id = 'effect2-' . $widget_id;
?>
<div id="<?php echo esc_attr($effect_id); ?>" class="variable-font-content effect-two">
<<?php echo esc_html($tag); ?>><?php echo esc_html($text); ?></<?php echo esc_html($tag); ?>>
</div>
<?php
}### JavaScript side usage (`effect2.js`):
Now you can easily use this JavaScript object inside your script:
// effect2.js
console.log(eatwEffectSettings.effectFontSize);
// You can now use eatwEffectSettings.effectFontSize wherever needed—
**Summary of what's happening:**
– `wp_enqueue_script()` properly registers and loads the script.
– `wp_localize_script()` passes PHP data directly into JavaScript, making it easy to manage and secure against XSS vulnerabilities.
– Your JavaScript files can access this data directly via the created global JS object.
<script>
window.effect1ElementId = '<?php echo esc_js($effect2_id); ?>';
window.effectFontSize = '<?php echo esc_js($font_size); ?>';
window.effectTag = '<?php echo esc_js($tag); ?>';
</script><script>
" >
</script>—
### ✅ **Correct Implementation:**
Replace your PHP snippet with this corrected, WordPress-compliant version:
// Enqueue CSS and JS for Effect One
wp_enqueue_style('eatw-effect1-style', EATW_PLUGIN_URL . 'css/effect1.css', [], '1.0');
wp_enqueue_script('eatw-effect1', EATW_PLUGIN_URL . 'js/effect1.js', ['jquery'], '1.0', true);
// Pass PHP variables to JavaScript
wp_localize_script(
'eatw-effect1',
'eatwEffect1Settings',
[
'effect1ElementId' => $effect2_id,
'effectFontSize' => $font_size,
'effectTag' => $tag,
]
);
// Render HTML
?>
<div id="<?php echo esc_attr($effect2_id); ?>" class="variable-font-content effect-one">
<<?php echo esc_html($tag); ?>>
<?php echo esc_html($text); ?>
</<?php echo esc_html($tag); ?>>
</div>
<?php—
### ✅ **Usage in JavaScript (`effect1.js`):**
You can access these variables easily:
// effect1.js
console.log(eatwEffect1Settings.effect1ElementId);
console.log(eatwEffect1Settings.effectFontSize);
console.log(eatwEffect1Settings.effectTag);
// Example usage:
const targetElement = document.getElementById(eatwEffect1Settings.effect1ElementId);
targetElement.style.fontSize = eatwEffect1Settings.effectFontSize;—
### ⚡ **Explanation:**
– `wp_enqueue_script()` correctly registers and loads the script.
– `wp_localize_script()` safely passes PHP data directly into JavaScript, protecting against vulnerabilities like XSS attacks.
– JavaScript variables become accessible through the global JS object (`eatwEffect1Settings`), maintaining clean and secure code.
This method is fully compliant with WordPress standards, ensuring proper functionality and security.