Welcome to the course
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? (4:28)
-
A quick introduction to using the Site Editor (5:30)
-
How to export changes to the theme with the Create Block Theme plugin (3:29)
-
The three theme types: Classic, Hybrid, and Universal (4:44)
-
How are block themes structured? (5:34)
-
A quick introduction to Global Settings and Styles (or theme.json) (6:21)
-
Technical aspects of theme.json (9:21)
-
Section survey
Creating a Simple Block Theme
-
What you'll learn in this section (1:57)
-
Creating the theme starter files (4:08)
-
Exercise: Creating the theme starter files
-
Creating a minimal Index template (6:19)
-
Exercise: Creating a minimal Index template
-
Block theme development workflow (4:00)
-
Adding Header and Footer template parts (7:35)
-
Exercise: Adding Header and Footer template parts
-
Creating a Site and Content container (5:16)
-
Exercise: Creating a Site and Content container
-
Creating Article containers (5:56)
-
Exercise: Creating Article containers
-
Implementing the Global Typography (6:43)
-
Exercise: Implementing the Global Typography
-
Implementing the Color Palette (3:21)
-
Exercise: Implementing the Color Palette
-
Implementing the Font Size Palette (6:06)
-
Exercise: Implementing the Font Size Palette
-
Implementing default Block Spacing (4:53)
-
Exercise: Implementing default Block Spacing
-
Enabling Margin and Padding controls (1:09)
-
Exercise: Enabling Margin and Padding controls
-
Implementing the Spacing Palette (3:02)
-
Exercise: Implementing the Spacing Palette
-
Implementing the Base Colors (1:33)
-
Exercise: Implementing the Base Colors
-
Enabling the Link Color control (0:51)
-
Exercise: Enabling the Link Color control
-
Styling Elements (6:12)
-
Exercise: Styling Elements
-
Enabling the Border controls (1:02)
-
Exercise: Enabling the Border controls
-
Building out the Header & Footer (8:08)
-
Exercise: Building out the Header & Footer
-
Building out the Content Area (4:18)
-
Exercise: Building out the Content Area
-
Building out the Articles (5:35)
-
Exercise: Building out the Articles
-
Section survey
-
What's next? (0:58)
Understanding Settings
-
What are Settings, why should I use them? (4:05)
-
How does the Settings Interface work? (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)
-
[6.6] Should I use version 3 of theme.json? (2:30)
-
Section survey
Implementing Layout Settings
-
What are the Layout Settings? (1:04)
-
How do the Content and Wide Sizes work? (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)
-
Section survey
Implementing Color Settings
Implementing Typography Settings
-
What are the Typography Settings? (1:25)
-
How to remove Typography Settings
-
[6.6] How to add fonts using the Font Library (8:53)
-
How to add fonts using theme.json
-
Why you should bundle web fonts with the theme
-
[6.6] How to add a Font Size selector (3:45)
-
[6.6] 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
-
Section survey
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)
-
[6.6] The What and Why of Section Styles (10:31)
-
[6.6] Creating a Section Style (10:39)
-
Section survey
Styling with CSS
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)
-
Section survey
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)
-
[6.6] Differences between unsynced, synced, partially synced patterns (7:46)
-
[6.6] 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)
-
Section survey
A small ask
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)
-
Section survey
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)
-
Section survey
Creating Performant Themes
Integrating Custom Data Sources
Creating Block Child Themes
From Discovery to Launch - Project Architecture
From Discovery to Launch - Curating the Editor Experience
Useful Plugins
