Core Editor Improvement: Upgrade your designs

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. 

Important design tools have shipped in the last few 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. https://wordpress.org/gutenberg/ releases, with additional ways to take advantage of the creative flexibility already available with 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. themes. Here’s a closer look at what these tools unlock ahead of the next major WordPress release.

Mix & match style variations

Style variations bundled with block themes allow you to seamlessly transform your site’s look and feel fast, all while using the same theme. Now, you can mix and match the color and typography styles of each style variation—a powerful upgrade to the existing functionality. For example, take the Twenty Twenty-Four Theme, which launched with eight carefully curated, community-created style variations. These included six typography presets and eight color presets. With this recent PR available since Gutenberg 17.9, you now have 48 combinations to choose from. You can stick with the original options defined by the theme author or add your own typography choices through the Font Library. As a bonus, this option works for any existing block themes with style variations—no additional configuration needed!

You can use this Playground instance to dive in and try it yourself. Going forward, there are some technical details to iron out, along with potentially evolving the experience to better support themes with a large set of variations. For a greater view of this general area, dive into the Colors and typeset presets from theme style variations overview issue and see the latest. 

Create overlapping designs with negative margins

Previously, you could only create overlapping designs with negative margins. As of Gutenberg 18.3, you can add negative margins right in the Site Editor for all blocks that support margin controls. The negative values need to be manually entered to balance some UXUX User experience considerations and add some guardrails, meaning they can’t be selected by dragging. 

Want to share something you create with this new option in the next WordPress release? Share it in the Pattern Directory! For now, enjoy exploring.

Embrace the Grid

Grid is a new layout variation for the Group block stabilized in Gutenberg 17.8 that allows you to display the blocks within the group using CSSCSS Cascading Style Sheets. grid. Of note, any block can use this new grid layout thanks to the supports key in block.json. There are two options for the grid layout:

  • “Auto” generates the grid rows and columns automatically using a minimum width for each item. 
  • “Manual” lets you specify the exact number of columns.

This is just the beginning. Efforts are underway to let you drag and drop, andresize blocks on the grid, providing a more visual and intuitive experience. Work is also in progress to improve how folks create layouts in general. If you want to follow how this feature evolves, check out this tracking issue, watch the recent demo, and join the dedicated #feature-grid SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. channel. 

Thanks to @richtabor and @laurlittle for help with editing this post.

#core-editor, #core-editor-improvement, #gutenberg