Mayank Tripathi

WordPress Site Editor, Theme Blocks, and Block Theme Setup

With the introduction of Full Site Editing (FSE) in WordPress, the way we design, build, and manage themes has transformed significantly. The Site Editor, Theme Blocks, and Block Themes are at the heart of this revolution, giving users and developers new, intuitive tools for creating highly customizable websites.

In this blog, we’ll explore these features in depth:

  • What is the Site Editor?
  • What are Theme Blocks?
  • How to set up a Block Theme?

1. The WordPress Site Editor

The Site Editor is part of the Full Site Editing experience introduced in WordPress 5.9. It allows users to build and customize entire websites—headers, footers, archives, and more—without writing any code. The Site Editor brings the flexibility of the Gutenberg Block Editor to site-wide elements, moving WordPress towards a more intuitive, no-code development experience.

Key Features of the Site Editor:

  • Visual Design Interface: You can design site elements directly from the Site Editor with a live preview. It functions similarly to the post/page editor but extends to every part of the site.
  • Global Styles: This feature allows you to control typography, colors, and layout for the entire site from a single location. You can define how buttons, text, links, and other blocks appear globally across the site.
  • Templates and Template Parts: The Site Editor allows you to build templates (for example, the layout of a single blog post) and template parts (such as a reusable header or footer). These templates can be assigned to different parts of your site, giving you complete control over layout and design.
  • Block-Based Structure: Instead of being reliant on theme options and widgets, the Site Editor uses blocks for everything. Whether you’re creating a footer or a blog post, you’ll use blocks to structure content.

2. Theme Blocks

Theme Blocks are specialized blocks that come pre-built within block themes or plugins and are designed for site-wide elements like headers, footers, post templates, and more. They’re a vital part of the Full Site Editing (FSE) experience, allowing users to build and customize the layout of the entire site.

Key Theme Blocks:

  1. Site Logo Block: Displays the site’s logo. It can be customized in terms of size and alignment.
  2. Navigation Block: Handles the site’s menu structure. You can add, remove, and rearrange links to pages, posts, and categories directly in the editor.
  3. Post Title Block: Outputs the title of the current post or page dynamically.
  4. Post Content Block: Displays the post’s content, pulling it dynamically based on the context.
  5. Header and Footer Blocks: Predefined blocks for headers and footers, often used to construct site-wide elements.
  6. Query Loop Block: A powerful block that allows you to display a list of posts, pages, or custom post types dynamically. It is particularly useful for creating blog roll layouts, archives, or custom lists of content.

These blocks make it easy for both developers and users to create and modify layouts without relying on complex PHP templates or custom code.

3. Block Theme Setup

A Block Theme is a new kind of WordPress theme built to work with Full Site Editing. Unlike traditional themes, where PHP template files control different parts of the site, block themes use JSON configuration files and HTML templates built with blocks.

Here’s how to set up a basic block theme:

3.1. Directory Structure

A block theme’s structure is slightly different from classic themes. The basic directory structure looks like this:

theme-folder/
├── style.css
├── theme.json
├── index.php
├── block-templates/
│   ├── index.html
│   ├── single.html
│   └── archive.html
└── block-template-parts/
    ├── header.html
    ├── footer.html
    └── sidebar.html

3.2. Key Files

  • style.css: This file contains the theme’s metadata (like name, description, author), but it is not used to handle styling in block themes as it was in classic themes. Instead, styles are managed through the theme.json file or block styles.
  • theme.json: This is the heart of a block theme’s configuration. It defines the theme’s style settings, layout options, and other customizations, such as color palettes and typography.Example theme.json file:
{
    "version": 2,
    "settings": {
        "color": {
            "palette": [
                {
                    "name": "Primary",
                    "slug": "primary",
                    "color": "#0073aa"
                },
                {
                    "name": "Secondary",
                    "slug": "secondary",
                    "color": "#222222"
                }
            ]
        },
        "typography": {
            "fontSizes": [
                {
                    "name": "Small",
                    "slug": "small",
                    "size": "12px"
                },
                {
                    "name": "Large",
                    "slug": "large",
                    "size": "24px"
                }
            ]
        }
    }
}
  • block-templates/: This directory contains HTML files representing different templates for various parts of the site. Each template corresponds to a specific page or view (e.g., single post, archive page).Example template structure:
    • index.html: The main template for your site.
    • single.html: Template for individual posts.
    • archive.html: Template for archive pages (categories, tags, etc.).
  • block-template-parts/: This folder holds reusable sections of your site, such as headers and footers, that can be used across different templates.Example:
    • header.html: Contains the block structure for the site’s header (e.g., a Site Logo block, Navigation block).
    • footer.html: Contains the block structure for the site’s footer (e.g., social media links, copyright).

3.3. Creating Templates and Template Parts

To create a custom header for your block theme, you would add an header.html file in the block-template-parts/ directory with content like this:

<!-- wp:group -->
<div class="wp-block-group">
    <!-- wp:site-logo /-->
    <!-- wp:navigation /-->
</div>
<!-- /wp:group -->

This would render a header with the site’s logo and navigation menu, all managed through blocks.

3.4. Customizing Global Styles with theme.json

The theme.json file not only defines styles but can also enable or disable specific block features. For example, to enable wide-width images in your theme, you would add this to the theme.json:

{
  "version": 3,
  "settings": {
    "layout": {
      "contentSize": "800px",
      "wideSize": "1200px"
    }
  }
}

This setup allows full control over the styling of your block theme without needing to modify CSS files extensively.

Conclusion

The introduction of the Site Editor, Theme Blocks, and Block Themes has made WordPress more flexible than ever. Whether you’re a seasoned developer or a beginner, you can now build visually stunning, highly customizable websites without diving deep into PHP or custom code.

Thank you for reading through the post… More will be added.

by ~Leaveitblank (Mayank Tripathi)