Overview on full site editing and some processes to create a custom FSE theme. Originally presented at the Evanston WebPros Meetup on October 27, 2022

1. WordPress Full site Editing
Jeff McNear
https://plasterdog.com
https://webprosmeetup.org
jeff@plasterdog.com
847/849-7060

2. Full site editing is a paradigm shift in approach
• Every region is block driven
• Template parts are a cross between widget
regions & reusable blocks
• Custom patterns & Reusable blocks make
things more modular
• Most things are now editable – changes are
kept in the database

3. … remember WordPress has made a firm commitment to backwards
compatibility
• There is no rush to convert legacy sites
• Not all sites will be compatible with FSE
• Legacy themes will remain a better
alterative for some use cases
• Many Gutenberg advantages are
available without using FSE

4. … everything in Gutenberg is evolving … FSE is no exception…

5. FSE has been part of core since ver 6.0
• Technically still in beta
• Eliminates customizer, widgets, menus & theme
file editor
• Menus are now a block
• Widgets are now template parts
• Customization is done in the editor
• Only available to those using a FSE theme

6. What defines FSE compared to the way it has always been …
Legacy Theme
• Header, footer & widgets placed via PHP
• Post fields are displayed via code in PHP templates
• Responsive controls in style.css
• Can revert to classic widget view via a plugin
• Gutenberg is active in the content region
• Customization via customizer
• Menus have a separate module

7. FSE Theme
• All parts of the site are block controlled
• Common post fields are broken down into individual blocks
• Breakpoints are dictated by “container” blocks
• Widgets & Menus are now just blocks
• Editor allows for some style adjustment for site & individual blocks
• Generating a custom theme has been greatly facilitated
• theme.json file will define many styles & functions
• templates & parts sub-folders

8. FSE brings many interesting
possibilities …

9. To access any of this you need to start with a Full Site Editing theme:

10. The site editor experience is roughly the same…
LEGACY THEME FSE THEME

11. The media library is still the same …
LEGACY THEME FSE THEME

12. … as are Users, Plugins, Tools & Settings…

13. What is different is that FSE encourages the use of the interface for
layout & design…
• Allows direct editing of the header,
footer & other “includes” regions
• Allows creation of new templates and
template parts
• Includes style controls beyond what
is found in any customizer
• Tools are available to any admin user

14. giving any admin these abilities means….
• Quick template modification
• Ease of assignment of alternative
headers, footers and sidebar regions
• Extended interface style control
• Automatic attachment of reusable
blocks (no need for ACF “options”
field groups)
• Greater layout and styling permissions
for the site “admin” level user

15. Access the editor via a sub item of Appearance…
• The widget item no longer exists
• The menu item no longer exists
• The customizer item no longer
exists
• The theme file editor item no
longer exists

16. Initial view is the home page template – it is better to start
with the “directory”

17. Select a template to edit…

18. or a template part…

19. and start manipulating blocks…

20. The naming convention for templates is the same as it has always
been …
• index
• 404
• search
• archive
• category
• page
• single

21. … in templates you will use the “theme” group of blocks quite a bit

22. templates do not need to have template parts –
but it is cleaner to use them

23. There are three “types” of template parts
• General (think widgets & sidebars)
• Header
• Footer
• Multiple variants of each type are possible
– even encouraged
• Creating a new part is a matter of selecting
which type, naming the part and then
configuring it

24. … template parts are block based

25. When a template is selected the parts will be shown in list view
• The parts can be moved and
eliminated
• If there are other template parts of
the selected type, then you can
replace one for another
• While you can edit a template part
while in template view, a better
practice is to modify the part by
selecting it directly

26. ... just like in content, blocks can be moved, added & styled

27. The interface is trying to accomplish
alot, and I find it not always reliable …
… for adding, moving or replacing
template parts I recommend using the
code view

28. <!-- wp:template-part {
"slug":"sample-area",
"theme":"deseranno22",
"tagName":"general"} /-->
<= template part slug name
<= theme name
<= template part “type”
The syntax for a template part is straight forward

29. Currently there is not a way to lock a template, or template part –
however you can lock individual blocks

30. … any user with admin
rights will be able to
unlock the blocks

31. When a template (or part) has been modified in the editor a
blue dot will show in the file icon
You can revert back to the original theme file by selecting the
“clear customizations” option shown when the three dots are
clicked

