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
ABBR PLUGIN 1 – before – HTML view

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.
ABBR PLUGIN 2 – highlight acronym select abbreviation command – Gutenberg block view

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.
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
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
ABBR PLUGIN 4 – v1_0 – Gutenberg block abbr HTML plugin tag – Kris Bunda

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
ABBR PLUGIN 4 – v1_0 – Gutenberg block abbr HTML plugin tag – Kris Bunda

Leave a Reply about how this blog changed your life.