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.
Now, also PR to watch: https://t.co/1poaihYuPW. @jeffr0 timely tweeted 😀
— Greg Ziółkowski (@gziolo) March 26, 2018
Please leave a comment below or via the chat note, if you have questions or need to learn some more.
Happy Editing!
Photo by rawpixel.com on Unsplash
10 Comments
Thanks for sharing those tips. For the use cases that you demonstrate it looks intuitive.
Hopefully with the introduction of blocks and Gutenberg, other use cases will be considered, because the UI as it is currently designed would not, for example, be suitable for data entry, particularly for when doing so intensively for large inventories.
Currently Gutenberg lacks the flexibility of the current interface. Throwing out meta boxes removes the ability to move, collapse and hide interface element into arrangements that suit different types of workflows.
WordPress is more than a blogging platform. It is a proper CMS capaablebof a lot more than the restriction inherent in what Gutenberg is at this stage.
On top of this Gutenberg is no match for what sophisticated page builders like Divi can do. The fear at the moment is that these won’t be able to conform to the restrictions imposed by the interface and blocks.
No doubt we will hear a lot of noise on this subject as the NHL’s develop. And, in the shakeups even more innovation.
You are welcome! Thanks for commenting.
The team published under Extensibility a path on how Gutenberg deals with Meta-boxes and how developers can extend their work. I don’t think, “Throwing out” is what it’s happening. Now is also a perfect time to connect with the development team in the WordPress Slack channel #core-editor to get your get answer to your questions and issues resolved. The noise level as you call it will certainly rise there as well, so get ahead of the curve.
Gutenberg in its first iteration doesn’t aim to be a ‘match’ to page builders. Maybe it never will aim for that. Divi as well as Beaver Builder and other similar tool makers are already working on their Gutenberg versions. Some are farther along than others. You also might want to read Robby McCullough’s post about how he sees Gutenberg. McCullough is the founder of Beaver Builder.
I see people mentioning that, and if feels like the person writing it seems to think that the core team isn’t aware of the fact, that WordPress is a proper CMS.Come on. They built that thing. 🙂
But kidding aside: It’s hard to judge something that is still in development by what’s in there now. Find a way to be part of the process. Help the team to get where you think it needs to be by doing the work, by testing Gutenberg with your current sites, raising technical issues, and collaborate with the team to come up with a solutions. You will not only help yourself, you will help those that have similar issues and you help WordPress and Gutenberg become the best it can be.
And then there is always the Classic Editor plugin. Installed it will keep your site as it is, once WordPress 5.0 is released.
Thanks again for posting your thoughts. These are exciting times.
By Post Author
Yes, the more I read the moreI see blocks as the way forward for establishing some sort of standardisation. Yes, I expect all the big page builders to be converted, but it will be a painful process, more so for some than for others due to the fact that the box model of Gutenberg is fairly rudimentary at this stage compared to theirs with sections, rows, columns and then modules.
I have been feeding back many points and concerns to the team working on Gutenberg. I am not 100% if they are seeing issues with use cases the same way I am seeing them. I am not talking here about issues in how it works under the hood, but more on the surface in terms of UI and look. Sometimes you need to have your custom fields for a custom post type explicitly delineated with background foreground contrast between the fields and their background as is the case for data entry.
Yes meta boxes are going as we know them but will we get back the ability to put them wherever we want on the edit screen? Take the following. I spend weeks entering data for items which have several custom field groupings, even several repeating fields which vary in number, depending on the item. This is being done to pre-populate for a new website. Later, after I am done, The SEO expert comes along and drags YOAST and the Description field ( which was put in its own group when I created it with Toolset Types) to the top of the editor interface so they can work through their task as efficiently as possible. Joost de Valk demonstrates this possibility in a screenshot showing Gutenberg blended into the look of the editor page we currently use.
I can see the interface of Gutenberg as it is now being popular for what it is doing right now. Equally I expect we will see more advanced versions to deal with other scenarios as we move on wether that is something that will be done in core or by creative third parties.
I am positing all this in a positive manner by the way.
The one small thing I have an issue is how Gutenberg is being implemented as default and then having to add the Classic Editor plugin. If you dig in and investigate what is going on, Gutenberg is using REACT and the REST API to do an override of the current editor. The Classic Editor plugin is effectively a switch to put Gutenberg back in its box. It all seems a bit clumsy and could easily be all incorporated into WordPress as a switch/checkbox in the writing settings. An even more elegant solution would be have Gutenberg trigger when it detects a theme or plugin that conforms to Gutenberg, like TwentyEighteen for example. As it is if you configure your post types so that they don’t conform to Gutenberg, fallbacks kick in anyway, Classic Editor plugin or not.
I’ll re-iterate I do think the blocks concept is a good thing, just how it is being done is a little worrying. Its like too many eggs are being broken to make an omelette.
Moving a metabox around on the screen is possible now. That’s no a Gutenberg feature.
Here you answered here also a question I had: How do you create your Custom Post Types and the corresponding fields? You seem to be using Toolset Types. –
Have you connected with your favorite plugin developers how they are approaching the transition to Gutenberg? They probably can much better alleviate your concerns much easier than Gutenberg Development team.
By Post Author
Hi Birgit,
Yes I use Toolset and have been appraising their betas and giving feedback.
I had look at yesterday’s update. You can indeed move the meta boxes around, so perhaps this omelette doesn’t need as many eggs after all!
Is there a place where we can post glitches, bugs and suggestions? One small glitch in moving the meta boxes that I found was moving Toolset’s Content Template selector box. I could move it out of the Document sidebar and place it under the main set of blocks. If I wanted to put it back I couldn’t. I am sure this is something that will be spotted and fixed.
Also, and I have seen others mention this as well. When you start working in a block it would be useful if the sidebar interface switched to reflect the block being used. Clicking outside all blocks switches back to the Document tab. Small things like this would make the interface so much better.
The next thing would be the option to hide away meta boxes, as is possible with the Options tab at the top of the current editor. For example you might want to hide the Content Template selector from end users as they might inadvertently change the layout used on the front end.
I remember seeing Gutenberg way back at the beginning of last year, before it was touted as a replacement for the current editor, and remember thinking that it was in interesting concept. I like the way it is asynchronous, when you make a change, publish or update, the page isn’t refreshed. The shock of the new just makes people a little bit nervous.
Yes, Gutenberg issues can be reported on the Github Repository. Or if you are not familiar with Guthub, you can use the plugin’s support forum on wordpress.org
It would be important to separate the issues caused by Gutenberg, from the Toolset Types incompatibilities, the latter should be reported on their support space. How do you separate it? If the issues is with an UI piece that is orginally created with Toolset Types, it’s a issue the OnTheGoSystems need to resolve, or tackle together with the Gutenberg team.
Cheers for the link and instructions. It’s something I will follow up on and follow closely as things accelerate with the transition.
[…] Moving Paragraphs, Adding images, the slash command and beyond. […]
[…] Introduction to Gutenberg […]
[…] The Gutenberg Times has a great post covering some of the more advanced editorial options users will have when using the new editor …. […]