Fix Post Excerpt warnings for inline elements in RichText (#30498)

WordPress · Apr 6, 2021 · 176748c · 176748c
1 parent c8eb847
commit 176748c
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 25 deletions.
diff --git a/packages/block-library/src/post-excerpt/block.json b/packages/block-library/src/post-excerpt/block.json
@@ -31,5 +31,6 @@
 		},
 		"lineHeight": true
 	},
-	"editorStyle": "wp-block-post-excerpt-editor"
+	"editorStyle": "wp-block-post-excerpt-editor",
+	"style": "wp-block-post-excerpt"
 }
diff --git a/packages/block-library/src/post-excerpt/edit.js b/packages/block-library/src/post-excerpt/edit.js
@@ -72,7 +72,18 @@ export default function PostExcerptEditor( {
 			</div>
 		);
 	}
-
+	const readMoreLink = (
+		<RichText
+			className="wp-block-post-excerpt__more-link"
+			tagName="a"
+			aria-label={ __( 'Read more link text' ) }
+			placeholder={ __( 'Read more…' ) }
+			value={ moreText }
+			onChange={ ( newMoreText ) =>
+				setAttributes( { moreText: newMoreText } )
+			}
+		/>
+	);
 	return (
 		<>
 			<BlockControls>
@@ -124,26 +135,10 @@ export default function PostExcerptEditor( {
 				{ ! showMoreOnNewLine && ' ' }
 				{ showMoreOnNewLine ? (
 					<p className="wp-block-post-excerpt__more-text">
-						<RichText
-							tagName="a"
-							aria-label={ __( 'Read more link text' ) }
-							placeholder={ __( 'Read more…' ) }
-							value={ moreText }
-							onChange={ ( newMoreText ) =>
-								setAttributes( { moreText: newMoreText } )
-							}
-						/>
+						{ readMoreLink }
 					</p>
 				) : (
-					<RichText
-						tagName="a"
-						aria-label={ __( 'Read more link text' ) }
-						placeholder={ __( 'Read more…' ) }
-						value={ moreText }
-						onChange={ ( newMoreText ) =>
-							setAttributes( { moreText: newMoreText } )
-						}
-					/>
+					readMoreLink
 				) }
 			</div>
 		</>

diff --git a/packages/block-library/src/post-excerpt/index.php b/packages/block-library/src/post-excerpt/index.php
@@ -18,7 +18,7 @@ function render_block_core_post_excerpt( $attributes, $content, $block ) {
 		return '';
 	}
 
-	$more_text = isset( $attributes['moreText'] ) ? '<a href="' . esc_url( get_the_permalink( $block->context['postId'] ) ) . '">' . $attributes['moreText'] . '</a>' : '';
+	$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;
@@ -34,19 +34,19 @@ function render_block_core_post_excerpt( $attributes, $content, $block ) {
 	}
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) );
 
-	$output = sprintf( '<div %1$s>', $wrapper_attributes ) . '<p class="wp-block-post-excerpt__excerpt">' . get_the_excerpt( $block->context['postId'] );
+	$content = '<p class="wp-block-post-excerpt__excerpt">' . get_the_excerpt( $block->context['postId'] );
 	if ( ! isset( $attributes['showMoreOnNewLine'] ) || $attributes['showMoreOnNewLine'] ) {
-		$output .= '</p>' . '<p class="wp-block-post-excerpt__more-text">' . $more_text . '</p></div>';
+		$content .= '</p><p class="wp-block-post-excerpt__more-text">' . $more_text . '</p>';
 	} else {
-		$output .= ' ' . $more_text . '</p>' . '</div>';
+		$content .= " $more_text</p>";
 	}
 
 	remove_filter(
 		'excerpt_length',
 		$filter_excerpt_length
 	);
 
-	return $output;
+	return sprintf( '<div %1$s>%2$s</div>', $wrapper_attributes, $content );
 }
 
 /**

diff --git a/packages/block-library/src/post-excerpt/style.scss b/packages/block-library/src/post-excerpt/style.scss
@@ -0,0 +1,3 @@
+.wp-block-post-excerpt__more-link {
+	display: inline-block;
+}
diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss
@@ -27,6 +27,7 @@
 @import "./paragraph/style.scss";
 @import "./post-author/style.scss";
 @import "./post-comments-form/style.scss";
+@import "./post-excerpt/style.scss";
 @import "./preformatted/style.scss";
 @import "./pullquote/style.scss";
 @import "./query-loop/style.scss";