WordPress Gutenberg Tutorial

1. WordPress Gutenberg Tutorial: Build Your Next Website with this Revolutionary Editor It’s been 15 years since WordPress started back in 2003 and so much has improved since they rolled out their first UI (user interface) or as we call it now –“website editor” – which was the WordPress 0.71. Website editors back then had very simple designs and coding patterns than they do today; however, we give thanks to the pool of WordPress website designers who are also the best of the best for their creativeness, which made web design very interesting! As we enter into 2018 WordPress has once again published a new website editor that they dubbed it “The Gutenberg.” This website editor was named after Johannes Gensfleisch zur Laden zum Gutenberg, who was a German blacksmith, goldsmith, printer, and publisher who also introduced printing to Europe with the printing press. Depending on how often you use WordPress to build websites from scratch or just want to upgrade yours from one platform to another, you may or may not already be familiar with the upcoming WordPress Gutenberg editor. But you can learn the bulk of its information and how to use it via the WordPress Gutenberg tutorial. What we’re attempting to do here is to help you understand what Gutenberg does and how it can vastly improve your website. The WordPress Gutenberg editor ensures that you can continue to churn out awesome content when Gutenberg goes public. It’s alright whether you are familiar with this latest WordPress website editor or not, because you will learn all the basics about it in this blog post. What is Gutenberg? Gutenberg, the long and the short of it, is the next generation website editor which will be replacing the previous (albeit cool) website editor, the TinyMCE. It is the current WYSIWYG text editor where you write your posts and pages. Despite the hype of the website editor giving websites an aesthetic update, it will actually do a lot more than that, because it is going to

2. radically change the editing experience of web designers and enthusiasts alike! It will do this by moving from single edit field to a block-based approach when creating content. Although primarily designed to be a WYSIWYG text editor for content creation, the ultimate goal that WordPress has for Gutenberg is to exceed what its predecessors have done before, which is to gain the ability to edit page templates as well and ultimately, transform into an all-in-one complete website customization app. This means that sometime in the future you’ll be using only one website editor to do everything – from building your website from scratch, to landing pages and more! Release Date for the Gutenberg? Gutenberg is expected to be released this year, 2018, and to become officially a part of the WordPress core which will come out together with the WordPress 5.0. Unfortunately, WordPress hasn’t revealed the exact date of the release, so it’s up for speculation; however, the Gutenberg editor is already causing a major hype in the mainstream media. It’s actually a good idea for the WordPress core team to keep things vague with the launch of the Gutenberg as it will give them enough time to fix everything to perfection. Of course, we’re expecting bugs and other errors, but I’m sure that they’ll update it very quickly. You may even have to download the WordPress Gutenberg tutorial pdf a couple of times when this happens. How the WordPress Gutenberg Editor Works Now that we’ve gotten the basic introductions out of the way, we can then proceed to tackle the intricacies of how the WordPress Gutenberg editor works. The developers wanted the

3. Gutenberg to handle complex tasks while making it very user-friendly to you, so that website editing will feel like a breeze even for beginners. It’s actually a very interesting idea to discuss. Block-Based Editing 101 Basically, the Gutenberg differs from the current WordPress TinyMCE editor by replacing the single edit field with a lot of individual “blocks.” From what we’ve learned, these blocks will allow you to build more complex designs compared with the limitations from the previous website editor. The WordPress Gutenberg editor therefore is a huge step towards simplification in web design and general web editing. What is a Block? Whether in layman’s terms or in technical-specific, a block is a general term used for almost anything. A block could be used for:  Regular text  Images  Video embeds  Buttons  Widgets (yes, those same widgets you use in your sidebar)  Tables  Etc. And just like the TinyMCE editor where you can download and install plugins the Gutenberg editor also has room for open source plugins that will be added as succeeding blocks on the dashboard. The WordPress plugins Gutenberg will give you more flexibility as you build your site onto a more comprehensive level. Each block is independent from the other blocks, therefore you can customize them separately and the other blocks or sections on your website won’t be affected. We did an experiment on this in order to sample how easy it is to make changes on a website and we were impressed with how we changed one block’s texts, images, background etc.

