
Building the Future with Block Themes
WordCamp Buffalo

WordCamp Buffalo

You should already be familiar with how to customize block styles in theme.json
. If not, get up to speed with the global settings and styles documentation.
WordCamp Buffalo

No more index.php
required
Anatomy of a block theme
.
âââ wp-content/
âââ themes/
âââ your-theme/
â âââ patterns/
â â âââ comments.php
â â âââ footer.php
â â âââ hidden-no-results.php
â â âââ posts-list.php
â âââ parts/
â â âââ footer.html
â â âââ header.html
â âââ templates/
â âââ 404.html
â âââ archive.html
â âââ home.html
â âââ index.html
â âââ page.html
â âââ search.html
â âââ single.html
âââ functions.php
âââ screenshot.png
âââ style.css
âââ theme.json
Anatomy of a classic theme
.
âââ wp-content/
âââ themes/
âââ your-theme/
âââ inc/
â âââ template-tags.php
âââ template-parts/
â âââ content/
â â âââ content-single.php
â â âââ content.php
â âââ footer/
â â âââ site-footer.php
â âââ header/
â âââ entry-header.php
â âââ site-header.php
âââ 404.php
âââ archive.php
âââ footer.php
âââ functions.php
âââ header.php
âââ home.php
âââ index.php
âââ page.php
âââ screenshot.png
âââ search.php
âââ single.php
âââ style.css
WordCamp Buffalo

Style Book
WordCamp Buffalo

Alpha support for color picker
theme.json
{
"settings": {
"color": {
"palette": [
{
"color": "#365450b8",
"name": "Base",
"slug": "base"
},
{
"color": "#e9f4f2eb",
"name": "Contrast",
"slug": "contrast"
},
{
"color": "#ffd5d9cc",
"name": "Primary",
"slug": "primary"
}
]
}
},
"version": 2
}
WordCamp Buffalo

Design exploration
WordCamp Buffalo

Custom CSS! đ¤Ż
- Per block and global
- Not ideal for long blocks of CSS
- If writing directly in
theme.json
you have to escape line breaks\n
and quotes with\
“
WP Dev Blog (Justin Tadlock) â Per-block CSS with theme.json
theme.json
{
"styles": {
"blocks": {
"core/post-title": {
"css": "letter-spacing: 1px;"
},
"core/heading": {
"css": "&::before {\n content: 'đ';\n display: inline-block;\n}"
}
}
},
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 2
}
WordCamp Buffalo

Per block custom CSS

WordCamp Buffalo 2023

Shadows (aka box-shadow
) support
Core ships with some default shadow options.
- Natural:
âwpâpresetâshadowânatural: 6px 6px 9px rgba(0, 0, 0, 0.2);
- Deep:
âwpâpresetâshadowâdeep: 12px 12px 50px rgba(0, 0, 0, 0.4);
- Sharp:
âwpâpresetâshadowâsharp: 6px 6px 0px rgba(0, 0, 0, 0.2);
- Outlined:
âwpâpresetâshadowâoutlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);
- Crisp:
âwpâpresetâshadowâcrisp: 6px 6px 0px rgba(0, 0, 0, 1);
WordCamp Buffalo 2023

Register custom shadows
theme.json
{
"settings": {
"shadow": {
"defaultPresets": false,
"presets": [
{
"name": "Weird",
"shadow": "#FFF 0 -1px 4px, #ff0 0 -2px 10px, #ff8000 0 -10px 20px, red 0 -18px 40px, 5px 5px 15px 5px rgba(0,0,0,0)",
"slug": "weird"
}
]
}
},
"version": 2
}
WordCamp Buffalo 2023

position:sticky
support
WordCamp Buffalo 2023

Copy and paste block styles
WordCamp Buffalo 2023

Style variations
WordCamp Buffalo 2023

Minimum height dimensions
WordCamp Buffalo 2023

Thanks!
What are you building?
Have you tried to create a block theme?
Where were the challenges? Did you give up?
This entire presentation was built:
- With blocks and the Site Editor
- Create Block Theme plugin
- Icon Block plugin
WordCamp Buffalo