Content Creation in WordPress Block Editor (Gutenberg)

This WordCamp India workshop explains different techniques for content creation using the WordPress Block Editor (Gutenberg). The workshop goes into detail about the Block Editor and showcases the different blocks in the block editor such as the paragraph block, heading block, list block, quote block, cover block, etc – amongst others. The workshop also goes into detail about different features in the block editor – such as reusable blocks, and block patterns.
This workshop showcases WordPress 5.6 and was shot in January 2021.

Learning outcomes

1. You will be able to describe what are blocks in WordPress
2. You will indentify how to use blocks in WordPress
3. You will demonstrate how to find WordPress blocks including layout blocks.
4. Get an overview of the block editor and how it differs from the classic editor
5. You will also identiy reusable blocks and block patterns.

Comprehension questions

• What is the difference between the block editor and the classic editor?
• What is the procedure to add different columns in the block editor?
• How do you add a Hero section to a WordPress page using just the core blocks?
• How can you create a custom block layout that you can reuse in different parts of your WordPress site?

Transcript

Hi, guys. So this session is about content creation in WordPress using Gutenberg. And this is totally for the folks who are new to Gutenberg. Already WordPress. And since it’s not a developer session, so you wouldn’t see any coding today. About Me, My name is Sam. And I am a senior WordPress engineer, and our WordPress agency called RT cam, which is located in Pune. And I’m super excited to show you guys how to create beautiful content in WordPress using Gutenberg.

But before we dive into it, just in case someone hasn’t heard about Gutenberg, though I know most of you already know, because that’s why you’re here. But just in case someone doesn’t know, it’s actually new default editor of WordPress, where you write your post or create your page content. It’s also known as Block Editor, so you would hear both the terms interchangeably. It was launched in December 2018, with WordPress version 5. So it’s relatively new, but still two years old. WordPress community has put a lot of effort and time to create this new Block Editor. If you go to their, you know, GitHub repository online, you would see 1000s of comments and hundreds of developers who have contributed to this new editor. And this is constantly evolving, and they are improving and fixing, you know, issues of Gutenberg, with every release of WordPress.

But prior to this new editor, we had an old editor, which was called TinyMCE editor. It was not, you know, as great as, as this one, it was very limited to what it could do in terms of its features. But what you can do today with Gutenberg is far more than what you could do before. But you still have the option to you know, switch between the old and the new editor. So, you would see some people are still using the old editor. And they were present installation. Probably because they have been using the old editor for you know, for a long time. So they are not very comfortable switching to the new one. So what you would see both of the editor, so I would quickly show you a demo of how the old editor look to them. If you see it somewhere, you would recognize what it was. And you would also appreciate the new features, you know, which have been added to the new Block Editor, which is called Gutenberg. So this is how the old editor looked like this is where you added the text. And it had some basic options of changing the font sizes of the hearing. And it had some basic formatting options like making it a Dalek or adding a strikethrough. And it had the option of adding media to it. And you could just align them left or right or in the center. So that was pretty much it.

So now let’s take a look at the new editor, which is Gutenberg. So I’ll show you the interface of the new editor and walk you through and how things work in and how blocks are added and what are some common blocks. And once you get the basic idea, and you are familiar with the interface, we will go ahead and create a beautiful content using Gutenberg.

So I have a WordPress installation here. And if you want to create any post or page you do it from here. So let’s create a post and click Add New. And when you click on add new you are presented with the new editor, which is Gutenberg. And it’s it’s also called a Block Editor, like I said, and it’s called the Block Editor for a reason. And that’s because everything that you see in this editor is a block. So let’s first add the title. So let’s name it something nice word cam, India 2021. And as you can see that it’s a very clean interface. It’s kind of looks like a document where you can just start typing but the default block that We see is actually a bad account block. So let’s type in something or just paste some

content here. So this is a block. I’ll show you more blocks. But let’s first focus on the first block the default block, which is paragraph. So you when you hover over it or when you are focused on this block, you are presented with a toolbar, and you have additional options. Like for example, you want to make some text bold, or you want to make some text italic. Or let’s say you want to add a link to some text. So let’s add something google.com. So this becomes a link. Then, if you want to make this text, center align or left align, you can do it from there. When you click here, you have additional options like inline code, inline image. And, on the right side, you have some more options. Like for example, let’s say you want to change the font size of this text, you can click here and choose large. Or if you want custom font size, you can change that from you. Let me show it to you. I hope everyone can see it. If you want to make the first text or first letter bigger than you can use Drop Cap. And if you want to change the color, you can change that from here.

