Related Posts: Add per-block header settings. (#30897)

Adds a toggle for headline visibility and a text field for the actual headline text.
Automattic · May 25, 2023 · 7cd00df · 7cd00df
1 parent 3be4a6e
commit 7cd00df
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 18 deletions.
diff --git a/projects/plugins/jetpack/changelog/update-related-posts-add-header b/projects/plugins/jetpack/changelog/update-related-posts-add-header
@@ -0,0 +1,4 @@
+Significance: minor
+Type: enhancement
+
+Related Posts: Add per-block header support.
diff --git a/projects/plugins/jetpack/extensions/blocks/related-posts/controls.js b/projects/plugins/jetpack/extensions/blocks/related-posts/controls.js
@@ -1,10 +1,24 @@
-import { PanelBody, RangeControl, ToggleControl, ToolbarGroup } from '@wordpress/components';
+import {
+	PanelBody,
+	RangeControl,
+	TextControl,
+	ToggleControl,
+	ToolbarGroup,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 export const MAX_POSTS_TO_SHOW = 6;
 
 export function RelatedPostsInspectorControls( { attributes, setAttributes } ) {
-	const { displayAuthor, displayContext, displayDate, displayThumbnails, postsToShow } = attributes;
+	const {
+		displayAuthor,
+		displayContext,
+		displayDate,
+		displayHeadline,
+		displayThumbnails,
+		headline,
+		postsToShow,
+	} = attributes;
 
 	return (
 		<PanelBody title={ __( 'General settings', 'jetpack' ) }>
@@ -35,6 +49,18 @@ export function RelatedPostsInspectorControls( { attributes, setAttributes } ) {
 				min={ 1 }
 				max={ MAX_POSTS_TO_SHOW }
 			/>
+			<ToggleControl
+				label={ __( 'Display headline', 'jetpack' ) }
+				checked={ displayHeadline }
+				onChange={ value => setAttributes( { displayHeadline: value } ) }
+			/>
+			{ displayHeadline && (
+				<TextControl
+					value={ headline }
+					onChange={ value => setAttributes( { headline: value } ) }
+					label={ __( 'Headline', 'jetpack' ) }
+				/>
+			) }
 		</PanelBody>
 	);
 }

diff --git a/projects/plugins/jetpack/extensions/blocks/related-posts/edit.js b/projects/plugins/jetpack/extensions/blocks/related-posts/edit.js
@@ -161,7 +161,9 @@ export class RelatedPostsEdit extends Component {
 			displayAuthor,
 			displayContext,
 			displayDate,
+			displayHeadline,
 			displayThumbnails,
+			headline,
 			postLayout,
 			postsToShow,
 		} = attributes;
@@ -218,6 +220,7 @@ export class RelatedPostsEdit extends Component {
 				</BlockControls>
 
 				<div className={ className } id={ `related-posts-${ instanceId }` }>
+					{ displayHeadline && <h3>{ headline }</h3> }
 					<div className={ previewClassName } data-layout={ postLayout }>
 						<RelatedPostsPreviewRows posts={ displayPosts } />
 					</div>

diff --git a/projects/plugins/jetpack/extensions/blocks/related-posts/index.js b/projects/plugins/jetpack/extensions/blocks/related-posts/index.js
@@ -44,6 +44,10 @@ export const settings = {
 			type: 'boolean',
 			default: true,
 		},
+		displayHeadline: {
+			type: 'boolean',
+			default: false,
+		},
 		displayThumbnails: {
 			type: 'boolean',
 			default: false,
@@ -52,6 +56,10 @@ export const settings = {
 			type: 'boolean',
 			default: false,
 		},
+		headline: {
+			type: 'string',
+			default: '',
+		},
 		postsToShow: {
 			type: 'number',
 			default: 3,
@@ -96,8 +104,10 @@ export const settings = {
 			postLayout: 'grid',
 			displayAuthor: false,
 			displayDate: true,
+			displayHeadline: false,
 			displayThumbnails: true,
 			displayContext: false,
+			headline: '',
 			postsToShow: 2,
 		},
 	},

diff --git a/...plugins/jetpack/extensions/blocks/related-posts/test/fixtures/jetpack__related-posts.json b/...plugins/jetpack/extensions/blocks/related-posts/test/fixtures/jetpack__related-posts.json
@@ -1,17 +1,19 @@
 [
-	{
-		"clientId": "_clientId_0",
-		"name": "jetpack/related-posts",
-		"isValid": true,
-		"attributes": {
-			"postLayout": "list",
-			"displayDate": false,
-			"displayAuthor": false,
-			"displayThumbnails": true,
-			"displayContext": true,
-			"postsToShow": 4
-		},
-		"innerBlocks": [],
-		"originalContent": ""
-	}
+    {
+        "clientId": "_clientId_0",
+        "name": "jetpack/related-posts",
+        "isValid": true,
+        "attributes": {
+            "postLayout": "list",
+            "displayDate": false,
+            "displayAuthor": false,
+            "displayHeadline": false,
+            "displayThumbnails": true,
+            "displayContext": true,
+            "headline": "",
+            "postsToShow": 4
+        },
+        "innerBlocks": [],
+        "originalContent": ""
+    }
 ]
diff --git a/projects/plugins/jetpack/modules/related-posts/jetpack-related-posts.php b/projects/plugins/jetpack/modules/related-posts/jetpack-related-posts.php
@@ -470,6 +470,7 @@ public function render_block( $attributes ) {
 			'headline'        => isset( $attributes['headline'] ) ? $attributes['headline'] : null,
 			'show_thumbnails' => isset( $attributes['displayThumbnails'] ) && $attributes['displayThumbnails'],
 			'show_author'     => isset( $attributes['displayAuthor'] ) ? (bool) $attributes['displayAuthor'] : false,
+			'show_headline'   => isset( $attributes['displayHeadline'] ) ? (bool) $attributes['displayHeadline'] : false,
 			'show_date'       => isset( $attributes['displayDate'] ) ? (bool) $attributes['displayDate'] : true,
 			'show_context'    => isset( $attributes['displayContext'] ) && $attributes['displayContext'],
 			'layout'          => isset( $attributes['postLayout'] ) && 'list' === $attributes['postLayout'] ? $attributes['postLayout'] : 'grid',
@@ -518,12 +519,22 @@ public function render_block( $attributes ) {
 			$wrapper_attributes = \WP_Block_Supports::get_instance()->apply_block_supports();
 		}
 
+		$headline_markup = '';
+		if ( $block_attributes['show_headline'] === true ) {
+			$headline = $block_attributes['headline'];
+			if ( strlen( trim( $headline ) ) !== 0 ) {
+				$headline_markup = sprintf(
+					'<h3 class="jp-relatedposts-headline">%1$s</h3>',
+					esc_html( $headline )
+				);
+			}
+		}
 		$display_markup = sprintf(
 			'<nav class="jp-relatedposts-i2%1$s"%2$s data-layout="%3$s">%4$s%5$s</nav>',
 			! empty( $wrapper_attributes['class'] ) ? ' ' . esc_attr( $wrapper_attributes['class'] ) : '',
 			! empty( $wrapper_attributes['style'] ) ? ' style="' . esc_attr( $wrapper_attributes['style'] ) . '"' : '',
 			esc_attr( $block_attributes['layout'] ),
-			$block_attributes['headline'],
+			$headline_markup,
 			$rows_markup
 		);