Creating a Custom WordPress Gutenberg Block
This post is to document my journey to create a custom WordPress Block.
Flywheel‘s article How to create custom Gutenberg blocks in WordPress recommends using a test environment to safely experiment away from a live site. They recommend Local in order to install WordPress on desktop.
Then, follow the instructions under the section titled “How to manually create custom blocks (in 2 steps).”
You can boil down the process of creating a custom Block Editor block to two steps:
Flywheel – How to create custom Gutenberg blocks in WordPress
1. Create a plugin that calls up your block’s JavaScript.
2. Use a JavaScript file to register your new block and set its attributes.
Resources
- Flywheel: How to create custom Gutenberg blocks in WordPress
- Delicious Brains: How to Create Custom WordPress Editor Blocks in 2020
- WordPress.org: Writing Your First Block Type
- Torque Magazine: Why and How to Create a Gutenberg Block – A Tutorial for Beginners
