Welcome to Press This, the WordPress community podcast from WMR. Each episode features guests from around the community and discussions of the largest issues facing WordPress developers. The following is a transcription of the original recording.
Powered by RedCircle
Doc Pop: You’re listening to Press This, a WordPress Community Podcast on WMR. Each week we spotlight members of the WordPress community. I’m your host, Doc Pop. I support the WordPress community through my role at WP Engine, and my contributions over on TorqueMag.Io where I get to do podcasts and draw cartoons and tutorial videos. Check that out.
You can subscribe to Press This on Red Circle, iTunes, Spotify, or your favorite podcasting app, mine is Overcast. Or you can download episodes directly at wmr.fm.
Today’s guests, Blake Wilson and Teresa Gobble are giving a talk at WP Engine’s Global DE{CODE} 2023, this is a developer’s virtual conference that’s happening on March 21st and 23rd. They’re both software engineers at WP Engine building Faust.js, the headless WordPress framework for WordPress and their talk at DE{CODE} is titled, “React-Gutenberg Bridge: Introducing the React-Gutenberg Bridge, A Headless Block Support for an Even Better Editing Experience.”
I’m super excited to have both of y’all on the show. Blake, let’s start off, just tell us your WordPress origin story and then we’ll ask Teresa the same question.
Blake Wilson: Sure. Yeah. Thanks Doc. Happy to be here. Yeah, my WordPress origin story probably started like many others. I probably started maybe about 10 years ago, I’d say, just developing freelance sites. It’s actually kind of my start to web design and software engineering as a whole, was with WordPress. Just building freelance sites for neighbors, local businesses and stuff like that.
And did that for a good bit of time, but then transitioned a little bit into Node.JS, a lot of JavaScript focused development work. Doing backend and then also frontend with React, Next.JS and stuff like that. When I moved here to Austin, I saw the WP Engine building downtown. And it’s kind of funny, obviously I’ve used them in the past for posting client sites and whatnot and thought it’d be a perfect opportunity to join and take a look at some of the headless stuff that they’ve been working on.
Doc Pop: And, Teresa, how did you get into WordPress? What’s your origin story?
Teresa Gobble: Thank you. I started using WordPress a couple of years ago to build out sites for my lab work. When I was back in my past life I was doing research in psychology, actually, and then over the pandemic we had a major shift in what we were able to do with live human participants.
So I got into coding more seriously and so I actually had a major career shift during the pandemic in 2020. So I went to a bootcamp to really cram it in there over the remote status that everybody had during that time. And I loved it and it was very fun. Very creative work.
And I got more into React and JavaScript specifically using Node, and I ended up going to a Vercel meetup and that’s actually where I met my team member Blake, is we were getting information from Vercel, only a block or so away from the WP Engine building. So yeah, that’s how I ended up here.
Doc Pop: Both of y’all have very interesting WordPress origin stories. And you know, once you got to WP Engine, Blake, it sounds like you were already kind of working on Node.JS and some of those things. I’m wondering for our listeners who are familiar with WordPress, can you describe to them what is React and maybe also break down a little bit of like, what is Gutenberg?
Blake Wilson: Sure. Yeah, I’d be happy to. So in terms of React, React is pretty much a JavaScript based UI framework. It kind of has driven the component-based architecture that we see a lot nowadays in modern front ends to where instead of creating like an MVC or Model View Controller, you’re actually creating components that pretty much derive based on what’s on the actual screen.
So you might have a component for tables or headers or footers. And it just makes things a lot easier and more developer centric to build UI. So that’s kind of what React is.
And then in terms of Gutenberg, I’m sure a lot of your audience are familiar with this, but it’s the block based builder in WordPress where you can create paragraphs, images, and so on, columns, and use that as a block builder to view your WordPress content on the frontend.
Doc Pop: Teresa, maybe you can tell us, the talk is about the React-Gutenberg Bridge and we’ve described what React is and what Gutenberg is. What is the React-Gutenberg bridge and why do we need a bridge?
Teresa Gobble: That’s a great question. As Blake just described, you have React based components on your frontend, on your website’s React based frontend. WordPress actually uses Gutenberg blocks, that’s where it’s going now. It’s gonna be a lot of Gutenberg blocks in the future. And it typically works seamlessly together, if you are using a conventional or traditional WordPress site.
But in the case of headless, it actually causes a couple problems, part of which is decoupling actually will break the ability to use Gutenberg block content in the editor in the way that it was naturally built for. And that’s what folks run into. There’s no real streamlined way to translate Gutenberg blocks from WordPress to a headless frontend.
So that’s actually where the React-Gutenberg Bridge comes in, it’s a bridge literally a way for the react based components to speak with the Gutenberg blocks in a headless WordPress site.
Doc Pop: A lot of people have had feelings about Gutenberg for one or the other and it is becoming kind of the norm now. I think everyone’s accepting it, but I’m just kind of curious. You mentioned that Gutenberg doesn’t play well with Headless.
Is this something that if a site was running like the Classic Editor. Would it have similar situations?
Blake Wilson: Yeah, that’s a great question. So, you know, typically in traditional WordPress you’ve got your a publisher that’s adding blocks to the Gutenberg Editor, they click save and they see that on their front end. Right? What you see is what you get.
Whereas with headless, it’s a little bit different since you’re kind of getting data either through WPGraphQL or the REST API you’re getting that data and then kind of reconstructing it on your front end. So there’s a little bit of a gap there because, you know, blocks in Gutenberg and traditional WordPress have that interactivity.
Say you have a slider in traditional WordPress, you add the block on your editor and you can see the slider on the front end, whereas with the headless world, depending on how you’re getting the data, it could just be rendered HTML and you don’t have that interactivity.
So the idea of the React-Gutenberg Bridge is to get that data from WordPress, programmatically all the block data, and then reconstruct that on the headless app. So whether you’re using Faust.JS or Next.JS or Gatsby or what have you, reconstruct those blocks using React on the front end to maintain that component based architecture as well as the interactivity depending on what kind of blocks you have.
Doc Pop: Okay. Yeah. Like you mentioned, that smooth, what you see is what you get experience. Even in Gutenberg, even though it’s not the WISYWIG Editor anymore, it’s always kind of been a defining part of WordPress’s use cases. It’s one of the pitches that an agency might say, this is a very easy, smooth looking tool out there with the best of all the alternative CMSs.
And they don’t want to lose that when they’re going headless. Right, Blake? They wanna be able to keep saying, this is still every bit as smooth and pretty and then we’ll take care of this kind of this conversion to decoupled. Right.
Blake Wilson: Absolutely. Yeah. At the crux of it, I mean, you still wanna preserve the publisher experience, right? I think everyone knows that that’s a crucial part of WordPress. If you don’t have anyone to actually input content and manage the content, the CMS doesn’t really make sense. So preserving that publisher experience and making it as streamlined and as intuitive as you can, is kind of what we’re aiming for with this feature. The React-Gutenberg Bridge. When you go headless, the developers are happy because they can choose how to build front ends. They can use a modern JavaScript framework if they want to, component-based architecture and so on.
But the publisher is kind of left with this decoupled feeling where they may add blocks or content from the publisher’s side, but not necessarily see that when they visit the front end. So the idea here is to bring back that publisher experience and make it just like traditional WordPress where they can say, okay, I’m gonna add this block and I expect this is what it’s gonna look like on the headless front end as well.
Doc Pop: I think that’s a good spot for us to take a quick break and when we come back, we’ll talk more with Blake and Teresa about the React-Gutenberg Bridge, so stay tuned.
Doc Pop: Welcome back to Press This, a WordPress Community podcast. I’m your host, Doc Pop. I’m here with Blake Wilson and Teresa Gobble, two software engineers at WP Engine who are working on Faust.JS and the React-Gutenberg Bridge. They are both giving a talk together at DE{CODE} 2023 WP Engine’s, virtual developer conference happening March 21st and 23rd.
And we are talking about little details of that talk, and I’m sure there’s gonna be, well, there’s gonna be a lot better visuals I think on the talk than in an audio podcast. I’m sure there’s gonna be a lot more breakdown of the technical side of things too. I do wanna get a little technical though.
Teresa, can you tell us about what are some of the requirements that a developer would need in order to use the React-Gutenberg Bridge?
Teresa Gobble: Good question. So the only requirement to use the WPGraphQL content blocks, which I can talk about a little bit more in detail in a moment, is to have WPGraphQL installed and activated. Of course. If you are using Faust, which you don’t necessarily need to do, but Faust is a front end framework that our team actually works on, and it’s been geared towards ensuring that the WPGraphQL content blocks can automatically set up the proper tooling to register and render those blocks on the front end.
Doc Pop: And React is just part of WordPress and Gutenberg is part of WordPress. So, those tools are what you are connecting into, correct.
Teresa Gobble: Yes. Yes, absolutely.
Doc Pop: And before the show, Teresa, you were talking about a solution in two parts. Is WPGraphQL, is that like one of the parts?
Teresa Gobble: Yeah, let’s get into that a little bit. So as Blake was saying before our break. There are solutions that exist, but they’re not exactly scalable or intuitive enough for folks to use, or in that way that headless developers expect. And agencies are then left to kind of implement things their own way or from scratch.
So there’s a lot of unanswered questions for folks. So like, what about styling or reusability or dynamic blocks or inner blocks? And the solution that we built out for the React-Gutenberg Bridge takes care of that in two parts. The first of which you’ve already heard, which is the WPGraphQL content blocks which is a way to programmatically expose those Gutenberg blocks so that they can be parsed and so that they can be read on the headless frontend. So that portion comes up when your website has that WordPress backend with Gutenberg blocks, and that gets fed into the WPGraphQL content blocks plugin. And that plugin will expose those blocks, the information that comes with each of the blocks.
It’s actually like a JSON object. It will expose that content to WPGraphQL. The WPGraphQL plugin will then pass it on to the second portion of the solution, which is a connector to facilitate the setup and the rendering of those blocks on the headless front end, which is the Faust WP Blocks Package.
That will actually enable customization and discovery and the rendering of those blocks in your app.
Doc Pop: And I noticed in just the reading the DE{CODE} description for, for y’all’s talk, there seems to be a lot of emphasis on helping support the marketing team and put them at ease. Is this talk going to be, I’m kind of curious about, like, if that is a big part of like trying to get these decoupled sites to happen is like getting everybody on board.
You’ve got the engineers on board. How do you get the marketing on board? Is this talking to be kind of talking about how to do that? Or are we gonna be getting a little bit more, more technical?
Blake Wilson: It is a bit of a more technical talk. For those that are looking towards more or less the high level overview, I’d recommend Jason Cohen’s talk. He’s gonna give a kind of a keynote on I believe his talk is, “Go Beyond with Headless Powered by Atlas.”
And he’ll talk more about that in terms of the marketing benefits and whatnot. But our talk is a bit more technical, but at the end of the day, you are right. It is a matter of the developers are obviously on board. How do we persuade marketing and publishers to get on board with headless as well?
And this is one of those gaps that we’ve noticed that is stopping those from trying out headless, just because the experience right now is a little bit fractured, so we’re kind of adding this bridge or creating this bridge so we can regain publishers and marketers so that they can know what they expect when they’re creating content on WordPress.
Doc Pop: Is there more coming to the React-Gutenberg bridge that you can kind of tease a little bit about? I’m just kind of curious what the long term plan for this tool is.
Blake Wilson: Yeah. Teresa, would you wanna talk about the roadmap a bit?
Teresa Gobble: Yeah, absolutely. It’s something that we’re really excited about actually. We’ve got a roadmap. It’s got five phases. We’ve just finished the first two phases, which I can talk about, and we’re currently working on phase three.
So phase one was implementing a method to deconstruct and reconstruct the block data efficiently. Phase two, which was just completed, is a focus on tighter integration with Gutenberg blocks for Faust which is that second portion of the solution that I mentioned. Right now we’re working on phase three, which is a focus on providing Theme.JSON support and a reusable block library which we’ve gotten a lot of great feedback on. Folks are really going to get some good use out of a Theme.JSON support.
Phase four after that is enhancing the existing development and editing experience. And then finally, phase five, we’re really hoping to focus on supporting the wider ecosystem, beyond Core WordPress during that stage.
So we’ve got a lot of fun, cool stuff coming that will hopefully really, improve the experience of using Gutenberg blocks, for folks both publishers and developers.
Doc Pop: And you know, I’m kind of going back to what I was talking about earlier with the marketing team needing to be brought on board, how are y’all receiving feedback to kind of integrate into the product?
Blake Wilson: Yeah, so we typically get feedback in a number of channels. We have a Headless Discord, so if any of y’all are listening or interested in that you can check it out on developers.WPEngine.com. So just a place where headless devs can gather and ask questions and feedback. So that’s one spot where we’re getting feedback.
Another one is our GitHub. So we’ve got github.com/WPEngine/faustjs, which is just your traditional GitHub repo. We have issues and discussions there as well. But those are kind of our two main channels where we get feedback from the community in terms of if what we’re building is on par and if we need to make changes or, you know, depending on the users, if it’s working for them or not.
Doc Pop: Awesome. I think that’s another good spot for us to take a quick break and when we come back we’ll wrap up our talk with Blake and Teresa about the React-Gutenberg Bridge. And we’re gonna talk a little bit about, in the last bit about the DE{CODE} 2023 event and what we’re excited about for that, so stay tuned.
Doc Pop: Welcome back to Press This, a WordPress community podcast. I’m your host, Doc Pop, and I am with Blake Wilson and Teresa Gobble, two software engineers at WP Engine, who are giving a talk at WP Engine’s 2023 DE{CODE} event. This is the Global DE{CODE} 2023 happening March 21st and 23rd. It’s gonna be across different time zones.
This is pretty cool the way that it’s organized. So, there’s APAC, North America and EMEA [laughs] I always forgot how to pronounce that, EMEA. But you’ll have the chance to be able to tune in wherever you are and enjoy the talks. And this particular talk is about React-Gutenberg Bridge, which we spent the whole show talking about.
Teresa, are there any other DE{CODE} talks that you’re excited about?
Teresa Gobble: Oh gosh, yes. There is one that is going to be provided by Jason Cohen, the Chief Innovation Officer and founder of WP Engine. It discusses how technology has shaped the power dynamics between designers and developers and marketers.
And as someone who has a robust psychology background for online interactions, it’s one of my favorite topics and so I’m really interested to hear what his thoughts are on the subject. He’s a very thoughtful man, so I’m sure it will be really good.
Doc Pop: I love Jason’s talks, and I’m really into how technology does kind of, we use this term democratize a lot, but it oftentimes kind of empowers different groups or maybe sometimes gives more power to other groups. It’s very interesting.
I saw a talk yesterday about how video game technology ended up changing how publishers make games, and it was so deep and interesting and I kind of think a similar talk about WordPress, but CMSs and things like that would be a really interesting thing. About how they might take away or give power depending on the technologies and the ultimate goals for making kind of a better experience for everyone.
Blake, were there any talks that you were excited about for DE{CODE}?
Blake Wilson: Yeah. And it’s funny you say that Doc, cause I was just thinking about that as well, just in terms of, I think WordPress kind of speaks to that because I know when I first got started, it’s pretty cool to see that businesses can pretty much power their own websites and manage their own web presences by using WordPress.
I always thought that was cool myself, to see the kind of power that WordPress can put in people’s hands just to manage things and do things yourself.
But there is a talk that I’m pretty interested in and it’ll be done by Jeff Everhart. He’s on the DevRel team. It’s called “How to Build Your First Headless WordPress Project with ACF Plus WPGraphQL.”
So if you are new to headless, I’d actually recommend that one. It’s probably gonna do a deep dive into getting started with headless, with ACF, with WPGraphQL. So I’m pretty excited to see that one as well.
Doc Pop: Right on. One of the talks I was kind of interested in is, “When is it Worth Investing in Block-Centric Building and WordPress?” which is Brian Gardner, Sam Munez, Arooba Ahmed, Phil Crumm and Katherine White. And yeah, it’s just a lot of cool people. And talking about like, block-centric, I am seeing some really cool things being done with Gutenberg blocks lately.
In particular, I’ve seen a couple Software as a Service kind of UI integrations built into a block that previously would’ve been like a standalone app or a different website you do something on, and now it’s just like, oh, here’s this awesome tool to generate an image based on words that I type.
And it’s a Gutenberg block inside my post. It’s so cool. So I’m not saying they’re gonna talk about that, but I think, just talking about when is it worth focusing on block-centric building I think is kind of fitting along with that.
So if you’re interested in checking out WP Engine’s Global DE{CODE} 2023 event the easiest way to find it might be to just type it into Google, “WP Engine DE{CODE}”. You can also type in WPENG.in/Decode. And that will take you there as well. It’s gonna be another fun event, and it is a free virtual event. So check it out and it’s available in all those different time zones.
I appreciate both of y’all joining me today to talk about React-Gutenberg Bridge, and if people wanna find out more about what you’re working on, Blake, what’s, what’s a good way to be able to kind of keep track of the projects you’re working on?
Blake Wilson: Yeah, absolutely. I really recommend headless, you can find it at developers.WPEngine.com. There’ll be a little button there in the nav bar. But feel free to join that Discord, ask any questions you might see. I’ll be on, Teresa’s on there as well. And happy to talk to you there.
Doc Pop: And Teresa, do you have any other links that you wanna help throw out at the end of the show?
Teresa Gobble: Yes. One thing I’ve wanted to mention as folks are following our journey, through our phases for the React-Gutenberg Bridge, you can actually read what our team is up to on our blog, which at faustjs.org, that’s fauastjs.org/blog.
Doc Pop: Awesome. Well, I really appreciate both of y’all joining me today. It’s been great talking to you, and I’m excited to see what you work on and to watch the DE{CODE} talks with y’all.
Doc Pop: Good plug. Thanks for listening to Press This, a WordPress community podcast on WMR. Once again, my name’s Doc and you can follow my adventures with Torque magazine over on Twitter @thetorquemag or you can go to torquemag.io where we contribute tutorials and videos and interviews like this every day. So check out torquemag.io or follow us on Twitter. You can subscribe to Press This on Red Circle, iTunes, Spotify, or you can download it directly at wmr.fm each week. I’m your host Doctor Popular I support the WordPress community through my role at WP Engine. And I love to spotlight members of the community each and every week on Press This.
No Comments