Default value in Additional CSS

[denisco]

In support forum, I was faced with the fact that users do not understand that default value is a comment and try to paste the code into it. Maybe we need to return placheholder attribute without comment tags or implement in some other way.

[denisco]

Related: #38685, #38493.

[westonruter]

Interesting. This mistake will be alleviated once there is a proper code editor control (#38707) which can give syntax highlighting and validation helps.

@afercia given this real-world user feedback, do you think it outweighs your the user issues you anticipated in #38685?

[afercia]

Hm I'm a bit surprised to see users who want to use CSS and don't know what a CSS comment is. Maybe this is one of the dangers to face when opening advanced editing abilities to non-technical users. I'd suggest to just change the text, which is a bit misleading. Current text:

/*
You can add your own CSS here.

Click the help icon above to learn more.
*/

Proposed new text (or something similar):

/*
You can add your own CSS in place of this comment.
Click the help icon above to learn more.
*/

given this real-world user feedback

How many users? :) any data?

Alternatively, considering the original issue raised in #38685?

I was staring at the comment used in the placeholder and trying to use the keyboard to select/cancel what initially appeared to me being text... was wondering why the arrow keys weren't working at all. Maybe it's just me being a bit slow :) Since it's formatted like an inline comment /* */ it looks like actual code that can be selected. Maybe potentially confusing for users, I'd consider to remove the /* */.

I'd consider to make it a placeholder only if removing the slashes and stars /* */.

[denisco]

to afercia

Hm I'm a bit surprised to see users who want to use CSS and don't know what a CSS comment is.

Many users do not have sufficient knowledge and just use snippets from the replies of support forum or from the Internet tutorials.

How many users? :) any data?

Additional CSS appeared recently and many users on forums continue to recommend the use child theme for styling customization. Therefore, user feedback of Additional CSS is sufficiently small.
But for us such way to insert the code also was a surprise, and it would be interesting hear opinions of this issue :).

[SergeyBiryukov]

Replying to afercia:

I'd consider to make it a placeholder only if removing the slashes and stars /* */.

That's what I'd like to do here. The text is essentially a placeholder and should be treated as such, I don't see why it should be a default value. There's no need to select it, and the /* */ symbols just create unnecessary confusion.

As noted above, not everyone is familiar enough with CSS to know all the syntax details, most users just paste snippets in there that they find on the forums.

[Kelderic]

Replying to SergeyBiryukov:

That's what I'd like to do here. The text is essentially a placeholder and should be treated as such, I don't see why it should be a default value. There's no need to select it, and the /* */ symbols just create unnecessary confusion.

As noted above, not everyone is familiar enough with CSS to know all the syntax details, most users just paste snippets in there that they find on the forums.

The only reason I can see for having the text as a CSS comment in the field would be for user education (providing an example for users of CSS comments). However, CSS doesn't really need inline comments unless one has a very complex stylesheet, which isn't typical for the Customizer.

Since most users won't know what it means, and don't NEED to know what it means, it just adds unnecessary confusion to the user, as mentioned above. I agree that we should turn it into placeholder text, and remove the /* */.

[lukecavanagh]

@Kelderic

I am all for making it as simple and common sense as possible for end users.

[jbpaul17]

Since this still needs a patch and the short timeline remaining on 4.8, I'm going to punt this to 4.8.1. If a patch is ready and can get tested next week, then we can pull this back into 4.8.

[SergeyBiryukov]

#41398 was marked as a duplicate.

[westonruter]

@afercia @melchoyce with the updated section description help text coming with Better Code Editing, should the placeholder text just be removed entirely? Since the help text would expand automatically when the custom CSS has the default value supplied:

See ​https://github.com/WordPress/better-code-editing/pull/84

[melchoyce]

Yeah, let's get rid of it now.

[afercia]

+1

[westonruter]

Great, I'll remove it as part of the feature plugin merge for #12423.

[westonruter]

In 41376:

Editor: Add CodeMirror-powered code editor with syntax highlighting, linting, and auto-completion.

• Code editor is integrated into the Theme/Plugin Editor, Additional CSS in Customizer, and Custom HTML widget. Code editor is not yet integrated into the post editor, and it may not be until accessibility concerns are addressed.
• The CodeMirror component in the Custom HTML widget is integrated in a similar way to TinyMCE being integrated into the Text widget, adopting the same approach for integrating dynamic JavaScript-initialized fields.
• Linting is performed for JS, CSS, HTML, and JSON via JSHint, CSSLint, HTMLHint, and JSONLint respectively. Linting is not yet supported for PHP.
• When user lacks unfiltered_html the capability, the Custom HTML widget will report any Kses-invalid elements and attributes as errors via a custom Kses rule for HTMLHint.
• When linting errors are detected, the user will be prevented from saving the code until the errors are fixed, reducing instances of broken websites.
• The placeholder value is removed from Custom CSS in favor of a fleshed-out section description which now auto-expands when the CSS field is empty. See #39892.
• The CodeMirror library is included as wp.CodeMirror to prevent conflicts with any existing CodeMirror global.
• An wp.codeEditor.initialize() API in JS is provided to convert a textarea into CodeMirror, with a wp_enqueue_code_editor() function in PHP to manage enqueueing the assets and settings needed to edit a given type of code.
• A user preference is added to manage whether or not "syntax highlighting" is enabled. The feature is opt-out, being enabled by default.
• Allowed file extensions in the theme and plugin editors have been updated to include formats which CodeMirror has modes for: conf, css, diff, patch, html, htm, http, js, json, jsx, less, md, php, phtml, php3, php4, php5, php7, phps, scss, sass, sh, bash, sql, svg, xml, yml, yaml, txt.

Props westonruter, georgestephanis, obenland, melchoyce, pixolin, mizejewski, michelleweber, afercia, grahamarmfield, samikeijonen, rianrietveld, iseulde.
See #38707.
Fixes #12423, #39892.

[SergeyBiryukov]

#42198 was marked as a duplicate.