Create a “mini-app” using Core Gutenberg Blocks and some JavaScript

While it’s tempting to reach out to build a custom block every time you need custom functionality, it may not always be the best decision. Before committing to developing a custom block, it’s essential to evaluate the needs of your website.

Custom blocks can offer flexibility and can provide a precise set of features tailored to your content. They can integrate with your site’s unique design system and provide custom experiences that generic blocks cannot. However, developing custom blocks requires time, expertise, and resources.

You can use the core blocks alongside Gutenberg filters to customize its looks or behavior. You can also use block variations to create a slightly different way of utilizing the same core blocks. Or, if you want to change the look of the core blocks, you could employ block styles to achieve it.

Having said all that, what if your requirements differ from the above? What if you want the flexibility of creating using the block editor, utilizing any color and style you want? But you also need to make that bit of HTML you built behave precisely how you want.

The following is my take on using core blocks with some custom JS sprinkled on them to create a mini-app.

Demo

This is a Stopwatch mini-app that uses some blocks and JavaScript. You can play around with its functionality:

Now, let’s explore how I built this.

The Blocks Used

In this website, I use the Twenty Twenty Four theme.

The above demo uses the following blocks:

1. Group
2. Stack (a variation of the Group block)
3. The Icon Block by Nick Diego (not compulsory but used for aesthetics)
4. Heading
5. Row (a variation of the Group block)
6. Buttons and the Button block

The code for it looks like this (you may copy it to your WordPress site as you wish):

https://gist.github.com/m-muhsin/d20b21c3765e5b913cd39b05a54b89b4

You might notice I have used a few class names. This is so that I can use JavaScript to select those elements.

After adding the above HTML and Block markup into this post, I wanted to add some JS.

While I built the script locally using an enqueued .js file, I wanted to see if I could do it any other way on the website. Thinking about it, lead me to the WPCode plugin, which allows you to add a snippet of code at the place of choice.

The JavaScript

This is the JS I added via a Shortcode using WPCode:

https://gist.github.com/m-muhsin/a685d5bed947020407dc802ecc0ffe4c

That’s about it really!

Some thoughts

This idea that I presented is familiar in the WordPress world. We have used HTML generated using the classic editor coupled with enqueued JavaScript to power up custom experiences for ages.

Also, this idea is excellent for when we need to add Google Analytics scripts, for example. We can have buttons with a certain class name and use a global script to target all those buttons to then add tracking scripts to them.

Hope this small demo and explanation helps anyone out there!