{"id":44762,"date":"2018-05-23T23:01:54","date_gmt":"2018-05-23T15:01:54","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=44762"},"modified":"2024-04-29T23:56:00","modified_gmt":"2024-04-29T15:56:00","slug":"all-you-need-to-know-about-wordpress-gutenberg-editor","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/all-you-need-to-know-about-wordpress-gutenberg-editor\/","title":{"rendered":"Discover Gutenberg: WordPress&#8217; Latest Editor Guide"},"content":{"rendered":"<p><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/WordPress\/gutenberg\">Gutenberg<\/a> is a new editor for WordPress that will totally <strong>replace the current <a href=\"https:\/\/www.hongkiat.com\/blog\/wordpress-tinymce-editor\/\">TinyMCE-powered editor<\/a><\/strong>. It is an ambitious project that will arguably change WordPress in many ways and would affect both regular end-users and developers, specifically, those who depend on the editor screen for working on WordPress. Here is how it looks.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/all-you-need-to-know-about-wordpress-gutenberg-editor\/gutenberg-interface.jpg\" alt=\"Gutenberg Editor with sidebar on the right opened and a block option is displayed\" width=\"750\" height=\"408\"><\/figure>\n<div class=\"sue-icon-text su-image-caption\" data-url=\"\" data-target=\"self\" style=\"min-height:34px;padding-left:36px;color:#333333\">\n<div class=\"sue-icon-text-icon\" style=\"color:#333333;font-size:24px;width:24px;height:24px\"><i class=\"sui sui-photo\" style=\"font-size:24px;color:#333333\"><\/i><\/div>\n<div class=\"sue-icon-text-content su-u-trim\" style=\"color:#333333\">It\u2019s obvious that it\u2019s inspired by the Medium editor UI.<\/div>\n<div style=\"clear:both;height:0\"><\/div>\n<\/div>\n<p>Gutenberg also introduces a new paradigm in WordPress called \u201cBlock\u201d.<\/p>\n<p>\u201cBlock\u201d is the abstract term used to describe <strong>units of markup<\/strong> that are composed form the content or layout of a webpage. The idea combines concepts of what in WordPress today we achieve with <strong>shortcodes, custom HTML, and embed discovery into a single consistent API<\/strong> and user experience.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/customize-wordpress-editor-styles\/\" class=\"ref-block__link\" title=\"Read More: How to Customize WordPress Editor Styles for Better Visual Consistency\" rel=\"bookmark\"><span class=\"screen-reader-text\">How to Customize WordPress Editor Styles for Better Visual Consistency<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/customize-wordpress-editor-styles.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-17777 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/customize-wordpress-editor-styles.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">How to Customize WordPress Editor Styles for Better Visual Consistency<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tWordPress is updated regularly, about 2 or 3 times a year. With each new release, it introduces either...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>Setting Up the Project<\/h2>\n<p>Knowing the fact that Gutenberg is built on top of React, some developers are worried that the <strong>barrier is too high for entry-level developers for developing Gutenberg<\/strong>.<\/p>\n<p>Setting up React.js could be quite time-consuming and confusing if you\u2019ve just getting started with it. You\u2019ll need at least, JSX transformer, Babel, depending on your code you might need some Babel plugins, and a Bundler like <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/webpack.js.org\/\">Webpack<\/a>, <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/rollupjs.org\/guide\/en\">Rollup<\/a>, or <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/parceljs.org\/\">Parcel<\/a>.<\/p>\n<p>Fortunately, <strong>some people within WordPress community stepped-up<\/strong> and are trying to make developing Gutenberg as easy as possible for everyone to follow. Today, we have a tool that will generate a Gutenberg boilerplate so <strong>we can start writing code right away<\/strong> instead of befuddling with the tools and the configurations.<\/p>\n<h3>Create Guten Block<\/h3>\n<p>The <code><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/ahmadawais\/create-guten-block\">create-guten-block<\/a><\/code> is an initiate project by Ahmad Awais. It\u2019s a <strong>zero-configuration tool kit<\/strong> (<code>#0CJS<\/code>) that will allow you to develop Gutenberg block with some modern stacks preset including React, Webpack, ESNext, Babel, ESLint, and Sass. Follow the instruction <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/ahmadawais\/create-guten-block#getting-started\">to get started with Create Guten Block<\/a>.<\/p>\n<h3>Using ES5 (ECMAScript 5)<\/h3>\n<p>Using all these tools to create a simple \u201chello-world\u201d block might seem just too much. If you like to keep your stacks lean, you can actually develop a Gutenberg block using a plain good ol\u2019 ECMAScript 5 that you might already have familiarity with. If you have <strong>WP-CLI 1.5.0 installed on your computer<\/strong>, you can simply run\u2026<\/p>\n<pre>\r\n wp scaffold block &lt;slug&gt; [--title=&lt;title&gt;] [--dashicon=&lt;dashicon&gt;] [--category=&lt;category&gt;] [--theme] [--plugin=&lt;plugin&gt;] [--force]<\/pre>\n<p>\u2026to <strong>generate the Gutenberg block boilerplate to your plugin or theme<\/strong>. This approach is more sensible, particularly, for existing plugins and themes that you\u2019ve developed before the Gutenberg era.<\/p>\n<p>Instead of creating a new plugin to accommodate the Gutenberg blocks, you might want to integrate the blocks to your plugins or the themes. And to make this tutorial easy to follow for everyone, <strong>we\u2019ll be using ECMAScript 5 with WP-CLI<\/strong>.<\/p>\n<h3>Registering a New Block<\/h3>\n<p>Gutenberg is currently developed as a plugin and will be merged to WordPress 5.0 whenever the team feels it\u2019s ready. So, for the time being, you will need to install it from the <strong>Plugins page in <code>wp-admin<\/code><\/strong>. Once you have installed and activated it, run the following command in the Terminal or the Command Prompt if you\u2019re on a Windows machine.<\/p>\n<pre>\r\n wp scaffold block series --title=\"HTML5 Series\" --theme<\/pre>\n<p>This command will generate a Block to the currently active theme. Our Block will consists of the following files:<\/p>\n<pre>\r\n .\r\n --- series\r\n --- block.js\r\n --- editor.css\r\n --- style.css\r\n --- series.php\r\n <\/pre>\n<p>Let\u2019s load the main file of our blocks in the <code>functions.php<\/code> of our theme:<\/p>\n<pre>\r\nif (function_exists('register_block_type')) {\r\n    require get_template_directory() . '\/blocks\/series.php';\r\n}\r\n <\/pre>\n<p>Notice that we enclose the file loading with a conditional. This ensures <strong>compatibility with previous WordPress version that our block is only loaded when Gutenberg is present<\/strong>. Our Block should now be available within the Gutenberg interface.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/all-you-need-to-know-about-wordpress-gutenberg-editor\/new-block-in-gutenberg.jpg\" width=\"750\" height=\"430\"><\/figure>\n<p>This how it looks when we insert the block.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/all-you-need-to-know-about-wordpress-gutenberg-editor\/block-appearance-in-gutenberg.jpg\" width=\"750\" height=\"350\"><\/figure>\n<h2>Gutenberg APIs<\/h2>\n<p>Gutenberg introduces two sets of APIs to register a new Block. If we look at the <code>series.php<\/code>, we will find the following code that registers our new Block. It also <strong>loads the stylesheet and JavaScripts on the front-end and the editor<\/strong>.<\/p>\n<pre>register_block_type( 'twentyseventeen\/series', array(\r\n 'editor_script' =&gt; 'series-block-editor',\r\n 'editor_style' =&gt; 'series-block-editor',\r\n 'style' =&gt; 'series-block',\r\n ) );<\/pre>\n<p>As we can see above, our Block is named <code>twentyseventeen\/series<\/code>, the Block name must be unique and <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/en.wikipedia.org\/wiki\/Namespace\">namespaced<\/a> to avoid collision with the other Blocks brought by the other plugins.<\/p>\n<p>Furthermore, <strong>Gutenberg provides a set of new JavaScript APIs to interact with the \u201cBlock\u201d interface<\/strong> in the editor. Since the API is quite abundant, we\u2019ll be focusing on some specifics that I think you should know to get a simple yet functioning Gutenberg Block.<\/p>\n<h3><code>wp.blocks.registerBlockType<\/code><\/h3>\n<p>First, we will be looking into <code>wp.blocks.registerBlockType<\/code>. This function is used to <strong>register a new \u201cBlock\u201d to the Gutenberg editor<\/strong>. It requires two arguments. The first argument is the Block name which should follow name registered in the <code>register_block_type<\/code> function in the PHP side. The second argument is an <strong>Object defining the Block properties<\/strong> like title, category, and a couple of functions to render the Block interface.<\/p>\n<pre>\r\nvar registerBlockType = wp.blocks.registerBlockType;\r\n\r\nregisterBlockType('twentyseventeen\/series', {\r\n    title: __('HTML5 Series'),\r\n    category: 'widgets',\r\n    keywords: ['html'],\r\n    edit: function(props) {},\r\n    save: function(props) {}\r\n});\r\n\r\n <\/pre>\n<h3><code>wp.element.createElement<\/code><\/h3>\n<p>This function allows you to create the element within the \u201cBlock\u201d in the post editor. The <code>wp.element.createElement<\/code> function is basically an abstraction of the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/reactjs.org\/docs\/react-api.html#createelement\">React <code>createElement()<\/code> function<\/a> thus it accepts the same set of arguments. The first argument takes the type of the element for example a paragraph, a <code>span<\/code>, or a <code>div<\/code> as shown below:<\/p>\n<pre>wp.element.createElement('div');<\/pre>\n<p>We can <strong>alias the function into a variable<\/strong> so it\u2019s shorter to write. For example:<\/p>\n<pre>\r\n var el = wp.element.createElement;\r\n el('div');<\/pre>\n<p>If you <strong>prefer using the new ES6 syntax<\/strong>, you can also do it this way:<\/p>\n<pre>\r\n const { createElement: el } = wp.element;\r\n el('div');<\/pre>\n<p>We can also <strong>add the element attributes<\/strong> such as the <code>class<\/code> name or <code>id<\/code> on the second parameter as follows:<\/p>\n<pre>\r\n var el = wp.element.createElement;\r\n el('div', {\r\n 'class': 'series-html5',\r\n 'id': 'series-html-post-id-001'\r\n });<\/pre>\n<p>The <code>div<\/code> that we created would not make sense without the content. We can <strong>add the content on the argument of the third parameter<\/strong>:<\/p>\n<pre>\r\nvar el = wp.element.createElement;\r\n\r\nel('p', {\r\n    'class': 'series-html5',\r\n    'id': 'series-html-post-id-001'\r\n}, 'This article is part of our \"HTML5\/CSS3 Tutorials series\" - dedicated to help make you a better designer and\/or developer. Click here to see more articles from the same series');\r\n<\/pre>\n<h3><code>wp.components<\/code><\/h3>\n<p>The <code>wp.components<\/code> contain a collection of, as the name implies, the Gutenberg components. These components technically are <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/reactjs.org\/docs\/components-and-props.html\">React custom components<\/a> which include the Button, Popover, Spinner, Tooltip, and a bunch of others. We can <strong>reuse these components into our own Block<\/strong>. In the following example, we add a button component.<\/p>\n<pre>\r\nvar Button = wp.components.Button;\r\n\r\nel(Button, {\r\n    'class': 'download-button'\r\n}, 'Download');\r\n<\/pre>\n<h3>Attributes<\/h3>\n<p>The Attributes is the way to store the data in our Block, this data could be like the content, the colors, the alignments, the URL, etc. We can get the attributes from the Properties passed on the <code>edit()<\/code> function, as follows:<\/p>\n<pre>\r\nedit: function(props) {\r\n    var content = props.attributes.seriesContent;\r\n\r\n    return el('div', {\r\n        'class': 'series-html5',\r\n        'id': 'series-html-post-id-001'\r\n    }, content);\r\n}\r\n<\/pre>\n<p>To update the Attributes, we use the <code>setAttributes()<\/code> function. Typically we would change the content on certain action such as when a button is clicked, an input is filled, an option is selected, etc. In the following example, we use it to add a <strong>fallback<\/strong> content of our Block in case something unexpected happened to our <code>seriesContent<\/code> Attribute.<\/p>\n<pre>\r\nedit: function(props) {\r\n    if (typeof props.attributes.seriesContent === 'undefined' || !props.attributes.seriesContent) {\r\n        props.setAttribute({\r\n            seriesContent: 'Hello World! Here is the fallback content.'\r\n        });\r\n    }\r\n\r\n    var content = props.attributes.seriesContent;\r\n\r\n    return [\r\n        el('div', {\r\n            'class': 'series-html5',\r\n            'id': 'series-html-post-id-001'\r\n        }, content),\r\n    ];\r\n}\r\n\r\n <\/pre>\n<h3>Saving the Block<\/h3>\n<p>The <code>save()<\/code> function works similarly to the <code>edit()<\/code>, except it defines the content of our Block to save to the post database. Saving the Block content is quite straightforward, as we can see below:<\/p>\n<pre>\r\nsave: function(props) {\r\n    if (!props || !props.attributes.seriesContent) {\r\n        return;\r\n    }\r\n\r\n    var content = props.attributes.seriesContent;\r\n\r\n    return [\r\n        el('div', {\r\n            'class': 'series-html5',\r\n            'id': 'series-html-post-id-001'\r\n        }, content),\r\n    ];\r\n}\r\n\r\n <\/pre>\n<h2>What\u2019s Next?<\/h2>\n<p>Gutenberg will change WordPress ecosystem for the better (or possibly the worse). It enables developers to <strong>adopt a new way of developing WordPress plugins and themes<\/strong>. Gutenberg is just a start. Soon the \u201cBlock\u201d paradigm will be expanded to other areas of WordPress such as the Settings APIs and the Widgets.<\/p>\n<p><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.youtube.com\/watch?v=KrZx4IY1IgU\">Learn JavaScript Deeply<\/a>; it\u2019s the only way to get into Gutenberg and stay relevant to the future in WordPress industry. If you\u2019re already familiar with the JavaScript basics, the quirks, the functions, the tools, the goods and the bads, I\u2019m really sure you will get up to speed with Gutenberg.<\/p>\n<p>As mentioned, Gutenberg exposes an abundance of APIs, enough to do almost anything to your Block. You can choose whether to <strong>code your Block with a plain old JavaScript, JavaScript with ES6 syntax, React, or even Vue<\/strong>.<\/p>\n<h3>Ideas and Inspirations<\/h3>\n<p>I\u2019ve created a very (very) simple Gutenberg Block that you can find in the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/hongkiat\/wordpress-gutenberg-block\"> repository of our Github account<\/a>. Furthermore, I\u2019ve also put together a number of repositories from where you can drive inspiration on building a more complex Block.<\/p>\n<ul>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/imath\/gutenblocks\">Gutenblocks<\/a> \u2013 A collection of Blocks by Mathieu Viet written in JavaScript with ES5 Syntax<\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/Automattic\/jetpack\/labels\/Gutenberg\">Jetpack Gutenblocks Project<\/a> \u2013 a collection of Blocks bundled in Jetpack<\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/gitlab.com\/caldera-labs\/gutenberg-examples\">A List of Examples of Gutenberg Implementation<\/a> including with Vue.js<\/li>\n<\/ul>\n<h2>Further Reference<\/h2>\n<ul>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/WordPress\/gutenberg\">Gutenberg Official Repository<\/a><\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/wordpress.org\/gutenberg\/handbook\/\">Gutenberg Handbook<\/a><\/li>\n<\/ul>\n<p><strong>Note:<\/strong> This post was first published on the May 23, 2018.<\/p>","protected":false},"excerpt":{"rendered":"<p>Gutenberg, an ambitious project that will arguably change WordPress in many ways and would affect both regular end-users and developers.<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[49],"tags":[4663,2604],"topic":[],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Discover Gutenberg: WordPress&#039; Latest Editor Guide - Hongkiat<\/title>\n<meta name=\"description\" content=\"Gutenberg, an ambitious project that will arguably change WordPress in many ways and would affect both regular end-users and developers.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/all-you-need-to-know-about-wordpress-gutenberg-editor\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Discover Gutenberg: WordPress&#039; Latest Editor Guide\" \/>\n<meta property=\"og:description\" content=\"Gutenberg, an ambitious project that will arguably change WordPress in many ways and would affect both regular end-users and developers.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/all-you-need-to-know-about-wordpress-gutenberg-editor\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2018-05-23T15:01:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-29T15:56:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/all-you-need-to-know-about-wordpress-gutenberg-editor\/gutenberg-interface.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\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\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/all-you-need-to-know-about-wordpress-gutenberg-editor\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/all-you-need-to-know-about-wordpress-gutenberg-editor\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Discover Gutenberg: WordPress&#8217; Latest Editor Guide\",\"datePublished\":\"2018-05-23T15:01:54+00:00\",\"dateModified\":\"2024-04-29T15:56:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/all-you-need-to-know-about-wordpress-gutenberg-editor\\\/\"},\"wordCount\":1319,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/all-you-need-to-know-about-wordpress-gutenberg-editor\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/all-you-need-to-know-about-wordpress-gutenberg-editor\\\/gutenberg-interface.jpg\",\"keywords\":[\"ad-divi\",\"wordpress editors\"],\"articleSection\":[\"WordPress\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/all-you-need-to-know-about-wordpress-gutenberg-editor\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/all-you-need-to-know-about-wordpress-gutenberg-editor\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/all-you-need-to-know-about-wordpress-gutenberg-editor\\\/\",\"name\":\"Discover Gutenberg: WordPress' Latest Editor Guide - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/all-you-need-to-know-about-wordpress-gutenberg-editor\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/all-you-need-to-know-about-wordpress-gutenberg-editor\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/all-you-need-to-know-about-wordpress-gutenberg-editor\\\/gutenberg-interface.jpg\",\"datePublished\":\"2018-05-23T15:01:54+00:00\",\"dateModified\":\"2024-04-29T15:56:00+00:00\",\"description\":\"Gutenberg, an ambitious project that will arguably change WordPress in many ways and would affect both regular end-users and developers.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/all-you-need-to-know-about-wordpress-gutenberg-editor\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/all-you-need-to-know-about-wordpress-gutenberg-editor\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/all-you-need-to-know-about-wordpress-gutenberg-editor\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/all-you-need-to-know-about-wordpress-gutenberg-editor\\\/gutenberg-interface.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/all-you-need-to-know-about-wordpress-gutenberg-editor\\\/gutenberg-interface.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/all-you-need-to-know-about-wordpress-gutenberg-editor\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Discover Gutenberg: WordPress&#8217; Latest Editor Guide\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Discover Gutenberg: WordPress' Latest Editor Guide - Hongkiat","description":"Gutenberg, an ambitious project that will arguably change WordPress in many ways and would affect both regular end-users and developers.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/all-you-need-to-know-about-wordpress-gutenberg-editor\/","og_locale":"en_US","og_type":"article","og_title":"Discover Gutenberg: WordPress' Latest Editor Guide","og_description":"Gutenberg, an ambitious project that will arguably change WordPress in many ways and would affect both regular end-users and developers.","og_url":"https:\/\/www.hongkiat.com\/blog\/all-you-need-to-know-about-wordpress-gutenberg-editor\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2018-05-23T15:01:54+00:00","article_modified_time":"2024-04-29T15:56:00+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/all-you-need-to-know-about-wordpress-gutenberg-editor\/gutenberg-interface.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/all-you-need-to-know-about-wordpress-gutenberg-editor\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/all-you-need-to-know-about-wordpress-gutenberg-editor\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Discover Gutenberg: WordPress&#8217; Latest Editor Guide","datePublished":"2018-05-23T15:01:54+00:00","dateModified":"2024-04-29T15:56:00+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/all-you-need-to-know-about-wordpress-gutenberg-editor\/"},"wordCount":1319,"commentCount":0,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/all-you-need-to-know-about-wordpress-gutenberg-editor\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/all-you-need-to-know-about-wordpress-gutenberg-editor\/gutenberg-interface.jpg","keywords":["ad-divi","wordpress editors"],"articleSection":["WordPress"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/all-you-need-to-know-about-wordpress-gutenberg-editor\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/all-you-need-to-know-about-wordpress-gutenberg-editor\/","url":"https:\/\/www.hongkiat.com\/blog\/all-you-need-to-know-about-wordpress-gutenberg-editor\/","name":"Discover Gutenberg: WordPress' Latest Editor Guide - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/all-you-need-to-know-about-wordpress-gutenberg-editor\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/all-you-need-to-know-about-wordpress-gutenberg-editor\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/all-you-need-to-know-about-wordpress-gutenberg-editor\/gutenberg-interface.jpg","datePublished":"2018-05-23T15:01:54+00:00","dateModified":"2024-04-29T15:56:00+00:00","description":"Gutenberg, an ambitious project that will arguably change WordPress in many ways and would affect both regular end-users and developers.","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/all-you-need-to-know-about-wordpress-gutenberg-editor\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/all-you-need-to-know-about-wordpress-gutenberg-editor\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/all-you-need-to-know-about-wordpress-gutenberg-editor\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/all-you-need-to-know-about-wordpress-gutenberg-editor\/gutenberg-interface.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/all-you-need-to-know-about-wordpress-gutenberg-editor\/gutenberg-interface.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/all-you-need-to-know-about-wordpress-gutenberg-editor\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Discover Gutenberg: WordPress&#8217; Latest Editor Guide"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-bDY","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/44762","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=44762"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/44762\/revisions"}],"predecessor-version":[{"id":71781,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/44762\/revisions\/71781"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=44762"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=44762"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=44762"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=44762"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}