Adding Blocks With Animated Backgrounds Using WebArea’s Latest Plugin

As always, I like to highlight some things on the lighter side of the WordPress world. We have had enough business acquisitions in the past week — the whole year, really — that we need to take a break and enjoy the more experimental developments that the community has to offer.

Such as the case with WebArea’s latest plugin, Background Animation Blocks. It is a collection of six blocks with different animated effects.

I am obsessed with all things space and night-sky related, so I was immediately drawn to the Stars block. It has an animated background of simple dots floating in the background. It is also the most advanced animation, following the mouse cursor of the end-user.

The Stars block has a size, scale, and color setting for the background effect. Each of the other blocks has unique options, depending on what it does. Some, such as Bubbles and Gradient, allow the end-user to control the animation speed. Others have multiple color inputs.

In total, the plugin provides six individual blocks with unique animation effects for the background. Effectively, they behave like the Group block, serving as a simple container.

• 

• 

• 

• 

• 

• 

Each of the blocks supports both wide and full alignment. They allow users to control the text and background colors. And, any other block can be placed inside of them, just like you would expect from the core Group or Container blocks.

They do not support some of the newer layout features from the Gutenberg plugin that other container-type blocks have. There is no need yet because those features have not landed in WordPress, but it is something to watch out for in the future. It is easy enough to wrap these animated blocks inside of another Group block for those features, though. However, I prefer not to put the burden of nesting on the end-user if possible.

There are some downsides to the approach the plugin developer took. The animated backgrounds could have been tacked onto the existing Group or Cover blocks for WordPress, essentially behaving as a settings extension. An alternative route would have also been to create a single “Animated Container” block and allow the user to choose the specific background effect. With this method, the plugin author could have used the variations API to make each of the animations searchable and appear via the block inserter.

However, the individual block route has been done before. Automattic took the same approach via its Starscape and Waves blocks. They are simply shipped as separate plugins instead of bundled as a collection. I prefer this solution because it allows users to pick and choose only the blocks they want. Assuming the library of animated blocks grows in future versions of the plugin, it could become overkill.

The second issue is the plugin does not make use of the theme color palette in some instances. It uses the standard text and background color options for its blocks, but any custom setting only displays a color picker. For those who want to use a theme-defined color in those cases, they must know the hex code. Or, simply eyeball it to get it close enough.

Despite what are, at best, trivial issues, the plugin was fun to tinker with. The blocks do not have to be relegated to the zanier side of WordPress. It is easy enough to adjust their settings for more subtle effects that could work for business-related or other types of sites.