Gutenberg, aka WordPress blocks, gives content producers powerful new ways to lay out content in a traditional WordPress site. Butow can headless WordPress developers empower Marketing teams with those same capabilities? In this session, the founder of GraphQL for WordPress (WPGraphQL) shares new capabilities and best practices for using Gutenberg on a headless site.

2. Gutenberg and Headless WordPress
Creator and maintainer, WPGraphQL
Principal Software Engineer, WP Engine
@jasonbahl @wpgraphql
Jason Bahl

3. 3
• What is Gutenberg?
• What is Headless WordPress?
• When / Why Headless WordPress?
• How to use Gutenberg with Headless
WordPress
• When / Why Headless WordPress +
Gutenberg
What this
talk will
cover

4. 4
What is Gutenberg?

5. 5
What is Gutenberg?

6. 6
What is Headless WordPress?
php

7. 7
What is Headless WordPress?

8. 8
What is Headless WordPress?

9. 9
What is Headless WordPress?

10. 10
• Flexibility with choosing front-end tech
• Improved core web vitals
• Code splitting / load fewer assets on the client
• Fine control over the user experience (plugins
have limited impact on the front-end)
• Developer experience
Why
Headless
WordPress?

11. 11
• Non-web applications
(native mobile, print, VR, etc)
• Core web vitals are poor, or maintenance to
keep vitals good is costly
• Multiple applications rely on the same data
• Already using a Component Library or
Component-based design system
• Your team prefers JavaScript
When to use
Headless
WordPress?

12. 12
• Lower budget
• Site admins need more control the front-end
• Your team prefers PHP
• Your not invested / interested in Component
based development
• Your core web vitals are good, and
maintenance to keep them good is low
When NOT
to use
Headless
WordPress?

13. 13
WordPress Developer Experience

14. 14
WordPress Developer Experience

15. 15
Headless WordPress Developer Experience
php

16. 16
Headless WordPress Developer Experience

17. 17
Headless WordPress Developer Experience

18. 18
Headless WordPress Developer Experience

19. 19
Headless WordPress Developer Experience

20. 20
Headless WordPress Developer Experience

21. 21
Headless WordPress Developer Experience

22. 22
Headless WordPress Developer Experience
• Break complex features into smaller, isolated pieces
• Couple concerns that should be coupled
• Re-usability
• Iterate and ship faster, with more confidence

23. 23
How to use Headless WordPress?

24. 24
How to use Headless WordPress?
WP REST API

25. 25
How to use Headless WordPress?
WPGraphQL
WP REST API

26. 26
How to use Headless WordPress?
WPGraphQL
WP REST API

27. 27
What is WPGraphQL?
WPGraphQL is a free, open-source WordPress plugin
that provides an extendable GraphQL schema and API
for any WordPress site.

28. 28
What is GraphQL?
GraphQL = Graph Query Language

29. 29
GraphQL Query
{
viewer {
name
}
}
GraphQL

30. 30
GraphQL
GraphQL Query
{
viewer {
name
}
}
GraphQL Result
{
data: {
viewer: {
name: "Jason Bahl"
}
}
}

31. 31
What is GraphQL?
GraphQL lets client applications pluck
trees out of the application data graph

32. 32
WordPress as a Data Graph
User
Post
Post
Post
Post
Avatar
Category
Category
Post
Post
Featured
Image
Post
“Hello World”
“Goodbye
Mars”
“Sports”
“News”
“Jason Bahl”
“../avatar.png”

33. 33
WPGraphQL

34. 34
User
Post
Post
Post
Post
Avatar
Category
Category
Post
Post
Featured
Image
Post
“Hello World”
“Goodbye
Mars”
“Sports”
“News”
“../avatar.png”
“Jason Bahl”
WordPress as a Data Graph

35. 35
WPGraphQL
(pseudo code)

36. 36
WPGraphQL
(pseudo code)

37. 37
GraphQL Fragments

38. 38
WPGraphQL
(pseudo code)

39. 39
WPGraphQL
(pseudo code)

40. 40
WPGraphQL
(pseudo code)

41. 41
WPGraphQL

42. 42
• Your team already uses Headless WordPress,
and want to update the editor experience
• Components in the admin / Components on
the front-end
• Structured Input, Structured Output
• Re-use / update blocks across projects
Why
Headless
WordPress +
Gutenberg?

43. 43
How to use Gutenberg with WPGraphQL
php

44. 44
How to use Gutenberg with WPGraphQL

45. 45
How to use Gutenberg with WPGraphQL
Content as HTML
Query Content as HTML,
parse to components
Blocks as GraphQL Types
Query Content as Blocks,
each their own GraphQL
Type.

46. 46
How to use Gutenberg with WPGraphQL
Content as HTML Blocks as GraphQL Types
● WPGraphQL Core ● WPGraphQL for Gutenberg
● WPGraphQL Block Editor (Beta)

47. 47
Query Content
as HTML, parse
to Components
https://bit.ly/3LbwGl6
WPGraphQL Core

48. 48
Query Content
as HTML, parse
to Components
https://bit.ly/3LbwGl6
WPGraphQL Core

49. 49
Query Content
as HTML, parse
to Components
https://bit.ly/3LbwGl6
Considerations
● HTML payloads are
unpredictable. Changes on the
server are not introspectable
● Works best for teams that control
the WP Admin and the front-end
WPGraphQL Core

50. 50
github.com/pristas-peter/wp-graphql-
gutenberg
Query Content as
Blocks, each their
own GraphQL
Type
WPGraphQL for Gutenberg

51. 51
github.com/pristas-peter/wp-graphql-
gutenberg
Query Content as
Blocks, each their
own GraphQL
Type
WPGraphQL for Gutenberg

52. 52
github.com/pristas-peter/wp-graphql-
gutenberg
Query Content as
Blocks, each their
own GraphQL
Type
WPGraphQL for Gutenberg

53. 53
Query Content as
Blocks, each their
own GraphQL
Type
● Changes to Block Registry is
introspectable
● Works better for multi-person /
multi-team projects
● Loads blocks in iFrame, sends
Block Registry from client to
server to merge into GraphQL
Schema
● Doesn’t scale for many situations
(conditional contexts, etc)
github.com/pristas-peter/wp-graphql-
gutenberg
WPGraphQL for Gutenberg
Considerations

54. 54
github.com/wp-graphql/wp-graphql-block-
editor
Query Content as
Blocks, each their
own GraphQL
Type
WPGraphQL Block Editor

55. 55
Considerations
● Structured Input / Structured
Output
● Works with Blocks registered
with “block.json”
● Blocks are not treated as
individual nodes
github.com/wp-graphql/wp-graphql-block-
editor
Query Content as
Blocks, each their
own GraphQL
Type
WPGraphQL Block Editor

56. Try WPGraphQL today!
Sign up for a FREE Atlas Sandbox account
https://wpengine.com/atlas/

57. @jasonbahl @wpgraphql
Thank you.
Jason Bahl