[et_pb_section fb_built=”1″ admin_label=”section” _builder_version=”3.22″][et_pb_row admin_label=”row” _builder_version=”3.25″ background_size=”initial” background_position=”top_left” background_repeat=”repeat”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_text admin_label=”Text” _builder_version=”4.3.2″ background_size=”initial” background_position=”top_left” background_repeat=”repeat”]
[Note: WordPress 5.0 is now available, and Gutenberg is part of WordPress core. Here’s some basic information about the Gutenberg editor, with more to come. . .]
In WordPress 4.9.8, the most recent version, you’ll see a big announcement at the top of your WordPress dashboard.
This is WordPress’ way of making it easier for you to accept the inevitable, because Gutenberg will be included as part of the WordPress core starting with version 5.0.
If you install Gutenberg now, you’ll be able to start working with it and be ready to rock the new interface once it’s baked into WordPress.
Click Install Gutenberg, and then Activate, and you’ll see this screen.
You’ll notice right off that the sidebar looks very different. Instead of this:
You have this:
Now look at the editor window. Yup, that’s different!
Notice the blue box around the paragraph, with the word “paragraph” cleverly inscribed in the corner. The new Gutenberg editor works with blocks. If you’ve used a platform like Medium, you’ll be somewhat familiar with them already.
There are many different kinds of blocks. Besides paragraphs, you’ll find:
- Images
- Videos
- Galleries
- Embeds (things like YouTube, tweets, etc.)
- Buttons
- Hero images
- Separators
- Lists
- Headings
- Tables
- Columns
- And more
It might help if you think of the edit screen you’re used to as being made up of one big block, and this one of many smaller blocks.
These small blocks, though, have one thing in common — each block can contain only one type of content. You can’t have a block that includes text and an image, or a heading and a video. They’re all separate.
Another thing that’s really different is that all of Gutenberg’s menus are context sensitive. That means they’ll change depending on what’s in the highlighted block. If the block contains a video, you’ll have different menu options than if it’s text.
Here’s what a blank edit screen looks like when you click Add New / Post.
The little square box contains tips, which you can step through for a quick overview.
Let’s work from the top down.
Add Title
This hasn’t changed. Just started typing the title for your post or page.
Add Blocks
To add a text block, just start typing. You can add several paragraphs within the same block, but as soon as you want to include an image or something else, you’ll need to create a new block.
Text Block Menu
Remember we mentioned context-sensitive menus? Display the edit menu for the text block by placing your cursor within the block. You’ll immediately see basic tools like position (left, center, or right), bold, italic, strikethrough, and a link tool.
The menu in the sidebar has also changed.
The sidebar menu lets you change the text size or add a drop cap.
A drop cap is a fancy typographical effect where the first letter of the paragraph is much larger than the surrounding text, so it “drops” into the next line(s), like this.
To add a new text block, move your cursor to the top of the screen and click the plus sign.
Search for the type of block you want to insert, or scroll down until you find the one you’re looking for. (The ones you use most often will be closer to the top.)
If you choose image, you’ll be able to immediately drag an image to that spot, or choose one to upload.
Once you add your image, the contextual menu above lets you align it to the left, center, or right, or edit it. In the sidebar, image settings are displayed. “Textual alternative” is where you type in the “alt text,” a word, phrase, or sentence to describe the image for the search engines or for readers who can’t see it.
You can choose to display the image at full size, or as a thumbnail. Your theme may also allow for other sizes. Or you can size it as a percentage of its full size.
Below that you insert the link and assign any additional CSS classes.
Keep adding blocks until you’ve completed your post or page.
If you move your cursor to the left margin underneath the completed block you’ll see the insertion tool so you don’t have to scroll back up to the top of the page every time you want to add a block.
Buttons to save draft, preview, and publish are at the top of the sidebar.
Click the gear icon, and the sidebar disappears, leaving you with a full screen for your editing.
Should you need to look at the underlying code, you’ll find an approximation of the text editor window by clicking the three buttons at the top right of the sidebar.
Links
There have been some improvements made to the link tool since I first experimented with Gutenberg a few months ago, thank goodness!
Highlight the link text and click the link icon. It will look similar to what you’re used to.
Paste in the URL, or if linking to another page in your site, type in the keyword to search for the URL you want, just the way you do now.
If you want to tell WordPress to open the link in a new window, though, click the three dots and toggle the switch.
When I first experimented with Gutenberg, the process of opening a link in a new window was very cumbersome, so I’m glad they’ve improved it.
Tables
WordPress has always been a pain if you want to create a table. In the past, you needed to know code or use a plugin. Now, with the Tables block, WordPress handles it for you easily and elegantly.
Columns
Want to divide a particular page into columns? Choose the columns block instead of coding it in by hand. Ditto with buttons and other custom elements. This allows you to really design a page layout.
There are lots of interesting contextual menus you’ll discover as you work with the new interface. Let’s move back over to the new sidebar for a minute, though.
Status and Visibility
This is where you select a publication date and time. You can also make a post sticky by selecting the Stick to the front page toggle. If you work with a team, toggle Pending review if another team member needs to see it before it’s published.
Excerpt and Discussion
Instead of finding the Excerpt area below the editing window and SEO, as it is now, it’s easily accessible in the sidebar. Ditto with the Discussion settings.
Reusable Blocks
You can designate any block as reusable. When you do, it gets saved to a library, and you can add it to other posts and pages.
This is great if you want to include images, calls to action or opt-ins in a variety of places throughout your site. To make a block reusable, hover your cursor over it, then click the three dots on the right and select make reusable.
You’ll be asked to give it a title, and then save it.
To reuse it, open the Blocks menu, and you’ll find Reusable Blocks at the bottom. Click and select the reusable block you want to insert.
When WordPress 5.0 is released, we’ll all need to adjust to Gutenberg.
As Matt Mullenweg, one of WordPress’ creators, wrote:
When Johannes Gutenberg’s press came out, people mostly used it to print the same religious text monks had been copying. It wasn’t until ten or fifteen years later that people started innovating and trying their hands at new kinds of writing, and the wheels of change started to spin faster. Now it’s WordPress’ turn to do the same.”
The developers behind WordPress think it’s time for a more up-to-date, flexible interface between the content creator and the content viewer. The result is “Gutenberg.”
Matt continues:
Users will finally be able to build the sites they see in their imaginations. They’ll be able to do things on mobile they’ve never been able to before. They’ll never have to see a shortcode again. Text pasted from Word will get cleaned up and converted to blocks automatically and instantly.”
For all the grumbling there’s been in the WordPress community, I think the move to Gutenberg will open up lots of new design options for the majority of WordPress users. And if you mostly use text with an occasional image thrown in, your process won’t change a whole lot.
If you’re still not ready for Gutenberg, you can install the Classic Editor plugin and stick with what you know. Here’s an article to help you decide whether that’s the right option for you.
[/et_pb_text][et_pb_divider _builder_version=”4.3.2″][/et_pb_divider][et_pb_text _builder_version=”4.3.2″]
Other Articles You’ll Enjoy
- Want the Best WordPress Site? 52 Resources for Now and Later
- 7 Big Changes that Make WordPress 4.9 Better
- WP Engine Acquires StudioPress – What Does it Mean for You?
- How to Plan and Carry Out a Site Redesign
[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]
