About this video

• Video Title: WordPress Block Theme Development
• Channel: Elliott Richmond
• Speakers: Elliott Richmond
• Duration: 00:47:33

Overview

This video provides a comprehensive guide to developing WordPress block themes, focusing on the principles and practical steps involved in creating modern, full-site editable themes. It covers manual theme creation, using the "Create Block Theme" plugin, understanding theme.json settings, managing styles, templates, template parts, and patterns, and leveraging global styles to export a final theme.

Key takeaways

• Introduction to Block Themes: Block themes represent a modern approach to full-site editing in WordPress, simplifying theme development compared to classic themes by using a block-based structure.
• Development Tools: Essential tools include a code editor (like VS Code), a local development environment (using WP-CLI), a browser with developer tools, and potentially database management tools.
• Manual Theme Creation: A basic block theme requires a style.css file, a theme.json file, and essential template/part files (like index.html, header.html, footer.html).
• theme.json Configuration: This file is central to block theme development, controlling global settings, styles, colors, typography, layout dimensions, and more. Using the $schema reference enables auto-completion and validation in code editors.
• Full Site Editing: Activating a block theme enables the Site Editor, allowing users to manage templates, template parts, patterns, and global styles.
• Global Styles vs. theme.json: theme.json provides initial configurations, while global styles (saved in the database) can override these. Individual block settings can further override global styles, establishing a clear order of precedence.
• Managing Colors and Fonts: Custom color palettes and font families (like Roboto) can be defined in theme.json and managed via the Site Editor's "Manage Theme Fonts" and color settings.
• Templates and Template Parts: Understanding how templates (e.g., index.html, page.html) and template parts (e.g., header.html, footer.html) are structured and stored is crucial. Changes made in the Site Editor for these can be saved to the database or exported back to theme files.
• Patterns: Patterns are reusable blocks of content that can be created and saved either to the database or directly within theme files (in a patterns folder) for theme-exclusive use. Dynamically referencing theme assets (like images) within patterns is important.
• Styling Core Blocks: The styling of core blocks (like navigation and paragraphs) can be customized directly within theme.json under the styles.blocks section.
• Exporting Styles: Global Styles can be exported from the Site Editor to automatically generate or update the theme.json file, streamlining development.

To create a functional WordPress block theme manually, you need the following minimum files:

• style.css: This file must contain at least the theme name for WordPress to recognize it as a theme.
• theme.json: This file defines the theme's configuration, settings, and styles. Even a basic structure with a schema reference is necessary.
• index.html: Located in the templates folder, this serves as the main fallback template.
• header.html and footer.html: Located in the parts folder, these define the header and footer template parts.
• index.php: A blank file in the root of the theme folder to prevent direct directory access.

The $schema property in theme.json offers several key benefits to developers:

• Enables Autocompletion: When you include the $schema property pointing to the official WordPress schema URL, code editors (like VS Code) can provide intelligent autocompletion suggestions as you type. This means you get real-time suggestions for valid properties, attributes, and their structure.
• Provides Descriptions: By referencing the schema, hovering over properties in your code editor will display descriptions, explaining what each setting or property does and its purpose.
• Validates Code: The schema acts as a blueprint, allowing the code editor to validate your theme.json file. This helps catch syntax errors or incorrect property usage early in the development process.
• Improves Understanding: The detailed definitions and properties within the schema documentation (linked by the schema URI) provide a comprehensive reference for all available configuration options, aiding in a deeper understanding of the theme.json structure and capabilities.

The hierarchy of style precedence in WordPress block themes, from highest to lowest (meaning the settings that take priority), is as follows:

1. Individual Block Settings: Styles and settings applied directly to a specific block instance within a post or page have the highest precedence. If a user customizes a block's color, padding, or typography directly in the editor, those settings will override any other defined styles for that particular block.

2. Global Styles: These are styles that are applied across the entire site, often managed through the Site Editor's "Styles" interface. Global styles can override the default configurations set in theme.json. For example, if theme.json defines a default button style, but the user sets a different button style in Global Styles, the Global Style will take precedence.

3. theme.json Settings: This file, provided by the theme developer, sets the foundational styles and configurations for the entire site. These are the base styles that are applied unless overridden by Global Styles or individual block settings.

In summary, the order is: Block-specific settings > Global Styles > theme.json settings.

The recommended method for including images in theme patterns to ensure they are dynamically sourced from the theme folder involves a few key steps:

1. Place the Image in the Theme Folder: Store your image file within a dedicated folder inside your theme. A common structure is assets/images/your-image-name.jpg.

2. Use a PHP Function in the Pattern File: When creating your pattern file (e.g., title-banner.php within the patterns folder), you need to reference the image using WordPress's built-in functions that dynamically retrieve theme file URIs.

3. Employ get_theme_file_uri(): Inside your pattern's PHP code, use the get_theme_file_uri() function to generate the correct URL for your image. This function ensures that the path is relative to the active theme's directory, regardless of where the theme is installed.

   Here's an example of how you would use it within your pattern's PHP file:

   <?php
   /**
    * Title: Title Banner
    * Slug: your-theme-text-domain/title-banner
    * Categories: banner, featured
    */
   ?>
   <figure>
       <img
           src="<?php echo esc_url( get_theme_file_uri( 'assets/images/your-image-name.jpg' ) ); ?>"
           alt="Description of the image"
       />
   </figure>
   

4. Use esc_url() for Security: Wrap the get_theme_file_uri() call within esc_url() to sanitize the URL and prevent potential security vulnerabilities.

5. Remove Static IDs: If you've copied code from the Site Editor, make sure to remove any static id attributes from image or container elements that might be tied to the specific site's database rather than the theme's structure.

By using get_theme_file_uri(), you ensure that the image path is always correctly resolved relative to your theme, making your patterns portable and reliable across different WordPress installations.