WordPress Plugin: Add Abbreviation Tags from Gutenberg Blocks

posted in: Designer 0

I made a WordPress plugin that I can use from the Gutenberg Blocks Toolbar menu because I’m sick of doing it all manually.

HTML view of how gutenberg block looks without abbr tags around selected acronym

It adds an HTML5 <abbr></abbr> tag around any highlighted text after clicking the “Abbreviation” button.

Gutenberg block when selecting acronym text and clicking "Abbreviation" button in toolbar.

Unfortunately I didn’t get as far as adding functionality to enter the title text for the acronym or abbreviation, it must still be done manually in HTML view. I want to add that functionality in soon though.

HTML view of how gutenberg block looks with abbr tags around selected acronym.

To download and install your copy of the plugin, find it on GitHub here.

ABBR PLUGIN 4 - v1_0 - Gutenberg block abbr HTML plugin tag - Kris Bunda

Here’s what the 2 files look like that make this simple plugin work:

PHP code for a WordPress plugin

I don’t need all the modules in the array to initialize anymore, but left them in as I might want to turn on the functionality that used them again.

Javascript code for a WordPress plugin

Leave a Reply about how this blog changed your life.