10up Gutenberg Training

Overview

The purpose of this project is to help you build and customize (Gutenberg) blocks. This training applies to all engineering disciplines at 10up.

Training Prerequisites

• Basic understanding of WordPress including how themes are structured.
• Understanding of JavaScript fundamentals and ES6+ concepts.
• Basic understanding of React components.

For resources on learning JavaScript and React.js, look through this internal document.

Project Setup

For this training we recommend the usage of 10up-docker for the local environment. To get everything setup on your computer follow these steps here:

1. Create a local WordPress installation with the domain gutenberg-training.test

10updocker create gutenberg-training

2. Clone the gutenberg-lessons repository into the wordpress directory replacing the wp-content folder

cd gutenberg-training-test/wordpress && rm -rf wp-content && git clone git@github.com:10up/gutenberg-lessons.git wp-content

1. Install the dependencies and build the assets

cd npm install && npm run build

4. Activate the tenup-theme in WordPress

10updocker wp theme activate tenup-theme

5. Start watching for file changes that you will make

npm run watch

caution

The tenup-theme build system requires node version 16 in order to build successfully. If you have nvm installed it should auto-detect which version to use.

Also you need to run the steps from within the wp-content folder. Not the Theme.

Lessons

• Lesson 1: Anatomy of a block
• Lesson 2: A Simple CTA block
• Lesson 3: Block Styles
• Lesson 4: Block Patterns
• Lesson 5: Block Variations
• Lesson 6: Inner Blocks / Block Nesting
• Lesson 7: Rich Text Formats
• Lesson 8: Slot Fill
• Lesson 9: Build your own

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.