elementor / elementor/elementor

📚 🐞 'frontend_available' hook returns null if a color control's value is a global color

Open
#23,886 1 comment 0 reactions 0 assignees View on GitHub
compatibility/3rd-party component/code control/color mod* mod/e* site-settings/global-colors type/developer-api
Dominant language
PHP
Stars
7.1k
Forks
1.6k
Avg merge
1d 5h
Merged PRs (30d)
193

Description

### Prerequisites

- [X] I have searched for similar issues in both open and closed tickets and cannot find a duplicate.
- [X] The issue still exists against the latest stable version of Elementor.

### Description

Hi, My name is Zain Hassan and I am a full-stack php/js developer. I am working as an elementor widget developer since past two years in freelance markets.

I have extended the widgets container background controls in my project, specifically using the attribute 'frontend_available' set to 'true'. This attribute enables me to retrieve control settings values in the front end by utilizing the 'data-settings' attribute of the container. For the most part, this functionality is working as expected.

However, I have observed a bug in the behavior of the color control. When I manually select a custom color, the control returns the color value perfectly in the 'data-settings' attribute on the front end. However, when I select a global color, the control setting is not returned as expected.

### Steps to reproduce

1) Extend the container background or page background settings.
2) Add the color setting control and make 'frontend_available' set to 'true' to get the settings in frontend page through data-settings attribute.
3) It return the control setting and color value in data-settings attribute if select color randomly but does not retrun any thing in case when we select glaobal colors.

### Isolating the problem

- [ ] This bug happens with only Elementor plugin active (and Elementor Pro).
- [ ] This bug happens with a Blank WordPress theme active ([Hello theme](https://wordpress.org/themes/hello-elementor/)).
- [X] I can reproduce this bug consistently following the steps above.

### System Info

Click to reveal

````txt

== Server Environment ==
Operating System: Linux
Software: nginx/1.16.0
MySQL version: MySQL Community Server - GPL v8.0.16
PHP Version: 8.1.9
PHP Memory Limit: 256M
PHP Max Input Vars: 4000
PHP Max Post Size: 1000M
GD Installed: Yes
ZIP Installed: Yes
Write Permissions: All right
Elementor Library: Connected

== WordPress Environment ==
Version: 6.3.1
Site URL: http://elementor-widgets.local
Home URL: http://elementor-widgets.local
WP Multisite: No
Max Upload Size: 300 MB
Memory limit: 40M
Max Memory limit: 256M
Permalink Structure: /%postname%/
Language: en-US
Timezone: 0
Debug Mode: Inactive

== Theme ==
Name: Hello Elementor
Version: 2.8.1
Author: Elementor Team
Child Theme: No

== User ==
Role: administrator
WP Profile lang: en_US
User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/117.0.0.0 Safari/537.36

== Active Plugins ==
ACF-Conditional Elementor Extension
Version: 1.2
Author: Zain Hassan

Advanced Custom Fields
Version: 6.2.1
Author: WP Engine

All-in-One WP Migration
Version: 7.78
Author: ServMask

All-in-One WP Migration Unlimited Extension
Version: 2.53
Author: ServMask

Drvn Club Widgets
Version: 1.0.0
Author: Zain Hassan

Duplicate Page
Version: 4.5.3
Author: mndpsingh287

Elementor
Version: 3.16.3
Author: Elementor.com

Elementor Pro
Version: 3.14.1
Author: Elementor.com

FakerPress
Version: 0.6.1
Author: Gustavo Bordoni

HYWD Dynamic Container Background
Version: 1.0.0
Author: HAYWOOD Digital tools

HYWD Dynamic Page Background
Version: 1.0.0
Author: HAYWOOD Digital tools

Pricing Card
Version: 1.0.0
Author: Zain Hassan

WooCommerce
Version: 8.1.1
Author: Automattic

Woo Elementor Custom Extension
Version: 1.10.6
Author: Zain Hassan

== Elements Usage ==

archive : 1
heading : 1
icon : 1
posts : 1
spacer : 1
text-editor : 1
header : 1
product : 1
button : 1
container : 4
image : 1
pricingCard : 1
text-editor : 1
woocommerce-breadcrumb : 1
woocommerce-product-add-to-cart : 1
woocommerce-product-data-tabs : 1
woocommerce-product-price : 1
woocommerce-product-related : 1
woocommerce-product-short-description : 1
woocommerce-product-title : 1
woocommerce-product-upsell : 1
wp-post : 0
text-editor : 1
wp-page : 6
container : 1
drvn-reviews-carousel : 1
heading : 1
price-table : 1
slides : 1
single-post : 1
container : 2
pricingCard : 1
theme-post-title : 1
product-archive : 2
blockquote : 2
container : 9
form : 1
heading : 6
media-carousel : 1
social-icons : 1
star-rating : 2
text-editor : 1
wc-archive-products : 1
woocommerce-products : 1
loop-item : 1
theme-post-excerpt : 1
error-404 : 1
heading : 5
spacer : 6

== Settings ==

cpt_support: post, page, product
allow_tracking: yes
unfiltered_files_upload: 1
font_display: swap

== Features ==
Custom Fonts: 0
Custom Icons: 0

== Integrations ==

woocommerce: Active

== Elementor Experiments ==
Optimized DOM Output: Active by default
Improved Asset Loading: Active by default
Improved CSS Loading: Active by default
Inline Font Icons: Inactive by default
Additional Custom Breakpoints: Active by default
admin_menu_rearrangement: Inactive by default
Flexbox Container: Active
Upgrade Swiper Library: Active by default
Grid Container: Inactive by default
Default to New Theme Builder: Active by default
Hello Theme Header & Footer: Active by default
Editor Top Bar: Inactive by default
Landing Pages: Active by default
Nested Elements: Inactive by default
Lazy Load Background Images: Inactive by default
Global Style Guide: Active by default
Page Transitions: Active by default
Notes: Active by default
Loop: Active by default
Form Submissions: Active by default
Scroll Snap: Active by default
Menu: Inactive by default

````

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.