Building the Future with Block Themes

WordCamp Buffalo

Next Slide

Damon Cook
Damon Cook Avatar

Developer Advocate at WP Engine

WordCamp Buffalo

Next Slide

Beginning

End

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.

Theme organization

Style Book

Alpha support for color picker

Custom CSS

Shadows

position: sticky support

Copy and Paste block styles

Style Variations

Minimum height dimensions

WordCamp Buffalo

Next Slide

Beginning

End

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

Next Slide

Beginning

End

Style Book

Overview of the Style Book in WordPress Site Editor. Dive deeper

WordCamp Buffalo

Next Slide

Beginning

End

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

Next Slide

Beginning

End

Design exploration

Gutenberg experiments – color randomizer with alpha-hexadecimal base (#40988).

WordCamp Buffalo

Next Slide

Beginning

End

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

Next Slide

Beginning

End

Per block custom CSS

Example of assiging custom CSS to the heading block in the Site Editor
Example of assiging custom CSS to the heading block in the Site Editor

WordCamp Buffalo 2023

Next Slide

Beginning

End

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);
Demonstration of using the shadow selector in the Site Editor

WordCamp Buffalo 2023

Next Slide

Beginning

End

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

Next Slide

Beginning

End

position:sticky support

Demonstration of using the new Position Sticky option in the Site Editor

WordCamp Buffalo 2023

Next Slide

Beginning

End

Copy and paste block styles

Demonstration of using Copy Styles and Paste Styles in the block editor

WordCamp Buffalo 2023

Next Slide

Beginning

End

Style variations

Demonstration of how to browse style variations in the Site Editor

WordCamp Buffalo 2023

Next Slide

Beginning

End

Minimum height dimensions

Demonstration of using the min height control to increase Post Content block height

WordCamp Buffalo 2023

Next Slide

Beginning

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:

Building the Future with Block Themes
https://colorfultones.com/building-the-future-with-block-themes/

WordCamp Buffalo

Previous Slide