10up Gutenberg Training
The purpose of this project is to help you build and customize (Gutenberg) blocks. This training applies to all engineering disciplines at 10up.
- Basic understanding of WordPress including how themes are structured.
- Basic understanding of React components.
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:
- Create a local WordPress installation with the domain
10updocker create gutenberg-training
- Clone the
gutenberg-lessonsrepository into the
wordpressdirectory replacing the
cd gutenberg-training-test/wordpress && rm -rf wp-content && git clone [email protected]:10up/gutenberg-lessons.git wp-content
- Install the dependencies and build the assets
cd wp-content && npm install && npm run build
- Activate the tenup-theme in WordPress
10updocker wp theme activate tenup-theme
You can now navigate to the editor of your WordPress installation and see the Example Block with the Completed Examples show up in the Block Picker.
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, make sure that you are running your npm commands from the
wp-content folder. Not from the Theme folder.
If you want to have your code automatically compile again and even hot reload directly in the editor when you make any changes you can start the watch mode. Before that works you need to enable the WordPress Debug mode by setting
SCRIPT_DEBUG in your
wp-config.php file to true.
Once that is done you can start the watch mode by running:
npm run watch
The block setup in 10up's wp-scaffold
wp-scaffold theme includes a few helpers that make working with custom blocks easier. For example the block registration happens automatically when you create a new folder with a
block.json file in it inside the
includes/blocks/ directory of the theme.
The registration also takes any block assets that are defined in the
block.json file (
editorStyle) and automatically adds them to the list of entrypoints that get transpiled using 10up-toolkit.
If there is a
markup.php file located inside the same directory as the
block.json, it will automatically get added as the
render_callback and therefore provide a quick way to build dynamic blocks.
- 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
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.