Content creation with Blocks, writing in Gutenberg
You have installed the Gutenberg plugin on your site. Now what? This post has a few short how-to-videos to that get you over some speed pumps you might encounter along your new journey with the new editing experience in WordPress.
Hit me up via the Chat-icon on the bottom of the screen if you have trouble on your site and I can point you into the right direction to solve this with you.
I have found the new editing experience fairly intuitive and getting started with text shouldn't be too hard. I might be wrong. Let me know if that's not true for you. For now, I skip over text editing and come back to it once you need advanced assistance for that.
Tutorials & Courses
If you are a looking for an in-depth information on Gutenberg and what it means for you and website, I suggest browsing the various updates on this site for articles that can help you with that.
Introducing Gutenberg is the official site by the Gutenberg Team. It's also the site linked from your WordPress Dashboard "Try the new editing experience" Panel, and you might have visited it before.
I also recommend Joe Casabona's course "Introducing Gutenberg". You will learn more about blocks, migrating content, getting the right theme and how to manage plugins with Gutenberg. It's a well structured course, but might be a bit much, if you just want to get started using Gutenberg on
For users, who need to read the manual first before starting out, head on over to GoGutenberg – A tutorial site that explains every block in detail.
So, now let's head into the little things, I discovered.
How to move multiple paragraphs
With every paragraph being a block, it opens up creative opportunities, but it also tripped me up when I wanted to move more than one paragraph to a different section of my text.
You can highlight multiple paragraphs and then us the arrows on the left to move them all together. Take a look at the video.
Also, sometimes I start out writing and after I wrote a line and hit enter and wrote another line, and hit enter again, I realize, I am actually making a list. But how to I convert two paragraphs into on list?
How do I convert multiple paragraph blocks into a list?
How to add an image and right align it?
Jeff Chandler from the WPTavern tweeted yesterday:
Soo, one thing I’m finding difficult to do in Gutenberg is inserting an image into a paragraph block. First, I look for the insert image button and there isn’t one. I need to create a new block to insert an image. Unless I’m missing something, this flow messes me up and is confusing to me every time. In the classic editor, all I have to do is put the cursor where I want to insert an image, click the add media button, insert image, align it, done. Jeff Chandler, WP Taver on Twitter
You might feel the same way. I get it. It's actually quite similar for Gutenberg, just a slightly different process. Instead of clicking above the editor you click below your current block. If you have used the image block before its icon might be in the list of recent blocks. Click on the icon and select from the media library, and then align it. Once I did this a couple of times, I didn't want to do it any other way.
You can also speed up the process of adding different froms of content or blocks by using the "/" (slash) command feature. Let's add an image again. You type your last sentence of the paragraph, hit enter for the new block/paragraph. You type "/i" – it will select the image block and when you hit Enter again it adds the image block and you can either upload a new image or select one from the media library.
I love the slash commands, and I am now very fast putting those tweets and other embeds into Gutenberg Times updates.
Insert Image Inline in the works
Later that day, Gutenberg developers chimed in on above quoted conversation on Twitter.
It would be nice to be able to insert the image inline in the middle of the paragraph and do all the magic with blocks behind the scenes – split the paragraph block into teo blocks and insert image block in the middle. @altjoen@karmatosed is it on the roadmap? Grzegorz (Greg) Ziółkowski:
Joen @altjoen responded: "Working on it" and added a link to a discussion on GitHub issue board started by WordPress designer Mel Choyce: "Insert images inline". You just place the cursor somewhere in your text, click on the top-inserter, click on the inline image block and add it that way.
This feature is marked to be included in the "Merge Proposal" for Gutenberg's integration into WordPress 5.0 and will be part of the new editing experience when it will be added to the WordPress Core code base. The discussion is also a great example on the collaborative effort and decision making on the team.
Jay Shenk already started working on it and if you like to see how this "sausage is being made" you can follow along at the Pull Request (PR) on GitHub.
Please leave a comment below or via the chat note, if you have questions or need to learn some more.