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

admin管理员组

文章数量:1314229

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?

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?

• filters
• hooks
• block-editor

Share Improve this question asked Nov 25, 2020 at 11:09 UnfuUnfu 4311 silver badge44 bronze badges 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 Commented 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 Commented 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 Commented 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 Commented Nov 25, 2020 at 13:10

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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.

本文标签： filtersHow to change the order of HTML output of a core block