WordPress 5.9 introduced full-site editing to core—signifying a major shift in the way we build websites with WordPress. Join us in this session as we unpack these changes, and how you can leverage them to build better websites—the modern WordPress way.

2. Working with Full Site Editing
DVELOPER ADVOCATE
WP ENGINE
Nick Diego
And the Future of Modern Theming in WordPress

3. 3
• Began working with WordPress in 2012
• Primarily a plugin and block-based theme developer
• Joined WP Engine in November, 2021
• Passionate about blocks, patterns and Full Site Editing
Nick Diego
Developer Advocate – WP Engine
A Bit About Me…

4. “
A collection of features that bring the familiar experience and
extendability of blocks to all parts of your site rather than just
post and pages. [...] Projects under Full Site Editing (FSE)
include everything from the Site Editor, Global Styles,
numerous Site/Post/Page specific blocks, Query block,
Navigation block, Templates, and block themes.
- Block Editor Handbook
Full Site Editing

5. “
A collection of features that bring the familiar experience and
extendability of blocks to all parts of your site rather than just
post and pages. [...] Projects under Full Site Editing (FSE)
include everything from the Site Editor, Global Styles,
numerous Site/Post/Page specific blocks, Query block,
Navigation block, Templates, and block themes.
- Block Editor Handbook
Full Site Editing

6. 6
• The Basics
▪ Blocks, Patterns, Editor and Site Editor
• Anatomy of a Block Theme
• Global Settings & Styles (theme.json)
• The Future of Modern Theming
Exploring Full
Site Editing

7. The Basics.

8. 8
Blocks
From a paragraph of text to a gallery of images, a block
can take almost any form. While each block may look
different or serve a unique function, they all fit nicely
together creating the content of a webpage.
THE BASICS
A block is the fundamental “unit” of content in WordPress.

9. 9

10. 10
Patterns
A pattern could be a single block or made up of multiple.
As we will see later, patterns make building complex page
layouts easy and fun.
THE BASICS
A block pattern is simply a predefined collection of blocks
that forms a specific layout.

11. 11

12. 12

13. 13
Editor
Since its introduction in WordPress 5.0 back in 2018, the
Editor has been called by many names. For the purposes
of this presentation, we will simply use the term “Editor”.
THE BASICS
The Editor is the user interface that we use to create
pages and posts out of blocks.

14. 14

15. 15
Open the inserter

16. 16
Site Editor
Formally introduced in WordPress 5.9 and will be continually iterated on
in future versions. We can expect many enhancements in WordPress 6.0.
THE BASICS
The Site Editor is “the cohesive experience that allows you
to directly edit and navigate between various templates,
template parts, styling options, and more.”
— Block Editor Handbook

17. 17
Accessing the Site Editor

18. 18

19. 19

20. 20

21. 21
Open the sidebar

22. 22

23. 23
Edited by the User

24. 24
Site Title Block Navigation Block
Site Logo Block

25. Anatomy of a Block Theme.

26. 26
• Block themes fully embrace Full Site Editing
• Theme templates are composed entirely of blocks
• Template and template parts are html rather than php
files
• Minimally consists of style.css, index.html and
index.php* files
• Most block themes include a theme.json file
* A temporary requirement, will be removed in the future.
Anatomy of a
Block Theme

27. 27
twentytwentytwo
|__ style.css
|__ theme.json
|__ functions.php
|__ index.php
|__ templates
|__ 404.html
|__ archive.html
|__ index.html
|__ page.html
|__ single.html
|__ ...
|__ parts
|__ footer.html
|__ header-small-dark.html
|__ header.html
|__ ...
Required

28. 28
twentytwentytwo
|__ style.css
|__ theme.json
|__ functions.php
|__ index.php
|__ templates
|__ 404.html
|__ archive.html
|__ index.html
|__ page.html
|__ single.html
|__ ...
|__ parts
|__ footer.html
|__ header-small-dark.html
|__ header.html
|__ ...
Block Templates

