Welcome to the course
Local development setup
Understanding Full-Site Editing
-
Full-Site Editing: The Big Picture (6:50)
-
What is Full-Site Editing? (4:02)
-
A developer's view on block themes and the Site Editor (3:07)
-
What is the Site Editor? (5:35)
-
How block themes and the Site Editor work together (2 videos) (6:59)
-
The three theme types: Classic, Hybrid, and Universal (4:44)
-
How are block themes structured? (2 videos) (5:34)
-
What is the Global Settings and Styles feature? (2:59)
-
What is theme.json? (3:22)
-
What is the JSON format? (3:46)
Using the Site Editor
-
Overview of the main features of the Site Editor (1:54)
-
How to access and exit the Site Editor (1:38)
-
Navigate using the interface (2:17)
-
What is the Focus mode? (2:46)
-
Introducing the Responsive View (2:07)
-
Introducing the Zoom Out mode (2:11)
-
How to export changes to the theme with the Create Block Theme plugin (3:29)
-
Site Editor features not compatible with the export feature (2:46)
Understanding Settings
-
What are Settings, why should I use them? (4:05)
-
How does the Settings Interface work? (2 videos) (3:16)
-
What is the Settings Engine, and what does it do? (2:33)
-
How to control Settings using Theme.json (3:32)
-
How to handle Settings according to the theme type (3:17)
-
Introduction to removing customization settings (1:53)
-
Removing settings from all or specific block types (2:52)
-
Removing settings based on post type or user role (4:44)
-
What are Custom Properties? (3:20)
-
Should I use version 3 of theme.json? (2:30)
-
[Exercise] Creating the Bosco Blocks theme starter files (3:01)
-
[Exercise] Enabling all Appearance Tools in Bosco Blocks (2:10)
Implementing Layout Settings
-
What are the Layout Settings? (1:04)
-
How do the Content and Wide Sizes work? (2 videos) (7:54)
-
Implementing the global Content and Wide Sizes
-
Implementing additional Content and Wide Sizes (3:51)
-
Implementing and understanding Block spacing (5:42)
-
Implementing and understanding Root Padding (4:37)
-
[Exercise] Adding Content an Wide Sizes to Bosco Blocks (3:46)
Implementing Color Settings
Implementing Typography Settings
-
What are the Typography Settings? (1:25)
-
How to remove Typography Settings
-
Adding and managing fonts using the Font Library (2:37)
-
Technical implementation of the Font Library (2:58)
-
How to add fonts using theme.json
-
How to add a Font Size selector (3:45)
-
Font Size best practices (2:19)
-
What are Fluid Font Sizes, and why should I use them? (3:33)
-
How to implement Fluid Font Sizes
-
What is appearance (font weight and font style)?
-
Line height
-
Letter spacing
-
Text decoration
-
Letter case
-
Drop cap
-
[Exercise] Adding the Lora font family to Bosco Blocks (2:10)
-
[Exercise] Adding a font size palette to Bosco Blocks (2:45)
Implementing Dimension Settings
Understanding Styles
Implementing Styles
-
Creating base styles (1:19)
-
Creating element styles (2:03)
-
Creating block type styles (3:26)
-
Creating styles for elements in specific blocks
-
Styling hover and other pseudo-classes
-
Border styles
-
Color styles
-
Spacing styles: Margin and padding
-
Typography styles
-
Global Styles Variations (8:10)
-
The What and Why of Section Styles (10:31)
-
Creating a Section Style (10:39)
-
[Exercise] Overview of the next exercises (1:03)
-
[Exercise] Implementing the base styles in Bosco Blocks (2:57)
-
[Exercise] Implementing the element styles in Bosco Blocks (3:08)
-
[Exercise] Implementing the block type styles in Bosco Blocks (1:12)
Styling with CSS
Creating Template Parts
-
Template parts in classic themes (1:30)
-
Template parts in block themes (2:39)
-
Template parts and template part areas (3:42)
-
Header and footer in classic vs block themes (4:10)
-
Creating template parts (1:49)
-
Possible pitfalls when creating template parts (2:10)
-
Template part variations (2:55)
-
[Exercise] Overview of the next exercises (0:23)
-
[Exercise] Implementing the Header and Footer structure (3:08)
-
[Exercise] Implementing the Header and Footer styles (3:56)
Creating Templates & Page Templates
-
Introduction to template creation workflows (0:36)
-
Overview of the Template management interface (3:29)
-
Creating a new Template (2:29)
-
Exporting a template from the Site Editor (1:45)
-
Pitfalls of managing custom templates from the Content Editor (2:05)
-
Creating a custom page template (3:50)
-
[Exercise] Overview of the next exercises (0:21)
-
[Exercise] Implementing the Index structure (2:35)
-
[Exercise] Implementing the Index styles (5:15)
Creating Layouts
-
What you'll learn in this section (0:57)
-
Required foundations for layout building (2:13)
-
Don't make this mistake when building (3:41)
-
Discovering the Group block (1:18)
-
Understanding the Flow and Constrained layouts (3:41)
-
Understanding block width handling in constrained layouts (5:18)
-
Understanding the Row and Stack layouts (1:57)
-
Understanding the Grid layout (11:08)
-
Introduction to Sticky Positioning (1:17)
-
Using Sticky Positioning for sticky header and sticky content sections (4:08)
Creating Block Patterns
-
Introduction to block patterns (3:42)
-
Introduction to Atomic Design (7:13)
-
Overview of the pattern management interface (6:22)
-
The four pattern types (4:40)
-
Pattern sources (3:25)
-
Differences between patterns and template parts (3:09)
-
Creating a new pattern (1:44)
-
Differences between unsynced, synced, partially synced patterns (7:46)
-
Creating partially synced patterns (7:16)
-
Pattern Autoregistration (4:13)
-
Quick reference: Pattern registration options
-
Using Patterns for Internationalization (7:08)
-
Using Patterns for Static Assets (5:42)
Creating Performant Themes
Integrating Post Meta
-
Why you need to register post meta (5:28)
-
How to register post meta (4:36)
-
Displaying and editing post meta using Core blocks (2:45)
-
Limitations of the Block Bindings interface in WordPress 6.7 (4:21)
-
Using block variations to create pre-bound blocks (3:22)
-
Answering common questions about bound blocks (2:31)
Creating Block Child Themes
From Discovery to Launch - Project Architecture
From Discovery to Launch - Curating the Editor Experience
Useful Plugins
