[PoC] Global styles Custom CSS: use codemirror for editing #53380
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
glendaviesnz
added
[Type] Enhancement
|
Size Change: +1.79 kB (0%) Total Size: 1.78 MB
ℹ️ View Unchanged
|
|
This pull request changed or added PHP files in previous commits, but none have been detected in the latest commit. Thank you! ❤️ |
|
I am also going to explore the possibility of lazy loading the core dependency somehow but feel free to comment if you have thoughts on the best way to incorporate codemirror into the site editor. |
glendaviesnz
force-pushed
the
update/custom-css-add-editor
branch
from
5e2fa72
to
13731a6
Compare
|
Just started working in this again, will hopefully have it functional again soon |
|
PR should be fully functional again. |
glendaviesnz
changed the title
|
@Mamaduka, @youknowriad do you have any thoughts on this lazy loading approach to adding code syntax highlighting, etc. to the global styles custom CSS input box in order to match the functionality of the old customizer custom CSS input? As noted in the PR description I did explore using the existing core codemirror bundle from core, but this would involve running script-loader.php file for the site editor which is becoming an outdated approach to loading js dependencies, and this approach would also load the full codemirror dependency even if the user never accessed the custom CSS panel. This is just a PoC implementation. If you thought this was an approach worth exploring it would make sense to abstract this out of the site editor and make it a reusable component that the likes of the Code block could potentially use. |
youknowriad
reviewed
Oct 12, 2023
There was a problem hiding this comment.
A long time ago we used to have syntax highlighting in a few places in Gutenberg. That said, that work has been reverted and put on a pause for some time. The reason is that we didn't want to load these syntax highlighter libraries synchronously and increase the bundle size.
So right now, we have import maps supports almost in all browsers and we have a POC for a import map support here
I believe the ideal scenario would be to actually first land lazy loading APIs and use them to implement syntax highlighting.
- Old issue about syntax highlighting Syntax Highlighting for HTML block/ Code block and HTML editor #10423
- POC about the import map support Add an example esm-example package and use it in edit-post #34172
I also know that @luisherranz @jsnajdr and friends were looking recently at the import map thing.
|
Thanks @youknowriad, the import maps will potentially be a better approach than the react lazy loading used in this PR, will take a look at that, thanks for the pointer. |
|
I think using Webpack's The main difference between Webpack's So I think it's fine to use Webpack's The only drawback is, as I said, that any external plugin that also wants to use But once we have import maps, we can change the Webpack configuration to mark the I hope that makes sense 🙂 |
|
@youknowriad @glendaviesnz @luisherranz This code should work even when we adopt |
|
Closing in favor of #60155 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
Add
codemirrorto allow autoformatting, etc. when editing custom CSS in global styles.Why?
Currently the plain text input with no formatting makes editing custom CSS difficult, and codemirror is already used in the core project for the CSS editor in Customizer.
Possible fix for: #47945
How?
Adds codemirror to the Gutenberg project and lazy loads it only if the custom CSS editing tab is loaded in the site editor.
I did explore using the existing core codemirror bundle, but this would involve running script-loader.php file for the site editor which is a very outdated approach to loading js dependencies, and would also load the full codemirror dependency even if the user never accessed the custom CSS panel.
Testing Instructions
Screenshots or screencast
css-edit.mp4