Magic Block

Description

Magic Block registers a container block with the block editor (WordPress 5+). This block has settings for tag (div, section, etc), ID, classname, and inline style.

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.

Screenshots

  • You can nest magic blocks inside each other to build complex layouts.

Blocks

This plugin provides 1 block.

magicblock/magicblock
Magic Block

Reviews

October 3, 2019
This is the only plugin I can find that allows inline stylings. I needed this in order to use tcpdf with my website. Awesome plugin! Thank you so much.
September 30, 2019
This plug-in is just perfect! It is exactly what I needed for my WordPress theme project. Simple yet very powerful. Not a lot of unnecessary blocks you don't want / need, only container blocks are provided. It does exactly what it says in the description. Gives you full control of layout by providing container blocks that you can style according to your wishes in your stylesheet. You can create several different types of container blocks since you can choose which tag should act as the container. For example, the standard container block is a <div> but if you wish you can change that to a <section> or an <aside> (or some other tag) or even better, for example you can have both a <section> and an <aside> container (or some other tag). So happy with this plug-in! 5 out of 5 stars!
April 12, 2019
Finally something simple for programmers to make Gutenberg useable! Works like a charme... Only usability can be optimized, for example in backend adding some backgroundcolors for better differentiating the nesting levels when you have nested in several levels... and when adding new block there is always an empty block which I don't need when I move existing blocks into the div/section... but that might be default WP behaviour, I have to type some letters and delete the block then... But for the first: Awesome addon 😉 Thanks for development.
Read all 4 reviews

Contributors & Developers

“Magic Block” is open source software. The following people have contributed to this plugin.

Contributors

Translate “Magic Block” into your language.

Interested in development?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.