Post excerpt: Add excerpt length control

docs/reference-guides/core-blocks.md

@@ -537,7 +537,7 @@ Display a post's excerpt. ([Source](https://github.com/WordPress/gutenberg/tree/
 -	**Name:** core/post-excerpt
 -	**Category:** theme
 -	**Supports:** color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
--	**Attributes:** moreText, showMoreOnNewLine, textAlign
+-	**Attributes:** excerptLength, moreText, showMoreOnNewLine, textAlign
 
 ## Post Featured Image
 

packages/block-library/package.json

@@ -57,6 +57,7 @@
 		"@wordpress/server-side-render": "file:../server-side-render",
 		"@wordpress/url": "file:../url",
 		"@wordpress/viewport": "file:../viewport",
+		"@wordpress/wordcount": "file:../wordcount",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",

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

@@ -16,6 +16,10 @@
 		"showMoreOnNewLine": {
 			"type": "boolean",
 			"default": true
+		},
+		"excerptLength": {
+			"type": "number",
+			"default": 55
 		}
 	},
 	"usesContext": [ "postId", "postType", "queryId" ],

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

@@ -16,23 +16,27 @@ import {
 	Warning,
 	useBlockProps,
 } from '@wordpress/block-editor';
-import { PanelBody, ToggleControl } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { PanelBody, ToggleControl, RangeControl } from '@wordpress/components';
+import { sprintf, __, _x } from '@wordpress/i18n';
+import { count as wordCount } from '@wordpress/wordcount';
+import { speak } from '@wordpress/a11y';
+import { useDebounce } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import { useCanEditEntity } from '../utils/hooks';
 
 export default function PostExcerptEditor( {
-	attributes: { textAlign, moreText, showMoreOnNewLine },
+	attributes: { textAlign, moreText, showMoreOnNewLine, excerptLength },
 	setAttributes,
 	isSelected,
 	context: { postId, postType, queryId },
 } ) {
 	const isDescendentOfQueryLoop = Number.isFinite( queryId );
 	const userCanEdit = useCanEditEntity( 'postType', postType, postId );
 	const isEditable = userCanEdit && ! isDescendentOfQueryLoop;
+	const debouncedSpeak = useDebounce( speak, 3000 );
 	const [
 		rawExcerpt,
 		setExcerpt,
@@ -99,21 +103,91 @@ export default function PostExcerptEditor( {
 	const excerptClassName = classnames( 'wp-block-post-excerpt__excerpt', {
 		'is-inline': ! showMoreOnNewLine,
 	} );
+
+	/**
+	 * translators: If your word count is based on single characters (e.g. East Asian characters),
+	 * enter 'characters_excluding_spaces' or 'characters_including_spaces'. Otherwise, enter 'words'.
+	 * Do not translate into your own language.
+	 */
+	const wordCountType = _x( 'words', 'Word count type. Do not translate!' );
+
+	const currentWordCount = wordCount( rawExcerpt, wordCountType );
+
+	/**
+	 * The excerpt length setting needs to be applied to both
+	 * the raw and the rendered excerpt depending on which is being used.
+	 */
+	const rawOrRenderedExcerpt = !! renderedExcerpt
+		? strippedRenderedExcerpt
+		: rawExcerpt;
+
+	let trimmedExcerpt = '';
+	if ( wordCountType === 'words' ) {
+		trimmedExcerpt = rawOrRenderedExcerpt
+			.trim()
+			.split( ' ', excerptLength )
+			.join( ' ' );
+	} else if ( wordCountType === 'characters_excluding_spaces' ) {
+		/*
+		 * 1. Split the excerpt at the character limit,
+		 * then join the substrings back into one string.
+		 * 2. Count the number of spaces in the excerpt
+		 * by comparing the lengths of the string with and without spaces.
+		 * 3. Add the number to the length of the visible excerpt,
+		 * so that the spaces are excluded from the word count.
+		 */
+		const excerptWithSpaces = rawOrRenderedExcerpt
+			.trim()
+			.split( '', excerptLength )
+			.join( '' );
+
+		const numberOfSpaces =
+			excerptWithSpaces.length -
+			excerptWithSpaces.replaceAll( ' ', '' ).length;
+
+		trimmedExcerpt = rawOrRenderedExcerpt
+			.trim()
+			.split( '', excerptLength + numberOfSpaces )
+			.join( '' );
+	} else if ( wordCountType === 'characters_including_spaces' ) {
+		trimmedExcerpt = rawOrRenderedExcerpt.trim().split( '', excerptLength );
+	}
+
+	/**
+	 * Show a warning if the word count is same as,
+	 * 5 words lower, or larger than the excerpt length value.
+	 */
+	let wordCountMessage = null;
+	if (
+		excerptLength === currentWordCount ||
+		( excerptLength > currentWordCount &&
+			excerptLength - currentWordCount <= 5 )
+	) {
+		wordCountMessage = sprintf(
+			/* translators: 1: Number of words entered, 2: Number of words allowed. */
+			__( '%1$s / %2$s' ),
+			currentWordCount,
+			excerptLength
+		);
+	} else if ( currentWordCount > excerptLength ) {
+		// If the word count exceeds the excerpt length, show a warning with a negative value.
+		// Convert the value to a string so that it can be used in speak().
+		wordCountMessage = String( excerptLength - currentWordCount );
+	}
 	const excerptContent = isEditable ? (
 		<RichText
 			className={ excerptClassName }
 			aria-label={ __( 'Post excerpt text' ) }
 			value={
-				rawExcerpt ||
-				strippedRenderedExcerpt ||
+				trimmedExcerpt ||
 				( isSelected ? '' : __( 'No post excerpt found' ) )
 			}
 			onChange={ setExcerpt }
 			tagName="p"
 		/>
 	) : (
 		<p className={ excerptClassName }>
-			{ strippedRenderedExcerpt || __( 'No post excerpt found' ) }
+			{ trimmedExcerpt || __( 'No post excerpt found' ) }
 		</p>
 	);
 	return (
@@ -137,10 +211,26 @@ export default function PostExcerptEditor( {
 							} )
 						}
 					/>
+					<RangeControl
+						label={ __( 'Max number of words in excerpt' ) }
+						value={ excerptLength }
+						onChange={ ( value ) => {
+							setAttributes( { excerptLength: value } );
+							setExcerpt();
+						} }
+						min="10"
+						max="100"
+					/>
 				</PanelBody>
 			</InspectorControls>
 			<div { ...blockProps }>
 				{ excerptContent }
+				{ isSelected && wordCountMessage && (
+					<Warning>{ wordCountMessage }</Warning>
+				) }
+				{ isSelected &&
+					wordCountMessage &&
+					debouncedSpeak( wordCountMessage ) }
 				{ ! showMoreOnNewLine && ' ' }
 				{ showMoreOnNewLine ? (
 					<p className="wp-block-post-excerpt__more-text">

packages/block-library/src/post-excerpt/editor.scss

@@ -3,3 +3,8 @@
 		display: inline-block;
 	}
 }
+
+.wp-block-post-excerpt .block-editor-warning {
+	width: fit-content;
+	margin-left: auto;
+}

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

@@ -18,12 +18,18 @@ function render_block_core_post_excerpt( $attributes, $content, $block ) {
 		return '';
 	}
 
-	$excerpt = get_the_excerpt();
-
-	if ( empty( $excerpt ) ) {
-		return '';
+	/*
+	* The purpose of the excerpt length setting is to limit the length of both
+	* automatically generated and user-created excerpts.
+	* Because the excerpt_length filter only applies to auto generated excerpts,
+	* wp_trim_words is used instead.
+	*/
+	$excerpt_length = $attributes['excerptLength'];
+	if ( isset( $excerpt_length ) ) {
+		$excerpt = wp_trim_words( get_the_excerpt(), $excerpt_length );
+	} else {
+		$excerpt = get_the_excerpt();
 	}
-
 	$more_text           = ! empty( $attributes['moreText'] ) ? '<a class="wp-block-post-excerpt__more-link" href="' . esc_url( get_the_permalink( $block->context['postId'] ) ) . '">' . wp_kses_post( $attributes['moreText'] ) . '</a>' : '';
 	$filter_excerpt_more = function( $more ) use ( $more_text ) {
 		return empty( $more_text ) ? $more : '';
@@ -67,3 +73,21 @@ function register_block_core_post_excerpt() {
 	);
 }
 add_action( 'init', 'register_block_core_post_excerpt' );
+
+/**
+ * If themes or plugins filter the excerpt_length, we need to
+ * override the filter in the editor, otherwise
+ * the excerpt length block setting has no effect.
+ * Returns 100 because 100 is the max length in the setting.
+ */
+if ( is_admin() ||
+	defined( 'REST_REQUEST' ) ||
+	'REST_REQUEST' ) {
+	add_filter(
+		'excerpt_length',
+		function() {
+			return 100;
+		},
+		PHP_INT_MAX
+	);
+}

test/integration/fixtures/blocks/core__post-excerpt.json

@@ -3,7 +3,8 @@
 		"name": "core/post-excerpt",
 		"isValid": true,
 		"attributes": {
-			"showMoreOnNewLine": true
+			"showMoreOnNewLine": true,
+			"excerptLength": 55
 		},
 		"innerBlocks": []
 	}