Leap into 2024 with these Site Editor Tools
The Site Editor gives you a powerful way to visually create every part of your site and tell your story. It lets you handle everything from big stylistic changes to simple copy updates all in a single place. To help you make the most of this new way to WordPress, here are a few standout tools and features you’ll want to try.
Command Palette
Think of the Command Palette as the ultimate shortcut tool, letting you do more with less clicks and without needing to remember where each option might be. It’s available across the editing experience, whether you’re switching between templates in the Site Editor or toggling open settings in the Post Editor, with specific contextual options depending on where you are. You can use the keyboard shortcut Cmd+K on Mac or Ctrl+K on Windows to activate it and get started.
If you think of a command that doesn’t exist yet that would help with your workflow, open a feature request issue so we can consider adding it.
Read more about everything you can do with the Command Palette, including a list of available commands.
Style Book
The Style Book helps you see all the blocks on your site as you style them. It’s built into the Styles section and can be toggled on/off as you’d like. This is especially useful when you’re aiming for design consistency for a client, trying to see how a change might impact a block that might not be visible, or wanting to get a different look at how a style variation will switch things up.
Work is also underway for the next WordPress release to integrate the Style Book into Style revisions to allow for an at-a-glance view of changes made.
Learn more about how best to use the Style Book.
Styling shortcuts
Sometimes you get a design just right—the color contrast, the perfect padding, the exact font size. Instead of needing to manually recreate the design or copy/paste the block to fill in with new content, you have two powerful options built into the editing experience: copy/paste styles and apply styles globally for all instances of the desired block.
Copying and pasting styles is perfect for more nuanced and smaller changes, like headings on a landing page that you intentionally want to be distinct. Applying changes globally is best for blocks like buttons and for changes that are likely to work well across layouts, like setting a specific border radius and color. This helps keep the creativity flowing and makes achieving design consistency across your site much easier.
Read more about the various styling options available.
Distraction free mode
Just like an artist might need to take a few steps back to view their in-progress artwork, sometimes we need to get a different view of our site before diving back in. Distraction free offers you that alternate perspective with a pared-down experience that lets you focus purely on creating, like:
- Hiding the top toolbar until one intentionally hovers over where it typically sits.
- Removing many of the top toolbar buttons.
- Automatically closing any open sidebars, like block settings and list view.
- Hiding the insertion point indicator, reducing visual clutter.
- Hiding the block toolbar for individual blocks.
It’s worth noting that this mode can be used when writing posts and pages too! For an added bonus and more views of your site, you can use the preview options to see how your site might look across different devices.
Learn more about making the most out of Distraction free mode.
Patterns
Patterns are a collection of blocks that make it simple to add complex layouts and designs to any WordPress site without starting from scratch. They save time by reducing duplication and ensuring consistency. You can create your own, use theme-provided patterns, or lean on the Pattern Directory.
You can also specify whether to sync your patterns so that one change applies to all parts of your site, or to keep them unsynced so you can customize each instance. For any patterns you create, you can assign categories to make them easy to find and organize. Use the Inserter with easy filtering options to add patterns to your content, and head to the dedicated Patterns section in the Site Editor to create or edit patterns to your liking.
Learn more about creating patterns.
List View
List View is the go-to tool for navigating between layers of your content, selecting exactly what you need, and getting a sense of how everything fits together. Similar to the Style Book and Distraction free mode, you can toggle it on/off as you’d like. It’s currently visible in the Top Toolbar and will remain open as you navigate through your site. Beyond providing a simple view of the layers of your site, there are more recent additions to List View that makes the tool even more powerful:
- See previews of your images for Image and Gallery blocks reflected in List View to make it easier to find what you need.
- The Escape key deselects blocks to make it easier to purely preview your content without any blocks selected.
- Lean on a keyboard shortcut for duplicating blocks quickly: CMD+Shift+D for Mac or Control + Shift + D for Windows.
- Drag and drop blocks at any level directly within List View.
- Rename Group blocks and have the custom name reflected in List View for improved organization.
Here’s how a few of these improvements come together:
Learn more about using List View.
As you explore these tools, remember that, except for the Style Book, you can use these features when writing posts and pages too. Expect the Site Editor and other tools to evolve with each release. To get a sneak peek at what’s planned for the next major WordPress release in March, check out the roadmap and stay tuned.
Subscribe to WordPress News
Join other subscribers and receive WordPress news directly in your inbox.
Thank you to the contributors who collaborated on this post: Nicholas Garofalo, Lauren Stein, Joen Asmussen.