WordPress.org

Make WordPress Core

Opened 22 months ago

Closed 22 months ago

Last modified 22 months ago

#42528 closed defect (bug) (fixed)

Customizer CSS can’t save CSS grid

Reported by: kittmedia Owned by: westonruter
Milestone: 4.9 Priority: normal
Severity: normal Version: 4.9
Component: Customize Keywords: has-patch dev-feedback commit dev-reviewed
Focuses: Cc:

Description

I tried to insert the following CSS code in the Customizer custom CSS:

.footer-widgets {
	display: -ms-grid;
	display: grid;
	grid-gap: 1px;
	-ms-grid-columns: ( 1fr )[3];
	grid-template-columns: repeat(3, 1fr);
	-ms-grid-rows: ( 150px )[2];
	grid-template-rows: 150px 150px;
}

I receive the following three errors in the editor field and can’t save it:
Unexpected token '(' at line 5, col 20.
Expected BRACE at line 6, col 35.
Unexpected token '(' at line 7, col 17.

Even if the code itself is fully correct and works in different browsers, it can‘t be used within the Customizer custom CSS.

I know that the first and the third error message refers to an old syntax of Internet Explorer 10 and 11, however it is still needed to support CSS grid on these platforms. The second error message refers to the “1fr” keyword, which is defined in the current CR from the W3C:
https://developer.mozilla.org/de/docs/Web/CSS/grid-template-columns

Attachments (3)

Bildschirmfoto 2017-11-13 um 10.44.06.png (94.8 KB) - added by kittmedia 22 months ago.
42528.0.diff (2.2 KB) - added by westonruter 22 months ago.
dismissible-notification.png (128.7 KB) - added by westonruter 22 months ago.

Download all attachments as: .zip

Change History (15)

#1 @johnbillion
22 months ago

  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to 4.9

Thanks for the report, @kittmedia.

Moving this to the 4.9 milestone for visibility.

#2 @ocean90
22 months ago

I'm wondering if CSS errors should really prevent saving here. Unlike PHP errors they can't break your site.

#3 @westonruter
22 months ago

  • Owner set to westonruter
  • Status changed from new to accepted

It appears that CSSLint doesn't yet support the fr type: https://github.com/CSSLint/parser-lib/issues/228

Three options I see here:

  1. Change from error to warning, to allow bad CSS to be saved.
  2. Try to filter out errors related to fr, however this doesn't seem to help in the case of repeat(3, 1fr)
  3. Add checkbox to dismiss error (or use dismissible notification) to allow saving to go through.

I think option 3 is the best for now, and it aligns with how we're doing it when editing CSS in the file editor;

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


22 months ago

#5 @westonruter
22 months ago

  • Keywords has-patch needs-testing added; needs-patch removed

In 42528.0.diff the same dismissible notification is added as currently is shown on the file editor when there is a linting error.

@melchoyce Thoughts on tweaks to the design?

#6 @melchoyce
22 months ago

Would be great if subsequent lines of text in the checkmark text were also indented, but I know that's currently a problem across core. I think it's probably fine.

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


22 months ago

#8 @westonruter
22 months ago

  • Keywords dev-feedback added

#9 @westonruter
22 months ago

  • Keywords commit added; needs-testing removed

#10 @ocean90
22 months ago

  • Keywords dev-reviewed added

42528.0.diff looks good to me. Minor: There's an extra space before type in <input id="{{ elementId }}" type="checkbox">. (Same for file.php).

Due to the way how strings are parsed this will cause a string change because it's now part of the front end (wp-includes) project.

#11 @westonruter
22 months ago

  • Resolution set to fixed
  • Status changed from accepted to closed

In 42171:

Customize: Allow notifications for linting errors in code editor control (for Additional CSS) to be overridden to allow saving.

Implements the same override that was implemented in [41721] for the theme/plugin editors.

See #41897, #41887.
Fixes #42528.

#12 @westonruter
22 months ago

In 42172:

Customize: Allow notifications for linting errors in code editor control (for Additional CSS) to be overridden to allow saving.

Implements the same override that was implemented in [41721] for the theme/plugin editors.

See #41897, #41887.
Fixes #42528 for 4.9.

Note: See TracTickets for help on using tickets.