Block Library: Add features to the Post Excerpt block. #19715

epiqueras · 2020-01-17T04:05:25Z

Closes #19698

Description

This PR implements the design from #19698.

How to test this?

Verify all the features from #19698 work as expected with a Post Excerpt block inserted in a regular post.

Screenshots

Types of Changes

New Feature: The Post Excerpt block now has a more rich editing experience and allows you to customize the excerpt length and read more link directly.

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows the accessibility standards.
My code has proper inline documentation.
I've included developer documentation if appropriate.
I've updated all React Native files affected by any refactorings/renamings in this PR.

youknowriad · 2020-01-17T09:35:56Z

packages/block-library/src/post-excerpt/block.json

-	"category": "layout"
+	"category": "layout",
+	"attributes": {
+		"excerptLength": {


why not just "length"?

It's clearer that it refers to the excerpt part. The block also has the read more text and could evolve to have other things in the future.

This should probably be wordCount or wordLength.

wordCount sounds like the most accurate to me. Let's change it.

I disagree because of this being a "max length" and not a word count but I don't think it's a big deal so I've updated it.

youknowriad · 2020-01-17T09:36:38Z

packages/block-library/src/post-excerpt/block.json

+		"moreText": {
+			"type": "string"
+		},
+		"showMoreOnNewLine": {


Should this be an attribute or just something a theme can tweak with CSS?

Making it an attribute allows us to leverage different markup.

paaljoachim · 2020-01-17T14:22:44Z

For instance adding a post excerpt block on the post itself would mean that this specific block would not show up on the frontend when viewing the post.
Will there be some kind of visual difference between the excerpt block and the rest of the post layout?

Meaning any block such as the post excerpt block that does not show up in the frontend post/page layout but has another specific feature could perhaps have a visual marker in the backend. To give it a clear difference between blocks used in the post/page layout and blocks that have a specific purpose not included in the regular layout.

epiqueras · 2020-01-17T14:30:16Z

For instance adding a post excerpt block on the post itself would mean that this specific block would not show up on the frontend when viewing the post.

It does render the excerpt for that post.

In any case, limiting things like this is what settings.parent is for.

karmatosed · 2020-01-17T22:37:14Z

Will there be some kind of visual difference between the excerpt block and the rest of the post layout?

I think this might be where CSS could be used. I could see exploring style variations but that feels like down to the theme almost.

packages/block-library/src/post-excerpt/edit.js

draganescu

Great work here :) One thing I think should be changed is the fact that usePostContentExcerpt has a custom logic that trims and cuts the post content in order to get the excerpt preview, while the server side render_block_core_post_excerpt uses the normal get_the_excerpt.

This will lead to things showing up in the editor which will not show up in the front.

As far as I can tell, I may be wrong, the REST API returns an element ['excerpt']['raw'] which is the result of some filters including wp_trim_excerpt. This filter/function takes care of generating an excerpt from the post data, so we shouldn't need to redo this logic. Also, the best thing it does, is to call strip_shortcodes and excerpt_remove_blocks which avoids bumping into issues like #19418

epiqueras · 2020-01-27T13:42:32Z

This will lead to things showing up in the editor which will not show up in the front.

Do you have an example? They should be aligned.

This filter/function takes care of generating an excerpt from the post data, so we shouldn't need to redo this logic.

Yes, we do because we are dynamically changing the excerpt length in the client and we wish to preview it while we do so.

Also, the best thing it does, is to call strip_shortcodes and excerpt_remove_blocks which avoids bumping into issues like #19418

That's why I use rendered post content.

draganescu · 2020-01-27T16:11:52Z

Do you have an example? They should be aligned.

Again, I am not 100% sure, but it appears that there are different sets of operations happening on each of the filters used for content or excerpt:

default-filters.php#L172

add_filter( 'the_content', 'do_blocks', 9 );
add_filter( 'the_content', 'wptexturize' );
add_filter( 'the_content', 'convert_smilies', 20 );
add_filter( 'the_content', 'wpautop' );
add_filter( 'the_content', 'shortcode_unautop' );
add_filter( 'the_content', 'prepend_attachment' );
add_filter( 'the_content', 'wp_make_content_images_responsive' );

add_filter( 'the_excerpt', 'wptexturize' );
add_filter( 'the_excerpt', 'convert_smilies' );
add_filter( 'the_excerpt', 'convert_chars' );
add_filter( 'the_excerpt', 'wpautop' );
add_filter( 'the_excerpt', 'shortcode_unautop' );
add_filter( 'get_the_excerpt', 'wp_trim_excerpt', 10, 2 );

Most notably the_excerpt does not do_blocks, instead it does excerpt_remove_blocks in wp_trim_excerpt. On the other hand the REST controller for posts applies the_content filter on $data['content']['rendered'].

epiqueras · 2020-01-27T16:38:38Z

I meant in this PR. A scenario where it breaks. I am taking the same approach the latest posts block takes and it seems to work well. wp_trim_excerpt also applies the_content. excerpt_remove_blocks just removes blocks that won’t contribute to the excerpt like images. This is achieved in the client by using innerHTML and extracting text content only.

draganescu · 2020-01-27T17:45:12Z

So I have tried to reproduce the bug in #19418 and it worked:

The point in the image above is that the excerpt now contains a link, and it should in fact be empty. To reproduce this:

add a post with an embed at the start
in that post add more content
use the excerpt block in that post or in single
you will see by default the link of the embed, which should be stripped

epiqueras · 2020-01-27T17:59:17Z

I think the correct fix here is not rendering that URL as visible text like that.

epiqueras · 2020-02-17T19:04:50Z

What's blocking this?

youknowriad · 2020-02-18T08:10:06Z

packages/block-library/src/post-excerpt/edit.js

 	const [ excerpt, setExcerpt ] = useEntityProp( 'postType', 'post', 'excerpt' );
-	return <PlainText value={ excerpt } onChange={ setExcerpt } />;
+	const postContentExcerpt = usePostContentExcerpt( excerptLength );


Is this because the backend defaults to the post content if the excerpt is empty?

Yes, and you can't control the max length dynamically.

youknowriad · 2020-02-18T08:11:18Z

packages/block-library/src/post-excerpt/edit.js


-function PostExcerptDisplay() {
+function usePostContentExcerpt( excerptLength ) {
+	const [ , , { raw: rawPostContent } ] = useEntityProp(


Why do we have three returned values in the array, is the first one normalized or something like that?

The first one is the edited value, yes.

youknowriad · 2020-02-18T08:13:29Z

packages/block-library/src/post-excerpt/edit.js

+				keepPlaceholderOnFocus
+			/>
+			{ ! showMoreOnNewLine && ' ' }
+			<RichText


Should this be inside a paragraph if "showMoreOnNewLine" is true (to match the backend)

Yes, updated.

youknowriad · 2020-02-18T14:54:50Z

lib/demo-block-templates/single.html

@@ -0,0 +1,2 @@
+<!-- wp:post-title /-->
+<!-- wp:post-content /-->


Seems like this is an unrelated change, do we want it or should we remove it from the PR?

Oops, deleted.

markhowellsmead · 2020-02-27T09:01:14Z

packages/block-library/src/post-excerpt/edit.js

+	attributes,
+	setAttributes,
+	isSelected,
+} ) {
 	if ( ! useEntityId( 'postType', 'post' ) ) {
 		return 'Post Excerpt Placeholder';


This text cannot be translated if it's defined statically.

markhowellsmead · 2020-02-27T09:02:06Z

packages/block-library/src/post-excerpt/index.php

+		$filter_excerpt_length
+	);
+
+	$output = '<p>' . get_the_excerpt( $post );


This element should have a class name, so that it can be targeted by Theme and Plugin developers.

epiqueras added the [Feature] Full Site Editing label Jan 17, 2020

epiqueras added this to the Future milestone Jan 17, 2020

epiqueras requested review from ajitbohra, jorgefilipecosta, nerrad, Soean, talldan, TimothyBJacobs and youknowriad as code owners January 17, 2020 04:05

epiqueras self-assigned this Jan 17, 2020

youknowriad added the Needs Design Feedback Needs general design feedback. label Jan 17, 2020

youknowriad reviewed Jan 17, 2020

View reviewed changes

MarcoZehe reviewed Jan 20, 2020

View reviewed changes

packages/block-library/src/post-excerpt/edit.js Show resolved Hide resolved

epiqueras requested a review from ntwb as a code owner January 20, 2020 18:59

epiqueras mentioned this pull request Jan 25, 2020

New Block: Post Author #19696

Closed

draganescu reviewed Jan 27, 2020

View reviewed changes

youknowriad reviewed Feb 18, 2020

View reviewed changes

epiqueras force-pushed the add/post-excerpt-block-features branch from 87dc653 to 2e35754 Compare February 18, 2020 13:32

youknowriad reviewed Feb 18, 2020

View reviewed changes

youknowriad approved these changes Feb 18, 2020

View reviewed changes

epiqueras force-pushed the add/post-excerpt-block-features branch from 3502985 to 307facc Compare February 18, 2020 15:23

epiqueras and others added 6 commits February 18, 2020 07:30

Lib: Add single demo block template.

dde79a6

Core Data: Provide full raw properties from useEntityProp.

9ee063b

Block Library: Add features to the Post Excerpt block.

2368b51

E2E Tests: Update Post Excerpt block fixtures.

2aef54f

Block Library: Change Post Excerpt block excerptLength to wordCount.

99ce469

Delete single.html

ece6591

epiqueras force-pushed the add/post-excerpt-block-features branch from 307facc to ece6591 Compare February 18, 2020 15:31

epiqueras merged commit 3d3c3e1 into master Feb 18, 2020

epiqueras added this to Done in Phase 2 via automation Feb 18, 2020

epiqueras deleted the add/post-excerpt-block-features branch February 18, 2020 20:56

youknowriad modified the milestones: Future, Gutenberg 7.6 Feb 26, 2020

markhowellsmead reviewed Feb 27, 2020

View reviewed changes

ellatrix mentioned this pull request Jun 16, 2020

WP 5.5: merge all PHP changes #23210

Closed

12 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Block Library: Add features to the Post Excerpt block. #19715

Block Library: Add features to the Post Excerpt block. #19715

epiqueras commented Jan 17, 2020 •

edited

youknowriad Jan 17, 2020 •

edited

epiqueras Jan 17, 2020

mtias Jan 17, 2020

youknowriad Feb 18, 2020

epiqueras Feb 18, 2020

youknowriad Jan 17, 2020

epiqueras Jan 17, 2020

paaljoachim commented Jan 17, 2020 •

edited

epiqueras commented Jan 17, 2020

karmatosed commented Jan 17, 2020

draganescu left a comment

epiqueras commented Jan 27, 2020

draganescu commented Jan 27, 2020

epiqueras commented Jan 27, 2020 via email

draganescu commented Jan 27, 2020

epiqueras commented Jan 27, 2020

epiqueras commented Feb 17, 2020

youknowriad Feb 18, 2020

epiqueras Feb 18, 2020

youknowriad Feb 18, 2020 •

edited

epiqueras Feb 18, 2020

youknowriad Feb 18, 2020

epiqueras Feb 18, 2020

youknowriad Feb 18, 2020

epiqueras Feb 18, 2020

markhowellsmead Feb 27, 2020

markhowellsmead Feb 27, 2020

		@@ -0,0 +1,2 @@
		<!-- wp:post-title /-->
		<!-- wp:post-content /-->

Block Library: Add features to the Post Excerpt block. #19715

Block Library: Add features to the Post Excerpt block. #19715

Conversation

epiqueras commented Jan 17, 2020 • edited

Description

How to test this?

Screenshots

Types of Changes

Checklist:

youknowriad Jan 17, 2020 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

paaljoachim commented Jan 17, 2020 • edited

epiqueras commented Jan 17, 2020

karmatosed commented Jan 17, 2020

draganescu left a comment

Choose a reason for hiding this comment

epiqueras commented Jan 27, 2020

draganescu commented Jan 27, 2020

epiqueras commented Jan 27, 2020 via email

draganescu commented Jan 27, 2020

epiqueras commented Jan 27, 2020

epiqueras commented Feb 17, 2020

Choose a reason for hiding this comment

Choose a reason for hiding this comment

youknowriad Feb 18, 2020 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

epiqueras commented Jan 17, 2020 •

edited

youknowriad Jan 17, 2020 •

edited

paaljoachim commented Jan 17, 2020 •

edited

youknowriad Feb 18, 2020 •

edited