Several flex and grid CSS properties listed as Unknown property in Customizer

[davidjlaietta]

When I use the CSS editor in the Customizer it suggests element properties as I start typing them. One of the properties that it suggests is the justify-items property. When I save the settings in the Customizer I get a notice of "Unknown property 'justify-items'."

I've checked some of the other flexbox and grid properties, and there are several others that this is the case for, namely:

• justify-items
• grid-gap
• grid-column-gap
• grid-row-gap
• place-self

The properties still work in supported browsers, they just display an error in the Customizer. Some valid values for properties that are recognized also give errors, such as the values of start and end for several grid properties.

[davidjlaietta]

screenshot of Customizer Edit CSS showing an unknown property

[davidjlaietta]

screenshot of Customizer Edit CSS showing the suggestion of an unknown property

[subrataemfluence]

Added property justify-items

[subrataemfluence]

Warning disappeared

[westonruter]

@subrataemfluence Your patch doesn't indicate which file it is that is being patched.

[subrataemfluence]

Oops! I am sorry for this. It's almost midnight here. Will fix the patch tomorrow morning.

Replying to westonruter:

@subrataemfluence Your patch doesn't indicate which file it is that is being patched.

[subrataemfluence]

@westonruter I modified initial patch and uploaded 43896-1.diff. In this patch I considered all properties @davidjlaietta mentioned.

However, this one has some unwanted white spaces and tabs characters, which I realized only after uploading. So, I removed them and uploaded a newer version 43896-2.diff. Hope this works!

[celloexpressions]

This appears to be the same general issue as described in #43197. The fix here is likely a good approach for that ticket as well.

Can those actively working on the latest innovations in CSS please review 43896-2.diff​ and confirm any other properties that should be added to the core list?

[SirLouen]

This is not a bug, this is an enhancement to the Customizer CSS editor
Customizer is in maintenance mode. Don't use this CSS editor anymore if possible. If you are encountering a problem not being able to showcase certain elements in the customizer, please move away from it and use any of the other methods to add CSS to your WP.

Time to close this report as this wontfix

[sabernhardt]

@SirLouen The Customizer is still a very important part of 'classic' themes, and people should use the Additional CSS panel for custom styles if they do not create their own stylesheet (in a child theme or plugin).

The ​proposal recommending a 'maintenance' mode is not even published yet, and that should only limit how much will be improved in Customize and similar Core Trac components.

This ticket reported a bug that existed years ago, but I do not experience any errors now with the mentioned properties. It seems to have been fixed in WordPress 5.4.

[westonruter]

This isn't actually an issue in the Customizer per se but rather in anywhere that core uses the Code Mirror library for editing.

That said, I'm not seeing justify-items: space-between; causing any issue in either the Additional CSS of the Customizer or in the Theme File Editor when editing style.css. So the underlying issue seems to have been resolved.

[sabernhardt]

[47305] removed the CSS linting.

[SirLouen]

Replying to westonruter:

This isn't actually an issue in the Customizer per se but rather in anywhere that core uses the Code Mirror library for editing.

True, I completely forgot that Code Mirror is also in any other code editor like themes and plugins.
After wasting a good time on #47692 for nothing, I was on autopilot on anything Customize.
I am not sure why most Code Mirror issues have been associated to Component Customize (i.e. #44820)
Wondering if there is a better component selection for this.