WordPress.org

Make WordPress Core

Opened 10 months ago

Closed 3 months ago

Last modified 7 weeks ago

#39892 closed enhancement (fixed)

Default value in Additional CSS

Reported by: denisco Owned by: westonruter
Milestone: 4.9 Priority: normal
Severity: normal Version:
Component: Customize Keywords: has-patch
Focuses: ui Cc:

Description

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.

Attachments (2)

2017-02-16_184629.jpg (36.6 KB) - added by denisco 10 months ago.
39892.patch (2.4 KB) - added by denisco 7 months ago.

Download all attachments as: .zip

Change History (21)

#2 @westonruter
10 months ago

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?

#3 follow-ups: @afercia
10 months ago

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 /* */.

#4 in reply to: ↑ 3 @denisco
10 months ago

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 :).

#5 in reply to: ↑ 3 ; follow-up: @SergeyBiryukov
10 months ago

  • Milestone changed from Awaiting Review to 4.8

Replying to afercia:

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.
*/

That's a bit better than the current text, but it's still not clear enough that CSS should be added outside of /* */.

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.

Last edited 10 months ago by SergeyBiryukov (previous) (diff)

#6 in reply to: ↑ 5 @Kelderic
10 months ago

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 /* */.

#7 @lukecavanagh
10 months ago

@Kelderic

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

#8 @jbpaul17
7 months ago

  • Keywords needs-patch added
  • Milestone changed from 4.8 to 4.8.1

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.

This ticket was mentioned in Slack in #core by jeffpaul. View the logs.


7 months ago

@denisco
7 months ago

#10 @denisco
7 months ago

  • Keywords has-patch added; needs-patch removed

#11 @westonruter
6 months ago

  • Milestone changed from 4.8.1 to 4.9

#12 @SergeyBiryukov
5 months ago

#41398 was marked as a duplicate.

#13 @westonruter
3 months ago

@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:

https://user-images.githubusercontent.com/134745/30097529-ee471f56-9292-11e7-858a-e85a74318ec2.png

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

#14 @melchoyce
3 months ago

Yeah, let's get rid of it now.

#16 @westonruter
3 months ago

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

#17 @westonruter
3 months ago

  • Owner set to westonruter
  • Resolution set to fixed
  • Status changed from new to closed

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.

#18 @SergeyBiryukov
2 months ago

#42198 was marked as a duplicate.

This ticket was mentioned in Slack in #core-customize by westonruter. View the logs.


7 weeks ago

Note: See TracTickets for help on using tickets.