Transcript
In this lesson we’ll provide an overview of WordPress block theme terms and hierarchy. The learning outcomes for this lesson are to differentiate between posts and pages and to gain a clear understanding of the components and hierarchy within a block theme.
Architecture: Pages versus posts
In block themes, everything is built with blocks, but WordPress still uses two main types of content: pages and posts. Understanding the difference between these is key to organizing your website effectively.
- Pages are static, timeless content that remains consistent over time. Since they are made solely of blocks, you may easily construct different layouts for each page as needed.
- Posts on the other hand are dynamic content typically used for blogs or news updates. Posts are time-based entries displayed in reverse chronological order, so the newest posts appear first. Posts may be fully customized with blocks and can be organized using categories and tags for easy navigation and organization.
Block theme hierarchy
Understanding the WordPress block theme hierarchy is crucial for knowing how block themes are structured and how you’ll work with them as a designer. Examining each level of the hierarchy, from the smallest to the largest, will give us a clear picture of how these components fit together to create a complete WordPress site. The block theme hierarchy from smallest to largest is:
- Blocks
- Block Patterns
- Template Parts
- Templates
- Theme
Blocks
Let’s begin with the foundational element, the block. Blocks are the fundamental building units in WordPress block themes. They represent individual content elements like paragraphs, images, buttons, or parent containers like columns, groups and galleries.
Patterns
Patterns are pre-designed arrangements of blocks that can be easily inserted and customized. They are reusable designs that you can add to your pages or posts.
Template parts
Template parts are editable, reusable sections of a website and are primarily used for structural elements with specific semantic meanings. They typically represent areas like headers, footers, and sidebars. They’re built with blocks and can be customized in the Site Editor.
Templates
On the other hand, templates define the overall structure of different page and post types on your WordPress site. They are fully customizable using blocks and incorporate template parts. Templates determine the layout for specific content types like pages, single posts, archives, etc.
Theme
Lastly, a block theme is the overarching design framework for your entire WordPress site. It defines the overall look, feel, and behavior of your website. Themes include all templates, template parts, block patterns, and Styles.
Flexibility
Block themes’ hierarchy offers flexibility and makes customizing the design easier. You can create and customize at any level through the Site Editor, from individual blocks to entire themes.
For example, design your basic content elements like text styles, buttons, and image layouts. Consider how these blocks will work together to create a consistent visual language. Then, create patterns by combining blocks into reusable layouts for common content sections such as testimonials, call-to-action areas, or product showcases. These patterns will save time and ensure consistency in your designs. Next, develop header and footer template parts that reflect your brand and provide consistent navigation throughout the site.
Conclusion
Understanding WordPress block themes hierarchy can help you plan and implement your designs. You’ll see how each component fits into the larger picture and how to use the Site Editor to customize your theme.