These are my notes based on my contributing experience for the BlaBlaBlocks Formats plugin. The original concept of the plugin is a result of the bright minds at Lubus including Ajit Bohra and Punit Verma. It was a great opportunity to collaborate with them, learn and see this wonderful plugin get listed on the WP.org repository!

Blocks vs Rich formats

Most of the awesome creations from Lubus come out of explorations, or out of client requirements that can be widely reused. One such concept that came to Ajit’s mind was – Client landing pages often require rich text effects. While everyone is busy building block plugins, the Rich Text API was found to be more suitable. We also took a leaf from how the core editor was already using the Format Library , giving us clues on the best way to extend it with more features.

The idea – Extend the core format library with some custom special effects of our own. Over a period of time create a library of them within the BlaBlaBlocks Formats plugin. The editing UI is simple and appears at the most logical place – the formating toolbar under the More arrow:

What happens when we select text, and apply the custom format, is interesting!

Magic of Web Components

The format library and Rich text API wrap the selected text with a custom tag, and attributes, which is then manipulated by CSS to render additional effects. The formats we added had to do some more heavy lifting than vanilla CSS. Here is where the magic of Web Components come in! Before working on this project, I had no clue of its existence. I was able to learn and implement it on a wonderful use case here!

Web Components reduce dependency on any external libraries, and importantly, with its shadow DOM helps encapsulate the styles as well as scripts for each instance of the custom format. In simple words, Web Components helped us deliver custom styles and animation by purely using custom HTML elements + attributes, that are ultimately rendered as the rich text with the required effects we need.

Our objective was to keep external dependencies to a minimum, however, for the floating tooltip ( infotip ) , we avoided reinventing the wheel for complex positional calculations, and used the FloatingUI library.

Overall

It feels very nice to see the plugin listed on the WordPress.org repository. Do give it a spin and leave any feedback you may have! I had a lot of fun and learning working on it, and hope to participate in adding more useful features on it!