WPThumbs
Themes Plugins By purpose By industry Best-of lists Fix it guides
Free Plugin by willdelphia v1.3.0

Magic Block

Registers a container block. It has settings for element, ID, classname, style, and any other attribute.

Magic Block

The facts

Rating
4.9★ from 11
Active installs
300+
Price
Free
Last updated
18 Apr 2021
Added
Dec 2018
Requires WP
5.0
Tested up to
WP 5.7.17
Requires PHP
5.2.4
Downloads
5,651

Our analysis

AI-assisted

Magic Block is a WordPress plugin that registers a container block within the block editor, allowing you to control the HTML structure of your posts. It provides settings for various attributes such as element type, ID, class, and inline styles, enabling the creation of complex layouts like Flexbox and CSS Grid. This plugin is suitable for developers who require detailed control over their post layouts and wish to apply custom styles through their theme’s stylesheets or CSS plugins.

The plugin does not impose any CSS styles, allowing you to define all styling as needed. In the editor, Magic Block visually distinguishes its child elements with a thin grey outline, making it easier to manage and target them with CSS. However, with the introduction of the Group Block in WordPress 5.3, the necessity of this plugin may be reduced for some users.

Best for: This plugin is best for developers looking to customise post layouts in detail.

What it does well

  • Allows full control over post HTML structure
  • Supports various attributes for customization
  • Enables complex layout creation
  • Visual outlines for easy management of child elements

Where it falls short

  • May be redundant for users of the core Group Block
  • Limited information on compatibility with newer WordPress versions beyond 5.7.17

Verdict

Magic Block provides a flexible solution for managing HTML structure in WordPress posts, though its necessity may vary with newer core features.

From the developer

willdelphia's own description of Magic Block, lightly tidied.

Magic Block registers a container block with the block editor. This block has settings for element (div, section, etc), ID, classname, inline style, and any other attribute (including data-*, and aria-*) via a custom attributes section.

Magic Block is designed for people who want full control over post HTML structure, or wish to use the editor to create complex layouts such as Flexbox, CSS Grid, Bootstrap, etc…

This block does not add any CSS styles that you, as a developer, do not provide. Rather, it allows you to easily contain other blocks in parent elements with an arbitrary ID or Class. You may then easily target these container elements by ID or Class in your theme’s stylesheets or through CSS plugins. For smaller customizations there is an inline style field which maps to the “style” HTML attribute for the container element.

In the editor view, each Magic Block has a thin grey outline so you can easily see which child elements belong to it. It also provides a display of element type, ID, and classes so you can keep track of how to target them with your CSS.

As of WordPress 5.3 you might not need this plugin since the core now ships with a “Group Block” which is similar in purpose, although it has fewer options.

Read the full description on the official page →

Tagged as