New Check out the curated list of the finest design resources I've gathered for you! Take a look →

Building a Custom Code Block Using Advanced Custom Fields in WordPress

ACF Gutenberg

I recently created a custom code block using ACF, which is used to replace the Enlighter - Customizable Syntax Highlighter plugin.

Building a Custom Code Block Using Advanced Custom Fields in WordPress

The block requirements

The custom block should utilize core/code as its inner block.

Optimize CSS and JS since with the custom block, JS and CSS are only registered when the block is utilized.

After completing the build process, I simply use the block, paste the code I want to display, and then add a class to register the language in highlight.js.

Building a Custom Code Block Using Advanced Custom Fields in WordPress
Building a Custom Code Block Using Advanced Custom Fields in WordPress
Building a Custom Code Block Using Advanced Custom Fields in WordPress
Building a Custom Code Block Using Advanced Custom Fields in WordPress

Top Image - My Custom Code Block
Bottom Image - Current Enlighter Block