<p><img decoding="async" loading="lazy" class="aligncenter wp-image-2609 size-large" src="http://live-arcctrl.pantheonsite.io/wp-content/uploads/2018/04/How-Gutenberg-will-affect-your-business-1024x576.jpg" alt="Gutenberg WordPress Editor REST API" width="1024" height="576" srcset="https://roysivan.com/wp-content/uploads/2018/04/How-Gutenberg-will-affect-your-business-1024x576.jpg 1024w, https://roysivan.com/wp-content/uploads/2018/04/How-Gutenberg-will-affect-your-business-300x169.jpg 300w, https://roysivan.com/wp-content/uploads/2018/04/How-Gutenberg-will-affect-your-business-768x432.jpg 768w, https://roysivan.com/wp-content/uploads/2018/04/How-Gutenberg-will-affect-your-business.jpg 1280w" sizes="(max-width: 1024px) 100vw, 1024px" /></p>
<p>Gutenberg, or the new WordPress editor is coming soon. Everyone is prospecting it will come later this year, 2018. There are many reasons to be excited.</p>
<p><iframe loading="lazy" width="500" height="281" src="https://www.youtube.com/embed/E6qmCnC1QJQ?feature=oembed" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></p>
<h2>Gutenberg introduces a New JavaScript Framework</h2>
<p>While WordPress has always relied somewhat on Backbone as a JavaScript framework for certain parts of the admin (mainly the media uploader), Backbone is an old framework that not many adopt for new projects any longer. With <strong>Gutenberg</strong> and this new editor, WordPress is getting <strong>React</strong> which is a state of the art, new-age JavaScript framework that many larger companies are using to build our their web and even native apps.</p>
<p>This is great, WordPress is moving forward, however this is just to build out the actual editor. So building the new <strong>blocks</strong> is great, you get to use the latest in technology like React, webpack, etc to build out your blocks and thus creating a customized UI within the new editor to meet the needs for your team that uses WordPress.</p>
<h2>A New Way to Write Content</h2>
<p>For users, bloggers, editorial teams, etc. Gutenberg is a new way to think about how to write content. Instead of a wall of text, content will be built using &#8220;blocks&#8221;. Like Legos, each block will be unique whether it is a different type of block, or just different data. I&#8217;m writing this blog post pre-Gutenberg, or using the current &#8220;classic&#8221; editor that we are all familiar with and love. So while I&#8217;m using the 1 big area to write and put in headings, each paragraph or heading would be a &#8220;block&#8221;.</p>
<p>This isn&#8217;t a &#8220;What is Gutenberg&#8221; article, so if you want to get more familiar with what Gutenberg is, there are many great resources to learn including the Gutenberg <a href="https://wordpress.org/gutenberg/handbook/" target="_blank" rel="noopener">handbook</a>.</p>
<h2>The Data</h2>
<p>In order to keep everything backwards compatible so upgrading to the WordPress version that has Gutenberg as the new editor won&#8217;t break 30% of the Internet, any time a block is saved it creates HTML markup of the output and stores that in as &#8220;the content&#8221;. If you are a developer or know some of the code for WordPress templating you know that <strong>the_content();</strong> is a function you have to run to get the output of the big WYSIWYG box. There are ways to manipulate that with plugins like PODS, or you can remove it and add a plugin like Advanced Custom Fields to make the data for that post very custom, however out of the box WordPress will need <strong>the_content();</strong> to show what is written in the editor.</p>
<p>Here is an example post I created and the output that gets stored into the database:<br />
<img decoding="async" loading="lazy" class="aligncenter size-full wp-image-2607" src="http://live-arcctrl.pantheonsite.io/wp-content/uploads/2018/04/Screen-Shot-2018-04-24-at-8.13.21-AM.png" alt="" width="1580" height="1050" srcset="https://roysivan.com/wp-content/uploads/2018/04/Screen-Shot-2018-04-24-at-8.13.21-AM.png 1580w, https://roysivan.com/wp-content/uploads/2018/04/Screen-Shot-2018-04-24-at-8.13.21-AM-300x199.png 300w, https://roysivan.com/wp-content/uploads/2018/04/Screen-Shot-2018-04-24-at-8.13.21-AM-1024x681.png 1024w, https://roysivan.com/wp-content/uploads/2018/04/Screen-Shot-2018-04-24-at-8.13.21-AM-768x510.png 768w, https://roysivan.com/wp-content/uploads/2018/04/Screen-Shot-2018-04-24-at-8.13.21-AM-1536x1021.png 1536w, https://roysivan.com/wp-content/uploads/2018/04/Screen-Shot-2018-04-24-at-8.13.21-AM-1568x1042.png 1568w" sizes="(max-width: 1580px) 100vw, 1580px" />In the screenshot you&#8217;ll see that each block starts with a HTML comment like <strong>&lt;wp:paragraph&gt;</strong> signifying that a new paragraph block is starting. This is great for the output and makes it so themes don&#8217;t really need to do much to be compatible with Gutenberg.</p>
<p>However for me, that left a lot to be desired. When I saw Gutenberg the first time, all I could think about was how lovely it would be to have a nice array of data for each block. So I could take the paragraph content for that paragraph block and do what I wish with it in my theme, or even a headless application. However by default, the REST API doesn&#8217;t give you that kind of data, as when the post is saved (via REST API) the data has already been serialized to look like the above data.</p>
<h2>A standalone plugin</h2>
<p>After speaking with quite a few people at WordCamp San Diego 2018, I knew I was not the only one to feel &#8220;weird&#8221; about the way data is stored and the potential there is if the data was stored as a unique array, so I wanted to see how hard it would be to implement that.</p>
<p>So I built the <a href="https://github.com/royboy789/gutenberg-object-plugin">Gutenberg Object Plugin</a> &#8211; which basically hooks in to the save event, and then takes each block&#8217;s data, filters it as needed, then stores it in a unique table. As part of the plugin I also created custom endpoints just for Gutenberg data as well as an addition to the normal POST response. Now you can get a custom <strong>editor_blocks</strong> array as part of your normal REST API response.</p>
<h3>Why A Custom Table?</h3>
<p>I&#8217;m not 100% sold on this approach, but I do want to eventually do some performance testing. Once I have just the raw data of the post content, do I really need anything else? If I can make a performant call to the DB that doesn&#8217;t also make other calls like post_meta calls, etc. could that load the page or return the results faster? Testing still needs to be done to confirm any of this, and to find any other possible improvements with a custom table.</p>
<p>The other choice was to create a new field in the wp_posts table. I kind of wish that had been the case OTB and Gutenberg just did that for those who can refactor and not care about backwards compatibility. However modifying a table that a site already uses is a lot more sketchy IMO, and I&#8217;ve seen plugins that do it and it is scary when you have LOTS of posts.</p>
<h2>What can be built?</h2>
<p>If you are familiar with building anything Headless with WordPress, you&#8217;ll know that this means a lot. You can now create a very customized UI based on the block data, vs. having to parse through a string of HTML comments.</p>
<p>In most cases, this is not necessary as a theme or plugin will just use <strong>the_content()</strong> and what it spits out to show the content of the post or page. However adding this level of data availability means that if you share your data across to another platform or app, it can digest it how it pleases vs. as a string.</p>
<h2>Example</h2>
<p>There are many ways to use the data, even if it isn&#8217;t a headless app. I&#8217;m going to work on some examples and create some followup posts in the next few weeks, but for now here is a NON-headless way to look at how an array of data can help you create way more <strong>modular</strong> code for your theme:<br />
https://gist.github.com/royboy789/1d6e69cd9d325557655fae72ae6e1dc0</p>


Hi.

How to create headless apps & awesome things with Gutenberg

Liked this post? Want to discuss?