29. 29
twentytwentytwo
|__ style.css
|__ theme.json
|__ functions.php
|__ index.php
|__ templates
|__ 404.html
|__ archive.html
|__ index.html
|__ page.html
|__ single.html
|__ ...
|__ parts
|__ footer.html
|__ header-small-dark.html
|__ header.html
|__ ...

30. 30

31. 31

32. 32
404.html
<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
<!-- wp:group {"tagName":"main"} -->
<main class="wp-block-group">
<!-- wp:group {"layout":{"inherit":true}} →
<div class="wp-block-group">
<!-- wp:pattern {"slug":"twentytwentytwo/hidden-404"} / --
>
</div>
<!-- /wp:group -->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->
1
2
3
4
5
6
7
8
9
10
11
12
13

33. 33
404.html
<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
<!-- wp:group {"tagName":"main"} -->
<main class="wp-block-group">
<!-- wp:group {"layout":{"inherit":true}} →
<div class="wp-block-group">
<!-- wp:pattern {"slug":"twentytwentytwo/hidden-404"} / --
>
</div>
<!-- /wp:group -->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->
1
2
3
4
5
6
7
8
9
10
11
12
13

34. 34
twentytwentytwo
|__ style.css
|__ theme.json
|__ functions.php
|__ index.php
|__ templates
|__ 404.html
|__ archive.html
|__ index.html
|__ page.html
|__ single.html
|__ ...
|__ parts
|__ footer.html
|__ header-small-dark.html
|__ header.html
|__ ...

35. 35
404.html
<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
<!-- wp:group {"tagName":"main"} -->
<main class="wp-block-group">
<!-- wp:group {"layout":{"inherit":true}} →
<div class="wp-block-group">
<!-- wp:pattern {"slug":"twentytwentytwo/hidden-404"} / --
>
</div>
<!-- /wp:group -->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->
1
2
3
4
5
6
7
8
9
10
11
12
13

36. 36
404.html
<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
<!-- wp:group {"tagName":"main"} -->
<main class="wp-block-group">
<!-- wp:group {"layout":{"inherit":true}} →
<div class="wp-block-group">
<!-- wp:pattern {"slug":"twentytwentytwo/hidden-404"} / --
>
</div>
<!-- /wp:group -->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->
1
2
3
4
5
6
7
8
9
10
11
12
13

37. 37

38. 38
Pricing Table – Twenty Twenty-Two
Bold Heading
Change Text Color

39. 39
Pricing Table – Twenty Twenty-Two
Save 404 Template

40. 40
Export Block Templates

41. 41
Add New Templates

42. 42

43. Global Settings & Styles
(theme.json)

44. 44
twentytwentytwo
|__ style.css
|__ theme.json
|__ functions.php
|__ index.php
|__ templates
|__ 404.html
|__ archive.html
|__ index.html
|__ page.html
|__ single.html
|__ ...
|__ parts
|__ footer.html
|__ header-small-dark.html
|__ header.html
|__ ...

45. 45
theme.json
{
"version": 2,
"customTemplates": [...],
"settings": {...},
"styles": {...},
"templateParts": [...]
}
1
2
3
4
5
6
7

46. 46
theme.json
{
"version": 2,
"customTemplates": [...],
"settings": {...},
"styles": {...},
"templateParts": [...]
}
1
2
3
4
5
6
7

