Merge pull request #296 from material-components/fse/card-updates

FSE Card - Add excerpt length; Clean up
material-components · Feb 1, 2022 · fbe3c43 · fbe3c43
2 parents fa04f6b + a97cad7
commit fbe3c43
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 56 deletions.
diff --git a/theme/assets/src/block-editor/blocks/card/block.json b/theme/assets/src/block-editor/blocks/card/block.json
@@ -30,6 +30,10 @@
     "isEditMode": {
       "type": "boolean",
       "default": false
+    },
+    "postContentLength": {
+      "type": "number",
+      "default": 20
     }
   },
   "title": "Material Card for Query loop",

diff --git a/theme/assets/src/block-editor/blocks/card/inspectControl.js b/theme/assets/src/block-editor/blocks/card/inspectControl.js
@@ -27,9 +27,12 @@ import { InspectorControls } from '@wordpress/block-editor';
  * Internal dependencies
  */
 import genericAttributesSetter from '../../../../../../plugin/assets/src/block-editor/utils/generic-attributes-setter';
-import { PanelBody, ToggleControl } from '@wordpress/components';
+import { PanelBody, RangeControl, ToggleControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
+const MIN_POST_CONTENT_LENGTH = 10;
+const MAX_POST_CONTENT_LENGTH = 30;
+
 /**
  * @param {Object}   props
  * @param {Function} props.setAttributes
@@ -40,6 +43,7 @@ import { __ } from '@wordpress/i18n';
  * @param {boolean}  props.attributes.showDate
  * @param {boolean}  props.attributes.showAuthor
  * @param {boolean}  props.attributes.showComments
+ * @param {number}   props.attributes.postContentLength
  */
 const InspectControls = ( {
 	setAttributes,
@@ -50,6 +54,7 @@ const InspectControls = ( {
 		showDate,
 		showAuthor,
 		showComments,
+		postContentLength,
 	},
 } ) => {
 	const setter = genericAttributesSetter( setAttributes );
@@ -58,37 +63,53 @@ const InspectControls = ( {
 			<PanelBody
 				title={ __(
 					'Show / Hide post information',
-					'material-design'
+					'material-design-google'
+				) }
+				description={ __(
+					'Choose which information to show in the card.',
+					'material-design-google'
 				) }
 				initialOpen={ true }
 			>
 				<ToggleControl
-					label={ __( 'Featured Image', 'material-design' ) }
+					label={ __( 'Featured Image', 'material-design-google' ) }
 					checked={ showFeaturedImage }
 					onChange={ setter( 'showFeaturedImage' ) }
 				/>
 				<ToggleControl
-					label={ __( 'Post title', 'material-design' ) }
+					label={ __( 'Post title', 'material-design-google' ) }
 					checked={ showTitle }
 					onChange={ setter( 'showTitle' ) }
 				/>
 				<ToggleControl
-					label={ __( 'Post date', 'material-design' ) }
+					label={ __( 'Post date', 'material-design-google' ) }
 					checked={ showDate }
 					onChange={ setter( 'showDate' ) }
 				/>
 				<ToggleControl
-					label={ __( 'Post excerpt', 'material-design' ) }
+					label={ __( 'Post excerpt', 'material-design-google' ) }
 					checked={ showExcerpt }
 					onChange={ setter( 'showExcerpt' ) }
 				/>
+				{ showExcerpt && (
+					<RangeControl
+						label={ __(
+							'Max number of words in post excerpt',
+							'material-design-google'
+						) }
+						value={ postContentLength }
+						onChange={ setter( 'postContentLength' ) }
+						min={ MIN_POST_CONTENT_LENGTH }
+						max={ MAX_POST_CONTENT_LENGTH }
+					/>
+				) }
 				<ToggleControl
-					label={ __( 'Author', 'material-design' ) }
+					label={ __( 'Author', 'material-design-google' ) }
 					checked={ showAuthor }
 					onChange={ setter( 'showAuthor' ) }
 				/>
 				<ToggleControl
-					label={ __( 'Comments', 'material-design' ) }
+					label={ __( 'Comments', 'material-design-google' ) }
 					checked={ showComments }
 					onChange={ setter( 'showComments' ) }
 				/>

diff --git a/theme/assets/src/block-editor/blocks/card/save.js b/theme/assets/src/block-editor/blocks/card/save.js
diff --git a/theme/assets/src/front-end/components/masonry.js b/theme/assets/src/front-end/components/masonry.js
@@ -57,6 +57,12 @@ const resizeGridItem = cell => {
 		return;
 	}
 
+	const cellCard = cell.querySelector( '.post-card' );
+
+	if ( ! cellCard ) {
+		return;
+	}
+
 	const rowHeight = parseInt(
 		window
 			.getComputedStyle( gridElement )
@@ -71,9 +77,7 @@ const resizeGridItem = cell => {
 		10
 	);
 
-	const contentHeight = cell
-		.querySelector( '.post-card' )
-		.getBoundingClientRect().height;
+	const contentHeight = cellCard.getBoundingClientRect().height;
 
 	const rowSpan = Math.ceil(
 		( contentHeight + rowGap ) / ( rowHeight + rowGap )

diff --git a/theme/template-parts/blocks/card-query.php b/theme/template-parts/blocks/card-query.php
@@ -34,14 +34,16 @@
 $is_edit             = $attributes['isEditMode'];
 $show_featured_image = $attributes['showFeaturedImage'];
 $show_post_title     = $attributes['showTitle'];
+$content_length      = isset( $attributes['postContentLength'] ) ? $attributes['postContentLength'] : 20;
 $classes             = get_theme_mod( 'archive_outlined', false ) ? 'mdc-card--outlined' : '';
 
 if ( empty( $block ) || ! isset( $block->context['postId'] ) ) {
 	return '';
 }
-$post_ID   = $block->context['postId']; // phpcs:ignore WordPress.WP.GlobalVariablesOverride.Prohibited
-$post      = get_post( $post_ID ); // phpcs:ignore WordPress.WP.GlobalVariablesOverride.Prohibited
-$post_link = $is_edit ? '#link-to-' . $post_ID : get_the_permalink( $post );
+$post_ID      = $block->context['postId']; // phpcs:ignore WordPress.WP.GlobalVariablesOverride.Prohibited
+$post         = get_post( $post_ID ); // phpcs:ignore WordPress.WP.GlobalVariablesOverride.Prohibited
+$post_link    = $is_edit ? '#link-to-' . $post_ID : get_the_permalink( $post );
+$post_content = wp_trim_words( get_the_excerpt( $post ), $content_length, ' [&hellip;]' );
 ?>
 	<div class="post-card__container">
 		<div id="<?php echo esc_attr( $post_ID ); ?>" <?php post_class( "mdc-card post-card $classes" ); ?>>
@@ -83,9 +85,9 @@ class="post-card__subtitle mdc-typography mdc-typography--subtitle2"><?php echo
 						<?php endif; ?>
 					</div>
 				</div>
-				<?php if ( ! empty( $show_excerpt ) ) : ?>
+				<?php if ( ! empty( $show_excerpt ) && has_excerpt( $post ) ) : ?>
 					<div
-						class="post-card__secondary mdc-typography mdc-typography--body2"><p><?php echo wp_kses_post( get_the_excerpt( $post ) ); ?></p></div>
+						class="post-card__secondary mdc-typography mdc-typography--body2"><p><?php echo wp_kses_post( $post_content ); ?></p></div>
 				<?php endif; ?>
 			</a>
 			<?php if ( ! empty( $show_author ) || ! empty( $show_comments ) ) : ?>