32. How is this possible?
• The edits to the templates & parts are
not written to the theme files – they
are saved in the database
• The saved changes override the
theme templates
• If you create a new file template that
doesn’t exist in the theme, then there
is nothing to “clear”

33. … there is even an option to download a copy of a modified
theme (including the changes made in the interface)
But to truly make this theme
“yours” you would need to open
up the files and do some re-
naming…

34. The “Create Block Theme” plugin by the WordPress core team
takes this a quantum leap forward
https://wordpress.org/plugins/create-block-theme/

35. It’s now pretty easy to:
• Start with a FSE theme you like
• Modify it to suit your use case
• Export that modified theme as a
custom theme

36. While you could use any FSE theme as your jumping off point…
https://fullsiteediting.com/block-theme-generator/

37. In many ways creating a custom FSE theme is easier than the
legacy system
• Allowing editing in the interface allows you to see modifications
instantly
• You can build supplemental templates and template parts on the fly
• Many styling options can be set in the editor’s “style” panel
• Code copied from code view of block configurations can be placed
directly into template files
• Easy export of modified theme

38. The specifics of FSE theme structure is a big subject – here are
three very good resources:
• https://fullsiteediting.com/
A comprehensive guide on Full
site Editing including very specific
information on theme
composition
• https://wordpress.tv/?s=nick%20diego
Nick Diego is a WPEngine engineer and
FSE core contributor – any of his
wordpress.tv presentations are well
worth watching
• https://developer.wordpress.org/block-editor/how-to-guides/themes/
the WordPress bible on block editor theming

39. … that being said, here is a quick overview
LEGACY THEME
• All template files are written in PHP
• Header, footer & widget regions are defined in ”includes”
• Functionality is in functions.php
• Styles are in style.css
• Direct customization of theme files is heavily discouraged

40. FSE THEME
• Templates & template parts are HTML files
• PHP files are minimal
• The header & footer are template parts comprised of blocks
• The theme.json file is new and important!
• Direct modification is encouraged
… now the structure has changed

41. “Traditional” files can be very minimal
index.php <= required, but can be virtually empty
functions.php <= required, but can have very limited code
style.css <= required, but can be virtually empty

42. The theme.json file:
• This file in many ways takes over the
duties of the functions.php and
style.css files
• Defines layout, styles, functionality
• But you will still need a functions.php
and style.css file for some things…

43. it is best to start with the
theme.json file ….
but sometimes for finer control
you need to resort to CSS over-
rides & functions inserted via the
functions.php file

44. In full site editing it is perfectly acceptable to:
Use the site editor to arrange your blocks
Change to code view
Copy the generated code
Paste that code into theme files
Save the files in the right place
… and any template, template part or
pattern are yours

45. Most templates are expressed in HTML taken directly from the block
markup:
Templates are in a folder named “templates”:

46. Template Parts are in the “parts” sub-
folder:
Patterns can be saved in the “patterns”
sub-folder:

47. Some good work around plugins:
• Block Visibility — Conditional Visibility Control for the Block Editor
https://wordpress.org/plugins/block-visibility/
allows conditional visibility of blocks based on several parameters
author: Nick Diego
• Layout Grid Block
https://wordpress.org/plugins/layout-grid/
improvement of columns block with 2 breakpoints
author: automatic
• Create Block Theme
https://wordpress.org/plugins/create-block-theme/
extends the theme export function
author: wordpress.org
• The Icon Block
https://wordpress.org/plugins/icon-block/
Icon block with an extendible SVG library
author: Nick Diego

48. Some areas where FSE falls short of “legacy” methods:
• While the columns block and the menu block can trigger responsive behavior by a breakpoint
there is only one set at 600px
• FSE layouts rely heavily on the columns block making the use of advanced CSS methods like
flex-box and CSS grid for responsive position control close to impossible
• The query block does not easily accommodate custom fields
• Non-default templates cannot be assigned based on condition (think category term specific
templates)
• The menu block is inferior to the legacy menu module
• Selective style assignments based on templates is not possible via the editor (but the body
style is still there)
• Drag and drop results are not always reliable

49. Bottom Line: FSE is terrific for most use cases – but not for all

50. … but things continue to evolve

51. Questions?