1

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?

4
  • Have you looked into the render_block filter? Did a quick look through the sources, seems like this is the best option. Though you'd have to manually alter the HTML there.
    – kero
    Nov 25, 2020 at 11:44
  • I tried that as well. It also does return only the attributes which I could also retrieve via the getSaveElement filter. And one does not have access to the inner <li> elements attributes with render_block.
    – Unfu
    Nov 25, 2020 at 12:46
  • Doesn't render_block (the PHP filter) return the entire HTML? Per the source code it should have the $block_content which is the result of the render method of the individual block
    – kero
    Nov 25, 2020 at 12:55
  • Not in this case, it only returns the latest-posts outer block. So there is no way of accessing the inner list elements. Also the "innerHTML" attribute is empty.
    – Unfu
    Nov 25, 2020 at 13:10

1 Answer 1

2

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.

2
  • 1
    Thank you! It does work, but it is indeed ugly. That shouldn't be the way to handle stuff like that, but I didn't find any other "official" way of doing it. It might be easier to use the wp.data import to grab the entries one needs in a custom block.
    – Unfu
    Nov 25, 2020 at 15:22
  • @Unfu I've digged throug the server side code so far and don't think there is a better way. It's been a while since I've worked with the client side filters, but that is out of scope here anyways. And yes, creating a new block is of course always an option - I too have resorted to it when realizing changing core blocks is too troublesome
    – kero
    Nov 25, 2020 at 15:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.