Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Latest Posts: add screen reader title text to Read more links and use alternative to excerpt_more filter #55029

Merged
merged 2 commits into from
Oct 5, 2023
Merged

Latest Posts: add screen reader title text to Read more links and use alternative to excerpt_more filter #55029

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e5e93c4
In the editor: adds a screen reader text span with the post title in …
ramonjd Oct 4, 2023
0fe587d
Removing "of" preposition in favour of a semi-colon.
ramonjd Oct 4, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 10 additions & 2 deletions packages/block-library/src/latest-posts/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
),
}
) }
</>
Expand Down
26 changes: 18 additions & 8 deletions packages/block-library/src/latest-posts/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'];
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As mentioned in #55026 (comment)

I think I used this so that choices of the user in the editor were reflected on the frontend, even if those changes overrode theme custom text.

Theme custom excerpt text would still display if displayPostContentRadio was not set to 'excerpt' in the Latest Posts block attributes. However, I believe we were missing the editor's "excerptLength attribute is less than the currently-set excerpt length" condition in index.php.

What should prevail here?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great question. The way you're currently handling it in this PR feels natural to me in testing!

/* 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' );
}
Expand Down Expand Up @@ -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(
andrewserong marked this conversation as resolved.
Show resolved Hide resolved
/* 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.' );
}
Expand Down
Loading