Porchy Web Development

Building the click game block (part 2 of 4)

This is to separate out the building of the block and adding it to our scaffold. The front end will not be reactive yet, however it’d be nice to go ahead and add that in to the back end so we can see it in action.

Our block is going to be a little game where you press a circle, then press it again after a certain amount of time.

Video showing the click game in action.

Making a new editor block in the scaffold

  1. Make a copy of a directory in src/blocks
  2. Rename the copied to click-game
  3. Remove the other block directories
  4. In src/blocks/click-game/block.json, fill in the new block data: the name, category and its attributes
  5. In src/blocks/click-game/index.js, fill in the new block settings
  6. In src/blocks/index.js, import our block and add it to the array and remove the others so they’re registered
  7. Make the block! Try to keep the components which will be used in both the editor and on the front end in one place. I’ve put them in the src/blocks/click-game/components directory.

Each click game block uses its own state to see if a user wins or loses. Yes, it could be done in vanilla js quite easily but the point of all this is not the block itself, but adding it to the front end as a React app. You’d do it the same way for a more complicated block.

This method will replace the shortcode + js method that I used to use and is far more flexible and elegant. I expect it will load quicker because we are using WordPress’s built in React package which can be cached – super helpful if we have multiple React apps.

Here’s the diff for this commit adding in the block and this is a link to the state of the repo at this point in time.

Posts on this

Join the newsletter

Subscribe to get the latest content by email.

Powered by ConvertKit. If you give me your email address, you may receive emails from me (JJ) about posts on this site. You can unsubscribe at any time.

Porchy Ltd is a company registered in England, no. 12035925

VAT Registration no. 331196421

Built with WPGraphQL and Gatsby

© 2019 - 2021