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.


13 responses to “Gutenberg 1.0.0 Introduces Drag and Drop for Adding Image Blocks”

  1. As always, excellent information to stay in the loop.
    It’s all pretty exciting. I personally don’t have a clear view on this. I just wonder where it’s going to take us a few years from now. Will page builders like the excellent Beaver Builder turn out obsolete?
    I wonder if the web design business will get a push back from all these developments and to what exactly this kind of business is going to shift itself to.

    • I don’t think Page Builders will turn obsolet. As I understand, Gutenberg is all about content and page builders are all about designing layouts.

      • Maybe you’re right. But how is it going to be in a few years from now? Clearly we’re heading towards a new direction with WordPress.

  2. Has anyone tried using Gutenberg v1 on a Surface or other full Windows OS touchscreen tablet or desktop?

    The choice to still use hovers how they’re implemented in Gutenberg speak to it’s lack of design thought about accessibility and device form factor. I get the cool factor of them but they’re like the HTML blink tag to me these days. I don’t miss them.

    • Great question. I’ve moved from the Mac (mouse only) to Surface (mouse + touch) and get frustrated at the wordpress oddness when using touch.

  3. Thanks for keeping us all updated on Guten. It’s nice to see the development progress and get better and better!

  4. This makes me feel like tearing my hair out. Gutenberg should focus on content and content blocks.

    Fonts, colours and alignments are not content they are presentation. Leave that crap to the page builders

  5. They can go this naming route. I do not mind. The can go though version version 7.0.0 if they have to. They have to get this right before it moves into the core.

  6. It bothers me that this early-stage plugin is version 1.0. They’re obviously not adhering to semver.

  7. To this day, with version 1.0 list, I still find many shortcomings in the tool and, above all, lack of usability.
    It is extremely difficult to write a simple post. What with the current editor 5 minutes late, with Gutenberg you can take up to 15 and, in the end, you do not get the same results.
    I have tested the supposed improvements with this version and I can assure you that I have been unable to move a block with a drag-and-drop image.
    When trying to do this, several blocks are selected at once … but the selection, for the only thing that is worth to erase the blocks, nothing more.
    I also still see no progress, for example, in the links using URK. When you click on the icon, you have to type it in hhtp: //. Otherwise Gutenberg tells you that the link is not correct (you have to remember that in the editor, to put a link, you do not need neither hhtp nor www).
    Let’s see how long it will take for Automattic to release a plugin to facilitate the writing of articles … because I am convinced that the hidden purpose of Gutenberg is to monetize it in some way, and hence its sudden interest and hurried to impose it on WordPress before Of year end.

  8. I think copying or cutting multiple blocks of text seemed too cumbersome compared to a traditional word processor experience but that’s a minor gripe. This project is coming together nicely.


Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

%d bloggers like this: