Post excerpt block - add color, fontSize, lineHeight, and text alignm…

…ent. (#23945) * add text align * add wrapper and line-height inherit * php format * get this working in site editor? * set initial readMore, get rid of extra parent component * styles to ensure link color is shown * no elipsis * dont initialize for now /shrug * add custom warning if no post found in context * more simple error fix * actually we need this warning... otherwise user can edit what cannot be dirtied/saved * get rid of important
WordPress · Jul 20, 2020 · 5221168 · 5221168
1 parent f13cf85
commit 5221168
Show file tree

Hide file tree

Showing 6 changed files with 123 additions and 43 deletions.
diff --git a/packages/block-library/src/post-excerpt/block.json b/packages/block-library/src/post-excerpt/block.json
@@ -2,6 +2,9 @@
 	"name": "core/post-excerpt",
 	"category": "design",
 	"attributes": {
+		"align": {
+			"type": "string"
+		},
 		"wordCount": {
 			"type": "number",
 			"default": 55
@@ -15,9 +18,16 @@
 		}
 	},
 	"usesContext": [
-		"postId"
+		"postId",
+		"postType"
 	],
 	"supports": {
-		"html": false
+		"html": false,
+		"__experimentalFontSize": true,
+		"__experimentalColor": {
+			"gradients": true,
+			"linkColor": true
+		},
+		"__experimentalLineHeight": true
 	}
 }
diff --git a/packages/block-library/src/post-excerpt/edit.js b/packages/block-library/src/post-excerpt/edit.js
@@ -1,18 +1,32 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
-import { useEntityProp, useEntityId } from '@wordpress/core-data';
+import { useEntityProp } from '@wordpress/core-data';
 import { useMemo } from '@wordpress/element';
