Introduction to Block Themes

What is Full Site Editing?

Full Site Editing (FSE) is WordPress's modern approach to theme development. Instead of PHP templates, you use blocks to build every part of your site.

Block Themes vs Classic Themes

Block Theme Requirements

A minimal block theme needs:

my-theme/
├── style.css           # Theme metadata
├── theme.json         # Configuration
├── templates/
│   └── index.html     # Fallback template
└── parts/
    └── header.html    # Template part

Required: style.css Header

/*
Theme Name: My Block Theme
Theme URI: https://example.com/my-theme
Author: Your Name
Author URI: https://example.com
Description: A modern block theme.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-block-theme
*/

Required: templates/index.html

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->

<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
    <!-- wp:query -->
    <div class="wp-block-query">
        <!-- wp:post-template -->
            <!-- wp:post-title {"isLink":true} /-->
            <!-- wp:post-excerpt /-->
        <!-- /wp:post-template -->
        <!-- wp:query-pagination /-->
    </div>
    <!-- /wp:query -->
</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

The Site Editor

Access via Appearance → Editor (or Site Editor).

Editor Capabilities

• Edit any template
• Create new templates
• Modify template parts
• Adjust global styles
• Create and edit patterns
• Preview on different devices

Template Hierarchy in FSE

Block themes follow the same hierarchy as classic themes:

Converting a Classic Theme

Steps to convert:

1. Create templates/index.html
2. Move header to parts/header.html
3. Move footer to parts/footer.html
4. Add theme.json configuration
5. Convert custom PHP to blocks

Your First Block Theme

Let's create a basic block theme structure:

# Create theme directory
mkdir -p wp-content/themes/my-block-theme/{templates,parts,patterns,styles}

# Create required files
touch wp-content/themes/my-block-theme/{style.css,theme.json,functions.php}
touch wp-content/themes/my-block-theme/templates/{index.html,single.html,page.html,404.html}
touch wp-content/themes/my-block-theme/parts/{header.html,footer.html}

Next Steps

In the next lesson, we'll dive deep into theme.json configuration.