1. Blockity McBlock
Blocks, Oh My!
Evan Mullins
https://github.com/circlecube/evans-block-theme

2. Evan Mullins
WordPress Engineer at Bluehost
focused on building tools for
customers and contributing to
WordPress.
AFK, I love to travel as a digital
nomad with my wife and four
kids – we spent the last year on
a North American tour living
full-time in our truck and 43
foot camper! Pre-COVID, we also
spent two years abroad as an
international house sitting
family!
@circlecube

3. Overview
A look at Block concepts (in less than 10 minutes)
With the recent releases of Gutenberg and Full-Site Editing WordPress is changing at
its core to be block-centric. There are a lot of newer concepts regarding blocks that
can be overwhelming to new users and developers as well as seasoned pros. From a
high level we can see blocks are taking over, let’s dig a bit together to see what it all
means and follow the WordPress block evolution thus far.
We have core blocks, custom blocks, dynamic blocks, reusable blocks, block widgets,
block patterns, block styles, block variations, block templates, block-based themes…
etc. Let’s look at these each with some content and code examples to how to deal
with blocks.
Code examples: https://github.com/circlecube/evans-block-theme

4. The Vision
The Four Phases of Gutenberg
1) ☑ Easier Editing (2018) - Block editor in 5.0
2) ☑ Customization (2022) - FSE in 5.9
3) ☐ Collaboration (2023)
4) ☐ Multi-lingual (Future)

5. What is a block?
A block is a single entity for structuring and interacting with
content. Every paragraph, headline image or video is a block.
They are interoperable and work together to tell a story, but
are distinct and individual units. We have consistent tools
for editing managing, and controlling them.

6. Block Markup
The Syntax
Blocks are saved as actual HTML comments with
attributes and settings in a json format. This allows
the content to be valid html but still contain all the
flexible rich metadata the editor consumes to make it
editable in the editor and also viewable on the site.

8. Core Blocks
Built-in via the Gutenberg Editor
These are the familiar blocks like paragraph, image, quote and
heading as well as some layout blocks like cover blocks and
columns. These are very stable but are still being improved with
every release.

9. Custom Blocks
From Themes or Plugins
Basically anything beyond the core blocks are custom. This
would be any block that you build yourself and many other
blocks found in various plugins or themes.

10. For example, the Jetpack plugin
contains many additional custom
blocks.
https://jetpack.com/support/jetpack-blocks/
Custom Blocks

11. Static Blocks
Simple Content
Blocks with content are generally static blocks. They
are stored as content in the block markup.
For example, a headline or paragraph block stores the
content as an <h3> or <p> tag in the block markup.

12. Dynamic Blocks
Non-Static Blocks
Dynamic blocks connect to the
database to compute and render
content whereas a static block
has content that doesn’t change.
For example, a latest posts block
has dynamic content that
changes.

13. Block Styles
To customize styles via a class name
For alternative styles to be applied to existing blocks.

14. Reusable Blocks
Aren’t they all?
We can save a block (or group of
blocks) with identical content to
be used in multiple placed on a
site. For example, if you have a
blurb at the end of every blog
post, you can include it and
manage the content globally from
one place.

15. InnerBlocks
Nested Blocks
Blocks can be nested within other blocks at multiple (and sometimes
rather complex) levels. We interface with this parent/child relationship
via innerBlocks API. In our render function for example we’ll reference
InnerBlocks to place and render the children of the block.

16. Block Variations
To change attribute or inner blocks
We can set a block variation to get an initial state of a block
(including the attributes or inner blocks). These can display
both as unique blocks or in the block options via scope
property.

17. Block Transforms
Transform from one block type to another
For example, transforming or changing a paragraph block into a heading
block. All blocks can define what blocks they can transform into via the block
controls. The benefit to this is the content and some attributes can be
mapped to the content and attributes of the new block type.

18. Blocks Supports
Opt-in core features
An API that allows a block to declare support for certain
features when registering. With a custom block we can
easily incorporate features that exist on core blocks – like
anchors, color or alignment – by adding the relevant block
supports property.

19. Block Patterns
Explore the Pattern Directory
Predefined block layouts, available from the patterns directory found
in the pattern tab. Once inserted into content, the blocks are ready for
additional or modified content and configuration. Patterns usually
include multiple blocks and styles to achieve a certain look or pattern.

21. Block Template
Setting a block or post type initial state
We can set a default block state dynamically or register a
default for a whole post type. Templates can be declared in
JS or in PHP as an array of blockTypes (block name and
optional attributes). We can also nest blocks here or lock
the template via the `templateLock` property or individual
parts with the lock attribute on individual children.

22. Widget Blocks
Milestone Met – Since 5.8
The classic wordpress widgets were rebuilt to use the same block
system we’ve become used to with the editor. This allows users to add
widgets into post or pages as well as have access to all content blocks
in sidebars. This brought us one step closer to Full Site Editing.

23. Block-Based Themes
twentytwentytwo is a BBT
A theme that takes full advantage of blocks and full site editing
capabilities of WordPress 5.9, requires a theme.json and usually
includes a few templates and/or template parts.

24. Block Templates
Page templates for block themes
A block template is made up of a list of blocks. Any block can be
used in a template.
These are html files rather than the traditional php templates in
standard themes. Templates are designs for pages and can
include one or more template parts.

25. Block Template Parts
Smaller Template Pieces for block themes
Template parts are used to organize a theme in smaller
reusable structural parts. They are commonly used for a
global site header and site footer.
Both templates and template parts contain block markup to
represent blocks and block settings and content.

27. Block Party!
Blocks are here to stay –
understanding them deeply
will pay off,
plus they’re fun!
https://github.com/circlecube/evans-block-theme

28. Thank you!
https://github.com/circlecube/evans-block-theme