For example, let’s say I want a background color of gray. There is another cool thing of this color setting is that if you choose a color combination, which is not very easy to read, then you see a warning that this color combination may be hard for people to read, try using a brighter background color or darker next color. So that’s that’s pretty good. So I’m going to clear that out. Similarly, you have more blocks. If you click here, you will see a full list of all the blocks which are available to us. So we have paragraph block heading block list gold, so I’ll walk you through some of the blocks which are commonly used. For example, let’s take a look at the heading block. So when you choose a different block, you have different settings for those For example, this is the heading block. So you have the option of changing the heading from h2 h3 or h4 h1, whatever makes sense here, whatever you like. Similar to paragraph you also have the option of changing the font size of it or choosing a custom font if you want to. And similarly we have color settings that are two or three ways of adding a block. One is to click here and choose whatever block we want from the full list. Or you can click on this plus button. And here you would see some frequently used blocks which you can choose if you do not want to click those buttons and you just want to use your keyboard then you can type forward slash and here you would need to know the name of the block. So once you get used to it, you can just use this forward slash for example, if I want to heading I can just go ahead and choose heading either you can click on it or you can hit enter and it will become a heading block.

Now let’s say that you want the heading to come first and then paragraph to come later. So if you click here, you will see that we have the option of moving this block up so if you click move up, the heading will go up and the paragraph will come down. So I can do this all day. You also have when you know I can for dragging so you can also do Drag your block and put it wherever you want to, let’s keep the heading first, and paragraphs later. There are some more helpful features on top, you have an eye icon, if you click on this, it tells you the detail to the block. It tells you I mean, it’s actually for the entire document, not for just one block. So here you can see how many characters you have written the number of words, the number of headings, paragraph blocks, and you see the document outline. So you see that you have the title, and then you have h2.

And if you click here, you see all the blocks that are there on your page. So you would say that there are two blocks, but actually there are three, there is also one paragraph blocks, it gets added by default. So whenever you hit enter, it adds a new paragraph block. So if I keep pressing Enter, then you will see new blocks are getting added. And to delete that you hit the backspace or delete. Or if you for example, let’s say you want to delete this block, then you can click here and hit remove block from here.

Now, let’s say that I want to save this as draft, I haven’t completed this post yet. And I want to do this do this later. So you can go ahead and hit on Save craft and it will get saved. So you can come back and you can complete this post and then publish it. Or if you want to take a look at it on the front end, you can click on preview, and click on Preview new tab. And you can see how your content is looking on the front end. You also have the option to take a look at it in tablet and mobile.

If you notice, there are two tabs, one is posts and one is block. So whenever you focus on a block, you see that this content, and these options get changed. So whenever you are focused on a block, it shows you which block is selected. However, if you click outside the door, outside the block in the document, then you see that the post kept post tab get selected. The option that you see here is actually the options for the entire post and not just one block. So this will remain the same. So let me show you what options you have for the post. So let’s say that you wrote the post, but you do not want to make it public. You want to keep it private, then you only want the admins and editors to view it. So you can change that to private. Let’s say that you want this post to go out. But you don’t want everybody to see it. And you only want people who have some password to take a look at this post. So you can enter a secure password and share that with them. So whoever who has this password, only those people can see this post. And then you have some more options like this, stick that to the top of the blog, if you check this then in the list of the post it this one will stick to the top. And then it has the option of pending review. Meaning you have completed the post however, you it’s spending the view of somebody, maybe your manager wants to take a look at it first, before you publish it. Then you have the option of author, you can even choose different criteria. And you can take a look at the revisions of this post. And then you have permanent. So here you can also change the permalink if you want to but let me first publish this post. So if you hit publish, it says double check your settings before publishing, the visibility is public. And it will publish immediately. And we’ll go over Tags and Categories in a moment. So it’s saying that this is live now. So If you click on View post, we see that this post is currently live. And the visibility is public, meaning anybody can see it.

Now, let’s say, let me close this out and open it in a new tab. So let’s say I don’t like the slug here, I want to change the slug, then I can change it from here, let’s say I want to change that to 2020 or 2022, I can update it. And now if I click here, you will see that it changed the slug offer. So it’s up to me what slug I want to keep, then you have the option of choosing the category. So if you might have noticed, on the front end, when you do not select the category, by default, WordPress, selects uncategorized. So uncategorized was selected. Let’s change that. And change that to, let’s say, comedy updated. Take a look at it on trending. And now the category has changed. You can also add more tags here. And if you want, you can also set a featured image.

