← All posts

Advanced HTML Block for Gutenberg: DBlocks CodePro with Monaco

gutenberg

DBlocks CodePro is an advanced HTML block for Gutenberg. It swaps the default Custom HTML editor for a Monaco (VS Code) editor docked at the bottom of the block editor, and it keeps the live preview after you reload the page. In this video Marko shows how he uses it to paste SVGs from Figma, add IDs with autocomplete and switch the same block into a syntax-highlighted code snippet.

Why we built CodePro

Marko builds a lot of SVG animations. The usual routine goes like this: copy the SVG from Figma, paste it into WordPress, then open a separate code editor to add an id to the element you want to animate. That means always keeping another editor open next to WordPress. CodePro puts that editor inside WordPress.

Copy the SVG from Figma

In Figma, right-click the frame and choose Copy/Paste as → Copy as SVG. You now have the raw SVG markup on your clipboard, ready to paste into the block editor.

The native HTML block's preview problem

If you paste that SVG into the core Custom HTML block, you can switch to its preview. But once you save and reload the page, the block opens in code view again, not the preview. With a large SVG, the code area also gets cramped and hard to edit.

Live preview that survives reload

Transform the block into CodePro (in the editor it shows up as Advanced Custom HTML, described as "replace the default HTML editor with a more advanced one"). The preview shows right away, and it stays after you reload the page.

Split view: code and preview together

The block toolbar has a Split button:

  1. Click Split to open the code editor docked at the bottom of the screen, with the preview above it.
  2. Click it again to hide the editor. Save the page and the editor stays hidden.
  3. When you need to edit again, click Split.
  4. Format the code so the pasted SVG is readable.

You can also resize the editor area. The sidebar has an Editor Height field in pixels under Settings.

Paste SVG and add IDs with autocomplete

This is the main reason Marko built the block. To make an SVG element an animation target:

  1. Paste the SVG from Figma into the CodePro block.
  2. Place your cursor inside the tag you want to target and start typing id. The editor suggests attributes (id, inputmode, itemid…) as you type.
  3. Add the ID your animation expects.
  4. Save and reload the page.

The animation works straight away and you never opened Sublime or another external editor.

Toggle the block wrapper

In the sidebar, Use Wrapper controls whether CodePro wraps your markup in its own element.

  • On: your code sits inside a block wrapper.
  • Off: the output is only your code. In the video, with the wrapper off, DevTools shows the <svg> sitting directly inside the Column block (wp-block-column), with nothing in between.

Turn the wrapper off when you want clean, native markup and your CSS or JS expects the element in a specific place in the DOM.

Write code from scratch with Emmet

CodePro isn't only for pasting. On an empty block you can type Emmet abbreviations, expand them into full HTML, and watch the live preview update as you write.

Code Snippet variation

The block has a second variation for showing code on the page instead of running it. In the editor it's called Syntax Highlighter, with the description "Display code with syntax highlighting".

  1. Select the block and switch it to the code snippet variation.
  2. The code now renders as a formatted snippet.
  3. On the page, the snippet shows the language label and a copy-code button.

So you pick per block: running code, or code shown as a snippet.

Global settings and themes

Per-block options stay in the sidebar. The shared ones moved to a separate place to keep the sidebar clean. Under Editor Global Settings ("Configure editor theme, font size, and other global settings for all DBlocks instances"), click Open Global Settings. There you can:

  • Set the font size (value in pixels)
  • Turn the copy button on or off
  • Turn the language label on or off
  • Choose a light or dark theme

Because these settings are global, a theme change applies both to the code snippets and to the editor inside Gutenberg.

FAQ

Why does the WordPress Custom HTML block lose its preview after reload? The core block reopens in code view when you reload the editor. CodePro's Advanced Custom HTML block keeps showing the preview after a save and reload, and you open the code only when you click Split.

What code editor does DBlocks CodePro use? It uses the Monaco editor, the one behind VS Code. It's docked at the bottom of the block editor and supports formatting, attribute autocomplete and Emmet abbreviations.

Can I output an SVG without an extra wrapper div? Yes. Turn off Use Wrapper in the block sidebar. The SVG then sits directly inside its parent block, such as a Column.

Can I use CodePro to display code instead of running it? Yes. Switch the block to the code snippet variation (Syntax Highlighter). It shows your code with syntax highlighting, a language label and a copy button.

Where do I change the editor theme and font size? In Editor Global Settings → Open Global Settings. The light/dark theme, font size and the copy/language buttons apply to every CodePro block on the site.

Get DBlocks CodePro → wordpress.org

Related posts