[Block Library - Post Excerpt]: Fix excerpt_more filter conflict an…

…d remove `wordCount` attribute (#33366) * [Block Library - Post Excerpt]: Fix `excerpt_more` filter conflict * use Disabled component * add comments * Remove `wordCount` attribute * prioritize textContent * Post Excerpt: Don't output empty P tag when $more_text empty * Query Loop Patterns: Remove extinct wordCount attribute Co-authored-by: Miguel Fonseca <miguelcsf@gmail.com>
WordPress · Jul 19, 2021 · aff30fb · aff30fb
1 parent 237ab0c
commit aff30fb
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 66 deletions.
diff --git a/lib/block-patterns.php b/lib/block-patterns.php
@@ -81,7 +81,7 @@ function register_gutenberg_patterns() {
 							<!-- wp:post-template -->
 							<!-- wp:group {"style":{"spacing":{"padding":{"top":"30px","right":"30px","bottom":"30px","left":"30px"}}},"layout":{"inherit":false}} -->
 							<div class="wp-block-group" style="padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px"><!-- wp:post-title {"isLink":true} /-->
-							<!-- wp:post-excerpt {"wordCount":20} /-->
+							<!-- wp:post-excerpt /-->
 							<!-- wp:post-date /--></div>
 							<!-- /wp:group -->
 							<!-- /wp:post-template -->

diff --git a/packages/block-library/src/post-excerpt/block.json b/packages/block-library/src/post-excerpt/block.json
@@ -9,10 +9,6 @@
 		"textAlign": {
 			"type": "string"
 		},
-		"wordCount": {
-			"type": "number",
-			"default": 55
-		},
 		"moreText": {
 			"type": "string"
 		},

diff --git a/packages/block-library/src/post-excerpt/edit.js b/packages/block-library/src/post-excerpt/edit.js
@@ -16,37 +16,16 @@ import {
 	Warning,
 	useBlockProps,
 } from '@wordpress/block-editor';
-import { PanelBody, RangeControl, ToggleControl } from '@wordpress/components';
+import { PanelBody, ToggleControl, Disabled } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import { useCanEditEntity } from '../utils/hooks';
 
-function usePostContentExcerpt( wordCount, postId, postType ) {
-	// Don't destrcuture items from content here, it can be undefined.
-	const [ , , content ] = useEntityProp(
-		'postType',
-		postType,
-		'content',
-		postId
-	);
-	const renderedPostContent = content?.rendered;
-	return useMemo( () => {
-		if ( ! renderedPostContent ) {
-			return '';
-		}
-		const excerptElement = document.createElement( 'div' );
-		excerptElement.innerHTML = renderedPostContent;
-		const excerpt =
-			excerptElement.textContent || excerptElement.innerText || '';
-		return excerpt.trim().split( ' ', wordCount ).join( ' ' );
-	}, [ renderedPostContent, wordCount ] );
-}
-
 export default function PostExcerptEditor( {
-	attributes: { textAlign, wordCount, moreText, showMoreOnNewLine },
+	attributes: { textAlign, moreText, showMoreOnNewLine },
 	setAttributes,
 	isSelected,
 	context: { postId, postType, queryId },
@@ -59,16 +38,24 @@ export default function PostExcerptEditor( {
 		setExcerpt,
 		{ rendered: renderedExcerpt, protected: isProtected } = {},
 	] = useEntityProp( 'postType', postType, 'excerpt', postId );
-	const postContentExcerpt = usePostContentExcerpt(
-		wordCount,
-		postId,
-		postType
-	);
 	const blockProps = useBlockProps( {
 		className: classnames( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 	} );
+	/**
+	 * When excerpt is editable, strip the html tags from
+	 * rendered excerpt. This will be used if the entity's
+	 * excerpt has been produced from the content.
+	 */
+	const strippedRenderedExcerpt = useMemo( () => {
+		if ( ! renderedExcerpt ) return '';
+		const document = new window.DOMParser().parseFromString(
+			renderedExcerpt,
+			'text/html'
+		);
+		return document.body.textContent || document.body.innerText || '';
+	}, [ renderedExcerpt ] );
 	if ( ! postType || ! postId ) {
 		return (
 			<div { ...blockProps }>
@@ -110,16 +97,17 @@ export default function PostExcerptEditor( {
 			aria-label={ __( 'Post excerpt text' ) }
 			value={
 				rawExcerpt ||
-				postContentExcerpt ||
+				strippedRenderedExcerpt ||
 				( isSelected ? '' : __( 'No post excerpt found' ) )
 			}
 			onChange={ setExcerpt }
 		/>
 	) : (
 		( renderedExcerpt && (
-			<RawHTML key="html">{ renderedExcerpt }</RawHTML>
+			<Disabled>
+				<RawHTML key="html">{ renderedExcerpt }</RawHTML>
+			</Disabled>
 		) ) ||
-		postContentExcerpt ||
 		__( 'No post excerpt found' )
 	);
 	return (
@@ -134,17 +122,6 @@ export default function PostExcerptEditor( {
 			</BlockControls>
 			<InspectorControls>
 				<PanelBody title={ __( 'Post Excerpt Settings' ) }>
-					{ ! renderedExcerpt && (
-						<RangeControl
-							label={ __( 'Max words' ) }
-							value={ wordCount }
-							onChange={ ( newExcerptLength ) =>
-								setAttributes( { wordCount: newExcerptLength } )
-							}
-							min={ 10 }
-							max={ 100 }
-						/>
-					) }
 					<ToggleControl
 						label={ __( 'Show link on new line' ) }
 						checked={ showMoreOnNewLine }

diff --git a/packages/block-library/src/post-excerpt/index.php b/packages/block-library/src/post-excerpt/index.php
@@ -18,34 +18,34 @@ function render_block_core_post_excerpt( $attributes, $content, $block ) {
 		return '';
 	}
 
-	$more_text = isset( $attributes['moreText'] ) ? '<a class="wp-block-post-excerpt__more-link" href="' . esc_url( get_the_permalink( $block->context['postId'] ) ) . '">' . $attributes['moreText'] . '</a>' : '';
-
-	$filter_excerpt_length = function() use ( $attributes ) {
-		return isset( $attributes['wordCount'] ) ? $attributes['wordCount'] : 55;
+	$more_text           = ! empty( $attributes['moreText'] ) ? '<a class="wp-block-post-excerpt__more-link" href="' . esc_url( get_the_permalink( $block->context['postId'] ) ) . '">' . $attributes['moreText'] . '</a>' : '';
+	$filter_excerpt_more = function( $more ) use ( $more_text ) {
+		return empty( $more_text ) ? $more : '';
 	};
-	add_filter(
-		'excerpt_length',
-		$filter_excerpt_length
-	);
-
+	/**
+	 * Some themes might use `excerpt_more` filter to handle the
+	 * `more` link displayed after a trimmed excerpt. Since the
+	 * block has a `more text` attribute we have to check and
+	 * override if needed the return value from this filter.
+	 * So if the block's attribute is not empty override the
+	 * `excerpt_more` filter and return nothing. This will
+	 * result in showing only one `read more` link at a time.
+	 */
+	add_filter( 'excerpt_more', $filter_excerpt_more );
 	$classes = '';
 	if ( isset( $attributes['textAlign'] ) ) {
-		$classes .= 'has-text-align-' . $attributes['textAlign'];
+		$classes .= "has-text-align-{$attributes['textAlign']}";
 	}
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) );
 
-	$content = '<p class="wp-block-post-excerpt__excerpt">' . get_the_excerpt( $block->context['postId'] );
-	if ( ! isset( $attributes['showMoreOnNewLine'] ) || $attributes['showMoreOnNewLine'] ) {
+	$content               = '<p class="wp-block-post-excerpt__excerpt">' . get_the_excerpt( $block->context['postId'] );
+	$show_more_on_new_line = ! isset( $attributes['showMoreOnNewLine'] ) || $attributes['showMoreOnNewLine'];
+	if ( $show_more_on_new_line && ! empty( $more_text ) ) {
 		$content .= '</p><p class="wp-block-post-excerpt__more-text">' . $more_text . '</p>';
 	} else {
 		$content .= " $more_text</p>";
 	}
-
-	remove_filter(
-		'excerpt_length',
-		$filter_excerpt_length
-	);
-
+	remove_filter( 'excerpt_more', $filter_excerpt_more );
 	return sprintf( '<div %1$s>%2$s</div>', $wrapper_attributes, $content );
 }
 

diff --git a/packages/e2e-tests/fixtures/blocks/core__post-excerpt.json b/packages/e2e-tests/fixtures/blocks/core__post-excerpt.json
@@ -4,7 +4,6 @@
 		"name": "core/post-excerpt",
 		"isValid": true,
 		"attributes": {
-			"wordCount": 55,
 			"showMoreOnNewLine": true
 		},
 		"innerBlocks": [],