You can also add excerpt to your post or if you want to allow comments on your post or if you don’t want to. Currently comments are allowed. So anybody can post comment. If you uncheck this option, you wouldn’t see that common theme. And this is the tag that we added. And this is the featured image that we added. So whenever you add a featured image, it gets added on top that totally depends on the theme that you’re using. I’m currently using the WordPress default theme, which is 2020. And you have the option of allowing pingback and rollbacks drag backs. And you have some more options like post attributes where you can select template of your posts. So if you do not like this template, and you want to use a different one, and if your team supports it, it has given you more temporary state and you can choose them from here. For example, if you want to use full width template, or cover template, you can choose them from here and your front end would look according to that template. Now let’s look at some more common blocks. So in text, we looked at paragraph heading. And now let’s see list. And then we have code block. And if you want to add some code, you can do that using code block. So if you notice here on the right side, it’s also showing you the preview of how the block would look like in the editor. So for example, if I look at paragraph block, it would show me that it would look like this, the code block would look like this, the hearing may look like this.

19:24
We can also use stable or full code or use pre formatted text. We can also add verses. And now let’s take a look at image block. So you can upload an image, you can select an image from the Media Library, or you can insert an image from a URL. So let’s choose an image from the Media Library. And you also have some more options like you can make this image rounded if you want to. This is just all text. And you can choose the image size. And, if you want, you can also change the width and height of the image, you can also resize it using this or by using the options here. either make it 50%, when he was 75%, or 100%, or reset.

20:43
You can also link this image and add caption, then you can add colorblock. This is an interesting block. Let’s choose in a cover from the Media Library. And then you can start typing on the cover block.

Or make it bold or italic or however you want. You can also make it fixed background. So once you make it fixed background works, it looks like this. If you’re using a smaller image, you can also use repeated backgrounds. And also set a minimum height of the cover. You also have the option of choosing the overlay. Currently, it’s 50% capacity. So you can increase that capacity if you want to. Let’s keep up give that 50% you can also change the color of the of the overlay, black or whatever you like. You can also choose custom color from here.

And let’s update that and take a look at it on the front. Here, this looks great. more common blocks, media and text. If you want to add media on the left, and text on the right, you can do that. Let’s copy this from you. You can show the media on the right or the left. It’s up to you. And you can choose wide width or you can choose

forward there are plenty of options that you can choose from vertically aligned top vertical, middle, you can notice these are options for the image. I mean, so I think left to right was looking fine.

And then if you want to add video, you have the option to add that. But another important blog that

I want wanted you to look what’s called a block. So when you use let me delete these first. So in column, you can select the how many columns you want. Like do you want 5050? Do you want 3070 or 7030. So let’s say I want three column layout. I can choose the three column and then you can add any block that you want to. So let’s say I add a heading and I say item one. Right? Let’s change that to h4. Let’s also choose heading again Heading item three, let’s change that to h4. And then we can start, I mean, we can keep adding more blocks as we want.

Let’s say I want an image here. So I’ll choose an image. Let’s choose this one. For the second column, I can choose another image. So this is how we create column, I mean, the we have the option to choose anything, any blog that we want. And those would be added in the column. So you have the option of creating any kind of design that you want using the existing works. So let’s update that and take a look at and on the front end. So this is our media and the text. And this is our three column. Now, one more thing, which is very cool in good mode is that let’s say that you really want to use this layout somewhere else. So what you can do is that you select the column, or select the block that you have created or the layout that you’ve created, click here and add it to the reusable blocks. Once you do that, let’s say let’s name it my awesome. Block, let’s name it. Now, this has become a reusable block, we can use this block anywhere we want to. And you will also see that one more time has been added. And my awesome block has been added here. So we can I can reuse this block here, not just on this page, if I go ahead and create another post, my reusable block will be available even here. So if we create a layout that we want to use throughout the website, or we want to reuse them, we can always make them reusable. And if you make changes to this reusable block anywhere, it will get changed everywhere.

