Of all the updates introduced in WordPress 4.9, the CodeMirror library integrated into core may have the most far-reaching implications.
First and foremost, it's a JavaScript library that integrates with the editor to display drawing errors, syntax highlighting, and contextual code snippet suggestions in the WordPress dashboard itself. Essentially, it makes it much safer for developers /and people with no coding experience/ to get into and learn WordPress without messing things up and damaging their websites.
More importantly, however, is the new integration with The Library CodeMirror and the WordPress API so that plugin and theme developers can use it.
Best of all, it's a tried and true library used all over the world. From Bitbucket and Github to Firefox and Chrome Developer Tools. It's not a half-assed solution. The core contributors found the best library. Then they created the WordPress links needed to use it.
WordPress 4.9 and CodeMirror
There are currently two ways to work with editors in your plugins and themes. You can use either of these two features.
They work pretty much the same with each other and you can read the differences in the Code. Essentially you can pass an argument codemirror to allow this field to convert the standard text to the new WP special code editor by calling a special script code-editor.js .
The Codex documentation makes it so:
For example, if you edit CSS, it will allow to print, and if you edit HTML, it will allow to automatically close tags
And it's not just about CSS and HTML.
File editors now feature CodeMirror-coded alerts, automated completion and error checking. Allowed file extensions in file editors can be edited to include formats that CodeMirror has for: conf, css, diff, patch, html, htm, http, js, json, php3, php4, php5, php7, phps, scss, sass, sh, bash, sql, svg, xml, yml, yaml, txt.
This addition only opens up many new possibilities for developers and designers. Developers and authors can finally expand the kind of control they can offer users. This is the same kind of control that the new editor and customizer have.
One really neat change is that editors can now get deeper into the file system. This means nothing to most editors, but? WP users. This is a freedom you can take advantage of.
CodeMirror opens in a full coding environment in the WordPress dashboard. Now you can be able to go deeper into the site's file system. However, as you do so, be aware of many dangers. Not only will users be able to edit CSS and HTML files (within the protected confines of the linker), but they will also have access to the more delicate PHP files that keep the entire installation running smooth as silk!!!
And we all know that the last thing we want is broken or incorrect code that makes a concoction out of PHP.
Log in to the Developer Box
The WordPress developers / Devs for short / have also changed the way PHP files are stored when using the built-in editor. Essentially what you get when you open a PHP file now:
- After you open a PHP file, edit a new separate copy of that file. Its contents are stored in a variable using cookies.
- If you have changed the file in such a way as to cause a fatal error and make the editor unavailable, the changes will be undone and the original PHP file you want to edit remains unchanged.
- If there is no fatal error at this point, more checking will be done to see if the site itself is inaccessible due to a fatal PHP error. Again, if there is an error, the original file is restored and an error message will appear telling you what happened and why.
- Finally, if there is no error preventing the site from running on the admin side or the front end, your changes will appear immediately.
And as a final bug, the editor sees bad PHP mojo. If there's enough to keep PHP in a loopback that can't be resolved, the new code editor is smart enough to stop it and send the user a message that it would probably be best to make those changes via FTP. Wow! Super right?
Let's be honest - in another CMS such possibilities are not yet available. With this functionality we save ourselves a lot of manual work on fixing errors in the code via FTP. This is another super WordPress safety feature baked into version 4.9.
Consider the possibilities
The popularity of online coding courses and bootcamps make this plug-in ideal for e-plugins. With existing React libraries being used for plugins and themes like Gutenberg, Calypso, and Divi, IDE-style editing is here to stay. (By the way, CodePen already uses CodeMirror for this.)
Connecting directly to WordPress Core means that even small adjustments and customizations become much safer. For example, you can now give users access to more direct control of CSS and design in the plugin. And you can do this without fear of completely ruining anything.
By being able to integrate this customization into the plugin itself, rather than just documenting the classes and IDs that control it, you can provide better support and UX for the product. Even then, you can control the environment in which users can customize the UI and therefore offer the best experience so that nothing else on their site can (theoretically) be affected by the changes they make.
Although technically such a variant was quite possible before version 4.9. Now, however, with an embedded IDE (ish), you get (and can offer) much better control.
Have fun!
With the opportunities that WordPress 4.9 has brought us with the integration of CodeMirror, there really hasn't been a better time in WordPress history for developers and users to dive deep into code. It's time to learn how things really work.
After all, what's the worst that can happen? Even if you screw up the whole installation, you can start fresh 😉
Source: CUC