Post excerpt block prints code in the editor and is empty on the front

[carolinan]

Description

When a block theme is active, the post excerpt block prints code, not a summary of the post content, in the editor.
On the front, the markup for the block is printed as expected, except, the block is empty.

I have not been able to reproduce this with classic themes. I recommend further testing, I did not test in the template editor or site editor.

Step-by-step reproduction instructions

1. Activate a block theme like TT1 blocks or Empty Theme.
2. Create a new post and add some content to it
3. Add a post excerpt block.
4. See that the post excerpt block prints the CSS. This step is not always reproduceable, sometimes, the page first needs to be reloaded for the code to display.
5. Save and view the front. Check both the single post and an archive page that includes the post.
6. Confirm that the block is empty on the front.

Expected behaviour

I expect an excerpt to be displayed.

Actual behaviour

The post excerpt block prints the CSS.

Screenshots or screen recording (optional)

TT1 blocks, editor:

Code snippet (optional)

There are no JS errors in the console in the editor, but this is the markup for the post excerpt block, note the CSS after the "Sample paragraph inside group block"

<div class="block-editor-block-list__block wp-block wp-block-post-excerpt" id="block-3c1f8bf5-de86-4970-ad47-1d10844faf1b" tabindex="0" role="group" aria-label="Block: Post Excerpt" data-block="3c1f8bf5-de86-4970-ad47-1d10844faf1b" data-type="core/post-excerpt" data-title="Post Excerpt"><div role="textbox" aria-multiline="true" aria-label="Post excerpt text" class="block-editor-rich-text__editable rich-text" contenteditable="true" style="white-space: pre-wrap; min-width: 1px;">
Sample paragraph inside group block. .wp-container-60de8a565cc8e &gt; * {max-width: 610px;margin-left: auto !important;margin-right: auto !important;}.wp-container-60de8a565cc8e &gt; .alignwide { max-width: 1240px;}.wp-container-60de8a565cc8e .alignfull { max-width: none; }.wp-container-60de8a565cc8e .alignleft { float: left; margin-right: 2em; }.wp-container-60de8a565cc8e .alignright { float: right; margin-left: 2em; }
</div><p class="wp-block-post-excerpt__more-text"><a role="textbox" aria-multiline="true" aria-label="&quot;Read more&quot; link text" class="block-editor-rich-text__editable wp-block-post-excerpt__more-link rich-text" contenteditable="true" style="white-space: pre-wrap; min-width: 1px;"><span data-rich-text-placeholder="Add &quot;read more&quot; link text" contenteditable="false" style="pointer-events:none;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;"></span></a></p></div>

Resulting markup on the front:

<div class="wp-container-60de8b64dfbef entry-content wp-block-post-content"><div class="wp-block-post-excerpt"><p class="wp-block-post-excerpt__excerpt"></p><p class="wp-block-post-excerpt__more-text"></p></div>
<div class="wp-container-60de8b64dfb0b wp-block-group">
<p class="has-text-align-center has-white-background-color has-background">Sample paragraph inside group block.</p>
</div>
<style>.wp-container-60de8b64dfb0b > * {max-width: 610px;margin-left: auto !important;margin-right: auto !important;}.wp-container-60de8b64dfb0b > .alignwide { max-width: 1240px;}.wp-container-60de8b64dfb0b .alignfull { max-width: none; }.wp-container-60de8b64dfb0b .alignleft { float: left; margin-right: 2em; }.wp-container-60de8b64dfb0b .alignright { float: right; margin-left: 2em; }</style>


<p></p>
</div>

WordPress information

• WordPress version: 5.7.2. -Not tested with 5.8 RC
• Gutenberg version: 10.9.1 and current trunk
• Are all plugins except Gutenberg deactivated? Yes
• Are you using a default theme (e.g. Twenty Twenty-One)? TT1 blocks, empty theme

Device information

• Device: Desktop
• Operating system: Windows 10
• Browser: Chrome 91.0.4472.124

[carolinan]

I was able to reproduce this with Twenty Twenty-One with the excerpt that is in the default query loop.

[ntsekouras]

I investigated this but with no clear solution for now. I'll leave here some of my finding if they are helpful for others more familiar with filters and core.

In order to reproduce this you need to have style tags inside you post content. This happens easier with block themes as in blocks with layout support like Group, if you set some widths it will append style tags in it.

You also need to have not set the excerpt explicitly. This needs to come from WP as it tries to get some excerpt from content.

It seems that wp_trim_excerpt is not effective somehow on some conditions? 🤔 It's declared as a default filter in core here and if there is no excerpt it calls wp_trim_words here, which in turn calls wp_strip_all_tags.

wp_strip_all_tags removes the content of style and script tags.

So in this case it's like it's not called and it seems that only strip_tags is called, which keeps the css rules as text.

I tried adding the add_filter( 'get_the_excerpt', 'wp_trim_excerpt' ); in some places and even tried to check if it's something in the REST API . No luck though..

--cc @TimothyBJacobs @aristath

[aristath]

Found the issue, I believe it needs a patch in trac for core.
I'm testing now, and will proceed with submitting the fix 👍

[aristath]

Core ticket: https://core.trac.wordpress.org/ticket/53604
Patch: WordPress/wordpress-develop#1472

[ntsekouras]

Should this issue be closed now that @aristath 's patch was committed? Also the inline styles have been moved here: #32083

[stacimc]

I'm going to go ahead and close this issue since the patch was committed. I also re-tested across several themes to be safe and can no longer reproduce the issue.