Custom CSS: CSS Grid attributes and units removed on save

[lucijanblagonic]

Steps to reproduce the issue

Try adding CSS Grid attributes and properties to the Custom CSS module. e.g.:
grid-column-gap: 1rem
grid-row-gap: 1rem
grid-template-columns: 1fr 1fr

What I expected

That style would be applied.

What happened instead

Adding CSS Grid properties and attributes to a Custom CSS field shows an error on save.

[designsimply]

This problem is still happening for grid-template-columns for Jetpack sites (though it appears fixed in WordPress.com).

Steps to reproduce:

1. Start with a Jetpack site connected to WordPress.com.
2. Go to My Sites > Customize.
3. Add some CSS that uses the grid layout (see sample below).
4. Save changes.
5. Verify changes were saved.

Results: instead of saving, the following warning appears:

There is 1 error which must be fixed before you can save.
Update anyway, even though it might break your site?

Sample CSS:

.test {
	display: grid;
	grid-template-columns: repeat(6,1fr);
}

^{Tested with Firefox 57.0.3 on macOS 10.13.2 on a site running WordPress 4.9.2 and Jetpack 5.7.1 hosted at Bluehost.}

/hat tip @pauljacobson for the original report (internal reference: 7991-wpcom).

[jeherve]

This problem is still happening for grid-template-columns for Jetpack sites

That is indeed to be expected; the fix is not part of the latest Jetpack Stable release. It will be part of the next version of Jetpack, 5.8, as per the milestone on this issue.

As a general rule of thumb, anything that is merged after the code freeze (the last Tuesday of each month) can only be included in the next month's release. In this case, the fix was merged on January 5, 2018, so it will be part of the February release.