A word counter for Gutenberg blocks

One of the main goals of – albeit slowly – setting up this blog, is writing more. And I also want to keep track of the length of the posts I make (I’d love to be able to call them articles one time 😉).

That’s why I implemented a word counter today, that displays the words you’ve written, in the editor, as you type. I based the functionality on the code found here. It didn’t work anymore, but after some research I managed to make it work again.

Turns out the Gutenberg editor (aka Block editor) is often running in an iframe. Which makes it a tiny bit harder to access the blocks in the editor with javascript.

Screenshot of the editor with the counter in the top right displaying: 34 words.
Screenshot of the Block editor with the counter in the top right displaying: 34 words.

Download the WordPress plugin

You can find the WordPress plugin here on Github.

What’s next?

I want to improve this functionality with a post-wide counter that displays the total amount of words over every block in the post.

Comments

Leave a Reply