What is Gutenberg editor WordPress? Pros and Cons.
When WordPress 5.0 is finally released, the Gutenberg editor replaced the classic editor as the default WordPress editor. This has constituted a major overhaul of the content publishing experience.
Now from our experience of WordPress website development we will share several ideas how to use this feature.
The Gutenberg Rollout
WordPress has several exciting developments in store and Gutenberg lays the groundwork for a brighter, better new WordPress. Gutenberg is WordPress’ first stage of a 3-pronged rollout strategy. Besides redeveloping the editor, the other two stages of this strategy include an in-depth focus on page templates as well as transforming WordPress into a comprehensive website customizer.
Now, the block editor Gutenberg exists and you can use it for creation of your new corporate website to achieve business goals with the providing a high-quality company presentation on the Internet.
Do you think WordPress is a good platform for a business website? Our WordPress specialist described pros and cons of WordPress in the article 6 signs that a website needs a redesign
The Gutenberg Environment
This editor for WordPress is named after the founder of the movable printing press, Johannes Gutenberg. It has been developed with a single goal of making it easy to use the visual editor on WP. One way it achieves this is by introducing blocks and offering extra advanced layout options. Block-based UI is designed to be flexible and looks different than the classic old editor. Each page component is represented in the form of a modular block that can be accessed from a block menu, can be dropped anywhere, and edited to create a customized presentation that the users want. It was a great idea for non-tech persons who can’t or don’t like code to custimize pages.
When using Gutenberg editor, you should expect the following:
- A modernized way of writing, editing and publishing content that focuses on simplicity and usability
- Blocks that unify multiple interfaces
- Development of premium blocks that are superior to both widgets and shortcodes
- A new tool that allows developers to achieve full site customization
- Using Gutenberg can help with your SEO, but this editor isn’t a ranking factor (you guessed it, so it would better to order SEO services to increase a traffic on your site)
Getting Gutenberg Editor
First of all, Gutenberg only works with WordPress 4.8 or newer. The latest Gutenberg version can be downloaded from the WordPress repository or by searching it out from the “Add New” plugging option on your WordPress dashboard.
Once installed, Gutenberg won’t replace your default WP editor but instead appears as a link under your posts. Through this link, you can now open the Gutenberg editor.
A Gutenberg menu will also be added to your dashboard.
Using Gutenberg Editor
At first glance, you can tell that Gutenberg is very different from the editor that you are accustomed to on WordPress.
Gutenberg is written in React – a JavaScript framework. It also takes advantage of modern technologies such as WebPack, REST API, ESnext + JSX, etc. Thus opening a whole new world for developers in terms of block development.
Gutenberg editor offers you a clean writing environment that is free of distraction with impeccable typography and plenty of writing space. This editor really focuses on putting writing first hence particularly favorable for folks who do their writing on laptops.
The settings on Gutenberg can be opened per document or per block from the cog icon placed on the top right-hand side of the editor. Next to this cog(setting) icon, are three dots that let you switch to a code editor.
Blocks are at the core of creating content using Gutenberg. Blocks are modules that are preconstructed to help a user lay out the content of their WordPress site more clearly and consistently. The blocks essentially present a unified styling technique that doesn’t require advanced programming or other formatting functionality such as shortcodes, post formats, theme option, etc.
The block concept allows for easy and quick customizations. Through these blocks, one can define what every aspect of content is. One can further define their specifications per block. A single line of text can, for instance, be changed into a quote by adjusting its block type. Every block type comes with a unique set of options that allow one to set the placement, decoration and many other content features.
Gutenberg offers blocks for lists, quotes, paragraphs, headings, images, galleries, codes, shortcodes, widgets, buttons, embed elements, etc. Every block can be customized to have its own layout and can also be saved as a reusable block.
So, Gutenberg seems a modern solution to implement the best UI/UX design on a WordPress site to make it user-friendly, to increase conversion rate and to make more money in result.
Comparing Gutenberg And the Classic Editor
Gutenberg, just like the classic editor, is primarily designed to edit content only. It, however, is different
in the following ways
- It includes various extensible blocks that have defined attributes
- It mainly focuses on content creation and, therefore, the interface offers minimal interactions
with developer tools. The UI, therefore, resembles a front-end editor. - Content created with the classic editor can be converted to Gutenberg fully. However, Gutenberg content can only be partially converted to classic.
- Content in Gutenberg is stored as semantic HTML comments while in classic, it is stored as shortcodes.
Gutenberg Compatibility
Given that Gutenberg is a new and significant change, it is vital for you to check that your products will be compatible with this editor. Gutenberg affects shortcodes, custom post types (CPT), metaboxes as well as any content generated. WordPress themes, in turn, modify the editor via editor styles. Most plugins are nonetheless compatible with Gutenberg.
Gutenberg Pros
Positive reviews praise this editor for its large writing space that is offered by a distraction-free interface. The pros of using Gutenberg WordPress editor therefore include:
- Gutenberg is easy to use even for non-technical and beginner users.
- It makes it easy for a user to create WordPress posts that have a wide variety of multimedia content.
- It lowers the overreliance on TinyMCE.
- Developers of themes and plugins can create customize blocks effortlessly.
- Using blocks is easy, fun and the new alignment option they offer is brilliant.
- Gutenberg works great across all platforms including mobile.
- It allows for the development of full-width templated, high-resolution, responsive designs.
Gutenberg Cons
Most negative reviews about Gutenberg come from users who are reluctant to adopt this editor for
various reasons. That notwithstanding, the editor has several drawbacks including:
- It is incompatible with some of the plugins. But it is a common issue for developers of WordPress plugins.
As you can see, there is just one cons. You just need to get used it.
How to disable editor Gutenberg WordPress
If for some reasons you do not want to use it or you start experiencing any problems with the site, you can completely disable Gutenberg by adding a small code to the function file (function.php) of your current theme.
Before making changes to “function.php”, always back it up or save a copy, so that you can restore it to its initial state if an error occurs.
Option 1; Adding the restoration code for PHP 7 and higher.
if( ‘disable_gutenberg’ ){
add_filter( ‘use_block_editor_for_post_type’, ‘__return_false’, 100 );
add_action( ‘admin_init’, function(){
remove_action( ‘admin_notices’, [ ‘WP_Privacy_Policy_Content’, ‘notice’ ] );
add_action( ‘edit_form_after_title’, [ ‘WP_Privacy_Policy_Content’, ‘notice’ ] );
});
}
Add the code above to the very end; just before the closing PHP tag ?>. In case you can’t see the PHP tag ?>, and you are not familiar with “function.php”, then just place the code at the very end of the file. Otherwise, you can place the code anywhere in “function.php”, if you are experienced and know what you are doing.
It is important to notice that the code will only work if you have a version of PHP 7 or higher. In case you do not know the version of PHP you are using, then update it and then apply the code stated in Option one ( Check above).
If you have the old version 5.6, then immediately go to the second option of this article (Check below) or upgrade the version on the hosting.
Option 2; Adding a modified code for version PHP 5.6.
Use the code below.
if( ‘disable_gutenberg’ ){
add_filter( ‘use_block_editor_for_post_type’, ‘__return_false’, 100 );
add_action( ‘admin_init’, function(){
remove_action( ‘admin_notices’, array(‘WP_Privacy_Policy_Content’, ‘notice’ ));
add_action( ‘edit_form_after_title’, array( ‘WP_Privacy_Policy_Content’, ‘notice’ ) );
});
}
IMPORTANT TO NOTICE: Always check the version of WordPress you are using when attempting to disable Gutenberg. If you have WordPress 4.9, and the you are running an older version of PHP then disabling Gutenberg might not be successful due to the protection layer added to WordPress 4.9. You could see the following error: “SYNTAX ERROR, UNEXPECTED ‘[‘”
If there are no errors and the file is saved, then everything is fine and Gutenberg is disabled.
In general, the error SYNTAX ERROR, UNEXPECTED ‘[‘ arises because of square brackets. In PHP 7 an array is defined just by square brackets [] whereas, In older versions, arrays are defined by parenthesis ().
SOLVING “ SYNTAX ERROR, UNEXPECTED ‘[‘ “
If you see an error somewhere due to square brackets and there is no possibility to connect a newer version of PHP, then:
// Replace it
[… Here is the contents of the array]
// Replace with this
array (… Here is the contents of the array)
// I hope it is clear that without words … Here the contents of the array
After adding the required code, the Gutenberg editor will be disabled completely.
New Gutenberg review (28.02.2019)
Today’s the twenty-eighth of February 2019 and the time has come to sum up some intermediate results regarding the theme of the new “grandiose and revolutionary” plugin for the most popular CMS WordPress. We will not write too much about Gutenberg, but simply want to draw the reader’s attention to the facts provided by WordPress.org statistics.
Matt Mullenweg said:
The editor will create a new page- and post-building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery.
Based on the reviews and the overall assessment of the plug-in, we can only say that Gutenberg just complicated the lives of users, in contrast to its intended purpose. But we said it about two years ago.
An introduction to Gutenberg 9.2
Gutenberg 9.2 has a new framework, interaction patterns, user experience, and functionality for WordPress. It is a next transformation of how WordPress works. It seems better, than earlier version.
WordPress Gutenberg 9.2 Features
1. Image Alt Text Fallback
Alt text in images holds a key place in the world of SEO and it can be a pain at times. The new WordPress includes a feature called alt text fallback which takes up your image caption as alt text. So you have less work to do. On the other hand, it is best to create a unique alt text from the caption because you wouldn’t want the screen reader to read the same text twice.
2. Improved security
A major welcome feature is the security fix. ReDos attack – Regular Expression Denial of Service is particularly addressed in this version of Gutenberg 9.2.
3. Subtitles in Videos
Gutenberg 9.2 comes with support for adding subtitles to videos. It is pretty cool feature for those visitors who are hard of hearing or lower their volume while visiting your site.
4. Template information
The latest WordPress Gutenberg 9.2 also includes a dropdown for information about templates. It shows the name and description of the template currently in use. It is a simple but it is a really helpful feature.
5. Changes in layout
New WordPress gives the option of creating column-based layouts. This approach makes the process of page building more robust. It is true but developers need some time to get used to the feature.
6. Widgets Screen
There is a lot of improvement in terms of accessibility on the widget screen. Instead of relying on defaults, more meaning labels in ARIA can now be added with more description in the new Widgets screen.
Gutenberg 9.2 also got tons of improvements in bug fixes, performance enhancements, and code quality fixes just like modern editing sites.
Now Gutenberg is a thing that we can recommend you to use in some cases. Need more information about how to use Gutenber editor for the best results? Don’t hesitate to contact F5 Studio web specialists.