Core Editor Improvement: Refining the Block Toolbar

With a growing amount of customization features being unlocked, the toolbar for each coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. 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. is being transformed one at a time to make it more intuitive and predictable to use. Since the block toolbar contains the most important block tools, this could help improve your workflow as you’re creating content.

In the same way you might organize tools in a toolbox so you can quickly grab and go, the toolbar is on that same path: grouping related tools based on which level of a block an option impacts. To get a sense of what this actually means, and how it’ll improve your workflows here’s a before and after photo showing the changes in the Image Block:

Before:

After:

Keep in mind that not all blocks have been revamped just yet, but you can follow this issue to keep track. For now, if you’re using the 10.4.1 release of the 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/ 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, you can expect to see this update in the following blocks, with more on the way: 

• Image 
• Cover
• Button
• Buttons
• List
• Heading
• Paragraph
• Quote
• Audio
• File
• List
• Video
• Media & Text
• Site Logo
• Post Featured ImageFeatured image A featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts.

The goal of the effort is to simplify the hierarchy of the block, to make it more predictable what goes where. Here’s a visual outlining the groupings:

The visual is taken from recently updated documentation: 

• Block surfaces properties of the block itsef..
• Tools surfaces tools that affect the whole content of the block, such as alignments or positition.
• Inline formatting refers mostly to in-text transformations such as bold or italic on a text selection. 
• Other contains any additional features that do not fit in the other groups.

As each core block gets updated, there will hopefully be a cascading effect, making it predictable to adjust any block how you need to, whether that’s changing block alignment or bolding a specific piece of text.  

Thank you to @joen for helping edit this post (including providing the visuals) and for the excellent guidance throughout.

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