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.

Offer individual typography and color 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. Sometimes though, you may want to offer more design options without offering entirely new styling changes. 6.6 is slated to add the ability to target color or typography only variations and offers them as presets, separate from overall style variations. These new color and typography presets offer more contained changes, making it simple to offer broader color options or typography options out of the box with your theme. To use this new option, theme authors will need to create color or typography only variations that ideally work well with the overall variatiosn you’re already offering. For example, perhaps you want to provide a few more typography options for folks to use across each variation. Of note, for any style variations that only contain color and typography changes, these will now automatically appear in this separate preset flow.

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. 

Changelog

June 6th: updated the Mix and Match variations in light of a discussion that has changed this feature changing it to allow theme authors to create typography or color only variations that show up outside of the main style variation flow.

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

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