Universal Box (WordPress plugin)

Universal box logo

Universal Box

Advanced layout and content block for the WordPress block editor, with support for background colour, background image, colour schemes, margin, padding, width, alignment and more.

Screenshot of Universal Box in use in the WordPress editor
Block control preview

This post demonstrates the use of Universal Box.

See Portfolio Entry

A powerful and flexible block

Universal Box is an advanced block for the WordPress block editor (Gutenberg), with powerful controls to manipulate size, positioning and look. It provides many features that Gutenberg still lacks or or is only just getting, more than three years after its debut, including margin, padding, width presets, background images, flex-box capabilities and more. It can be used for everything from floating text boxes to entire layouts, and many settings can be responsive to different screen sizes. It can be configured (to some extent) to use the utility classes of existing CSS frameworks like Bootstrap.

Modern architecture demonstration

This project was developed for private purposes initially, but is offered publicly as a proof-of-concept of how to create a modern, DRY WordPress block using a shared component framework based on React hooks and function based components.

This is version 3.0 of Universal Box, an enormous effort to rebuild it from the ground up with modern design architecture based on React hooks and function-based components. I also wanted to create a framework with components, attributes and helper functions that could be utilized by multiple blocks. Although this project currently only contains a single block, it is based on a prototype for such a system.

UB is part of a family of blocks called Blocky Blocks that also includes a slideshow block and ‘post preview’ block. These blocks and some advanced features have not been ported yet.

Some features of Universal Box

Alignment

Left, right, centre, wide, full

Spacing

Margin, padding and gutter

Width

Presets and custom width

Background

Colour, image and image colour overlay

Theme

Foreground and background presets

Custom CSS and classes

For both inner and outer block

Text alignment

Left, right, centre, justify

Width

Presets and custom width

Flex box

Dynamic block positioning and sizing

Example of responsive settings panel.

Responsive settings

Settings like margin, padding and width can be configured for different screen sizes. By default, settings apply to all screens, but UB supports break points for mobile, tablet and desktop. Rules apply to all screen sizes up to and including the selected screen. The break point values can be configured.

Configurable class names

WordPress uses hard coded class names, which makes using non-WP CSS frameworks like Bootstrap, Bulma or Foundation difficult. The block editor and various functions that produce HTML cannot be configured to use different class names. Universal Box is aiming to be highly configurable to avoid this problem. It comes pre-configured to use utility classes for margin and padding from Bootstrap 5 or from a built-in scheme. Extending this is on the roadmap.

Architecture

Block composition illustration

To accomplish its more advanced features, like flex-box alignments and precision margin/padding control, Universal Box is composed of an outer and inner HTML element. In effect, settings that modify a UB’s relationship to other blocks are applied to the outer element, while settings that modify its children or its appearance are applied to the inner block.

Outer block: Controls external positioning vis-a-vis adjacent elements. Specifically, margin, alignment and width.

Inner block: Controls the visible parts of the block, internal behaviour/layouts, and styling, including padding and background

Margins are simulated and applied as padding to the outer box, while actual padding as well as any background styles are applied to the inner block.

Example block HTML output

<div class="bb-box alignright bb-block-e10vmj width-large">
  <div class="bb-box-inner background-colour has-cyan-bluish-gray-background-color background-padding">
    Block content
  </div>
</div>

Explore the source code

This project is hosted on Github.

Background Effects

Have fun with the background - try different colours and blend modes.