Latest Posts: add screen reader title text to Read more links and use…

… alternative to excerpt_more filter (#55029) * In the editor: adds a screen reader text span with the post title in the i18n interpolator In the frontend: removes excerpt_more filter so we don't override themes and also replaces the default ellipsis with an accessible read more link * Removing "of" preposition in favour of a semi-colon. "Read more" is already translated so using a specifier to add it to the string
WordPress · Oct 5, 2023 · 8ef6e40 · 8ef6e40
1 parent 0816b4c
commit 8ef6e40
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 10 deletions.
diff --git a/packages/block-library/src/latest-posts/edit.js b/packages/block-library/src/latest-posts/edit.js
@@ -483,19 +483,27 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 								.split( ' ', excerptLength )
 								.join( ' ' ) }
 							{ createInterpolateElement(
-								/* translators: excerpt truncation character, default …  */
-								__( ' … <a>Read more</a>' ),
+								sprintf(
+									/* translators: 1: The static string "Read more", 2: The post title only visible to screen readers. */
+									__( '… <a>%1$s<span>: %2$s</span></a>' ),
+									__( 'Read more' ),
+									titleTrimmed || __( '(no title)' )
+								),
 								{
 									a: (
 										// eslint-disable-next-line jsx-a11y/anchor-has-content
 										<a
+											className="wp-block-latest-posts__read-more"
 											href={ post.link }
 											rel="noopener noreferrer"
 											onClick={
 												showRedirectionPreventedNotice
 											}
 										/>
 									),
+									span: (
+										<span className="screen-reader-text" />
+									),
 								}
 							) }
 						</>

diff --git a/packages/block-library/src/latest-posts/index.php b/packages/block-library/src/latest-posts/index.php
@@ -48,14 +48,6 @@ function render_block_core_latest_posts( $attributes ) {
 	$block_core_latest_posts_excerpt_length = $attributes['excerptLength'];
 	add_filter( 'excerpt_length', 'block_core_latest_posts_get_excerpt_length', 20 );
 
-	$filter_latest_posts_excerpt_more = static function ( $more ) use ( $attributes ) {
-		$use_excerpt = 'excerpt' === $attributes['displayPostContentRadio'];
-		/* translators: %1$s is a URL to a post, excerpt truncation character, default … */
-		return $use_excerpt ? sprintf( __( ' … <a href="%1$s" rel="noopener noreferrer">Read more</a>' ), esc_url( get_permalink() ) ) : $more;
-	};
-
-	add_filter( 'excerpt_more', $filter_latest_posts_excerpt_more );
-
 	if ( ! empty( $attributes['categories'] ) ) {
 		$args['category__in'] = array_column( $attributes['categories'], 'id' );
 	}
@@ -151,6 +143,24 @@ function render_block_core_latest_posts( $attributes ) {
 
 			$trimmed_excerpt = get_the_excerpt( $post );
 
+			/*
+			 * Adds a "Read more" link with screen reader text.
+			 * [&hellip;] is the default excerpt ending from wp_trim_excerpt() in Core.
+			 */
+			if ( str_ends_with( $trimmed_excerpt, ' [&hellip;]' ) ) {
+				$excerpt_length = (int) apply_filters( 'excerpt_length', $block_core_latest_posts_excerpt_length );
+				if ( $excerpt_length <= $block_core_latest_posts_excerpt_length ) {
+					$trimmed_excerpt  = substr( $trimmed_excerpt, 0, -11 );
+					$trimmed_excerpt .= sprintf(
+						/* translators: 1: A URL to a post, 2: The static string "Read more", 3: The post title only visible to screen readers. */
+						__( '… <a href="%1$s" rel="noopener noreferrer">%2$s<span class="screen-reader-text">: %3$s</span></a>' ),
+						esc_url( $post_link ),
+						__( 'Read more' ),
+						esc_html( $title )
+					);
+				}
+			}
+
 			if ( post_password_required( $post ) ) {
 				$trimmed_excerpt = __( 'This content is password protected.' );
 			}