{
  "$type": "site.standard.document",
  "bskyPostRef": {
    "cid": "bafyreiaolygj3gsetcuyoky64e4hpkgc6nivn432g2bqyk2cuwiudohauu",
    "uri": "at://did:plc:svkyjirwpd7ts4qgnzoqfcc2/app.bsky.feed.post/3moih3f5gvjoz"
  },
  "coverImage": {
    "$type": "blob",
    "ref": {
      "$link": "bafkreid4pmh3l6cwbox4jwictt2ry5uajz3djzrhya3gz6thd2cayqp4tq"
    },
    "mimeType": "image/png",
    "size": 59162
  },
  "description": "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...",
  "path": "/2024/12/20/hello-world-2/",
  "publishedAt": "2024-12-20T13:20:15.000Z",
  "site": "at://did:plc:svkyjirwpd7ts4qgnzoqfcc2/site.standard.publication/3mhpwfentz6lr",
  "tags": [
    "Code"
  ],
  "textContent": "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. <pre class=\"wp-block-code is-style-html\"> <code> <p>Hello world!</p> </code> </pre> 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 <code> tag if ( $tags->next_tag( [ 'tag_name' => 'code' ], true ) ) { // Add the class to the child <code> 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à!",
  "title": "<! Hello world />",
  "updatedAt": "2024-12-26T18:01:13.000Z"
}