Core Editor Improvement: Strengthening style options

These “CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Editor Improvement…” posts (labeled with the #core-editor-improvement tagtag A directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.)) are a series dedicated to highlighting various new features, improvements, and more from Core Editor related projects. 

There are a variety of tools and methods for styling your site, from global edits via the  Styles interface to more nuanced changes for individual blocks. Ahead of WordPress 6.2, there are new features that make it easier to create consistent designs, understand at a glance what impact changes will have, and customize more aspects of your site to your liking. There’s something for everyone, whether you’re creating your next blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. theme, a designer seeking a pixel-perfect layout, or someone looking to reuse a design. Taken together, these changes create a clearer design process that is intuitive and efficient for modification and reuse. 

Interfaces for creating your style

While expanding the tools and options for what you can style are incredibly important, so are the ways in which design changes are represented. The following interface updates help ensure you can more clearly see the impact of the changes you want to make:

  • Design blocks globally with the new Style Book that allows you to see all blocks on your site as you style them (44420). 
  • Rely on an inline preview of blocks when working with Styles to better understand the impact of changes (42919). 
  • See a broader view of your template when selecting a style variation (44987).

Tools to customize further

While some are content with relying on what a block theme or Core provides, others want more ways to get a design or layout just right. With the last few releases of GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc., the following options have been added that allow for that exact kind of deeper customization folks are used to:

  • Add Custom CSSCSS Cascading Style Sheets. for your entire site directly from the Styles interface (30142). 
  • Add Custom CSS on a per block basis directly from the Styles interface (44412). 
  • Edit block style variations, like with the Button or Image blocks, from the Styles interface (46343)

Options to create consistent designs

With a growing number of design tools in each WordPress release, designs can become both more complex and nuanced. To help streamline the design process and make it easier to reuse your work, take a look at these new options:

  • Take local changes from a single block and apply them globally across your entire site, with a new control within the Advanced block settings (44361, 46965). 
  • Copy and paste block styles to create consistent designs in a few clicks (44418). 

Thank you to @dansoschin and @cbringmann reviewing this post. 

#core-editor-improvement, #gutenberg