At this point, we’re half way through a major improvement to the block we’ve been working on. We have the ability to edit the content in the editor but we aren’t able to save it and because we aren’t able to save it, we aren’t able to view it on the frontend.

Now, though, we’re at a place where we can save our data, render it on the frontend, and continue to make sure that what the author sees is what the visitors see.

As I’ve done with the rest of the series, I recommend reading these first parts because they are going to bring you up to speed on everything you need to do to get up to this point:

1. Required Tools, Plugin Structure, Dependencies, Block Metadata
2. The Backend, The Frontend, Functionality, Styles, a Working Demo
3. Block Attributes, Editable Content, Components, Editor Styles

Note that I still don’t have a GitHub repository set up for this plugin. I will once we reach a certain point, but not yet. And that’s because I think reading through the material and having to implement it versus cloning and changing a few things around can help you learn some of this material faster.

Anyway, I ended the previous post stating:

We’re going to cover

• how to save the content,
• render it on the frontend

And that will wrap up this initial part.

So that’s what we’re going to do.

The first two articles in this series have been long. Not only long in terms of the content they cover, but long in comparison to the usual content I write. Part of this is because of the nature of what I’m trying to cover and part of it has to do with getting the basic plugin going.

We’re at a point now, though, where we can start to shorten the length of the article and focus more narrowly on the functionality and its implementation.

If you’re stumbling across this series and this is the first post you’re reading or you’ve not done any of the work prior to get everything off the ground yet (as I don’t have a GitHub repository set up for this plugin just yet – and that’s on purpose 🙂), here’s what’s been covered so far:

1. Required Tools, Plugin Structure, Dependencies, Block Metadata
2. The Backend, The Frontend, Functionality, Styles, a Working Demo

In the previous article, I stated:

In the next article, we’ll start talking about how we can edit text within the context of the Block Editor, how to save the changes, and then view them on the frontend.

Originally, I planned to cover the following in a single article:

• convert the element in the block editor into a field we can edit,
• save the content of the field,
• render the content that’s above

Instead, I’m going to cover just the first point above so we can focuses solely on the editor and how to manipulate data within its context. Then we’ll follow the article up with how to save the content and render it on the frontend.