List controls for Style Kits

[mauryaratan]

Upon several requests over the months, we've decided to add List controls for Style Kits.

Here's the initial idea for a list of options:

• Checkbox (Do not apply Styles on items with a class)

There should be two tabs:

• List
  • Margin
  • Padding
• List Item
  • Space Between
  • Alignment (Left/center/right)
  • Divider (Switch)
  • Style (Solid/double/dotted/dashed)
  • Weight
  • Width
  • Color
  • Icon selector
  • Color
  • Hover
  • Size
  • Alignment (Left/center/right), refers to width of icon shown

@JohnPixle Can you please confirm the controls?

[JohnPixle]

The controls are spot on, I've nothing else to add. Just compared with Elementor's widget and it is fine.

[mauryaratan]

@gvgvgvijayan Any update on this?

[gvgvgvijayan]

@mauryaratan as we discussed earlier I put this on hold to work in other tickets which are related 1.7.0 release.

[gvgvgvijayan]

Vijayan: Here I'm facing some conflict in implementing divider for the list if you noted widget's style tab by default divider value is off as this and few options have default value rather than empty. The divider option either be on or off but no empty value so in this, if I override it this may result in ignoring individual widget's style settings value which either may set by the user or else default standard value come with this widget. How should I handle the precedence conflict?

Ram: could we apply these styles only if it's on? See if the widget applies some class when you toggle on/off

V: If it's on and user overrides style and weight under widget's style settings panel the same setting having a value in SK list control too. In this scenario, there will be a conflict if we override the value user may think why style settings not applying.

R: Would modifying the default value inside the widget help? but then again, it might be an unexpected change for users, right?

V: Yes, shall we give a master switch (something for user accepting) it will override widget styles. If switch on we override else if off obey the specificity.

R: noh, John wouldn’t like that. Even I won’t as a user the widget is not applying any classes when custom styles are present, right? Think we could tweak that widget with filter to add a class if it has that switch on?

V: Ok, consider like this if I added a class sk-custom-list to the list widget which have style settings dropdown if the value is set to solid but in our list control if we set it to double which one should take the precedence.

[JohnPixle]

I know this is not for the upcoming release, but just to clarify:

We simply want Elementor-ish UI Controls for styling the HTML List elements as well, right?

You plan this to override the Elementor icon list element as well? It would be cool if it could happen, but I am not sure Elementor is making fair use of CSS with this element

[JohnPixle]

Actually Let's see it in action after the update, just include it at the play server and we'll test it out on the spot.

[gvgvgvijayan]

Got an idea to overcome Elementor List widget by default selected the first option in all the dropdown settings (we don't know whether the user selected the first option or not) instead of that we can add an empty option to the desired dropdowns.

Therefore, whenever the user add the Elementor List widget all the settings dropdown selected with empty option by default and if user updated the dropdown then using JS we add a custom CSS class to that widget's HTML based on that in our SK control selector we can exclude the items which have the class which denoting the user's customization.

[gvgvgvijayan]

1. Get all the list widget instance present in the currently opened document
2. Get list widget settings of all list instance present in the currently opened document
3. From the fetched list instance settings value check the setting's value is empty or not
4. If the widget's settings value is empty then apply the style kits CSS selectors value
5. Else if the widget's settings value is not empty then leave as it is therefore the widget instance value should be applied.

[JohnPixle]

Accordingly, we will need to add a help link to this one as well, and tackle these issues:

• Icon size not having effect

• In HTML lists, bullet disappearing when user sets an icon alignment

• Add a help text in the panel, similar in style to the ones we have. This one should say:

• Set a global style for the Icon List widget. Learn More.

As soon as we have these done, we are good to go.

From Slack conversation - https://www.loom.com/share/263afa3fa08a4df9a719793b6e6cafa9

[JohnPixle]

Closing this ticket