-import { InspectorControls, RichText } from '@wordpress/block-editor';
+import {
+	AlignmentToolbar,
+	BlockControls,
+	InspectorControls,
+	RichText,
+	Warning,
+} from '@wordpress/block-editor';
 import { PanelBody, RangeControl, ToggleControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
-function usePostContentExcerpt( wordCount ) {
-	const [ , , { raw: rawPostContent } ] = useEntityProp(
+function usePostContentExcerpt( wordCount, postId, postType ) {
+	// Don't destrcuture items from content here, it can be undefined.
+	const [ , , content ] = useEntityProp(
 		'postType',
-		'post',
-		'content'
+		postType,
+		'content',
+		postId
 	);
+	const rawPostContent = content?.raw;
 	return useMemo( () => {
 		if ( ! rawPostContent ) {
 			return '';
@@ -26,18 +40,32 @@ function usePostContentExcerpt( wordCount ) {
 }
 
 function PostExcerptEditor( {
-	attributes: { wordCount, moreText, showMoreOnNewLine },
+	attributes: { align, wordCount, moreText, showMoreOnNewLine },
 	setAttributes,
 	isSelected,
+	context: { postId, postType },
 } ) {
 	const [ excerpt, setExcerpt ] = useEntityProp(
 		'postType',
-		'post',
-		'excerpt'
+		postType,
+		'excerpt',
+		postId
+	);
+	const postContentExcerpt = usePostContentExcerpt(
+		wordCount,
+		postId,
+		postType
 	);
-	const postContentExcerpt = usePostContentExcerpt( wordCount );
 	return (
 		<>
+			<BlockControls>
+				<AlignmentToolbar
+					value={ align }
+					onChange={ ( newAlign ) =>
+						setAttributes( { align: newAlign } )
+					}
+				/>
+			</BlockControls>
 			<InspectorControls>
 				<PanelBody title={ __( 'Post Excerpt Settings' ) }>
 					{ ! excerpt && (
@@ -62,19 +90,40 @@ function PostExcerptEditor( {
 					/>
 				</PanelBody>
 			</InspectorControls>
-			<RichText
-				className={
-					! showMoreOnNewLine &&
-					'wp-block-post-excerpt__excerpt is-inline'
-				}
-				placeholder={ postContentExcerpt }
-				value={ excerpt || ( isSelected ? '' : postContentExcerpt ) }
-				onChange={ setExcerpt }
-				keepPlaceholderOnFocus
-			/>
-			{ ! showMoreOnNewLine && ' ' }
-			{ showMoreOnNewLine ? (
-				<p>
+			<div
+				className={ classnames( 'wp-block-post-excerpt', {
+					[ `has-text-align-${ align }` ]: align,
+				} ) }
+			>
+				<RichText
+					className={
+						! showMoreOnNewLine &&
+						'wp-block-post-excerpt__excerpt is-inline'
+					}
+					placeholder={ postContentExcerpt }
+					value={
+						excerpt ||
+						( isSelected
+							? ''
+							: postContentExcerpt ||
+							  __( 'No post excerpt found' ) )
+					}
+					onChange={ setExcerpt }
+					keepPlaceholderOnFocus
+				/>
+				{ ! showMoreOnNewLine && ' ' }
+				{ showMoreOnNewLine ? (
+					<p className="wp-block-post-excerpt__more-text">
+						<RichText
+							tagName="a"
+							placeholder={ __( 'Read more…' ) }
+							value={ moreText }
+							onChange={ ( newMoreText ) =>
+								setAttributes( { moreText: newMoreText } )
+							}
+						/>
+					</p>
+				) : (
 					<RichText
 						tagName="a"
 						placeholder={ __( 'Read more…' ) }
@@ -83,17 +132,8 @@ function PostExcerptEditor( {
 							setAttributes( { moreText: newMoreText } )
 						}
 					/>
-				</p>
-			) : (
-				<RichText
-					tagName="a"
-					placeholder={ __( 'Read more…' ) }
-					value={ moreText }
-					onChange={ ( newMoreText ) =>
-						setAttributes( { moreText: newMoreText } )
-					}
-				/>
-			) }
+				) }
+			</div>
 		</>
 	);
 }
@@ -102,15 +142,19 @@ export default function PostExcerptEdit( {
 	attributes,
 	setAttributes,
 	isSelected,
+	context,
 } ) {
-	if ( ! useEntityId( 'postType', 'post' ) ) {
-		return __( 'Post Excerpt' );
+	if ( ! context.postType || ! context.postId ) {
+		return (
+			<Warning>{ __( 'Post excerpt block: no post found.' ) }</Warning>
+		);
 	}
 	return (
 		<PostExcerptEditor
 			attributes={ attributes }
 			setAttributes={ setAttributes }
 			isSelected={ isSelected }
+			context={ context }
 		/>
 	);
 }
diff --git a/packages/block-library/src/post-excerpt/editor.scss b/packages/block-library/src/post-excerpt/editor.scss
@@ -1,3 +1,12 @@
-.wp-block-post-excerpt__excerpt.is-inline {
-	display: inline-block;
+.wp-block-post-excerpt {
+
+	.wp-block-post-excerpt__excerpt.is-inline {
+		display: inline-block;
+	}
+
+
+}
+
+.wp-block[data-type="core/post-excerpt"].has-link-color .wp-block-post-excerpt a {
+	color: var(--wp--style--color--link);
 }
diff --git a/packages/block-library/src/post-excerpt/index.php b/packages/block-library/src/post-excerpt/index.php
@@ -28,11 +28,16 @@ function render_block_core_post_excerpt( $attributes, $content, $block ) {
 		$filter_excerpt_length
 	);
 
-	$output = '<p>' . get_the_excerpt( $block->context['postId'] );
+	$classes = 'wp-block-post-excerpt';
+	if ( isset( $attributes['align'] ) ) {
+		$classes .= ' has-text-align-' . $attributes['align'];
+	}
+
+	$output = sprintf( '<div class="%1$s">', esc_attr( $classes ) ) . '<p class="wp-block-post-excerpt__excerpt">' . get_the_excerpt( $block->context['postId'] );
 	if ( ! isset( $attributes['showMoreOnNewLine'] ) || $attributes['showMoreOnNewLine'] ) {
-		$output .= '</p>' . '<p>' . $more_text . '</p>';
+		$output .= '</p>' . '<p class="wp-block-post-excerpt__more-text">' . $more_text . '</p>';
 	} else {
-		$output .= ' ' . $more_text . '</p>';
+		$output .= ' ' . $more_text . '</p>' . '</div>';
 	}
 
 	remove_filter(

diff --git a/packages/block-library/src/post-excerpt/style.scss b/packages/block-library/src/post-excerpt/style.scss
@@ -0,0 +1,11 @@
+.wp-block-post-excerpt {
+	.wp-block-post-excerpt__excerpt,
+	.wp-block-post-excerpt__more-text {
+		line-height: inherit;
+	}
+}
+
+.wp-block-post-excerpt.has-link-color a,
+.wp-block-post-excerpt.has-background.has-link-color a {
+	color: var(--wp--style--color--link);
+}
diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss
@@ -34,6 +34,7 @@
 @import "./table/style.scss";
 @import "./text-columns/style.scss";
 @import "./video/style.scss";
+@import "./post-excerpt/style.scss";
 
 // The following selectors have increased specificity (using the :root prefix)
 // to assure colors take effect over another base class color, mainly to let