Core Editor Improvement: Creating & containing containers

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. 

In the last few versions 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. https://wordpress.org/gutenberg/ set to be included in WordPress 6.0, a collection of changes were made to simplify the discovery, use, and optionality of container blocks. When combined with the new 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. locking UIUI User interface, you can create layouts of your choosing and lock when you’re ready. 

Improved discoverability

When you select multiple blocks, the toolbar shows each variation of the Group block so you can quickly choose between the different variations while directly creating content. 

Of note, you can always ungroup blocks after you’ve done this if you’d like by using the ellipsis menu in the block toolbar and selecting Ungroup. 

More variations

Blocks are now easily grouped into either a Stack layout (vertical) or a Row layout (horizontal) with a single click. These flex-based containers allow for responsiveness at default for your content, especially when combined. From the 6.0 dev notedev note Each important change in WordPress Core is documented in a developers note, (usually called dev note). Good dev notes generally include a description of the change, the decision that led to this change, and a description of how developers are supposed to work with that change. Dev notes are published on Make/Core blog during the beta phase of WordPress release cycle. Publishing dev notes is particularly important when plugin/theme authors and WordPress developers need to be aware of those changes.In general, all dev notes are compiled into a Field Guide at the beginning of the release candidate phase. on Block markup updates for image, quote, list and group blocks:

It’s a flex container, meaning it has access to content justifications and block spacing. If combined with the Row block and its ability to optionally wrap onto new lines, it can enable basic responsive behaviors, such as two columns that stack to a single column on smaller displays.

You can switch between them in the sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. settings too after your initial selection to get a feel for what you want. The video below brings the entire experience together:

More design options

To customize things more, you can play with gap support, margin, typography options, and more. For margin and padding, thanks to Gutenberg 13.2 (not coming to 6.0), you can more readily visualize your changes too. Here’s a video from the release notes:

Lock when done 

When you have things exactly as you want them, you can lock whatever pieces you’d like of your creation to prevent removal or movement from the overall container blocks discussed above to individual blocks within. This is a great way to preserve your layout. Here’s a quick visual from a previous release post: 

---

If you’ve explored these new options in the release cycle for 6.0 or via the Gutenberg pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party, feel free to share your creations below in the comments or even in the Pattern Directory. If you haven’t just yet, get excited to explore for WordPress 6.0.

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