Skip to content

index.md

Latest commit

 

History

History
138 lines (95 loc) · 5.86 KB

index.md

File metadata and controls

138 lines (95 loc) · 5.86 KB
sidebar_position sidebar_label description keywords
3
Block Based Themes
Introduction to the Block-Based Themes training course.
gutenberg
wordpress block editor
training
course
fse
full site editing
block-based-themes
theme.json

10up Block Based Themes Training

Overview

This training course will walk you through the building of a block-based WordPress theme. By the end, you'll have transformed the 10up Block Theme into a fully functional movie database theme, complete with custom post types, block bindings, editor controls, and interactive blocks.

If you're new to blocks entirely, we recommend starting with our Building Blocks training course first.

Prerequisites

  • Node.js (>=20.0.0) and npm (>=9.0.0)
  • PHP (>=8.3)
  • Composer
  • MySQL (8+)
  • Git
  • A code editor
  • Basic familiarity with the command line

Getting started

1. Create a LocalWP site

You can certainly do this course using your development environment of choice, but we recommend LocalWP and have outlined the steps necessary to get started with it below.

Create a site
Create a new site
What's your site's name?
Block Based Theme Training
Advanced options > Local site domain: block-based-theme-training.local
Choose your environment
Custom
PHP version: 8.3.x
Web server: nginx
Database: MYSQL 8+
Set up WordPress
Username: admin
Password: password
Email: example@example.com
Is this a WordPress Multisite? No

2. Clone the repository

https://github.com/10up/block-based-theme-training

Open your terminal and navigate to ~/Local Sites/block-based-theme-training/app/public, or from the LocalWP dashboard screen for the site select Site shell.

rm -rf wp-content

git clone git@github.com:10up/block-based-theme-training.git wp-content

cd wp-content

nvm use && npm install && npm run build && composer install

cd mu-plugins/10up-plugin && composer install

cd ../..

cd themes/10up-block-theme && composer install

cd ../..

:::info Going forward, please work from the wp-content folder when executing commands such as npm run build. The course will later provide additional instructions under the assumption your terminal is in that directory. :::

3. Configure wp-config.php

Add the following constants to your wp-config.php:

define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true );
define( 'WP_DEBUG_DISPLAY', false );
define( 'SCRIPT_DEBUG', true );
define( 'WP_DEVELOPMENT_MODE', 'all' );

4. Activate the theme

Log in to wp-admin, go to Appearance > Themes, and activate the 10up Block Theme.

At any time, you may also activate the Fueled Movies theme to see the finished product of this training course.

Content Import

Once your site is set up, import the sample movie and person content. Open the Site Shell from the LocalWP dashboard for your site and run the following. The default import will add 30 movies and a approximately 90 persons. Alternatively, you can choose to import only your favorite films and their stars using the id found in the URL of an IMDB entry (e.g. - tt0094721).

# Recommended default, imports 30 movies and 3 members of their cast.
wp fueled-movies import

# Import only your favorite movies and their stars via the IMDB ID as found in their URL.
# e.g. https://www.imdb.com/title/tt0094721
# These should be movie ID's (not TV shows) as a comma seperated list.
wp fueled-movies import --ids=tt0094721,tt0910970,tt0068646

# Preview without creating posts
wp fueled-movies import --dry-run

# Override default star limit (default: 3 per movie)
wp fueled-movies import --ids=tt0094721 --star-limit=5

What you should see

Visit the frontend at block-based-theme-training.local, you should see the following.

Screenshot of the 10up Block Theme added to a new LocalWP site

To ensure our content has imported, visit block-based-theme-training.local/movies and block-based-theme-training.local/people.

Screenshot of the Movies archive page Screenshot of the People archive page

Lessons

  1. Anatomy of a Block Based Theme
  2. Orientation: The 10up Block Theme
  3. The Site Editor
  4. theme.json: Design Tokens and Settings
  5. Styles: CSS Architecture and Style Variations
  6. Render Filters and Block Styles
  7. Understanding the Content Model
  8. Editor Controls for Post Meta
  9. Archive Templates and the Card Pattern
  10. Block Bindings and Single Templates
  11. Block Extensions: Extending Core Blocks
  12. Custom Blocks: Description Lists and Movie Runtime
  13. Interactivity API: Rate a Movie

Support

If you run into issues with this training project, feel free to reach out in Slack to #10up-gutenberg. We also welcome bug reports, suggestions and contributions via the Issues & Discussions tab on GitHub.