47. 47
theme.json
{
...
"settings": {
"appearanceTools": false,
"border": {...},
"color": {...},
"custom": {...},
"layout": {...},
"spacing": {...},
"typography": {...},
"blocks": {
"core/paragraph": {
"border": {...},
"color": {...},
"custom": {...},
...
}
}
}
...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Global Settings
Block Level Settings

48. 48
theme.json
{
...
"settings": {
"color": {
"palette": [
{
"slug": "foreground",
"color": "#000000",
"name": "Foreground"
},
{
"slug": "background",
"color": "#ffffff",
"name": "Background"
},
{
"slug": "primary",
"color": "#1a4548",
"name": "Primary"
},
...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

49. 49
theme.json
{
...
"styles": {
"border": {...},
"color": {...},
"filter": {...},
"spacing": {...},
"typography": {...},
"elements": {...},
"blocks": {
"core/paragraph": {
"border": {...},
"color": {...},
"spacing": {...},
"typography": {...},
"elements": {...}
}
}
}
...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Global Styles
Block Level Styles

50. 50
theme.json
{
...
"styles": {
"color": {
"background": "var(--wp--preset--color--background)",
"text": "var(--wp--preset--color--foreground)"
},
"typography": {
"fontFamily": "var(--wp--preset--font-family--system-font)",
"lineHeight": "var(--wp--custom--typography--line-height--normal)",
"fontSize": "var(--wp--preset--font-size--medium)"
}
"blocks": {
"core/button": {
"color": {
"background": "var(--wp--preset--color--
primary)",
"text": "var(--wp--preset--color--background)"
},
"typography": {
"fontSize": "var(--wp--preset--font-size--
medium)"
...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

51. 51
theme.json
{
...
"styles": {
"color": {
"background": "var(--wp--preset--color--background)",
"text": "var(--wp--preset--color--foreground)"
},
"typography": {
"fontFamily": "var(--wp--preset--font-family--system-font)",
"lineHeight": "var(--wp--custom--typography--line-height--normal)",
"fontSize": "var(--wp--preset--font-size--medium)"
}
"blocks": {
"core/button": {
"color": {
"background": "var(--wp--preset--color--
primary)",
"text": "var(--wp--preset--color--background)"
},
"typography": {
"fontSize": "var(--wp--preset--font-size--
medium)"
...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

52. 52
theme.json
{
...
"styles": {
"color": {
"background": "var(--wp--preset--color--background)",
"text": "var(--wp--preset--color--foreground)"
},
"typography": {
"fontFamily": "var(--wp--preset--font-family--system-font)",
"lineHeight": "var(--wp--custom--typography--line-height--normal)",
"fontSize": "var(--wp--preset--font-size--medium)"
}
"blocks": {
"core/button": {
"color": {
"background": "var(--wp--preset--color--
primary)",
"text": "var(--wp--preset--color--background)"
},
"typography": {
"fontSize": "var(--wp--preset--font-size--
medium)"
...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

53. 53
Global Style Panel

54. 54

55. 55

56. 56
Current Background Color

57. 57
New Background Color 🎉

58. The Future of Modern Theming.

59. 59
• Modern theming will emphasize design over
development
The Future of
Modern Theming

60. 60
• Modern theming will emphasize design over
development
• The Editor will play a major role in how we design
themes
The Future of
Modern Theming

61. 61
• Modern theming will emphasize design over
development
• The Editor will play a major role in how we design
themes
• Themes will be judged by their pattern collections
The Future of
Modern Theming

62. 62
• Modern theming will emphasize design over
development
• The Editor will play a major role in how we design
themes
• Themes will be judged by their pattern collections
• Low-code, or even no-code, theme development
will exist
The Future of
Modern Theming

63. 63
• Modern theming will emphasize design over
development
• The Editor will play a major role in how we design
themes
• Themes will be judged by their pattern collections
• Low-code, or even no-code, theme development
will exist
• Greater accessibility will usher in a new generation
of users
The Future of
Modern Theming

64. 64
• Modern theming will emphasize design over
development
• The Editor will play a major role in how we design
themes
• Themes will be judged by their pattern collections
• Low-code, or even no-code, theme development
will exist
• Greater accessibility will usher in a new generation of
users
• Full Site Editing IS the future of traditional
WordPress
The Future of
Modern Theming

65. Twitter @nickmdiego
WordPress Slack @ndiego
GitHub @ndiego
Website nickdiego.com
Thank you.
Nick Diego
Learn WordPress learn.wordpress.org
Block Editor Handbook developer.wordpress.org/block-edito
Twenty Twenty-Two (Theme) wordpress.org/themes/twentytwentytwo
Frost (Theme) frostwp.com