How to change the order of HTML output of a core block?

Question

I want to change the HTML output of the latest-posts block (i.e.: wrap the date inside the post link).

I know I can hook into 'blocks.getSaveElement' and retrieve stuff like the element, blockType and attributes.

But none of this is helpful as this block is rendered in the front-end via php. Is the only way to manipulate the markup to create a custom block and copying the core block files? That seems unintuitive and too much work for swapping two tags. And just writing JS to manipulate the front-end is not an option (might make elements jump around).

Any ideas on how to achieve this in any better way?

Answer 1

The render_block filter works for this - I just tested on a fresh install. However, you'll have to use the final HTML, so it gets a bit ugly.

The following code will copy the first <a> tag and wrap the copy around each <time> tag in the list.

\add_filter('render_block', function($content, $parsed): string {
        // skip other blocks
        if ($parsed['blockName'] !== 'core/latest-posts') {
                return $content;
        }

        // skip latest posts that don't display the date
        if (empty($parsed['attrs']['displayPostDate']) || !$parsed['attrs']['displayPostDate']) {
                return $content;
        }

        $dom = new \DomDocument();
        // parse the HTML, the @ is required because DomDocument
        // doesn't know about HTML5's <time>
        @$dom->loadHTML($content);

        // get each individual post
        foreach ($dom->getElementsByTagName('li') as $entry) {
                $links = $entry->getElementsByTagName('a');
                if ($links->count() === 0) {
                        continue;
                }

                foreach ($entry->getElementsByTagName('time') as $time) {
                        // clone the first <a>
                        $link = $links->item(0)->cloneNode();
                        // wrap the <time> around that <a>
                        $time->parentNode->replaceChild($link, $time);
                        $link->appendChild($time);
                }
        }

        // $dom->saveHTML() returns false on error
        $newContent = $dom->saveHTML();
        if ($newContent !== false) {
            return $newContent;
        }

        return $content;
}, 10, 2);

However, this does not alter the output inside the editor. Since the block is purely rendered in React nowadays, you'd have to use some of the editor filters for that.