fbpx
Supercharge your SEO! subscribe to our newsletter For the latest SEO tactics & best practices

Gutenberg – An Introduction to the New WordPress Editor

By
Updated August 24, 2018
No Comments
5
Gutenberg Introduction

Gutenberg – An Introduction to the New WordPress Editor


Josh Giowaya

I'm Passionate about creating well-crafted, visually engaging and highly usable digital experiences. I have 10+ Years in web design & development at advertising and digital agencies, plus a number of years running my own consultancy. I also bring an extensive background in design that has proven invaluable when contributing to the design process and communicating with creative teams. Currently, I'm a WordPress consultant extremely active in the WordPress community. leveraging WordPress, Gutenberg and React to empower your Marketing Team. Atomic design & Modular development specialist. Speaker, Developer & Designer.

Since the first beta was shown in WordCamp Europe 2017, the new WordPress editor promises to change 100% the editing experience of WordPress content, Automattic has been defined by the new page and post building. Something that has been done by plugins page builders for a long time, but now will be a default feature of the platform and this will open the possibility of a complete new ecosystem within the platform, the Editor is already available for testing as a plugin but will be incorporated into the next version of WordPress 5.0.

 

Past

Before the visual editor played its part when it was related to the publication of simple texts, with the evolution of the internet, how to post and absorb content, and the penetration of the platform on the web (now present in more than 27% of sites). It brought a greater need than the classic editor did not supply, the solution was to use plugins page builders or custom themes integrated with metadata. Often an ordinary user had to interact with often complex plugins or hire a developer to adapt WordPress to their needs.

New Gutenberg Editor

What’s next

Gutenberg promises to change the experience of a large flowing text and now create independent blocks with context specific to each block thus facilitating the creation of content with customized layout. Now you can create posts and pages using blocks with various types of content, for example, images, videos, content derived from social media, widgets and best of all the end user does not need to use HTML or CSS.

How does it work?

If you are eager to test Gutenberg it is currently available in a plugin so you install the plugin available at the link: https://wordpress.org/plugins/gutenberg/
Once installed Gutenberg will modify your classic editor, to access it simply create a new post / page or edit something that already exists.
Impacts

One of the key changes is in the content editor itself. The changes in the editor will make the creation process more dynamic and practical for the editor, done in blocks.

 

Browsing themes, plugins and community WordPress, see what will change:

1. Impact on the WordPress theme

Currently, many WordPress themes have become very large and full of code. Which is not considered very good for the entire WordPress environment. So with Gutenberg, a WordPress theme will have a style sheet with all the blocks of the project with the flexibility of removing native blocks and adding custom blocks.

2. Impact on WordPress plugins

For this area we will think of an example. Imagine that you own a virtual store with WooCommerce. You have announced a holiday settlement and have some store items that you would like to select and post on your content.

Today, you can add the link to your WooCommerce page to redirect users to the page where they can purchase these products. This becomes a bit restrictive if you are not a developer.

With Gutenberg, you can add a WooCommerce product block in your publication, where you can choose a specific product on offer and users will be able to interact in posting, viewing images, describing and even adding the product to the cart.

3. Impact on the WordPress community

This whole improvement process will positively impact the community. Improved WordPress themes, better plugins and an optimized and simplified workspace.
More practical and with more features and possibilities for the developer, designer and user.

The new editor

Visually, the new editor is much cleaner, there is no TinyMCE toolbar in Gutenberg, and the current content of the post takes up most of the screen. This cleaner view gives a much better preview of final publishing than the standard editor does. All content in the editor window is centered with a multitude of whitespace on each side. The content looks almost identical in the publisher once it is published.

In the right sidebar, there is a tab called Block that lists all possible options for the currently selected block. Options for a paragraph block include Chapter Letters, a font size field where you can type any number (the current editor has only one choice), background color for the paragraph block (which applies the style of the HTML tags P automatically) Font color and block alignment.

When using the default WordPress editor on a small screen, all document settings such as visibility and category selection are inserted below the desktop, requiring a lot of scrolling in some cases.

In the Gutenberg editor, the meta and block settings are initially hidden and can be displayed on top of the desktop by clicking the settings button. After using the new editor for a while, the context of the tools will become clearer to you.

Adding new blocks

To add a new block or to embed content, there is a + icon below all existing blocks. There is also an insert button on the top of the page, the top bar is pasted to the top of the editor, so the insert button is always visible. The mouse hover over the + symbol shows quick insertion options for the paragraph and the image, which are the most commonly used blocks.

The new menu has a tabbed navigation that is divided into Recent, Blocks, and Incorporations pages. There is also a search box in this menu that is always visible. Developer efforts to improve workflow are clearly visible in context-based menus.
● Recent – when you click the + symbol or the insert button, a list of the 8 most used blocks and most recent additions appear first.
● Blocks – List of blocks divided into Four Titles:
○ Common blocks – Title, paragraph, image, etc.
○ Formatting – Table, pre-formatted, code, etc.
○ Layout – tabs, buttons, etc.
○ Widgets – Latest posts, categories, Shortcodes.
● Formatting – You can embed content from a long list of popular sites like Reddit, Youtube, Instagram, and there is a generic Embed button where you simply enter a valid URL and the publisher does the rest. It seems to work as an auto-detection feature.

Conclusion

Gutenberg is an interesting take on writing and editing WordPress, the decision to adopt them early boils down to what type of content you are writing and where most of your work is done. As the focus of the project is rich content, it may be worth checking when you need to incorporate a lot of content or create galleries within postings.

The default editor has its own peculiarities that are removed when the text is contained in a block. For example, when writing headlines with paragraphs on the line directly below, the default editor will incorrectly define where the title ends and the paragraph begins, forcing you to switch to the text-based editor to correct the HTML tag placement. Having the title in one block and the paragraph in another block removes the confusion.

If you are accustomed to using web-based builders, you may also enjoy working with Gutenberg on the default editor.

If you are working primarily from a phone or tablet, then I recommend using the new Gutenberg text editor, or at least following its development, the mentioned issues should be eventually solved by the developers, who devote a lot of time to this project to arrive until its conclusion.

  •  
  •  
  •  
  •  

Related Posts


Josh Giowaya

I'm Passionate about creating well-crafted, visually engaging and highly usable digital experiences. I have 10+ Years in web design & development at advertising and digital agencies, plus a number of years running my own consultancy. I also bring an extensive background in design that has proven invaluable when contributing to the design process and communicating with creative teams. Currently, I'm a WordPress consultant extremely active in the WordPress community. leveraging WordPress, Gutenberg and React to empower your Marketing Team. Atomic design & Modular development specialist. Speaker, Developer & Designer.

Free Marketing Audiobook

Leave a Reply

Be the First to Comment!

Notify of
avatar

Ready to Get Started?

Get a free consultation now