Gutenberg 1.0.0 Introduces Drag and Drop for Adding Image Blocks

Gutenberg 1.0.0 was released this week as another iteration in the beta period that will continue on with 1.1 next week. Design lead Tammie Lister said the team decided “not let numbers set expectations” and will carry on at the same pace with weekly releases.

One of the most visible UI updates in version 1.0 is the new ability to add image blocks by dragging and dropping them into the editor. They can be placed directly within the content (between blocks) and also onto the image block placeholder. Gutenberg includes a blue line indicator for dropzones where users can place an image.

After testing I found this feature works smoothly but is a little slow. The slight delay of uploading the image after placing it may leave the user confused about what is happening. However, feedback on this particular pull request indicates that the team is working on displaying an immediate reaction to the image having been dropped, instead of waiting for the upload to finish.

This release also merges the paragraph and cover text blocks. Contributors agreed that the two blocks could be easily combined and the colors and font size options from the previous cover block have now been added to the block settings sidebar.

A few other improvements in this release include the following:

  • Reworked color palette picker with a “clear” and a “custom color” option
  • Further improvements to inline pasting and fixing errant empty blocks
  • Added thumbnail size selector to image blocks
  • Added support for url input and align and edit buttons to audio block
  • Restored keyboard navigation with more robust implementation, addressing previous browser issues
  • Added align and edit buttons to video block
  • Show “add new term” in hierarchical taxonomies (including categories)

Overall, the experience of writing within Gutenberg is improving, and the 1.0 release announcement includes an animated gif to demonstrate a user typing in the paragraph block:

The editor is getting better at staying out of the way when a user is writing, but the slightest mouse move within the paragraph block will slide all of the block’s surrounding controls into view. This experience can be a bit jarring, but it may be inevitable unless more of the UI can be buried under the inspector. The paragraph blocks currently display the most commonly used controls for writing text content, but I could see plugins hooking into this to create different types of writing experiences that either add more controls or pare it back to something more minimalist.