FREELessons: 6Length: 32 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.4 Meta Boxes and the Gutenberg Editor

In this lesson, you'll earn how your custom meta boxes are affected by the Gutenberg editor.

Related Links

2.4 Meta Boxes and the Gutenberg Editor

Hello, and welcome back to this Tuts+ course on creating custom meta boxes in WordPress. In this part of the course, I'm gonna take the two plugins we've created, which you can see activated for my post here. So I've got my instructions over here and down here underneath the post content, I've got my meta box for my custom field. So what will happen to those if I activate Gutenberg? Let's do that. So if I go into my Plugins screen, and then I've already installed Gutenberg, I just activate that, wait a moment while it activates. There we go. Now I'm gonna go to my posts and I'll open the same post again, and you can see when it opens up that we've got the Gutenberg editor. At the moment, this is in classic mode, so it's just one block. I'm gonna separate it into blocks because Gutenberg will do that for you, it'll convert, so I've now got different blocks for my paragraphs, my lists, and short codes, and so forth. But where are my meta boxes? Now, if I scroll right down, you can see the Extra Information meta box down here at the bottom of the screen. So that's the one that I added to the normal section of the page. So that gets created in the exact same place you would expect to find it without Gutenberg activated. But what about my second plugin which added the instructions over here in the sidebar? So if I look in Document over here, it's been added within this section here that's called Extended Settings. So it says using this screen under Extended Settings. So it's still there, but it's not ideal the position it's in. Now, there is a technique I could use to tell WordPress that if Gutenberg is activated, this particular plugin is not Gutenberg compatible, and therefore, Gutenberg would revert to using the classic editor, the screens that we've already been working in during this course. But again, that seems a bit daft given that we've got a plugin here that applies to every single post, and our content goes, our meta boxes do appear. So I'm quite happy with this meta box down at the bottom, the Extra Information one, although the one at the side isn't ideal where it is. Cuz if you look at it, it's quite difficult to spot that it's right down at the bottom because I did have it as high, and originally it was up here. Now in an ideal world, what I'd like to do is add both of my meta boxes to wherever I want to in this right-hand menu. At the moment, I can't find a way for Gutenberg to allow that. But I have done a little bit of research, and what I have found out is that Gutenberg uses something called slots for this section over here. So where we've got blocks in the main content, we've got slots over on the right-hand side. And at the moment slots aren't extendable, so we can't add our own item to a slot, which would give us more control over how it appeared in Gutenberg. But for now, we've got our meta box over here on the right-hand side and that will just have to do. Hopefully by the time Gutenberg becomes merged into Core, slots will be available so that we can start using them to add our own content over here in the right-hand menu. So that's how our plugins are impacted by the Gutenberg plugin. In the next part of the course, I'll recap what we've covered and give you an overview of what you've learned. See you next time. And thanks for watching.

Back to the top