4. Based on that first hand experience, we can confidently say that you will absolutely love the WordPress Gutenberg editor! Can Gutenberg be Considered as a Page Builder? Unfortunately, Gutenberg in its current form cannot yet be considered as a page builder. Remember when we told you that it WILL become an all-in-one website editor? Well, upon its release it will be in its basic form and it will need to evolve further down the road as the core developers will encounter new ideas from time to time. I think that when it comes out any time soon this year even the WordPress Gutenberg tutorial will emphasize on it not being an immediate replacement for page builder apps. Just on a surface level, Gutenberg already lacks columns and the drag and drop feature, two important features which all page builder have currently. However, once it has reached its maturity stage, then it should be a better replacement for other page builders give or take 5 years at least. The developers also said that they intend to make Gutenberg as a single unified method for creating more complex post layouts in WordPress as oppose to the standard content that page builders does. At the moment though, I think you will appreciate page builders better than the Gutenberg as it does a better job at building complex pages like a landing page. To highlight the extent of Gutenberg’s usefulness, we compared 3 of the top page builders for WordPress (the Elementor, Divi Builder and the Beaver Builder) and it showed that these things have features such as:  Drag and drop editing  Genuine multi-column support that allows you to create any number of columns where you can drag elements into  Plenty of pre-designed templates to choose from  Advanced styling options, with spots for custom margins/padding and lots more  Fully responsive design For which the Gutenberg does not have yet while in its infancy. Perhaps in a later time it will have far superior features than these page builders have right now. One of the things that we’re looking forward to about the Gutenberg website editor is the multi-column support, which is very interesting if they’ll develop it like they said they would. Always refer to the WordPress Gutenberg tutorial for complete and verified information on how to use it and new updates.

5. How to Install Gutenberg First make sure that you have the WordPress version 4.8 before downloading and installing the Gutenberg website editor. You can find the WordPress plugins Gutenberg by doing a Google search – this should lead you directly to the WordPress repository – or you can download it from your WordPress dashboard under “Add New” plugins tab. Keep in mind to install this plugin on a test site to avoid any errors. Pros of WordPress Gutenberg Editor  Plays a role as a central hub where core developers, theme developers, plugins, and the website editor could integrate and work as one.  Learn it once and use it everywhere.  Publishers will likely favor it better than the TinyMCE and other website editors that have come before.  Gutenberg provides a less distracting experience with more screen space.  Blocks help you customize your site better and the new alignment options allow for full- width template sites to have their users view larger resolution screens. It’s also very responsive.  Works well on mobile devices.  Theme and plugin developers will have the ability to create their own custom blocks.  Designed for people who does not have any web design experience and beginners will find it very easy to use. One more benefit that the Gutenberg has is the inclusion of an API for handling pasted content. This means that it will make it easier for the WordPress Gutenberg editor to convert Word, Markdown, Google Docs to native WordPress blocks. At the moment it’s a hit or miss scenario when you copy items from Google Docs to WordPress, but once the Gutenberg is fully functional upon its release, then it will all be seamless. Cons of WordPress Gutenberg Editor  Unable to support Markdown in its current form.

6.  Although it has been designed to make it easier for beginners to learn, some may still have a hard time learning it.  Gutenberg website editor gained the ability to support meta boxes as of October 2017; however, it still needs further development. But as a bonus SEO Yoast is also fully supported.  The developers did not enable the editor to support responsive columns yet. This may prompt users to install shortcode/visual builder plugins to compensate. The core team definitely has to include this as soon as possible or they will get tons of complain for something that’s almost trivial.  Another issue with the Gutenberg is that there have been hundreds of thousands of themes and plugins that were created for the TinyMCE editor. Once the Gutenberg is released, then all those themes and plugins will most likely encounter backwards compatibility problems and the developers will have to update them in order to be compatible with the WordPress plugins Gutenberg.  Accessibility issues. Already the outcries from various WordPress developers have been noticed by the media and other independent news bloggers. One of them, Ahmad Awais, has released a boilerplate for Gutenberg with the aim to inform developers so they could kick-start their app development that will be compatible with Gutenberg. In case you’re also wondering whether Gutenberg is going to be optional or not, you may want to get comfortable with it as it will become the official editor for WordPress core. There’s no “off” button for it; however, you can download a free plugin that’s called Classic Editor which will be similar to the TinyMCE and help you restore old posts. But I don’t advise on using it, instead I recommend that you embrace Gutenberg as is. The best thing about WordPress is that they don’t keep their customers in the dark about new developments they’ve made with their apps, themes and plugins. You can bet that there will be an immediate online resource for WordPress Gutenberg tutorial everywhere and learning how to use this new website editor will be fun and exciting. In time users will not only love it, but will also be expert web page builders and web designers. Thanks to the core development team of WordPress building a website has never been this easy!

7. You may want to start exploring the WordPress Gutenberg version 2.3.0 now and see what you can do with your test website. If everything goes well, then you can even publish your new site immediately! You will absolutely love it as it is easier to build and customize your website than with the previous TinyMCE editor. In 1-2 years from now the WordPress Gutenberg website editor will be completely different and will be able to support so many other apps, themes and plugins and it will be far superior than all the other editors that have come before it! Author Roshan Bajaj is the owner at WPEnlight, one of the most comprehensive WordPress resource site which provides useful articles on WordPress Themes, plugins, tutorials, news and reviews. He is a lazy person who loves sleeping but his passion, love, and persistence for his Team, Mentors, WordPress and Digital Marketing, keeps him at work and he finds peace in it. His hobbies include finding the truth and being happy accepting it.