{"id":19089,"date":"2021-06-15T09:19:13","date_gmt":"2021-06-15T14:19:13","guid":{"rendered":"https:\/\/wpstackable.com\/?p=19089"},"modified":"2021-07-14T16:57:10","modified_gmt":"2021-07-14T21:57:10","slug":"wordpress-gutenberg-tutorial","status":"publish","type":"post","link":"https:\/\/wpstackable.com\/blog\/wordpress-gutenberg-tutorial\/","title":{"rendered":"Guide to Your First 30 Minutes With the Gutenberg Editor"},"content":{"rendered":"\n

Are you new to WordPress? Maybe, you\u2019re already familiar with the classic WordPress editor or other Page Builders?<\/p>\n\n\n\n\n\n\n\n

At any rate, if you\u2019re not comfortable with Gutenberg yet, now is a great time to warm up.<\/p>\n\n\n\n

As you might know, Gutenberg is the new editor that\u2019s a native part of the WordPress platform. The editor allows you to manage content blocks intuitively so you can design great-looking pages (including blog posts!) for your site.<\/p>\n\n\n\n

Not sure where or how to start? Don’t worry; we’ll walk you through some of the first things you have to do in order to get up to speed.<\/p>\n\n\n\n

Activating Gutenberg<\/h2>\n\n\n\n

First, let\u2019s make sure that the Gutenberg Editor is up and running.<\/p>\n\n\n\n

If you\u2019re on the latest (or a recent) version of WordPress, it\u2019s likely that you already have Gutenberg and it\u2019s activated.<\/p>\n\n\n\n

To verify this, you can check<\/a> your WordPress version.<\/p>\n\n\n\n

Now, it\u2019s not enough that you have Gutenberg installed. There\u2019s a chance you might have disabled Gutenberg<\/a> by enabling the Classic Editor<\/a> plugin. If so, make sure to deactivate that one.<\/p>\n\n\n\n

If you’ve been using the Classic Editor for quite some time, you may have opted to disable Gutenberg to avoid disrupting your current workflow.<\/p>\n\n\n\n

Now’s a good time to jump in and try switching to the Gutenberg Editor. <\/p>\n\n\n\n

You’d be surprised how this will improve how you build your website. <\/p>\n\n\n\n

Anxious? Okay, let’s start with these simple exercises to get you familiar with it.<\/p>\n\n\n\n

Trying Gutenberg With a Simple Blog Post<\/h2>\n\n\n\n

Now that you have Gutenberg all set, we suggest starting with a low-pressure project by working on a blog post.<\/p>\n\n\n\n

It\u2019s likely that you publish new blog articles much more often than landing pages. A typical blog post is mostly composed of body text, headings, images, and lists. You can easily maneuver and test out the blocks without worrying about messing up the page.<\/p>\n\n\n\n

To simplify your first Gutenberg experience, attempt to produce a typical blog post design. <\/p>\n\n\n\n

You know how a blog post should look like. Try to design a post like that but using Gutenberg this time. <\/p>\n\n\n\n

Take note of any changes to your workflow. <\/p>\n\n\n\n

As we go through this guide, keep working on adding and modifying existing content blocks until you get the hang of it.<\/p>\n\n\n\n

Getting Familiar With Blocks<\/h2>\n\n\n\n

What are ‘blocks’ anyway?<\/p>\n\n\n\n

To simplify, every element<\/a> on a Gutenberg page is a block. Words, pictures, and everything in between.<\/p>\n\n\n\n

Gutenberg blocks are pieces that will allow you to easily modify styles with the latest WordPress version. <\/p>\n\n\n\n

This editor offers a wide variety of blocks, which you can see by clicking on the \u2018plus\u2019 icon in the top-left corner of the page.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

This includes your regular Paragraph Text, Headings, Lists, Quotes, Tables, and much more. <\/p>\n\n\n\n

With these, you can replicate what you\u2019d normally design using the Classic Editor.<\/p>\n\n\n\n

Don\u2019t currently have access to a WordPress site with Gutenberg? Check out this <\/em>Live Demo<\/em><\/strong><\/a>. <\/em><\/p>\n\n\n\n

After adding some content, things are just going to get better with Gutenberg.<\/p>\n\n\n\n

Each block will be easy to rearrange and customize, making it easy for you to sort them into your preferred layout for a better-looking page.<\/p>\n\n\n\n

As you go through this guide, you\u2019ll learn more about customizing these blocks.<\/p>\n\n\n\n

Adding the Most Basic Blocks<\/h2>\n\n\n\n

Once you have familiarized yourself with the kinds of blocks you can use, let’s go back to our exercise of creating a blog post.<\/p>\n\n\n\n

By default, if you start typing, you\u2019ll be adding Paragraph Text.<\/p>\n\n\n\n

To make one tiny step further, try to add a heading. <\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

After that, you may test what it\u2019s like to add images.<\/p>\n\n\n\n

Modifying Paragraphs (or Any Other Block)<\/h2>\n\n\n\n

After adding a few blocks, you may want to make some layout changes and finishing touches.<\/p>\n\n\n\n

For instance, you\u2019d edit a blog post to rearrange the sequence of ideas. Maybe, you\u2019d later design landing pages that need some layout adjustments.<\/p>\n\n\n\n

Since the Gutenberg editor is flexible, you can easily modify your page\u2019s layout with just a few clicks.<\/p>\n\n\n\n

After selecting a block, you will see a variety of options.<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

To keep it simple, let\u2019s focus on the up and down arrows. Unsurprisingly, they allow you to move your block up and down.<\/p>\n\n\n\n

Try playing with the menu of options. As you can see, you can change the content\u2019s formatting settings like alignment, italicizing your text, and more. <\/p>\n\n\n\n

The three dots on the far right will show more options including deleting the block.<\/p>\n\n\n\n

Getting More Blocks<\/h2>\n\n\n\n

Are you tempted to do more with Gutenberg? <\/p>\n\n\n\n

If you aren\u2019t familiar yet, there\u2019s a massive library<\/a> of plugins for the block-based editor.<\/p>\n\n\n\n

Let\u2019s say that you\u2019d like to get more blocks. You can install the free Stackable plugin<\/a>. <\/p>\n\n\n\n

After doing so, you will have a longer list of blocks. <\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

Stackable blocks are the more colorful ones in the list. You can identify the native blocks through their plain black icon appearance. <\/p>\n\n\n\n

The purpose of getting third-party blocks is to get more designs and advanced customization options.<\/p>\n\n\n\n

For instance, with Stackable’s Advanced Heading block<\/a>, you\u2019ll get far more customization settings. You\u2019ll be able to add subtitles, advanced text decorations, flexible color settings, and more.<\/p>\n\n\n\n

As you dig deeper, you\u2019ll quickly discover that you can do much more with such block-enabled plugins.<\/p>\n\n\n\n

Getting Comfortable With the \u201c\/\u201d Command<\/h2>\n\n\n\n

Once you get a little comfortable with blocks, you can be more efficient in adding them in the Gutenberg editor, with the simple use of the “\/” command.<\/p>\n\n\n\n

The trick here is to remember the names of your frequently used blocks.<\/p>\n\n\n\n

For instance, you can type \u201c\/im\u201d, which will automatically suggest the Image block. So, you can simply hit the Enter key to start adding an image.<\/p>\n\n\n\n

To warm up, list and remember the names of three to five go-to blocks that you’ll regularly use. Get accustomed to adding them using this command. <\/p>\n\n\n\n

As you get used to \u201c\/\u201d shortcut, you\u2019ll find yourself using the mouse a little less frequently.<\/p>\n\n\n\n

If you want to continue getting to know Gutenberg, you may want to check out our Gutenberg WordPress Editor Tips and Tricks<\/a> article.<\/p>\n\n\n\n

Over to You<\/h2>\n\n\n\n

For you to appreciate Gutenberg, we suggest to continually play around with the blocks and feel how it all works. Habitually do this for your blog posts. <\/p>\n\n\n\n

Later, attempt to design more advanced landing pages. You\u2019d be surprised to see what Gutenberg can do.<\/p>\n\n\n\n

Hopefully, you now have access to the block-based editor. If not, see this live demo<\/a> so you can play with it without signing in.<\/p>\n\n\n\n

Looking to learn more about Gutenberg? <\/em>Join our community here<\/em><\/a>!<\/em><\/p>\n\n\n\n