WordPress 5.0 is here with a major update - Gutenberg, The Gutenberg update is the biggest single update in WordPress history. The WordPress Gutenberg blocks which will be beginning with WordPress 5.0, completely changes the way posts and edits are done in WordPress. In this post, we explain how the new blocks work with the new Gutenberg WordPress Editor.
Before we go any further, you should check out our WordPress Gutenberg Ultimate Guide. That post and ebook covers information that this how-to will assume you already know. The Classic Editor plugin will only be officially supported until December 31, 2021, so you can only delay the inevitable for so long.
What are WordPress Gutenberg Blocks?
Gutenberg blocks allow you to insert a specific type of content into your post and then edit them independently of the other blocks. Using just a click and a drag of a mouse, you can completely reorganize the structure a post or page. Blocks allow you to create rich posts without needing to know any code.
The WordPress Gutenberg Common Blocks
1. Lists
Add a list to your page or post using the List block.
Block Options:
On a numbered list you can indent and convert a list item to create a mixed list.
2. Paragraph
Use the Paragraph block to add a new paragraph.
The Gutenberg Editor allows you to easily and quickly make basic text modifications. You can change the font size but using the preconfigured small, normal, medium, large and huge.
You can also set the font size using the pixels.
The Color Settings allow you to make important text standout without leaving the editor or adding your own CSS.
3. Heading
Use the Heading block to add a heading to your post.
4. File
Using a FIle block, you can create a link to view the file or create a button to download the file.
5. Quote
The Quote block allows you to easily add a quote and citation to your page or post.
The Quote block settings allow you to choose the style and align the block to your liking.
6. Gallery
Create a gallery from a group of images.
The Gallery block allows you to drag and drop pictures onto your page or post and the Gutenberg editor will auto create a Gallery for you.
The Edit Gallery option lets add captions or new images and rearrange the order of the images.
The Crop Images toggle will attempt to crop the images to make thumbnails the same size, which can have a less than desirable result. When using the Gallery block, you will want to add images that share a similar dimension.
7. Image
Add an image to your post.
Now you can add an image without entering your Medial Libray, drag and drop the image straight into your post.
You can click the Edit Image option if you need to change the image being displayed. You can also set the Alt Text for the image without leaving the editor.
When adding an image, you can choose one of the three auto-formatted sizes, Thumbnail, Medium or Full.
You can also use the Image Dimension settings to set a custom Width and Height for the image.
8. Cover Image
The Cover Image allows you to set the image that will be used for your blog post.
Depending on the theme you are using, a cover image will be displayed along with your post, making it more inviting to potential readers.
You can use the Overlay settings to select the overlay color and choose the overlay’s opacity.
9. Audio
Insert an audio clip into your post.
The Preload option allows you to control what is preloaded for people visiting the site.
10. Video
Add a video to your post.
WordPress Gutenberg Formatting Blocks
1. Custom HTML
Are you not finding exactly what you need in a WordPress Gutenberg Block? Use the Custom HTML block to add your HTML to the site.
2. Pull Quote
Add a Pull Quote to draw attention to an excerpt from the post.
3. Classic Editor
Use the classic WYSIWYG editor.
4. Table
Add a table to your page or post.
When you add a Table block, you will need to choose the desired number of columns and rows before creating the table.
You will still be able to add and remove columns and rows after the table is created.
5. Verse
Add a verse from a poem or song to your site.
6. Code
Add a code block to a post or page.
Here is what the code snippet will look like to your visitors.
7. Preformatted
Add Preformatted text to your site.
Here is the Preformatted block on the front end of your site.
WordPress Gutenberg Layout Elements Blocks
1. Spacer
Add some white space between blocks.
Slide the spacer block up and down to get the desired amount of white space between blocks.
2. Column
Organize content using the Column block.
3. More
Create a teaser on your Home or Blog page for a post.
This is what you will see on the blog page
And here is what you will see on the post’s page when the Hide Teaser option is toggled on.
4. Button
Add a call to action with a Button block.
You can add a URL to the button to create a link.
5. Media Text
Use the slider to change the amount of real estate that the media or text use. Select the text box to adjust font-size and color.
6. Page Break
Separate a post into pages.
7. Separator
Create a break between ideas or sections with a horizontal separator.
The WordPress Gutenberg Widget Blocks
1. Latest Posts
You can add a widget with links to recent posts using the Latest Post block.
2. Shortcode
Add an existing plugin’s shortcode using the Shortcode block.
3. Archives.
Add a widget with a link to your site’s archives.
4. Categories
Add a widget linking to Post categories.
5. Comments
Display a widget with the most recent comments with the Comments block.
WordPress Gutenberg Embed Blocks
The WordPress Gutenberg blocks also make it easy to embed links from a ton of different sources. There are currently 34 embeds officially supported, we aren’t going to cover each embed individually as they will typically behave the same way. However, we will list the embed blocks that are currently available.
Gutenberg Editor Shortcuts
I always like adding keyboard shortcuts to my workflow, they can reduce the time it takes to finish a post.
| Shortcode | Mac | Linux/Windows |
|---|---|---|
| Display Shortcut | Cmd+Option+H | Shift+Alt+H |
| Show/Hide the Settings Sidebar | Shift+Cmd+, | Ctrl+Shift+, |
| Open the Block Navigation Menu | Ctrl+Option+O | Shift+Alt+O |
| Navigate to the Next Section of the Editor | Ctrl+` or Shift+Options+N |
Ctrl+` or Shift+Alt+N |
| Navigate to the Previous Section of the Editor |
Ctrl+Shift+` or Shift+Option+P |
Ctrl+Shift+` or Shift+Alt+P |
| Navigate to the Nearest Toolbar | Option+F10 | Alt+F10 |
| Switch between Visual Editor and Code Editor | Cmd+Shift+Option+M | Ctrl+Shift+Alt+M |
Conclusion
WordPress 5.0 will be very interesting with this revolutionary editor. It has a huge selection of blocks available for you to use in the new editor and we look forward to see new block types in the future. WordPress has created the Block API to allow third-party developers to create their own blocks.
Powered by WHMCompleteSolution
