Add Turn Off Option For Custom CSS in Customizer

[mwarbinek]

I understand the reasoning behind creating a Custom CSS module where it filters all CSS syntax and validates it, provides a drop list of CSS properties and values.

Problem
This filer/validation process causes the Custom CSS window to lag, slow down and actually scroll automatically, which is very frustrating.

Another issue is the droplist sometimes takes over the text entry as fast as making a key stroke, where the entry in the droplist gets entered instead of the intended syntax.

Getting out of the droplist overlay is cumbersome as well, forcing the user to click elsewhere on the Custom CSS window, then having to return to that same spot to re-enter the intended CSS syntax. The cumbersome part is made worst if the droplist auto insert triggers the validation causing the Custom CSS window to scroll.

Essentially, I call these bugs, really irritating bugs that causes more work in the Custom CSS window than it is worth. More work to correct the bad auto-insert droplist syntax, more work to have to re-scroll to find where I was before being scrolled out of view, more work to stop the auto-droplisting from appearing so I can finish the CSS syntax writing.

Solution 1
There is a very simple solution to this.

Instead of spending hours debugging this very bad idea for the Custom CSS in customizer, please spend the time adding a "turn off" option, where the Custom CSS window returns to a basic text window with NO validation and NO auto-droplisting of suggestions.

This allows the user to either use the validation / auto suggesting filter, or turn it off completely so the Custom CSS window becomes just a basic text window like Notepad.

Solution 2

• Remove the current auto validation and auto-suggestion droplist completely.
• Return the Custom CSS window back to basic text editor, like Notepad.
• Add a button to activate, when the user chooses, a validator that validates the CSS in the Custom CSS editor.
• With this validation used manually, it marks the CSS that is in error.
• Once the validator is finished, it turns off, and the Custom CSS editor is again back to a text window.
• The highlighted CSS that is in error is still highlighted & visible to locate so the user can correct the error.

This new Custom CSS text editor works very much like Notepad++, which also does the same thing, also provides highlights etc and it is still a basic text editor with no buggyness.

[dlh]

Hi @mwarbinek, and welcome to Trac! Thanks for taking the time to describe these concerns.

I think these proposed solutions would be well-suited for initial development as a plugin in the WordPress.org repository, where ideas for implementation could be explored and user interest could be gauged.

Measuring user interest seems to me to be particularly important because adding options for enabling or disabling features has to be considered with reference to core's preference for ​decisions, not options.

Development of a plugin could also lead to ideas for improving some of the specific behaviors you referenced, which could be filed as discrete tickets and lead to incremental improvements in the Custom CSS feature.

[mwarbinek]

I don't develop plugins, so however it is done, is fine with me, but I would suggest WordPress developers make the plugin, like they do for the current "Classic Editor" plugin. Don't leave this one to some random developer, mainly because of coding integrity issues.

At the least, code WordPress core in such a way that I can go into core files and turn the Custom CSS validation filters off myself.

Also, I have seen auto-validation for Custom CSS work in other Apps and they don't create such usability issues has the WordPress one. Such as the FireFox extension "Stylus" (​https://add0n.com/stylus.html), it uses a validation feature and there are no usability issues using it.

[celloexpressions]

WordPress core and its philosophies do not generally provide user-facing settings to enable and disable features. The core customize API provides the capability to disable any feature granularly. A plugin (or theme) can call something like:

$wp_customize->remove_section( 'custom_css' );

And that should prevent the feature from loading. It could also de-enqueue scripts or more-deeply remove the feature. Alternatively, a plugin could reassign the custom_css setting to a textarea control instead of the core code editor control. Old versions of the Modular Custom CSS plugin enabled this feature in a similarly simplified way.

Closing, as this is plugin territory. Please feel free to continue discussion in this closed ticked or on the WordPress support forums. Please also open more-specific tickets for any specific issues or potential improvements for the custom CSS feature.