Core Editor Improvement: Drag & Drop Blocks and Patterns from the Inserter

With the launch of Gutenberg 9.6 and Gutenberg 9.7 comes the ability to drag and drop blocks and 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. patterns from the Block Inserter. This new feature might be easy to miss if you’ve grown used to relying on the current ways to add blocks! Here’s a quick video showing how it’s done for both blocks and block patterns:

Video showing drag & drop from the inserter for first a block and then a block pattern.

Important Note: you need to use a theme with registered block patterns (ex: the current default theme and the prior 4 years) .

With this new addition, there are now seven ways to quickly add blocks to your content, whether it’s to write a compelling post, build out a fancy 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. with the in progress Widgets Editor, or create a site using the site editing experiment:

  • Drag and drop from the inserter.
  • Select from the inserter. 
  • Type a forward slash followed by the block name: /image or /paragraph.
  • Click the black + icon at the side of an empty block.
  • Using the + icon at the top left of the editor which opens Block Inserter.
  • Hit the Enter/Return key from a currently selected block to create a new block underneath it. 
  • Click on the three dots just above a selected block and choose to add a block above or below the current block.

This is a very new feature so, as you explore, know that feedback and bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority. reports are always welcome on GitHub

If you’re interested in working on features like this, make sure to join #core-editor, check out the current focuses, and attend the Core Editor weekly meeting on Wednesdays @ 14:00 UTC in core-editor

#core-editor-improvement #core-editor