Building with Headless WordPress in a Block-based World

Since the WordPress CMS is mainly used to create traditional sites, implementing certain features of the platform in headless sites has historically been difficult for developers. As the WordPress block editor and full site editing, a paradigm in which the entire WordPress template system is reoriented around blocks, become more widely adopted, it’s clear that any future for headless WordPress must adapt to these new ways of authoring content.
In this talk, we’ll break down the anatomy of WordPress blocks and look at the various ways they can be created and used in site building. Using this knowledge, we’ll look at how we can decouple our sites using block data sourced from either WPGraphQL or the REST API and use them to build interfaces in Next.js or your favorite framework.
In this presentation, you’ll learn about the following topics:
How native blocks are structured with block markup and block.json
How ACF blocks can offer an alternative block development flow
How to query for block data using WPGraphQL and REST APIs
How to map blocks to custom components using the WordPressBlocksProvider package in Faust.js
What the future of blocks in headless WordPress looks like: the last stage of the React-Gutenberg bridge, interactive blocks, and FSE
Headless WordPress resources:
wpengine.com/b...

[@NewtonAdams-i9i]

Hey I'm having trouble with the columns and column block not passing through the innerBlock data. I see it done with just passing the children but there's nothing going through

[@odd_plebeian]

Can this be used outside of faust at all? I dont want to use faust to mimic the WordPress structure with single and singular. I want to use the app router with app -> [slug] -> page.tsx and there I will have a query for a page with conditionals if needed.

[@WPEngineBuilders]

In theory, since the block viewer package is just React, you could use it in any React-based framework but YMMV. And FWIW you don't have to use the template hierarchy, that's an opt-in convention, we have some examples for app router support here: github.com/wpengine/faustjs/tree/canary/examples/next/app-router

[@odd_plebeian]

@@WPEngineBuilders Thank you for that information, I was struggling to get nested page routing with next13 and the app router. I am checking out the template hierarchy option now and the routing works, I just wish that was with the app router

[@odd_plebeian]

​@@WPEngineBuilders I have been playing around with the example code and ran in to the same issue I was having before, which are nested pages. I understand that the branch is experimental but I was wondering where I can add a bug/request or start a discussion about the issue. Just to clarify here that the issue is this. Your client has an about us Page with several sub pages.
About Us
--- Contact
--- Privacy
--- FAQ
so I would expect the url to be //site-name/contact/sub-page

[@WPEngineBuilders]

@@odd_plebeian It seems like that would be possible using nested routes: nextjs.org/docs/app/building-your-application/routing#nested-routes

[@WPEngineBuilders]

@@odd_plebeian If you don't want to specify each route individually, you could use this catch-all route. That is basically what the template hierarchy piece does: nextjs.org/docs/app/building-your-application/routing/dynamic-routes#catch-all-segments

[@visualmodo]

Very good video! =DD

[@WPEngineBuilders]

Thanks for the kind words - JE

[@ahmadkhaled7497]

Can I use vue js instead of React/Next?
I know the wp block library is react-based, but I can use any external tailwind library and follow the same tutorial?
In theory can this work?

[@sludgebucket3042]

Yeah you should be able to use the graphql data with any framework, but tailwind is a CSS library, this will probably require a Javascript-based framework to make any use of the data

[@lindsayaiello501]

Where do i find the WPGraphQL content blocks extension?

[@WPEngineBuilders]

Hi there - you can find that here: faustjs.org/tutorial/get-started-with-wp-graphql-content-blocks
Also, if you're not already in our Headless WP Discord we would love to have you 💜 discord.gg/headless-wordpress-836253505944813629

[@lindsayaiello501]

@@WPEngineBuilders Thanks! Do you have to use faust to use that plugin?

[@WPEngineBuilders]

@@lindsayaiello501 Hi there, great question. No, this plugin does not require Faust.
Now, Faust makes it easier because the queries are set already. However, you can use any framework with this plugin since what it primarily does is give block data to a server-side registry so it shows up in GraphQL.
Let us know if you have any other questions!
- Sam ✨ Community Manager