Hats off to the WordPress Content Management System (CMS). It has drastically changed the WordPress World with so many exciting features, and significant advancements. And now, WordPress Content Management System (CMS ) has launched Gutenberg as a default content editing block with better functionalities.
You might have read, seen, and heard many times: It is Gutenberg compatible, Gutenberg integrated, Gutenberg friendly. What exactly is Gutenberg? How does it work? How to use it? We will clear all the curiosity here in this article.
What is Gutenberg?
Gutenberg is a new default WordPress block editor introduced in WordPress 5.0. WordPress launched the Gutenberg block editor to replace the old classic editor. Gutenberg was developed on GitHub using the WordPress REST API, JavaScript, and React.
Gutenberg operates on a system of customizable and movable blocks. You can get more flexibility and control over the way content appears on a page. You can create a stunning content layout without installing any third-party plugins. It provides a library of pre-built elements, or ‘blocks’.Gutenberg is a client-side interface designed with React, which uses a block-based system to develop content. You can get a clean and comfortable writing environment, with striking typography and plenty of space for the content to rise.
Gutenberg functions like a page builder. The awesome available number of blocks, ranges from a paragraph to tables, images, video embeds, and many more. You can create various forms of content, insert them into posts as well as customize them in an instance, right within the editor console.
Blocks are a great new tool for building engaging and attractive content. With blocks, you can insert, rearrange, and style multimedia content with very little technical knowledge. Instead of using custom code, you can add a block and focus on your content using WordPress Themes.
Let’s dive into the details
A new block-based approach differentiates the previous classic editor(TinyMCE editor ) and Gutenberg editor from each other. Be clear that, you get everything in blocks now. For example, each paragraph is a block, each heading is a block, each image is a block, and each button is a block.
How is the Gutenberg Block Editor Interface?
When you open any post and start writing or editing, you will get a full-screen experience on your device. Besides this, the WordPress sidebar dashboard is hidden in the Gutenberg editor.
You will have a visual preview while working on your content area. The toolbar at the top left helps you insert new blocks, undo/redo, details of content, and list view.
The sidebar at the right contains two tabs: the post tab and the block tab. The post tab accesses configure post-level settings like its permalink, featured image, tags, categories, post formats, and many more. Unlike that, the block tab works on color, typography, size, and so on. You can show and hide these tabs in your choice.
How to insert blocks on a post?
To add a new block, you can click one of the “plus” icons in the interface at the top. Another technique of adding new blocks is to click the icon inside the interface that opens a smaller block inserter interface.
Moreover, the paragraph blocks automatically open up when you press enter. You can get versatile blocks like lists, heading, images, buttons, and video embeds from the toggle block inserter.
Essential Formatting options/Working with blocks
Gutenberg block editor offers a floating toolbar that appears when you click on any block. The buttons in the toolbar change depending on the block you are editing. While writing and editing any articles, posts, or blogs, you can have basic formatting buttons like text alignment, bold, italic, insert link, strikethrough, subscription and more. You have multiple options available at the right of the toolbar such as duplicate, copy, remove paragraph, insert before, after, etc.
Furthermore, Gutenberg blocks offer you to move blocks up and down by simply dragging them or by clicking the up and down buttons next to each block.
How can we organize blocks in groups and columns?
Well, here in Gutenberg editor you can create more complex and lovely layouts without any custom code or shortcodes. It comes with two default blocks: Column block and group block. With the help of these blocks, you can put one or more blocks inside of another block.
If you wish to create a two-column layout, you can use the block inserter to add the columns block. Then you will see a prompt where you can select your preferred layout. The same process works perfectly with the group also.
Along with this, You can then fill in each column with any type of block to create beautiful layouts. You can apply styles to the entire group block such as changing their alignment, background, text color, or spacing.
How can you embed content from other resources?
Gutenberg block editor comes with significant and dedicated blocks. It helps you to embed content from third-party sources such as TikTok, Pinterest, Spotify, WordPress, YouTube, Vimeo, Soundcloud, etc. You can find all of these options in the Embeds section of the block inserter. It is easy to do. You can just copy the URL from the third-party source and paste it here in your desired place. For Example …
Some common, basic, and must-used blocks
Add Image: Simply add the image block and then upload an image file or select it from the media library. Instead, you just drag the image file directly from your desktop to the location. After uploading an image, you can add metadata for the image like alt text, size, and add link.
Add a link: You will see the insert link button on the toolbar at the right of the italic letter. You can do it for an instance by clicking the insert link tool and pasting there the copied needed URL file.
Add cover image on blog posts and landing pages: The cover image shows the page or blog post as attractive and impressive. It is mainly used as a cover for a new section on a page or the beginning of a story. To do this, just add a cover block and then upload the image you want to use. You can choose an overlay color for the cover or make it a fixed background image to create a parallax effect as well.
Add table: Gutenberg editor comes with a default tables block. It is super simple like others. It can be done by just clicking the tables block. The number of rows and columns is your choice.
Helpful Keyboard shortcuts
Gutenberg Block editor has surprised us with so many excellent blocks. It has made our workflow fast, easy, and fruitful. It arrived with many handy shortcuts for our ease. let’s have a look at them.
- Open the block List View — Shift + Alt + O
- Save your changes — Ctrl + S
- Undo your last change(s) — Ctrl + Z
- Redo your last undo — Ctrl + Shift + Z
- Duplicate the selected block(s) — Ctrl + Shift + D
- Delete the selected block(s) — Shift + Alt + Z
- Insert a new block before the selected block(s) — Ctrl + Alt + T
- Insert a new block after the selected block(s) — Ctrl + Alt + Y
Rise Blocks for extra benefits
Well, you all knew what you can do with the Gutenberg block editor. It’s not enough for the user. All we want is an elegant, perfect, and appealing look within a very short period of time. Rise block is a lightweight Gutenberg WordPress block. Rise blocks have variable awesome blocks for outstanding layout and design with just a little customization. let’s have a glance in short.
Add section: You can add a section with your preferred layout. It also enables you to add other blocks within it.
Add slider: With this block, you can display your page in a carousel layout with a link. Also, you can fetch other pages’ headings and excerpts.
Profile card: A profile card block allows you to create a profile of team members you are working with. It shows photos, names, descriptions, and social profiles as well.
News and blogs: You can get the benefit of news and blog block for your blog section. It enables you to fetch any five blog articles or either all posts by category or you can show it in a grid format.
Hence, this is just an introduction to rise blocks. Excellent Blocks like social icons, advanced heading, counter, call to action, accordion, and many more blocks are available here. You can download and install it in the free version along with the premium one. No doubt premium comes with more excellency and accuracy. Don’t miss it.
Summary
Since the arrival of the Gutenberg block editor, the content workflow has been better, time-saving, and appealing. Variable and multiple blocks from the Gutenberg block editor are a great gift to the user. Thanks to WordPress Content Management System (CMS).
We hope this tutorial on Gutenberg helped to learn and use it. We will be publishing new articles and updating our old resources to spread the knowledge we have. Be with us.
Thank you!