WordPress.com just made coding from your WordPress admin more powerful and enjoyable. Whether you're an everyday user or a developer, you'll have access to modern features like syntax highlighting, autocomplete, and search and replace when you reach for the code editor.
Launched in the last week, we're bringing enhanced code editors to two aspects of the WordPress.com experience:
- Post and site code editors
- Additional CSS input box
Let's dive into what this upgraded experience looks like.
Customize block code in the post and site editors
Have you ever opened the Code editor from the block or site editor and been presented with a mass block of nearly unreadable text with no syntax highlighting?
You've probably wished for something a tiny bit more sophisticated. Maybe even something that would help you type faster, spot errors easily, or just simply make the code easier to read.
Until now, that didn't exist unless you installed a custom or third-party plugin to handle it.
Welcome to a new improved experience—now available to everyone:
As you can already see when comparing this screenshot to the previous one, the code is much more readable.
Beautiful CSS in additional CSS code boxes
Writing custom CSS just got a lot better, too. The post and site editors were a welcome improvement, but you're more likely to actually touch code when writing custom CSS under the Styles panel in the Site Editor.
In the past, you would see something like the following when adding code in the Additional CSS box under the Styles panel:
Now — just like the post and site code editors — you can see your CSS in all its glory, just like it was meant to be:
What features are included?
Some features included in the new code editors are:
- Syntax Highlighting: View your code colorized according to the language, which makes it much easier to understand the structure at a glance and even write your own code.
- Autocomplete: Save keystrokes, prevent errors, and speed up your workflow with a simple autocomplete feature.
- Intelligent Formatting: Enjoy features like line numbers, auto-indentation, and bracket pairing for a smoother experience.
- Language Support: The new editors detect and highlight both HTML and CSS—no more "plain text" boxes for your code!
Oh, and there's search and replace support too. When viewing inside a code editor, type `Command + F` on Mac or `Ctrl + F` on Windows to pull up search/replace panel at the bottom of editor:
The search/replace feature includes matching by:
- Case (exact match of uppercase and lowercase letters)
- Regular expressions
- Whole word
You can also replace individual occurrences of found matches or all of them in one go.
What's coming in the future?
With syntax highlighting, autocomplete, and other standard code editing features, WordPress.com bridges the gap between a basic CMS and a powerful code-friendly platform. This is a step forward for developers, power users, and anyone who needs to tinker with code once in a while — without ever leaving the editor.
But this is merely a first iteration of improved code editing across the platform. So I'll leave the question to you: How would you like to see code editing evolve over time to make your experience more empowering?
Personally, I'd like to see the new features applied to the Code and HTML blocks. Maybe I'll even have some luck convincing the team to implement one or both.
Regardless, the future is exciting whether you like to tinker with code once in a while or dive into it every day. For now, go try out the new editors and let us know what you think!
