This plugin provides an example environment for building WordPress blocks. Developers looking to create their own blocks are free to duplicate this plugin's file structure, as well as the webpack and babel implementation, so they can get started on their block code right away.
Inside this plugin, I've included two example blocks, both of which have files brimming with helpful comments. These will detail the important parts of each block's coding and configuration. To get the most out of these files, I recommend exploring ES6 and React (see Recomended Books and Courses).
-
Each folder in this repository is a plugin. After you pull this repo, drag the
block-environemntfolder your local WordPress environment'swp-content/pluginsfolder. -
Activate the plugin in your WordPress Dashboard. This will do the following
- Enable the Presentation block for the Block Editor
- Enable the Fortune Display theme block for the Full Site Editor.
- For this block to work properly, you will also need to drag the
fortune-postfolder intowp-content/plugins, and activate that plugin in the WordPress Dashboard. Your theme will also need to be compatible with the Full-Site Editor (see Important WordPress Documentation section).
- For this block to work properly, you will also need to drag the
-
To make edits to these blocks, or to create your own, you will need to do the following.
- Install node.js if you haven't already.
- In your CLI of choice, run
npm installat the root of theblock-environemntfolder (make sure you do this after it's in your WordPress environment'swp-content/pluginsfolder). - When you're working on edits to these examples or coding your own blocks, run
npx webpack -w. This will fire webpack in watch mode, transpiling all of the code imported byfrontend.jsandbackend.jsin each block's directory. Otherwise, your code will not work in the browser.
Located in /blocks/presentation
The Presentation block allows the author to specify a title, description, and whether the block is featured.
Located in /blocks/fortune-display
This block is meant for use as part of a Full-Site Editor theme. Once placed in a theme template, it will display a random fortune from the site's collection of Fortune custom posts. (Make sure you activate the fortune-post plugin before you use this block. See item 2 of the Setup section).
I encourage you to use this environment to build your own blocks. Observe the directory structure for each block in the /blocks folder of the block-environment plugin. When you create your own block, simply include a new folder for your own block, and follow the structure of the examples. See how all the example files function, and include similar files for your blocks.
As long as you include the import code in your block's frontend.js and backend.js files, this plugin's webpack script will know what code to transpile, so that your block can run in the browser. To fire this script, you must use a CLI to go to the root folder of the block-environemnt plugin, and use the following command: npx webpack -w. This will run webpack in watch mode, so you can continue to code and test it in the browser. (Be sure to fire the npm install command in block-environment folder if you have not already done so).
-
Full site editing for theme developers, course by Carolina Nymark
-
"A Deep Introduction to WordPress Block Themes", tutorial by Ganesh Dahal
To take advantage of WordPress Blocks, you will need some familiarity with ES6 and React. I personally found the following sources helpful.