The latest posts block does not show dynamic blocks.

herregroen commented 3 years ago

Description

The latest posts block does not render dynamic blocks when choosing to show the full post content.

This is especially jarring when you have posts whose content is entirely or primarily made up out of dynamic blocks, leading to a preview of no content.

Step-by-step reproduction instructions

Have a most recent post whose entire content is generated by dynamic blocks.
Add a latest posts block to another post and set it to show the full post content.
See nothing.

Expected behaviour

I expected to see the full post content.

Actual behaviour

I see nothing.

Code snippet (optional)

The content is rendered here: https://github.com/WordPress/gutenberg/blob/master/packages/block-library/src/latest-posts/index.php#L147

the_content filter should be applied here, although recursion of latest-posts blocks should be taken into account.

WordPress information

WordPress version: 5.6
Gutenberg version: Both 9.8.2 and not installed.
Are all plugins except Gutenberg deactivated? No
Are you using a default theme (e.g. Twenty Twenty-One)? Yes

Device information

Device: Desktop
Operating system: OSX
Browser: Chrome

CosmikCarrot commented 3 years ago

Following for update on fix.

paaljoachim commented 3 years ago

Nik @ntsekouras can you take a look?

ndiego commented 3 years ago

Adding some additional info to this. When the Latest Posts block is set to show the "Full post", it does not actually render blocks on the frontend, hence the reason why dynamic blocks do not appear. If you look at the frontend markup, you will see all the block code, which is just rendered as HTML comments. See the screenshot below.

vijayhardaha commented 2 years ago

I debugged it so I found the same reason described by @ndiego above.

Right one current code for full content it like this:

$list_items_markup .= sprintf(
        '<div class="wp-block-latest-posts__post-full-content">%1$s</div>',
        $post_content
);

But if I render the post content using the_content filter, every thing is fine frontend but not in backend.

$post_content = apply_filters( 'the_content', str_replace( ']]>', ']]&gt;', $post_content ) );

$list_items_markup .= sprintf(
        '<div class="wp-block-latest-posts__post-full-content">%1$s</div>',
        $post_content
);

WP Block Editor produces the same issue as it has similar code.

Also checking the edit.js for the latest posts, the raw content is being set. that should be rendered If I am not making any mistake understanding it.

{
    displayPostContent && displayPostContentRadio === "full_post" && (
        <div
            className="wp-block-latest-posts__post-full-content"
            dangerouslySetInnerHTML={{
                __html: post.content.raw.trim(),
            }}
        />
    );
}

vijayhardaha commented 2 years ago

Update

I am working on this issue, my above-proposed solution seems to work fine so far. If anyone finds any issue with those changes please let me know.

New bug

I have discovered a small problem while working on this issue.

Steps for the new issue.

Create only 2 posts on the website, there should not be more than that.
Then create a new page and use the latest posts block.
Then switch from list to grid view(Default columns is 3 right now leave it as it is)
Then change the posts per page settings to 2
Then try to change the value of the columns using the slider or using up/down button in input.

You can't change it since min is set to 2 and max is dynamically set to posts max length. If you'll type the value 1 in input then it will change and fallback to 2

It's so much to notice but some new users may find it problematic for them if they end in a similar situation when posts per page is 2

I tried to solve it by using useEffect but I think that could be better way to handle this small thing. This is what I used.

useEffect(() => {
    const maxPossibleColumns = !hasPosts ? columns : Math.max(2, Math.min(columns, latestPosts.length));
    if (postLayout === "grid") {
        setAttributes({
            columns: maxPossibleColumns,
        });
    }
}, [postLayout]);

So when columns=3 by default and postsLength=2 so we take minimum value then also set a fallback for when columns=1 so we take maximum between 2 and what we got from previous Min.

WordPress / gutenberg