WordPress.org

Make WordPress Core

Opened 2 years ago

Closed 10 months ago

#44471 closed defect (bug) (fixed)

Theme Editor: Modern CSS is marked as errors by CodeMirror

Reported by: ThemeZee Owned by: SergeyBiryukov
Milestone: 5.4 Priority: normal
Severity: normal Version: 4.9
Component: Editor Keywords: good-first-bug has-patch
Focuses: Cc:

Description

I got some reports from users of my newest theme Donovan saying the style.css is broken.

The reason is that the code editor on Appearance > Theme Editor does not know modern CSS.

The CodeMirror plugin does not recognize CSS variables, new properties like grid-gap or the new fr units (fractions for CSS grids).

Attachments (2)

theme-editor-errors.png (80.8 KB) - added by ThemeZee 2 years ago.
44471.diff (466 bytes) - added by skypressatx 10 months ago.

Download all attachments as: .zip

Change History (18)

#1 @johnbillion
2 years ago

  • Keywords 2nd-opinion added
  • Version changed from 4.9.6 to 4.9

I feel like this is something that Codemirror will forever be playing catch-up with, especially given the pace of CSS development at the moment.

I wonder whether it's better for the CSS property validation to be disabled?

#2 @ianbelanger
2 years ago

I think that since the Theme Editor is something that end-users can access, the CSS property validation should probably be disabled by default. The majority of users will not understand that these type of "errors", are not really errors. End-users seeing these unnecessary error notices could lead to them doubting themes, plugins an their developers. IMHO

#3 @ThemeZee
2 years ago

Yes, it is hard to explain to end users that the theme is working fine although WordPress Core shows a bunch of error notices. The majority of users thinks these are major theme issues, because updating the style.css is basically deactivated unless the extra checkbox is clicked.

Disabling the CSS property validation would be great, although I'm not sure if it works everywhere. The CSS variables cause an "Expected RBRACE" error. This could perhaps be a syntax validation issue, because CodeMirror doesn't know how to handle the two hyphens at the beginning.

#4 @swissspidy
23 months ago

#45971 was marked as a duplicate.

#5 @joyously
21 months ago

#43840 was marked as a duplicate.

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


21 months ago

#7 @ZanderZ
21 months ago

This is also a problem in the Customizer, when changing the Extra CSS. grid-template-columns: 1fr; is not recognised.

#8 @starvoters1
18 months ago

Is this the place to report that the CSS font-display, descriptor for @font-face is listed as an unknown property on Wordpress version 5.2.1?

https://i.imgur.com/nv4Pf5l.png

https://css-tricks.com/almanac/properties/f/font-display/

#9 @pento
17 months ago

#47727 was marked as a duplicate.

#10 @studiotwee
15 months ago

so will this be fixed? having to constantly tell my editor that this CSS is perfectly fine is kinda driving me nuts.

#11 @ZanderZ
14 months ago

I'm guessing this won't be fixed in 5.3? :(

#12 @raoulunger
13 months ago

I second that. I write plenty of code for CSS grid, and none of it is recognized by the editor. I keep having to convince it (after every edit) that they are not mistakes. I understand that CSS evolves, and that the editor will lag behind somewhat for that reason. But CSS grid has been around for quite some time now and is fully accepted by all browsers (except IE), and you would think expanding the list with allowed code should not be too difficult. We had an update of WP last week, but again no changes in this respect...

#13 @SergeyBiryukov
12 months ago

#49001 was marked as a duplicate.

#14 @SergeyBiryukov
12 months ago

  • Keywords needs-patch good-first-bug added; 2nd-opinion removed
  • Milestone changed from Awaiting Review to 5.4

As #49062 shows, the CSS linting is not very reliable, displaying an error for Twenty Twenty default stylesheet with no particular error message.

Let's disable the linting by default, and perhaps make it a configurable setting that plugin authors could enable.

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

@skypressatx
10 months ago

#15 @skypressatx
10 months ago

  • Keywords has-patch added; needs-patch removed

Quick patch for this task.

In essence at src/wp-includes/general-template.php:3729 I changed the lint value to false. This impacts the $settings['codemirror'] array, which is already filterable via wp_code_editor_settings. If plugin authors which to enable CSS linting, then they can use that filter to override the (now) default false value.

#16 @SergeyBiryukov
10 months ago

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

In 47305:

Theme Editor: Disable CodeMirror CSS linting.

Being a good idea in theory, in practice it does not always work reliably, may not recognize newer CSS properties, and sometimes displays phantom errors with no particular error message.

A plugin can re-enable CSS linting via the wp_code_editor_settings filter.

Props skypressatx, ThemeZee, johnbillion, ianbelanger, ZanderZ, starvoters1, raoulunger, prashantvatsh, SergeyBiryukov.
Fixes #44471.

Note: See TracTickets for help on using tickets.