About this plugin
PlusMagi Blocks provides a streamlined experience for working with custom content blocks inside WordPress and the block editor.
It adds focused workflows for Mermaid diagrams, description lists, thesaurus entries, and styled tables while keeping the WordPress editing experience intact.
org assets:
- Header banner: assets/banner-1544x500.png and assets/banner-772x250.png
- Plugin icon: assets/icon-256x256.png and assets/icon-128x128.png
Features
- Description List – Create accessible term-and-description groups with semantic <dl>, <dt>, and <dd> output. Add or remove items directly in Gutenberg. Live example
- Mermaid Diagram – Write Mermaid syntax, catch syntax errors, and preview responsive diagrams before publishing. Live example
- PlantUML – Write @startuml markup and publish diagrams rendered by the public PlantUML server, in SVG or PNG. Live example
- Sticky Notes – Add a concise 2 x 3 inch semantic note in yellow, pink, blue, green, orange, or purple. Live example
- SVG – Paste SVG markup, inspect a live image preview, and publish sanitized inline vectors with wide and full alignment support. Live example
- Table Styles – Apply 107 Microsoft Word-inspired designs to the native Gutenberg Table block, including optional Banded Columns. Live example
- Thesaurus – Publish definitions, parts of speech, synonyms, antonyms, and related terms as structured semantic content. Live example
Mermaid Block Placement Guide
- Open a post or page in the WordPress block editor.
- Click + Add block.
- Search for Mermaid or PlusMagi Blocks + Mermaid.
- Insert the Mermaid block.
- Paste Mermaid syntax (for example graph TD\nA-->B ).
- Confirm the live preview in editor.
- Publish and verify diagram rendering on frontend.
Tips:
- Use one Mermaid diagram per block for cleaner editing.
- For long technical articles, split diagrams into multiple Mermaid blocks.
- If preview does not render, check Mermaid syntax first (missing arrows, brackets, keywords).
SVG Block Guide
- Open the block inserter and search for SVG or PlusMagi.
- Insert the PlusMagi – SVG block.
- Paste markup that starts with an <svg> element.
- Confirm the preview in the editor.
- Publish the post or page.
The block renders responsive inline SVG. Scripts, event handlers, and unsafe inline styles are removed before frontend output.
PlantUML Block Guide
- Open the block inserter and search for PlantUML or PlusMagi.
- Insert the PlusMagi – PlantUML block.
- Write markup starting with @startuml (or another PlantUML @start tag).
- Choose SVG or PNG as the output format.
- Confirm the preview in the editor, then publish the post or page.
The block renders the diagram by requesting an image from the public PlantUML server; no local Java/Graphviz installation is required.
Sticky Notes Block Guide
- Open the block inserter and search for Sticky Notes or PlusMagi.
- Insert the PlusMagi – Sticky Notes block.
- Write the note and choose one of six colors in the block settings.
- Publish the post or page.
The block publishes an accessible <aside role="note"> element in a responsive 2 x 3 inch layout. It supports bold, italic, links, text color, font size, line height, font family, weight, style, decoration, and letter case through Gutenberg controls.
Description List Guide
- Open the block inserter and search for Description List or PlusMagi.
- Insert the PlusMagi – Description List block.
- Enter a term and its description.
- Use the block controls to add or remove items.
- Publish the post or page.
Example output:
</dd> </dl>
The block publishes semantic <dl>, <dt>, and <dd> markup for accessible term-and-description content.
Table Style Guide
- Insert or select a standard Gutenberg Table block.
- Open the block settings sidebar and expand Table Design.
- Choose one of the 107 styles.
- Optionally enable Banded Columns.
- Choose None at any time to remove the design without changing table content.
Table Styles extend the native Gutenberg Table block. They do not add a heading to published content.