From bef63aa47186409a12559996b25b34c4fbcae7b4 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Thu, 13 Oct 2022 11:23:52 +0200 Subject: [PATCH 01/17] Post excerpt: Add excerpt length control --- docs/reference-guides/core-blocks.md | 2 +- .../block-library/src/post-excerpt/block.json | 4 +++ .../block-library/src/post-excerpt/edit.js | 27 +++++++++++++--- .../block-library/src/post-excerpt/index.php | 32 +++++++++++++++++++ 4 files changed, 59 insertions(+), 6 deletions(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index e5e60e22d0c969..80bdcd2d783307 100644 --- a/docs/reference-guides/core-blocks.md +++ b/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 diff --git a/packages/block-library/src/post-excerpt/block.json b/packages/block-library/src/post-excerpt/block.json index 03107ff900e068..d25c0ec51d6760 100644 --- a/packages/block-library/src/post-excerpt/block.json +++ b/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" ], diff --git a/packages/block-library/src/post-excerpt/edit.js b/packages/block-library/src/post-excerpt/edit.js index 2db315645c86c1..689e6b0c63917e 100644 --- a/packages/block-library/src/post-excerpt/edit.js +++ b/packages/block-library/src/post-excerpt/edit.js @@ -16,7 +16,7 @@ import { Warning, useBlockProps, } from '@wordpress/block-editor'; -import { PanelBody, ToggleControl } from '@wordpress/components'; +import { PanelBody, ToggleControl, RangeControl } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; /** @@ -25,7 +25,7 @@ import { __ } from '@wordpress/i18n'; import { useCanEditEntity } from '../utils/hooks'; export default function PostExcerptEditor( { - attributes: { textAlign, moreText, showMoreOnNewLine }, + attributes: { textAlign, moreText, showMoreOnNewLine, excerptLength }, setAttributes, isSelected, context: { postId, postType, queryId }, @@ -99,13 +99,17 @@ export default function PostExcerptEditor( { const excerptClassName = classnames( 'wp-block-post-excerpt__excerpt', { 'is-inline': ! showMoreOnNewLine, } ); + const excerptContent = isEditable ? ( ) : (

- { strippedRenderedExcerpt || __( 'No post excerpt found' ) } + { strippedRenderedExcerpt + .trim() + .split( ' ', excerptLength ) + .join( ' ' ) || __( 'No post excerpt found' ) }

); return ( @@ -137,6 +144,16 @@ export default function PostExcerptEditor( { } ) } /> + { + setAttributes( { excerptLength: value } ); + setExcerpt(); + } } + min="10" + max="100" + />
diff --git a/packages/block-library/src/post-excerpt/index.php b/packages/block-library/src/post-excerpt/index.php index 79cc959cd86d7e..f0a94b10bd84b7 100644 --- a/packages/block-library/src/post-excerpt/index.php +++ b/packages/block-library/src/post-excerpt/index.php @@ -18,8 +18,28 @@ function render_block_core_post_excerpt( $attributes, $content, $block ) { return ''; } + + /* + * If themes or plugins filter the excerpt_length, + * we need to reset the filter for the block's excerpt length control to work, + * and we need to restore their filter afterwards. + */ + $original_excerpt_length = (int) apply_filters( 'excerpt_length', 55 ); + + remove_all_filters( 'excerpt_length' ); + + $excerpt_length = $attributes['excerptLength']; + + add_filter( 'excerpt_length', function() use ( $excerpt_length ) { + return $excerpt_length; + } ); + $excerpt = get_the_excerpt(); + add_filter( 'excerpt_length', function() use ( $original_excerpt_length ) { + return $original_excerpt_length; + } ); + if ( empty( $excerpt ) ) { return ''; } @@ -67,3 +87,15 @@ 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 ); +} From 5098f0d4499ee914bd3278811d844fe27c181686 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Mon, 17 Oct 2022 07:49:05 +0200 Subject: [PATCH 02/17] Update edit.js --- packages/block-library/src/post-excerpt/edit.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/post-excerpt/edit.js b/packages/block-library/src/post-excerpt/edit.js index 689e6b0c63917e..78238ea9f5c89b 100644 --- a/packages/block-library/src/post-excerpt/edit.js +++ b/packages/block-library/src/post-excerpt/edit.js @@ -112,7 +112,14 @@ export default function PostExcerptEditor( { .join( ' ' ) || ( isSelected ? '' : __( 'No post excerpt found' ) ) } - onChange={ setExcerpt } + onChange={ + ( ( value ) => { + setAttributes( { + excerptLength: value.split( ' ' ).length, + } ); + }, + setExcerpt ) + } tagName="p" /> ) : ( From b7a54a39ca67b899b868b5a99760704ea3646fa8 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Mon, 17 Oct 2022 10:52:41 +0200 Subject: [PATCH 03/17] Update index.php --- .../block-library/src/post-excerpt/index.php | 25 +++++++++++++------ 1 file changed, 17 insertions(+), 8 deletions(-) diff --git a/packages/block-library/src/post-excerpt/index.php b/packages/block-library/src/post-excerpt/index.php index f0a94b10bd84b7..d38407c2c3277c 100644 --- a/packages/block-library/src/post-excerpt/index.php +++ b/packages/block-library/src/post-excerpt/index.php @@ -18,9 +18,8 @@ function render_block_core_post_excerpt( $attributes, $content, $block ) { return ''; } - /* - * If themes or plugins filter the excerpt_length, + * If themes or plugins filter the excerpt_length, * we need to reset the filter for the block's excerpt length control to work, * and we need to restore their filter afterwards. */ @@ -30,13 +29,17 @@ function render_block_core_post_excerpt( $attributes, $content, $block ) { $excerpt_length = $attributes['excerptLength']; - add_filter( 'excerpt_length', function() use ( $excerpt_length ) { + add_filter( 'excerpt_length', function() use ( + $excerpt_length + ) { return $excerpt_length; } ); $excerpt = get_the_excerpt(); - add_filter( 'excerpt_length', function() use ( $original_excerpt_length ) { + add_filter( 'excerpt_length', function() use ( + $original_excerpt_length + ) { return $original_excerpt_length; } ); @@ -94,8 +97,14 @@ function register_block_core_post_excerpt() { * 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 ); +if ( is_admin() || + defined( 'REST_REQUEST' ) || + 'REST_REQUEST' ) { + add_filter( + 'excerpt_length', + function() { + return 100; + }, + PHP_INT_MAX + ); } From 17576fa4922a6d2149a435b46381c387a6124973 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Mon, 17 Oct 2022 10:59:55 +0200 Subject: [PATCH 04/17] Update core__post-excerpt.json --- test/integration/fixtures/blocks/core__post-excerpt.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/test/integration/fixtures/blocks/core__post-excerpt.json b/test/integration/fixtures/blocks/core__post-excerpt.json index 57775868bdc862..827deda1b7215a 100644 --- a/test/integration/fixtures/blocks/core__post-excerpt.json +++ b/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": [] } From 5059371e73dff8afa1d614affb326fc95a9e85d9 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Mon, 17 Oct 2022 11:10:52 +0200 Subject: [PATCH 05/17] Update index.php --- packages/block-library/src/post-excerpt/index.php | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/post-excerpt/index.php b/packages/block-library/src/post-excerpt/index.php index d38407c2c3277c..dfeb7d2e0e6e41 100644 --- a/packages/block-library/src/post-excerpt/index.php +++ b/packages/block-library/src/post-excerpt/index.php @@ -29,11 +29,12 @@ function render_block_core_post_excerpt( $attributes, $content, $block ) { $excerpt_length = $attributes['excerptLength']; - add_filter( 'excerpt_length', function() use ( - $excerpt_length - ) { - return $excerpt_length; - } ); + add_filter( + 'excerpt_length', + function() use ( $excerpt_length ) { + return $excerpt_length; + } + ); $excerpt = get_the_excerpt(); From aa5db2353f0c36d7051cf74a2d233f33b07043c2 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Mon, 17 Oct 2022 11:35:47 +0200 Subject: [PATCH 06/17] Update index.php --- packages/block-library/src/post-excerpt/index.php | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/post-excerpt/index.php b/packages/block-library/src/post-excerpt/index.php index dfeb7d2e0e6e41..38590b2c64d893 100644 --- a/packages/block-library/src/post-excerpt/index.php +++ b/packages/block-library/src/post-excerpt/index.php @@ -38,11 +38,12 @@ function() use ( $excerpt_length ) { $excerpt = get_the_excerpt(); - add_filter( 'excerpt_length', function() use ( - $original_excerpt_length - ) { - return $original_excerpt_length; - } ); + add_filter( + 'excerpt_length', + function() use ( $original_excerpt_length ) { + return $original_excerpt_length; + } + ); if ( empty( $excerpt ) ) { return ''; From 34b26915ca29b2b4fc1bdc292e43c2712afd3980 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Mon, 21 Nov 2022 09:56:24 +0100 Subject: [PATCH 07/17] use wp_trim_words instead of the excerpt length filter --- .../block-library/src/post-excerpt/edit.js | 9 +---- .../block-library/src/post-excerpt/index.php | 35 +++++-------------- 2 files changed, 9 insertions(+), 35 deletions(-) diff --git a/packages/block-library/src/post-excerpt/edit.js b/packages/block-library/src/post-excerpt/edit.js index 78238ea9f5c89b..689e6b0c63917e 100644 --- a/packages/block-library/src/post-excerpt/edit.js +++ b/packages/block-library/src/post-excerpt/edit.js @@ -112,14 +112,7 @@ export default function PostExcerptEditor( { .join( ' ' ) || ( isSelected ? '' : __( 'No post excerpt found' ) ) } - onChange={ - ( ( value ) => { - setAttributes( { - excerptLength: value.split( ' ' ).length, - } ); - }, - setExcerpt ) - } + onChange={ setExcerpt } tagName="p" /> ) : ( diff --git a/packages/block-library/src/post-excerpt/index.php b/packages/block-library/src/post-excerpt/index.php index 38590b2c64d893..fd0e68edd04167 100644 --- a/packages/block-library/src/post-excerpt/index.php +++ b/packages/block-library/src/post-excerpt/index.php @@ -19,36 +19,17 @@ function render_block_core_post_excerpt( $attributes, $content, $block ) { } /* - * If themes or plugins filter the excerpt_length, - * we need to reset the filter for the block's excerpt length control to work, - * and we need to restore their filter afterwards. + * The purpose of the excerpt length setting is to limit the length of both + * autmatically generated and user-created excerpts. + * Because the excerpt_length filter only applies to auto generated excerpts, + * wp_trim_words is used instead. */ - $original_excerpt_length = (int) apply_filters( 'excerpt_length', 55 ); - - remove_all_filters( 'excerpt_length' ); - $excerpt_length = $attributes['excerptLength']; - - add_filter( - 'excerpt_length', - function() use ( $excerpt_length ) { - return $excerpt_length; - } - ); - - $excerpt = get_the_excerpt(); - - add_filter( - 'excerpt_length', - function() use ( $original_excerpt_length ) { - return $original_excerpt_length; - } - ); - - if ( empty( $excerpt ) ) { - return ''; + if ( isset( $excerpt_length ) ) { + $excerpt = wp_trim_words( get_the_excerpt(), $excerpt_length ); + } else { + $excerpt = get_the_excerpt(); } - $more_text = ! empty( $attributes['moreText'] ) ? '' . wp_kses_post( $attributes['moreText'] ) . '' : ''; $filter_excerpt_more = function( $more ) use ( $more_text ) { return empty( $more_text ) ? $more : ''; From bc051dec44cc4399ad51ad18b9cc1fd42c9a1d2d Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Mon, 21 Nov 2022 11:37:38 +0100 Subject: [PATCH 08/17] Display a warning when the excerpt has a word count that is higher than the set excerpt length. --- packages/block-library/package.json | 1 + .../block-library/src/post-excerpt/edit.js | 25 ++++++++++++++++++- .../block-library/src/post-excerpt/index.php | 2 +- 3 files changed, 26 insertions(+), 2 deletions(-) diff --git a/packages/block-library/package.json b/packages/block-library/package.json index 5949d2aae78cfd..11a67613b74649 100644 --- a/packages/block-library/package.json +++ b/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", diff --git a/packages/block-library/src/post-excerpt/edit.js b/packages/block-library/src/post-excerpt/edit.js index 689e6b0c63917e..fc97ae25dc7172 100644 --- a/packages/block-library/src/post-excerpt/edit.js +++ b/packages/block-library/src/post-excerpt/edit.js @@ -17,7 +17,8 @@ import { useBlockProps, } from '@wordpress/block-editor'; import { PanelBody, ToggleControl, RangeControl } from '@wordpress/components'; -import { __ } from '@wordpress/i18n'; +import { sprintf, __, _x } from '@wordpress/i18n'; +import { count as wordCount } from '@wordpress/wordcount'; /** * Internal dependencies @@ -100,6 +101,14 @@ export default function PostExcerptEditor( { '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 ); + const excerptContent = isEditable ? ( excerptLength && ( + + { sprintf( + /* translators: 1: Number of words entered, 2: Number of words allowed. */ + __( + 'The custom excerpt uses %1$s of %2$s words.' + ), + currentWordCount, + excerptLength + ) } + + ) }
); diff --git a/packages/block-library/src/post-excerpt/index.php b/packages/block-library/src/post-excerpt/index.php index fd0e68edd04167..9ed21542bd6876 100644 --- a/packages/block-library/src/post-excerpt/index.php +++ b/packages/block-library/src/post-excerpt/index.php @@ -19,7 +19,7 @@ function render_block_core_post_excerpt( $attributes, $content, $block ) { } /* - * The purpose of the excerpt length setting is to limit the length of both + * The purpose of the excerpt length setting is to limit the length of both * autmatically generated and user-created excerpts. * Because the excerpt_length filter only applies to auto generated excerpts, * wp_trim_words is used instead. From 1d686af49a9de40cd7124cbbeabfc73a94ea15cb Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Mon, 21 Nov 2022 12:36:12 +0100 Subject: [PATCH 09/17] Update packages/block-library/src/post-excerpt/index.php --- packages/block-library/src/post-excerpt/index.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/post-excerpt/index.php b/packages/block-library/src/post-excerpt/index.php index 9ed21542bd6876..84be59b0148d37 100644 --- a/packages/block-library/src/post-excerpt/index.php +++ b/packages/block-library/src/post-excerpt/index.php @@ -20,7 +20,7 @@ function render_block_core_post_excerpt( $attributes, $content, $block ) { /* * The purpose of the excerpt length setting is to limit the length of both - * autmatically generated and user-created excerpts. + * automatically generated and user-created excerpts. * Because the excerpt_length filter only applies to auto generated excerpts, * wp_trim_words is used instead. */ From 86342e2c8bccb579b43bf4065ca19e31315479fc Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Tue, 22 Nov 2022 09:45:12 +0100 Subject: [PATCH 10/17] Support word count types --- .../block-library/src/post-excerpt/edit.js | 54 +++++++++++++++---- 1 file changed, 44 insertions(+), 10 deletions(-) diff --git a/packages/block-library/src/post-excerpt/edit.js b/packages/block-library/src/post-excerpt/edit.js index fc97ae25dc7172..29e8310625fd63 100644 --- a/packages/block-library/src/post-excerpt/edit.js +++ b/packages/block-library/src/post-excerpt/edit.js @@ -101,24 +101,61 @@ export default function PostExcerptEditor( { '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 ); + } + const excerptContent = isEditable ? ( ) : (

- { strippedRenderedExcerpt - .trim() - .split( ' ', excerptLength ) - .join( ' ' ) || __( 'No post excerpt found' ) } + { trimmedExcerpt || __( 'No post excerpt found' ) }

); return ( From 55edf7065f50539e8150a55676442c145a9d8825 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Fri, 25 Nov 2022 09:53:54 +0100 Subject: [PATCH 11/17] Update the word count warning and add speak(). --- .../block-library/src/post-excerpt/edit.js | 40 ++++++++++++------- .../src/post-excerpt/editor.scss | 5 +++ 2 files changed, 31 insertions(+), 14 deletions(-) diff --git a/packages/block-library/src/post-excerpt/edit.js b/packages/block-library/src/post-excerpt/edit.js index 29e8310625fd63..446aee4e993813 100644 --- a/packages/block-library/src/post-excerpt/edit.js +++ b/packages/block-library/src/post-excerpt/edit.js @@ -19,6 +19,7 @@ import { 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'; /** * Internal dependencies @@ -150,6 +151,27 @@ export default function PostExcerptEditor( { 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 ? (
{ excerptContent } + { isSelected && wordCountMessage && ( + { wordCountMessage } + ) } + { isSelected && wordCountMessage && speak( wordCountMessage ) } { ! showMoreOnNewLine && ' ' } { showMoreOnNewLine ? (

@@ -209,20 +235,6 @@ export default function PostExcerptEditor( { ) : ( readMoreLink ) } - { isSelected && - excerptLength && - currentWordCount > excerptLength && ( - - { sprintf( - /* translators: 1: Number of words entered, 2: Number of words allowed. */ - __( - 'The custom excerpt uses %1$s of %2$s words.' - ), - currentWordCount, - excerptLength - ) } - - ) }

); diff --git a/packages/block-library/src/post-excerpt/editor.scss b/packages/block-library/src/post-excerpt/editor.scss index 36e7d7b16592a0..a1acda32d74564 100644 --- a/packages/block-library/src/post-excerpt/editor.scss +++ b/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; +} From ff3f9ee09738584da18123c088aaec55fdeaa533 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Fri, 25 Nov 2022 12:35:20 +0100 Subject: [PATCH 12/17] Add useDebounce hook to delay speak() while typing an excerpt text. --- packages/block-library/src/post-excerpt/edit.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/post-excerpt/edit.js b/packages/block-library/src/post-excerpt/edit.js index 446aee4e993813..3f1fc1cf68cd56 100644 --- a/packages/block-library/src/post-excerpt/edit.js +++ b/packages/block-library/src/post-excerpt/edit.js @@ -20,6 +20,7 @@ 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 @@ -35,6 +36,7 @@ export default function PostExcerptEditor( { const isDescendentOfQueryLoop = Number.isFinite( queryId ); const userCanEdit = useCanEditEntity( 'postType', postType, postId ); const isEditable = userCanEdit && ! isDescendentOfQueryLoop; + const debouncedSpeak = useDebounce( speak, 3000 ); const [ rawExcerpt, setExcerpt, @@ -226,7 +228,9 @@ export default function PostExcerptEditor( { { isSelected && wordCountMessage && ( { wordCountMessage } ) } - { isSelected && wordCountMessage && speak( wordCountMessage ) } + { isSelected && + wordCountMessage && + debouncedSpeak( wordCountMessage ) } { ! showMoreOnNewLine && ' ' } { showMoreOnNewLine ? (

From daa5b05b13532a1c46bcd5060b3eacf0423b1900 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Fri, 16 Dec 2022 12:01:46 +0100 Subject: [PATCH 13/17] Update edit.js --- .../block-library/src/post-excerpt/edit.js | 54 +++++++++++++------ 1 file changed, 37 insertions(+), 17 deletions(-) diff --git a/packages/block-library/src/post-excerpt/edit.js b/packages/block-library/src/post-excerpt/edit.js index 3f1fc1cf68cd56..6ef95be3c99949 100644 --- a/packages/block-library/src/post-excerpt/edit.js +++ b/packages/block-library/src/post-excerpt/edit.js @@ -7,7 +7,7 @@ import classnames from 'classnames'; * WordPress dependencies */ import { useEntityProp } from '@wordpress/core-data'; -import { useMemo } from '@wordpress/element'; +import { useMemo, useEffect } from '@wordpress/element'; import { AlignmentToolbar, BlockControls, @@ -17,7 +17,7 @@ import { useBlockProps, } from '@wordpress/block-editor'; import { PanelBody, ToggleControl, RangeControl } from '@wordpress/components'; -import { sprintf, __, _x } from '@wordpress/i18n'; +import { sprintf, __, _n, _x } from '@wordpress/i18n'; import { count as wordCount } from '@wordpress/wordcount'; import { speak } from '@wordpress/a11y'; import { useDebounce } from '@wordpress/compose'; @@ -36,7 +36,7 @@ export default function PostExcerptEditor( { const isDescendentOfQueryLoop = Number.isFinite( queryId ); const userCanEdit = useCanEditEntity( 'postType', postType, postId ); const isEditable = userCanEdit && ! isDescendentOfQueryLoop; - const debouncedSpeak = useDebounce( speak, 3000 ); + const debouncedSpeak = useDebounce( speak, 500 ); const [ rawExcerpt, setExcerpt, @@ -47,6 +47,22 @@ export default function PostExcerptEditor( { [ `has-text-align-${ textAlign }` ]: textAlign, } ), } ); + + /** + * 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 ); + + // Use speak() to announce the word count status when the current word count is updated. + useEffect( () => { + if ( !! speakWordCountMessage ) { + debouncedSpeak( speakWordCountMessage ); + } + }, [ currentWordCount ] ); + /** * When excerpt is editable, strip the html tags from * rendered excerpt. This will be used if the entity's @@ -104,15 +120,6 @@ export default function PostExcerptEditor( { '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. @@ -157,7 +164,8 @@ export default function PostExcerptEditor( { * Show a warning if the word count is same as, * 5 words lower, or larger than the excerpt length value. */ - let wordCountMessage = null; + let wordCountMessage, + speakWordCountMessage = null; if ( excerptLength === currentWordCount || ( excerptLength > currentWordCount && @@ -169,11 +177,26 @@ export default function PostExcerptEditor( { currentWordCount, excerptLength ); + speakWordCountMessage = sprintf( + /* translators: 1: Number of words entered, 2: Number of words allowed. */ + __( 'The excerpt uses %1$s out of %2$s words' ), + 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 ); + speakWordCountMessage = sprintf( + /* translators: %s: Number of words that exceed the excerpt length limit */ + _n( + 'The excerpt is %s word longer than allowed.', + 'The excerpt is %s words longer than allowed.', + currentWordCount - excerptLength + ), + String( currentWordCount - excerptLength ) + ); } + const excerptContent = isEditable ? ( { wordCountMessage } ) } - { isSelected && - wordCountMessage && - debouncedSpeak( wordCountMessage ) } { ! showMoreOnNewLine && ' ' } { showMoreOnNewLine ? (

From e8c557fd7af1c25656b5dcddbafb62c3c31c5b79 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Fri, 16 Dec 2022 12:44:49 +0100 Subject: [PATCH 14/17] Update core__query__deprecated-3.json --- .../integration/fixtures/blocks/core__query__deprecated-3.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/test/integration/fixtures/blocks/core__query__deprecated-3.json b/test/integration/fixtures/blocks/core__query__deprecated-3.json index bb1478cd676f22..2c682de49bdda6 100644 --- a/test/integration/fixtures/blocks/core__query__deprecated-3.json +++ b/test/integration/fixtures/blocks/core__query__deprecated-3.json @@ -76,7 +76,8 @@ "name": "core/post-excerpt", "isValid": true, "attributes": { - "showMoreOnNewLine": true + "showMoreOnNewLine": true, + "excerptLength": 55 }, "innerBlocks": [] } From 085c025ab336edc22716009a0cc0eb4205016c5c Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Fri, 20 Jan 2023 12:51:15 +0100 Subject: [PATCH 15/17] Remove the word count message. --- .../block-library/src/post-excerpt/edit.js | 69 ++++--------------- 1 file changed, 12 insertions(+), 57 deletions(-) diff --git a/packages/block-library/src/post-excerpt/edit.js b/packages/block-library/src/post-excerpt/edit.js index 6ef95be3c99949..504a414fd21ba9 100644 --- a/packages/block-library/src/post-excerpt/edit.js +++ b/packages/block-library/src/post-excerpt/edit.js @@ -7,7 +7,7 @@ import classnames from 'classnames'; * WordPress dependencies */ import { useEntityProp } from '@wordpress/core-data'; -import { useMemo, useEffect } from '@wordpress/element'; +import { useMemo } from '@wordpress/element'; import { AlignmentToolbar, BlockControls, @@ -17,10 +17,7 @@ import { useBlockProps, } from '@wordpress/block-editor'; import { PanelBody, ToggleControl, RangeControl } from '@wordpress/components'; -import { sprintf, __, _n, _x } from '@wordpress/i18n'; -import { count as wordCount } from '@wordpress/wordcount'; -import { speak } from '@wordpress/a11y'; -import { useDebounce } from '@wordpress/compose'; +import { __, _x } from '@wordpress/i18n'; /** * Internal dependencies @@ -36,7 +33,7 @@ export default function PostExcerptEditor( { const isDescendentOfQueryLoop = Number.isFinite( queryId ); const userCanEdit = useCanEditEntity( 'postType', postType, postId ); const isEditable = userCanEdit && ! isDescendentOfQueryLoop; - const debouncedSpeak = useDebounce( speak, 500 ); + const [ rawExcerpt, setExcerpt, @@ -54,14 +51,6 @@ export default function PostExcerptEditor( { * Do not translate into your own language. */ const wordCountType = _x( 'words', 'Word count type. Do not translate!' ); - const currentWordCount = wordCount( rawExcerpt, wordCountType ); - - // Use speak() to announce the word count status when the current word count is updated. - useEffect( () => { - if ( !! speakWordCountMessage ) { - debouncedSpeak( speakWordCountMessage ); - } - }, [ currentWordCount ] ); /** * When excerpt is editable, strip the html tags from @@ -160,57 +149,26 @@ export default function PostExcerptEditor( { 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, - speakWordCountMessage = 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 - ); - speakWordCountMessage = sprintf( - /* translators: 1: Number of words entered, 2: Number of words allowed. */ - __( 'The excerpt uses %1$s out of %2$s words' ), - currentWordCount, - excerptLength - ); - } else if ( currentWordCount > excerptLength ) { - // If the word count exceeds the excerpt length, show a warning with a negative value. - wordCountMessage = String( excerptLength - currentWordCount ); - speakWordCountMessage = sprintf( - /* translators: %s: Number of words that exceed the excerpt length limit */ - _n( - 'The excerpt is %s word longer than allowed.', - 'The excerpt is %s words longer than allowed.', - currentWordCount - excerptLength - ), - String( currentWordCount - excerptLength ) - ); - } + trimmedExcerpt = trimmedExcerpt + '...'; const excerptContent = isEditable ? ( ) : (

- { trimmedExcerpt || __( 'No post excerpt found' ) } + { trimmedExcerpt !== '...' + ? trimmedExcerpt + : __( 'No post excerpt found' ) }

); return ( @@ -235,7 +193,7 @@ export default function PostExcerptEditor( { } /> { setAttributes( { excerptLength: value } ); @@ -248,9 +206,6 @@ export default function PostExcerptEditor( {
{ excerptContent } - { isSelected && wordCountMessage && ( - { wordCountMessage } - ) } { ! showMoreOnNewLine && ' ' } { showMoreOnNewLine ? (

From 5783b0fbe70552fed082266db67e192feb37e7fe Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Fri, 20 Jan 2023 13:07:22 +0100 Subject: [PATCH 16/17] Remove the wordcount package --- packages/block-library/package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/block-library/package.json b/packages/block-library/package.json index ce64993c2dcba5..7510c3b22a7c20 100644 --- a/packages/block-library/package.json +++ b/packages/block-library/package.json @@ -58,7 +58,6 @@ "@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", From 7771d02617f36dc32b8eddfbbc5a76b4b23a033c Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Fri, 20 Jan 2023 13:08:54 +0100 Subject: [PATCH 17/17] Remove the unused CSS --- packages/block-library/src/post-excerpt/editor.scss | 5 ----- 1 file changed, 5 deletions(-) diff --git a/packages/block-library/src/post-excerpt/editor.scss b/packages/block-library/src/post-excerpt/editor.scss index a1acda32d74564..36e7d7b16592a0 100644 --- a/packages/block-library/src/post-excerpt/editor.scss +++ b/packages/block-library/src/post-excerpt/editor.scss @@ -3,8 +3,3 @@ display: inline-block; } } - -.wp-block-post-excerpt .block-editor-warning { - width: fit-content; - margin-left: auto; -}