Make WordPress Core

Opened 5 months ago

Last modified 3 months ago

#42213 new defect (bug)

Code Editors: Filter autocomplete suggestions

Reported by: melchoyce Owned by:
Milestone: 5.0 Priority: normal
Severity: normal Version:
Component: General Keywords: has-patch
Focuses: Cc:


I noticed when playing with some CSS earlier than when you start writing a property, the value brings up an autocomplete panel (awesome!) but it autocompletes with literally every value you can use ever. Is there a way to filter those suggested values by relevance?

So, for example, I do text-transform. The autocomplete values should be uppercase, lowercase, capitalize, none, and full-width, plus inherit, initial, and unset.

Or, color should only suggest colors.

Unsure if this should only be a CSS editor thing or what.

Attachments (1)

42213.1.diff (54.2 KB) - added by WraithKenny 5 months ago.
Proof of Concept, not stable.

Download all attachments as: .zip

Change History (10)

#1 @philipjohn
5 months ago

We do appear to set some sort of association for this (see https://core.trac.wordpress.org/browser/trunk/src/wp-includes/js/codemirror/csslint.js#L3739) but either it's not intended to help with the autocomplete, or it is and it's broken. Needs more investigation, but I'm out of time right now.

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

5 months ago

5 months ago

Proof of Concept, not stable.

#3 @WraithKenny
5 months ago

The proof of concept patch is a working patch showing what would be needed to achieve the functionality.

(To test the patch, please enable SCRIPT_DEBUG as it currently breaks the grunt build step because of the class syntax.)

The patch uses a couple utilities from Chrome's dev tools, most significantly, the CSSMetadata class, which does all of the work. (and a shim for Array.pushAll().)

It also copies out a few of CodeMirror's own utilities. (a helper function from the CSS mode, and the default bundled css-hint.js for modification.)

This is really raw code, and a number of improvements can be made to improve it:

  • Trim out unneeded code from SDK.CSSMetadata
  • Organize the new code into the main file better
  • redo getPropertyName()
  • maybe not show so many vendor-prefixed values

The code isn't fully complete either. We'd have to import more of the dev tools, specifically, wherever Common.Color is defined. (color based properties are erroring.)

Basically, this shows it can be done, it's just a lot of code.

#4 @WraithKenny
5 months ago

For teh color object

We'd also need to run the new chunk of code through a transpiler (forgot to mention it in the previous comment).

#5 @melchoyce
5 months ago

  • Keywords has-patch added

#6 @westonruter
5 months ago

  • Milestone changed from 4.9 to 4.9.1

This issue was reported upstream in CodeMirror: https://github.com/codemirror/CodeMirror/issues/3570

The code that is part of 42213.1.diff is adapted from code linked to from there.

Given the size and state of the patch and proximity we are to RC, I'm going to punt this to 4.9.1. Thanks for working out an initial proof of concept!

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

4 months ago

#8 @johnbillion
4 months ago

  • Milestone changed from 4.9.1 to 5.0

#9 @afercia
3 months ago

Or, color should only suggest colors.

Just to note I'm not sure the color hints are a good thing in the first place. CodeMirror suggests named colors: many of them are proprietary and not standardized and using them is generally considered a bad CSS practice.

Note: See TracTickets for help on using tickets.