WordPress.org

Make WordPress Core

Opened 16 months ago

Last modified 34 hours ago

#44471 new defect (bug)

Theme Editor: Modern CSS is marked as errors by CodeMirror

Reported by: ThemeZee Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 4.9
Component: Editor Keywords: 2nd-opinion
Focuses: Cc:
PR Number:

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 (1)

theme-editor-errors.png (80.8 KB) - added by ThemeZee 16 months ago.

Download all attachments as: .zip

Change History (12)

#1 @johnbillion
16 months 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
16 months 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
16 months 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
9 months ago

#45971 was marked as a duplicate.

#5 @joyously
7 months ago

#43840 was marked as a duplicate.

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


7 months ago

#7 @ZanderZ
7 months ago

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

#8 @starvoters1
5 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
3 months ago

#47727 was marked as a duplicate.

#10 @studiotwee
3 weeks 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
34 hours ago

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

Note: See TracTickets for help on using tickets.