A demo block plugin for WordCamp Montclair.
This plugin has 5 branches, for each step in my presentation.
The main branch is the initial block, what we get from @wordpress/create-block with a little cleanup.
initial-block- The sketch of the block, get basic HTML structure and styles in place.step-1-type- Add thetypeattribute, set an icon and class name based on the selected typestep-2-rich-text- Add thecontentattribute, which is a RichText component for live preview as you editstep-3-block-supports- Add some configuration to opt-in to some style controls like font size & spacingstep-4-block-controls- Move the type control from the sidebar to the block toolbarstep-5-block-variations- Add block variations for each type, so it's easier to toggle between them
The files in this repo (and in each branch) are only the source files. You will need to build them to try out the plugin yourself. Make sure node & npm are installed first. I also recommend nvm if you work with multiple projects.
$ npm install
$ npm run buildYou'll see a lot of code, ending with webpack 5.73.0 compiled successfully in 1107 ms. You can open up the build folder to see that there are files there.
Note: This is just a plugin, so you'll need to put it inside an existing WordPress environment. If you need to create a local development environment, I recommend wp-env. Here are some docs to get wp-env set up.