Another important feature of Gutenberg that I wanted to highlight was patterns. You might have noticed this already. This is something that has been added in Gutenberg recently. So what pattern is that it’s just a group of some blocks put together to create some design. So let’s say this is one design, which is actually a group of blocks. So this pattern has the heading block, it has the bag of block and it has two buttons, I think it is yes, it is the button block. So you can insert any pattern. For example, let’s say, let’s use another one. Let’s say this is kind of a two column pattern, you can start editing it. Alright. And then go ahead and save them. Did I open two of those? Let me close one. So you have the pattern that you have added. So you might ask that what would be the difference between pattern and reusable blocks. reusable block also does a similar thing. So whenever you make any changes to reuse will block it. The changes are made to all instances of that block. So throughout the website, so let’s say you use that on three different pages or you use that reusable block three or four times, then that change would reflect everywhere. However, when you use a pattern and you make changes, that change would take effect only in that particular block and not everywhere else. So you can you know, add or insert one real one pattern and You can turn it into something else.

Another thing is block library are blocked recreating. If there is any block which is not available in Gutenberg, you can search for those For example, let’s say I want gatos little block. This little block is not available in in Gutenberg. I mean, it’s not given by default. But still similar to plugins, you can also search for the blocks, and you can directly just add them from here. So if I click on Add New, we have that little block available. However it works does not make sense right now.

But if you go to plugins, it’s, it’s actually a plugin which has only one block. So this is the block that we just downloaded. So if we want, we can also deactivate or an alter, remove them. So now that we have a good idea of how to add blocks, and how many blocks we have available, and we are familiar with the interface, let’s create a decent page and see how easy it is to create that. So we have all of these blocks available, there are a lot of them. If you need more, you can search for them, and dornburg will, if it is available that Gutenberg would be able to find those for you. So you have all those blocks available you it’s just up to your imagination, what you can create with those blocks. So you can come up with any design that you like.

Let’s try to create something. Let’s name this nature. And let’s start with a cover block in the header and add something from the Media Library. And let’s say that we want this cover blog to be full width. So let’s make it full of it so that the spans across the page. And let’s add some title here. And instead of paragraph, let’s choose heading. And let’s choose h1. And let’s stay land really is the best art. And let’s align to the center. And let’s publish that and see how it’s looking on the front end. Okay, we probably want to make the height bigger. So let’s, first of all, let’s make it fixed background. And let’s give it a minimum height of let’s say 700 pixels. Let’s see how that’s looking. That’s looking good I think. Now that would be our hero or banner. Now let’s add some headings here.

And choose h2 is fine. look deep into the nature. And let’s ditch the lane at center. And let’s pay some content here. And let’s make a Drop Cap. And maybe this can also become text align center. Can we now make a Drop Cap? No we can’t.

So it has to be text left. That’s fine. Now, let’s add some gallery and upload some images, create a new gallery and insert that. So let’s change the column.

So if you use four column, it looks like this. I think four column is working fine. And then let’s add a button here. Call to Action. And while we are on the button, block, you also have some more options like you can change its border radius, you can change the style of the button, depending on which theme you’re using. You also have the option to change its colors and add link to it.

So let’s align the center call to action. And let’s add some pattern here. Which kind of looks like footer. Let’s have this one. Now, let’s update this and take a look at it on the front end. So I think this is looking good. This is a decent page that we created using woodmore. not liking what’s there at the button. So let’s remove those. So for that, you would need to go to widgets and remove this footer items. And these are site wide. So if you remove it from Reddit, it will be removed from everywhere.

Now let’s rephrase that. I think it’s looking fine. So this is how you would create a page using Gutenberg. If you do not have a WordPress installation, you can go to wordpress.org slash Gutenberg. And here, you cannot save anything. You cannot upload images. But still, you can use Gutenberg. And you can see how it works, you still have all the blocks which are available. And you also have all of the options from here. So if I want, I can insert any blog, like for example, I can insert heading. And we have all those options available on the right. And we also have these toolbar. So it is kind of a replica of Gutenberg, which is available on wordpress.org. Gutenberg. So I think if you search WordPress, Gutenberg demo maybe. Yes. So that would probably be the first thing maybe for me, not for you. But I think you’ll be able to find it wordpress.org slash Gutenberg. Here, you can play around with Gutenberg and see how it works. So these are some of the resources developers.wordpress.org slash Block Editor. This is where you can learn more about the Block Editor, you can read the glossary and how to use the Block Editor. Good merg. hub.com is where you can find blogs and some ready made pattern and some resources for your good my blog. And wordpress.org slash Gutenberg is where you can use the Block Editor without WordPress. So the one that I showed you where you can just play around with Gutenberg without installing WordPress. So that’s all I had. So I hope that you learned something from the session and thanks for joining.