search

WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.49k stars 4.19k forks source link

Global Styles Custom CSS: Add inline code completion and linting to input box similar to customizer #47945

Open glendaviesnz opened 1 year ago

glendaviesnz commented 1 year ago

What problem does this address?

The new Global styles Custom CSS input box currently doesn't have an inline code completion of linting, which can make editing of the CSS difficult.

What is your proposed solution?

Look to integration something like CodeMirror which is currently used by the Customizer custom CSS input box.

creativecoder commented 10 months ago

This came up while I was working with a theme builder this week.

Related features that were also mentioned: auto indenting new lines and auto adding closing braces.

annezazu commented 10 months ago

Noting that the current experience was brought up as a big deterrent in a recent blog post:

Additionally, the fact that the CSS editor lacks every fundamental feature, down to the lack of tab indent support, tells me that the Gutenberg team doesn’t ever want to see you writing CSS. The minute you take your coat off, they crank up the air conditioning. The message is clear, “Go somewhere else.”

glendaviesnz commented 10 months ago

@creativecoder there is a draft PR here, which is mostly working, but there was a suggestion to hold off until the new lazy loading API was landed . I don't have time to follow this up right now, but happy for you to look at pushing this forward if you have the time.

creativecoder commented 10 months ago

I don't have time to follow this up right now, but happy for you to look at pushing this forward if you have the time.

@glendaviesnz Thanks for pointing to that! I won't likely have time to work on this in the near future, but will put it on my list, just in case.

okmttdhr commented 7 months ago

I'm proposing https://github.com/WordPress/gutenberg/pull/60155. For lazy-loading, I'm utilizing Webpack's import() for now (c.f., https://github.com/WordPress/gutenberg/pull/53380#issuecomment-2019448129).