With the launch of WordPress 5.0 this year, Gutenberg editor is considered one of the most significant development in recent years, and it is also receiving a mixed reaction from the web development world.
In this article, we will be covering the new Gutenberg editor with CoBlocks, which presents a new way to create and edit content directly from your website and is a notable change in how users use the WordPress editor.
WordPress is planning to make Gutenberg editor a core part of the editing journey, and this leads to various questions that arise by the developers who are already using existing page builders and editors.
Let us dive into the Gutenberg editor:
What is the Gutenberg WordPress Editor?
Gutenberg WordPress editor is a brand new PageBuilder that is designed to integrate into the core WordPress experience. The Gutenberg editor provides easy to use content blocks in PageBuilder like functionality to every WordPress website and is set to replace the TinyMCE as the default content editor. Now you can think of your website in terms of various blocks of different sizes and add content to them individually.
The editor is named after Johannes Gutenberg, who is also the inventor of the mechanical printing press. Gutenberg editor is a logical successor of earlier editors to simplify website creation for a nontechnical user. Gutenberg editor aims to replace the current distracting customization layouts and allow you to add HTML tags in a section. Gutenberg editor which started as a plug-in got merged into WordPress 5.0 in 2019.
WordPress launched Gutenberg to make rich contents easily accessible and enjoyable in the block editor. It is merely a step forward for WordPress and is said to provide content layouts not just to entertain text but all kinds of rich media with it and simplified user experience.
Super Powered Editor
The Gutenberg is much more than your basic text editor. It allows you to handle the entire website content in forms of customizable chunks or blocks. Forget being fluent in HTML as now you can control your website entirely from a single Gutenberg editor.
This new editor is best of both worlds of page builder plugins like Divi and Visual Composer as well as DIY platforms like Wix, Square Space, and more. Now WordPress allows handling multi-column layouts in a single editor. This does not mean that this is the end of the Divi or other page builders, as it will take time for Gutenberg to replace those plugins completely. Gutenberg is set to become the default WordPress editor in the coming years.
What Are Blocks, and how does it change the WordPress experience?
The Gutenberg editor is an alternative to the text editor which includes remembering complicated shortcodes and provides a new simple visual interface, so now you can replace the following tasks with a simple click:
- Importing images or multimedia is no longer required
- No shortcuts required for specialized plugins
- No featured image required to upload separately
- No widgets required to add content on the sidebar
In short, Gutenberg changes the way creators interact with the content interface and facilitates to add more content. Instead of working with lots of shortcodes, now you will be simply using blocks.
What Are Blocks?
Blocks are the atom units of the new editor. Everything, including content, videos, images, galleries, headings, custom codes, separators, paragraphs, and buttons, will be turned into a distinct block. Now you can easily drag and drop each block wherever you want to place and edit it accordingly.
Setting up Gutenberg
If you are running a website on WordPress, you can directly download the latest version of Gutenberg from the WordPress repository. Go to your plugins, select add new plugin and search the Gutenberg editor. Make sure your WordPress is updated, and you are using the 4.8 or higher version. You can install the plugin and activate it.
After activating the Gutenberg plugin, it will show an icon in the sidebar, and you can launch a sample post in the Gutenberg demo. Before working on the live website, you can create a demo post and check the nitty-gritty of Gutenberg.
Common blocks are the simplest form of Blocks which help you to add elements and create a fabulous looking interface which can be used anywhere and everywhere.
The paragraph block comes with custom font sizes, drop caps, text colours, background colours, and you can also enable custom CSS. With the paragraph block you can arrange your content with following options:
- Align Left
- Align Center
- Align Right
- Text Color
- Background Color
The Gutenberg editor it also allows you to rapidly change text layout and have modifications according to font size and arrange them small normal medium large and use
Gutenberg Text Editor Options
In Gutenberg text editor, you can add images and toggle between gallery and image layouts. You can also add custom sizes, dimensions, percentage size of images, and issues add alternative text description for images. In the image module, you can add quotes, headings, lists, audio files, galleries, videos, subheadings, and more.
Do you remember that adding a table in WordPress has been a complicated job, and Gutenberg is here to solve it? Now you can add and remove rows and columns in a table without any custom HTML or CSS.
One of the essential features of Gutenberg is the ability to add a button wherever you want to. In the Gutenberg editor, now you can add buttons like ‘Buy Now’ ad “Subscribe”. You can also change the background color and text color of the button.
Gutenberg Is Here to stay
Gutenberg might not be a permanent replacement for the text editor; however, it is here to stay and will lead a new way to build websites. You do not need to be a geek to publish things on WordPress anymore, as Gutenberg brings simplicity back to the WordPress publishing platform.
Gutenberg + CoBlocks
The CoBlocks is a page building content block for WordPress Gutenberg block editor. CoBlocks aims to make beautiful and outstanding pages in WordPress. CoBlocks uses web technologies to add existing functionalities and surpass the current limitations of the editor.
You can simply add grids, pricing tables, GIFs, style fonts, and more in a single click. It also follows the responsive guidelines and provides dynamic layouts. You can choose the number of columns in a page and resize, configure margins, add padding, and drop background images. You can also change typography in real-time and transform your text snippets through CoBlocks. You can find the CoBlocks plug-in in the WordPress plugin tool and start building beautiful web pages.
Gutenberg + CoBlocks allows to:
- Create custom layouts without a separate page-builder
- Display images in high-quality galleries and carousel
- Access multiple libraries of visual elements from the editor
- Make social media sharing simple
The heading block can be added in your post and denote a weight to your heading according to H1, H2, H3, H4. This block also provides:
- Text Formatting
- Align Text
- Heading Size
Quotes can catch the attention of the user. You can also easily add a citation or quote to your page or post in the WordPress Gutenberg editor. You can further edit the quote with the following blocks:
- Quote Styles
- Quote Alignment
- Text Formatting
- Quote Text Color
- Background Color
By the gallery block, you can add multiple images in a single gallery and:
- Align Gallery
- Edit Gallery
- Set the Number of Columns and Rows
- Crop Image
- Reorder Images
- Add Alt Text
- Change Image Dimensions
As the name suggests, you can add an image to your post or page. You can also:
- Change Image Size
- Edit Image
- Align Image
- Alternative Text
- Choose Custom Image Size
- Embed URL
- Choose thumbnail size to full, medium, or small
Add a verse from a poem, song, or anecdote to your site.
- Align Verse Block
- Format Text
- Verse frontend
Organize content using the Column block in the Gutenberg editor.
- Adjust the Text and Background Color
- Align Columns Block
- Format Text
- Adjust Font Size and Enable Drop Cap
Add a call to action with a Button block and drive traffic across various pages and outside WordPress.
- Select Button Style Rounded or Rectangle
- Align Button
- Format Text
- Choose Text and Background Color
- You can add a URL to the button to create a link.
Create a break between ideas or sections with a horizontal separator. It provides better readability and informs users when to pause while browsing.
You can add a widget with links to recent posts using the Latest Post block.
- Select Post Category to Display
- Align Widget
- Display Posts Using Lists or Grids
- Choose How to Order Posts
- Number of Post to Display
- Toggle Post Date On and Off
Add an existing plugin’s shortcode using the Shortcode block.
Add a widget with a link to your site’s archives.
Add a widget linking to Post categories.
The WordPress Gutenberg blocks makes it convenient to embed links from a ton of different sources. There are currently 34 embeds officially supported, which are:
In the new WordPress 5.2 version, there is a vast selection of blocks that can be used in the new editor. WordPress has also created Blocks API to allow third-party developers to create their blocks, and it opens new opportunities for web developers around the globe.