{"id":39141,"date":"2018-06-19T08:40:25","date_gmt":"2018-06-19T13:40:25","guid":{"rendered":"https:\/\/wpengine.com\/?p=39141"},"modified":"2023-03-31T09:21:28","modified_gmt":"2023-03-31T14:21:28","slug":"gutenberg-for-beginners-a-basic-tutorial","status":"publish","type":"post","link":"https:\/\/wpengine.com\/resources\/gutenberg-for-beginners-a-basic-tutorial\/","title":{"rendered":"Gutenberg for Beginners: a Basic Tutorial"},"content":{"rendered":"

If you follow the world of WordPress, you\u2019ve probably heard about <\/span>Gutenberg<\/span><\/a>, the new content editor that\u2019s set to roll out later this year. Here at WP Engine, we\u2019ve written a number of detailed articles about Gutenberg, which you can find below: <\/span><\/p>\n

WORDPRESS GUTENBERG EDITOR<\/span><\/a><\/p>\n

QUESTIONS & CONCERNS FROM MY FIRST IMPRESSION OF THE WORDPRESS GUTENBERG EDITOR<\/span><\/a><\/p>\n

GETTING AHEAD OF GUTENBERG<\/span><\/a><\/p>\n

GUTENBERG: WHAT YOU NEED TO KNOW<\/span><\/a><\/p>\n

WHAT THE FUTURE OF WORDPRESS DEVELOPMENT LOOKS LIKE WITH GUTENBERG<\/span><\/a><\/p>\n

If you don\u2019t have time to digest all that material, this post will break down some of the basics of Gutenberg and get you ready to begin using it before its release. Before you get started, check out this introductory video for a macro view of what the new editor has in store:<\/span><\/p>\n

https:\/\/wpengine.com\/wp-content\/uploads\/2017\/10\/ONEMORETIMEGUTENBERG.mp4<\/a><\/video><\/div>\n

HOW DID WE GET HERE?<\/b><\/h2>\n

There have been few noticeable changes to the WordPress editor over the past 14 years. For those who are familiar with it, the current editor gets the job done, but it\u2019s remained a fairly unchanged, basic HTML user experience for a long time. Many in the WordPress community feel it’s time for the CMS to include a more intuitive editor that allows for the easy creation of rich content.<\/span><\/p>\n

\"The
The current WordPress content editor<\/figcaption><\/figure>\n

Despite this desire, however, the build-up to Gutenberg\u2019s release has been accompanied by a significant amount of concern, namely because it represents a major overhaul to the code and look and feel of the existing editor. There is real unease within the WordPress community about how existing add-ons and plugins will interact with the new, JavaScript-based editing experience. <\/span><\/p>\n

While many of those concerns are founded, there\u2019s still a lot that remains to be seen and done before Gutenberg rolls out and is adopted by WordPress users. To help you navigate some of the uncertainty, here are some things you should know about the new editor: <\/span><\/p>\n

GUTENBERG FACTS<\/b><\/h2>\n

As mentioned above, Gutenberg will become the default editor in WordPress once version 5.0 rolls out, which is expected to happen towards the end of 2018. A dedicated <\/span>team of contributors<\/span><\/a> has been developing Gutenberg for more than a year, and while it\u2019s set to become <\/span>the<\/span><\/i> new WordPress editor, it\u2019s not the only game in town. There are a number of page builder services out there that offer different editing experiences, including <\/span>Beaver Builder<\/span><\/a>, <\/span>Visual Composer<\/span><\/a> and <\/span>The Divi Builder<\/span><\/a>.<\/span><\/p>\n

But those services aren\u2019t backend editing experiences, which is what Gutenberg will provide. In doing so, it will address some of the biggest critics of the WordPress editing experience, who say work done on the backend doesn’t accurately reflect what shows up visually on the front-end. To a certain extent, Gutenberg aims to bridge this gap.<\/span><\/p>\n

One big difference between Gutenberg and the current WordPress editor is the introduction of something called <\/span>content blocks<\/span><\/a>, a new feature that lets users add text, headers, an image or a video clip (among many other elements) with the click of a button\u2014not a line of HTML or a shortcode. Here\u2019s how it works: \u00a0<\/span><\/p>\n

In a new Gutenberg post, you\u2019ll see a small + icon that appears in the text field.<\/span><\/p>\n

Once you click the icon, a menu appears showing all the elements you can add into your new block. These run the gamut from simple things like headings and images to elements that are admittedly more difficult to add using the soon-to-be-outdated editor. <\/span><\/p>\n

Once you select the element you want to add\u2014be it a table, a pull quote, an image or a row of columns\u2014it appears in the block and you can modify it as needed before moving on with your post. It\u2019s really that simple.<\/span><\/p>\n

\"New
Adding an image with the new content block<\/figcaption><\/figure>\n

The idea behind this feature was to enable an intuitive process that allows content creators to stay in the flow as they\u2019re working. With Gutenberg, many of the things you currently have to stop and do manually (essentially things that require HTML or a third-party plugin) are now done with a few mouse clicks. \u00a0<\/span><\/p>\n

\"Gutenberg
The blocks are easy to move around to accommodate your text<\/figcaption><\/figure>\n

This ease of use is taken a step further with Gutenberg’s new slash autocomplete function, which allows users to add block elements with a simple keyboard command. For example, users can add an image into a post as they write by typing \u201c\/image\u201d and hitting Enter.<\/span><\/p>\n

There is also added functionality for embedding content<\/a> from other platforms including YouTube, Facebook, Instagram and Twitter, as well as Reddit, Spotify and Tumblr (among many others). <\/span><\/p>\n

Overall, the biggest differences between Gutenberg and the current editor are visual\u2014Gutenberg looks cleaner and less cluttered than the current editor\u2014and functional\u2014the new content blocks and keyboard shortcuts allow users to stay in the visual editor without much interruption. <\/span><\/p>\n

ADVANTAGES OF GUTENBERG<\/b><\/h2>\n

The advantages of Gutenberg are many\u2014from the addition of content blocks to other easy-to-use features that help enrich a site\u2019s pages, the new editor will enable even the WordPress novice to create great-looking, well-designed content (check out the <\/span>official example page<\/span><\/a>). <\/span><\/p>\n

As mentioned above, those intuitive features also keep distractions to a minimum, so content creators can get into a workflow and stay there. No more stopping to add HTML or tinker with images and video embeds. Gutenberg will let the creative juices flow. <\/span><\/p>\n

Gutenberg also offers more writing space when compared to the current editor, which is especially apparent on smaller screens. This was likely added as a nod to laptop users and to some degree, mobile users. It also adheres to a recurring theme in Gutenberg that puts writing first and attempts to free content creators from as many distractions as possible. <\/span><\/p>\n

This theme is taken a step further with the ability to collapse the right-hand sidebar altogether in \u201cPost Settings\u201d, freeing up even more of your screen for writing and content creation.<\/span><\/p>\n

\"The
The advanced settings bar is another Gutenberg feature that allows users to easily navigate between the visual and text editor, as well as different document settings. When not in use, it is easily collapsible for more screen space.<\/figcaption><\/figure>\n

Finally, when future phases of Gutenberg roll out (dates are TBD), the templates and customization they are expected to provide will be a game changer for businesses and marketing agencies that require consistency across their sites. \u00a0<\/span><\/p>\n

\"Gutenberg
Gutenberg also makes it easy to change styles and move content blocks around<\/figcaption><\/figure>\n

DISADVANTAGES OF GUTENBERG<\/b><\/h2>\n

Like many other WordPress plugins, there is some concern regarding the ways Gutenberg may affect existing pages and posts. While this is indeed an unknown, users can rest assured that the beta testing Gutenberg is currently undergoing is focusing on ways the new editor will interact with existing WordPress assets. <\/span><\/p>\n

For WordPress pros who want to lend a hand (or novices who want to take a peek), the <\/span>Gutenberg Plugin Compatibility Database<\/span> is an excellent repository of all the plugin progress that\u2019s been made so far. A success story that\u2019s worth highlighting here is <\/span>Advanced Custom Fields<\/span><\/a>. This popular plugin adds custom fields to the editor page and it’s already fully compatible with Gutenberg. <\/span><\/p>\n

Another aspect of Gutenberg that will likely be remedied before it officially rolls out is that it doesn\u2019t currently support custom plugin meta boxes. These meta boxes are common for plugins such as <\/span>Yoast SEO<\/span><\/a>, <\/span>CoSchedule<\/span><\/a>, and <\/span>Jetpack<\/span><\/a> and their absence renders these plugins ineffective. That said, given the importance of this feature, it\u2019s unlikely that it won\u2019t be added in due time. <\/span><\/p>\n

GIVE IT A TRY<\/b><\/h2>\n

A great way to check out all of the new features Gutenberg has in store is to jump in and try it out for yourself. Gutenberg widens the possibilities<\/a> for things your can create within WordPress, without having to code extensively.\u00a0<\/span><\/p>\n

Installing Gutenberg<\/span><\/a> is relatively easy, as long as you\u2019re using <\/span>WordPress version 4.8<\/span><\/a> or higher. Because it\u2019s not yet the default editor for WordPress core, those who want to get ahead of the curve can install it just as they would <\/span>any other plugin<\/span><\/a>. One disclaimer: because Gutenberg is still in beta, it should be used in a staging environment to ensure there are no compatibility issues before copying over to production. Check out the <\/span>WP Engine Resource Center<\/span><\/a> for a more detailed tutorial of the install process.<\/span><\/p>\n

Another good way to acclimate yourself with Gutenberg is to do your homework. There are a ton of resources online\u2014some free, some not\u2014which provide excellent information about the new editor. <\/span>This handbook<\/span><\/a>, provided by WordPress.org, is a good place to start, as are the various tutorials <\/span>found here<\/span><\/a>. <\/span><\/p>\n

GET STARTED TODAY<\/b><\/h2>\n

The release of Gutenberg has definitely created some concern about compatibility with existing plugins and themes, but it\u2019s incorporation into the WordPress community has been relatively seamless.\u00a0<\/span><\/p>\n

Make sure and take advantage of the resources listed in this post, and give Gutenberg a try using a staging environment to familiarize yourself with its new capabilities and features.<\/span><\/p>\n

Still have questions about Gutenberg and the ways it will change your WordPress experience? Let us know in the comments section below! <\/i><\/b><\/p>\n","protected":false},"excerpt":{"rendered":"

If you follow the world of WordPress, you\u2019ve probably heard about Gutenberg, the new content editor that\u2019s set to roll out later this year. Here at WP Engine, we\u2019ve written a number of detailed articles about Gutenberg, which you can find below: WORDPRESS GUTENBERG EDITOR QUESTIONS & CONCERNS FROM MY FIRST IMPRESSION OF THE WORDPRESS…<\/span><\/span><\/p>\n","protected":false},"author":200,"featured_media":39171,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[17,1,408],"tags":[1238,1186],"class_list":["post-39141","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to","category-uncategorized","category-wordpress-updates","tag-gutenberg","tag-gutenberg-editor"],"yoast_head":"\nGutenberg for Beginners: A Basic Tutorial I WP Engine DXP<\/title>\n<meta name=\"description\" content=\"This Gutenberg WordPress tutorial provides the basics needed to start using the new content authoring platform before it rolls out as part of WordPress 5.0.\" \/>\n<meta name=\"robots\" content=\"noindex, follow\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Gutenberg for Beginners: A Basic Tutorial I WP Engine DXP\" \/>\n<meta property=\"og:description\" content=\"This Gutenberg WordPress tutorial provides the basics needed to start using the new content authoring platform before it rolls out as part of WordPress 5.0.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpengine.com\/resources\/gutenberg-for-beginners-a-basic-tutorial\/\" \/>\n<meta property=\"og:site_name\" content=\"WP Engine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/wpengine\" \/>\n<meta property=\"article:published_time\" content=\"2018-06-19T13:40:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-03-31T14:21:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wpengine.com\/resources\/wp-content\/uploads\/2018\/06\/shutterstock_538891594-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"627\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Abe Selig\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@wpengine\" \/>\n<meta name=\"twitter:site\" content=\"@wpengine\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Abe Selig\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wpengine.com\/resources\/gutenberg-for-beginners-a-basic-tutorial\/\",\"url\":\"https:\/\/wpengine.com\/resources\/gutenberg-for-beginners-a-basic-tutorial\/\",\"name\":\"Gutenberg for Beginners: A Basic Tutorial I WP Engine DXP\",\"isPartOf\":{\"@id\":\"https:\/\/wpengine.com\/resources\/#website\"},\"datePublished\":\"2018-06-19T13:40:25+00:00\",\"dateModified\":\"2023-03-31T14:21:28+00:00\",\"author\":{\"@id\":\"https:\/\/wpengine.com\/resources\/#\/schema\/person\/b732a884dbf4917dcd15ce2e9fbd3652\"},\"description\":\"This Gutenberg WordPress tutorial provides the basics needed to start using the new content authoring platform before it rolls out as part of WordPress 5.0.\",\"breadcrumb\":{\"@id\":\"https:\/\/wpengine.com\/resources\/gutenberg-for-beginners-a-basic-tutorial\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wpengine.com\/resources\/gutenberg-for-beginners-a-basic-tutorial\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wpengine.com\/resources\/gutenberg-for-beginners-a-basic-tutorial\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/wpengine.com\/resources\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Gutenberg for Beginners: a Basic Tutorial\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wpengine.com\/resources\/#website\",\"url\":\"https:\/\/wpengine.com\/resources\/\",\"name\":\"WP Engine\",\"description\":\"Managed Hosting for WordPress\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wpengine.com\/resources\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/wpengine.com\/resources\/#\/schema\/person\/b732a884dbf4917dcd15ce2e9fbd3652\",\"name\":\"Abe Selig\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wpengine.com\/resources\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6deb04da8be57a16bed1b5ad7722572beaa7ed7292795763c9324d46b0ad9454?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6deb04da8be57a16bed1b5ad7722572beaa7ed7292795763c9324d46b0ad9454?s=96&d=mm&r=g\",\"caption\":\"Abe Selig\"},\"description\":\"Abe Selig is a writer, amateur musician and accomplished inshore fisherman. He began his career as a journalist and now tells stories about technology and the ways it\u2019s helping businesses thrive. He is an Austin, TX native who has lived in New York City and traveled all around the world. You can reach him at abe.selig@wpengine.com.\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Gutenberg for Beginners: A Basic Tutorial I WP Engine DXP","description":"This Gutenberg WordPress tutorial provides the basics needed to start using the new content authoring platform before it rolls out as part of WordPress 5.0.","robots":{"index":"noindex","follow":"follow"},"og_locale":"en_US","og_type":"article","og_title":"Gutenberg for Beginners: A Basic Tutorial I WP Engine DXP","og_description":"This Gutenberg WordPress tutorial provides the basics needed to start using the new content authoring platform before it rolls out as part of WordPress 5.0.","og_url":"https:\/\/wpengine.com\/resources\/gutenberg-for-beginners-a-basic-tutorial\/","og_site_name":"WP Engine","article_publisher":"https:\/\/www.facebook.com\/wpengine","article_published_time":"2018-06-19T13:40:25+00:00","article_modified_time":"2023-03-31T14:21:28+00:00","og_image":[{"width":1200,"height":627,"url":"https:\/\/wpengine.com\/resources\/wp-content\/uploads\/2018\/06\/shutterstock_538891594-1.jpg","type":"image\/jpeg"}],"author":"Abe Selig","twitter_card":"summary_large_image","twitter_creator":"@wpengine","twitter_site":"@wpengine","twitter_misc":{"Written by":"Abe Selig","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/wpengine.com\/resources\/gutenberg-for-beginners-a-basic-tutorial\/","url":"https:\/\/wpengine.com\/resources\/gutenberg-for-beginners-a-basic-tutorial\/","name":"Gutenberg for Beginners: A Basic Tutorial I WP Engine DXP","isPartOf":{"@id":"https:\/\/wpengine.com\/resources\/#website"},"datePublished":"2018-06-19T13:40:25+00:00","dateModified":"2023-03-31T14:21:28+00:00","author":{"@id":"https:\/\/wpengine.com\/resources\/#\/schema\/person\/b732a884dbf4917dcd15ce2e9fbd3652"},"description":"This Gutenberg WordPress tutorial provides the basics needed to start using the new content authoring platform before it rolls out as part of WordPress 5.0.","breadcrumb":{"@id":"https:\/\/wpengine.com\/resources\/gutenberg-for-beginners-a-basic-tutorial\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpengine.com\/resources\/gutenberg-for-beginners-a-basic-tutorial\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/wpengine.com\/resources\/gutenberg-for-beginners-a-basic-tutorial\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wpengine.com\/resources\/"},{"@type":"ListItem","position":2,"name":"Gutenberg for Beginners: a Basic Tutorial"}]},{"@type":"WebSite","@id":"https:\/\/wpengine.com\/resources\/#website","url":"https:\/\/wpengine.com\/resources\/","name":"WP Engine","description":"Managed Hosting for WordPress","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wpengine.com\/resources\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/wpengine.com\/resources\/#\/schema\/person\/b732a884dbf4917dcd15ce2e9fbd3652","name":"Abe Selig","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/resources\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6deb04da8be57a16bed1b5ad7722572beaa7ed7292795763c9324d46b0ad9454?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6deb04da8be57a16bed1b5ad7722572beaa7ed7292795763c9324d46b0ad9454?s=96&d=mm&r=g","caption":"Abe Selig"},"description":"Abe Selig is a writer, amateur musician and accomplished inshore fisherman. He began his career as a journalist and now tells stories about technology and the ways it\u2019s helping businesses thrive. He is an Austin, TX native who has lived in New York City and traveled all around the world. You can reach him at abe.selig@wpengine.com."}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/wpengine.com\/resources\/wp-json\/wp\/v2\/posts\/39141","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpengine.com\/resources\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpengine.com\/resources\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpengine.com\/resources\/wp-json\/wp\/v2\/users\/200"}],"replies":[{"embeddable":true,"href":"https:\/\/wpengine.com\/resources\/wp-json\/wp\/v2\/comments?post=39141"}],"version-history":[{"count":0,"href":"https:\/\/wpengine.com\/resources\/wp-json\/wp\/v2\/posts\/39141\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpengine.com\/resources\/wp-json\/wp\/v2\/media\/39171"}],"wp:attachment":[{"href":"https:\/\/wpengine.com\/resources\/wp-json\/wp\/v2\/media?parent=39141"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpengine.com\/resources\/wp-json\/wp\/v2\/categories?post=39141"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpengine.com\/resources\/wp-json\/wp\/v2\/tags?post=39141"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}