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.
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
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
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.