Compare the Gutenberg Editing Experience with the Resulting REST API Structure
In this lesson, we explore the Gutenberg editor and discuss how this is reflected in the database. Gutenberg has endless options of how you can create and style posts in the WordPress UI. There are plenty of content blocks to choose from and each of those blocks has several options with how you can customize the content to your needs.
The downfall of this experience is how it is exposed in the API from the database. The whole post is saved to the database as a single rendered blob of HTML. This blob has to be parsed and handled on the front-end without the context of the blocks in the editor. If you were using React, you would need to use dangerouslySetInnerHTML which is not optimal.
Instructor: [0:00] We can create a new post in WordPress by going to Posts and adding new. As we said before, we've got a really extensive block editor available to us. Let's have a look at it. "Testing add blocks."
[0:14] We can add images. With this block we've got different options. We can change the alignment. We can make it link to something separate. We can crop the image. We can change the crop to be slightly different.
[0:29] Whenever we want to play that, we can play around with those different -- use different crops to fit our need. We can replace it with a different image. Each block has a lot of different built-in options that we can add in. Let's try a different block. This is a pull quote. This is from the Gatsby blog.
[0:46] Again, we can make this text link in some way, open to a new tab. We can add its alignment if we want it on the right of our window. Wide width, full width. Come on, none of those. Let's turn that off. We get back to where we were.
[1:01] Then, maybe we want calendar. We just love a calendar. Here, we have three writ blocks that we can see here. Let's see what happens when we view those in our REST API. We bring posts and testing our blocks. This is the post we're interested in.
[1:16] Now, what I want to draw your attention to is that what we get after that rich editing experience, it's really interesting. What we get is this blob of HTML, which is quite hard to think about how we might render it, what we might do. It's coming in quite an opinionated way.
[1:33] We have the HTML. We have classes that are being applied. We have source sets being set in line. We've got lots going on here in line. That makes it challenging to think about how we might want to style this in a headless way.
[1:51] The great thing about Gutenberg is this really rich editing experience for our editors. The downfall is that what we get in the database and on our restful API is this blob of HTML that if we're in a React environment, we have to do dangerously set in our HTML to be able to render it to the front end. Great editing experience per development experience.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!