<! Hello world />

I was going to do my first proper post on here, detailing how I got WordPress’ theme.json into my CSS pipeline. I started said post, added a couple of code blocks and well….meh. It just wasn’t very inspiring, monospaced white type on a back background. I had a little look around for some syntax highlighting options. Obviously there are loads and this would be fine. But but but. The point about this blog was to be as WordPress-y as possible. WordPress despite its recent drama is getting really good, I mean it’s always been pretty awesome, but after a couple of wonky years, some brilliant dev focused stuff is happening. So I got to thinking, I wonder if I can do something with Block Variations are something similar. First obviously we need some syntax highlighting, went with the most obvious one Prism.js. And via npm I just installed the most basic setup I could. import 'prismjs'; import 'prismjs/components/prism-markup-templating'; import 'prismjs/components/prism-css'; import 'prismjs/components/prism-php'; import 'prismjs/components/prism-javascript'; And I grabbed some CSS via the Prism repo From there I created some Block Style Variations (seriously someone needs to start differentiating a little more over at WP, Block Styles, Block Variations, Block Patterns, Block Themes, Block Blocks). import { registerBlockVariation, registerBlockStyle } from '@wordpress/blocks'; //Register a block style const styles = [ { name: 'default', label: 'Default', isDefault: true, }, { name: 'html', label: 'HTML', }, { name: 'css', label: 'CSS', }, { name: 'js', label: 'JS' }, { name: 'php', label: 'PHP' } ]; registerBlockStyle("core/code", [...styles]); So now we can tell WordPress what type of Code block this is! This then gives us this markup on the frontend.

  
Hello world!
  

Now we can use the rather excellent but mystifying WP_HTML_Tag_Processor to loop through the blocks, find any instance of the code block and inject a specific class based on our Block Style. This was partly inspired by Mark Wilkinson talking about it. I’ve found it to be a nice way to subtly modify core blocks without the need to build an entirely new one, whether it’s to add a data attribute or, as in this case, a CSS class. function dgwltd_utility_edit_code_markup( $block_content, $block, $instance ) { // create a new instance of the WP_HTML_Tag_Processor class. $tags = new WP_HTML_Tag_Processor( $block_content ); $styles = ['html', 'css', 'js', 'php']; // loop through each code block. while ( $tags->next_tag( [ 'class_name' => 'wp-block-code' ] ) ) { //Find the CSS class $class = $tags->get_attribute('class'); //This returns wp-block-code is-style-html I just want to get the is-style- part $style = str_replace('wp-block-code is-style-', '', $class); // Check if the current tag has children and navigate to the child tag if ( $tags->next_tag( [ 'tag_name' => 'code' ], true ) ) { // Add the class to the child tag $tags->set_attribute( 'class', 'language-' . $style ); } } // save the manipulated HTML back to the block content. $block_content = $tags->get_updated_html(); // return the block content. return $block_content; } add_filter( 'render_block_core/code', 'dgwltd_utility_edit_code_markup', 10, 3 ); Voilà!