Likes block: allow hiding avatars (#40282)

Automattic · Dec 2, 2024 · 9438644 · 9438644
1 parent 8ef292d
commit 9438644
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 42 deletions.
diff --git a/projects/plugins/jetpack/changelog/update-likes-hide-avatars b/projects/plugins/jetpack/changelog/update-likes-hide-avatars
@@ -0,0 +1,4 @@
+Significance: minor
+Type: enhancement
+
+Likes block: allow hiding avatars
diff --git a/projects/plugins/jetpack/extensions/blocks/like/block.json b/projects/plugins/jetpack/extensions/blocks/like/block.json
@@ -14,6 +14,10 @@
 		"showReblogButton": {
 			"type": "boolean",
 			"default": false
+		},
+		"showAvatars": {
+			"type": "boolean",
+			"default": true
 		}
 	}
 }
diff --git a/projects/plugins/jetpack/extensions/blocks/like/edit.js b/projects/plugins/jetpack/extensions/blocks/like/edit.js
@@ -3,25 +3,19 @@ import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
 import { ExternalLink, ToggleControl, PanelBody } from '@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
+import { getValidatedAttributes } from '../../shared/get-validated-attributes';
 import avatar1 from '../blogging-prompt/example-avatars/avatar1.jpg';
 import avatar2 from '../blogging-prompt/example-avatars/avatar2.jpg';
 import avatar3 from '../blogging-prompt/example-avatars/avatar3.jpg';
+import metadata from './block.json';
 import './editor.scss';
 
 function LikeEdit( { attributes, setAttributes } ) {
 	const blockProps = useBlockProps();
-	const showReblogButton = attributes?.showReblogButton || false;
-
-	const handleReblogSetting = newValue => {
-		setAttributes( {
-			showReblogButton: newValue,
-		} );
-	};
-
+	const validatedAttributes = getValidatedAttributes( metadata.attributes, attributes );
+	const { showReblogButton, showAvatars } = validatedAttributes;
 	const isJetpackSite = ! isAtomicSite() && ! isSimpleSite();
-
 	const avatars = [ avatar1, avatar2, avatar3 ];
-
 	const preventDefault = event => event.preventDefault();
 
 	return (
@@ -34,18 +28,22 @@ function LikeEdit( { attributes, setAttributes } ) {
 						</ExternalLink>
 					</div>
 				) }
-				{ isSimpleSite() && (
-					<PanelBody title={ __( 'Settings', 'jetpack' ) }>
+				<PanelBody title={ __( 'Settings', 'jetpack' ) }>
+					{ isSimpleSite() && (
 						<ToggleControl
 							label={ __( 'Show reblog button', 'jetpack' ) }
 							checked={ showReblogButton }
-							onChange={ newValue => {
-								handleReblogSetting( newValue );
-							} }
+							onChange={ () => setAttributes( { showReblogButton: ! showReblogButton } ) }
 							__nextHasNoMarginBottom={ true }
 						/>
-					</PanelBody>
-				) }
+					) }
+					<ToggleControl
+						label={ __( 'Show avatars', 'jetpack' ) }
+						checked={ showAvatars }
+						onChange={ () => setAttributes( { showAvatars: ! showAvatars } ) }
+						__nextHasNoMarginBottom={ true }
+					/>
+				</PanelBody>
 			</InspectorControls>
 			<div className="wpl-likebox wpl-new-layout">
 				{ isSimpleSite() && showReblogButton && (
@@ -65,21 +63,23 @@ function LikeEdit( { attributes, setAttributes } ) {
 						<span>{ __( 'Like', 'jetpack' ) }</span>
 					</a>
 				</div>
-				<ul className="wpl-avatars">
-					{ avatars.map( ( avatar, i ) => (
-						<li key={ `liker-${ i }` } className="wp-liker-me">
-							<a className="wpl-liker" href="#" rel="nofollow" onClick={ preventDefault }>
-								<img
-									src={ avatar }
-									className="avatar avatar-30"
-									width={ 30 }
-									height={ 30 }
-									alt=""
-								/>
-							</a>
-						</li>
-					) ) }
-				</ul>
+				{ showAvatars && (
+					<ul className="wpl-avatars">
+						{ avatars.map( ( avatar, i ) => (
+							<li key={ `liker-${ i }` } className="wp-liker-me">
+								<a className="wpl-liker" href="#" rel="nofollow" onClick={ preventDefault }>
+									<img
+										src={ avatar }
+										className="avatar avatar-30"
+										width={ 30 }
+										height={ 30 }
+										alt=""
+									/>
+								</a>
+							</li>
+						) ) }
+					</ul>
+				) }
 				<div className="wpl-count">
 					<span className="wpl-count-text">
 						<a href="#" onClick={ preventDefault }>

diff --git a/projects/plugins/jetpack/extensions/blocks/like/like.php b/projects/plugins/jetpack/extensions/blocks/like/like.php
@@ -90,24 +90,27 @@ function render_block( $attr, $content, $block ) {
 	wp_enqueue_style( 'jetpack_likes', $style_url, array(), JETPACK__VERSION );
 
 	$show_reblog_button = $attr['showReblogButton'] ?? false;
+	$show_avatars       = $attr['showAvatars'] ?? true;
 	if ( defined( 'IS_WPCOM' ) && IS_WPCOM ) {
-		$blog_id      = get_current_blog_id();
-		$bloginfo     = get_blog_details( (int) $blog_id );
-		$domain       = $bloginfo->domain;
-		$reblog_param = $show_reblog_button ? '&amp;reblog=1' : '';
-		$src          = sprintf( '//widgets.wp.com/likes/index.html?ver=%1$s#blog_id=%2$d&amp;post_id=%3$d&amp;origin=%4$s&amp;obj_id=%2$d-%3$d-%5$s%6$s&amp;block=1%7$s', rawurlencode( JETPACK__VERSION ), $blog_id, $post_id, $domain, $uniqid, $new_layout, $reblog_param );
+		$blog_id            = get_current_blog_id();
+		$bloginfo           = get_blog_details( (int) $blog_id );
+		$domain             = $bloginfo->domain;
+		$reblog_param       = $show_reblog_button ? '&amp;reblog=1' : '';
+		$show_avatars_param = $show_avatars ? '' : '&amp;slim=1';
+		$src                = sprintf( '//widgets.wp.com/likes/index.html?ver=%1$s#blog_id=%2$d&amp;post_id=%3$d&amp;origin=%4$s&amp;obj_id=%2$d-%3$d-%5$s%6$s&amp;block=1%7$s%8$s', rawurlencode( JETPACK__VERSION ), $blog_id, $post_id, $domain, $uniqid, $new_layout, $reblog_param, $show_avatars_param );
 
 		// provide the mapped domain when needed
 		if ( isset( $_SERVER['HTTP_HOST'] ) && strpos( sanitize_text_field( wp_unslash( $_SERVER['HTTP_HOST'] ) ), '.wordpress.com' ) === false ) {
 			$sanitized_host = filter_var( wp_unslash( $_SERVER['HTTP_HOST'] ), FILTER_SANITIZE_URL );
 			$src           .= '&amp;domain=' . rawurlencode( $sanitized_host );
 		}
 	} else {
-		$blog_id   = \Jetpack_Options::get_option( 'id' );
-		$url       = home_url();
-		$url_parts = wp_parse_url( $url );
-		$domain    = $url_parts['host'];
-		$src       = sprintf( 'https://widgets.wp.com/likes/?ver=%1$s#blog_id=%2$d&amp;post_id=%3$d&amp;origin=%4$s&amp;obj_id=%2$d-%3$d-%5$s%6$s&amp;block=1', rawurlencode( JETPACK__VERSION ), $blog_id, $post_id, $domain, $uniqid, $new_layout );
+		$blog_id            = \Jetpack_Options::get_option( 'id' );
+		$url                = home_url();
+		$url_parts          = wp_parse_url( $url );
+		$domain             = $url_parts['host'];
+		$show_avatars_param = $show_avatars ? '' : '&amp;slim=1';
+		$src                = sprintf( 'https://widgets.wp.com/likes/?ver=%1$s#blog_id=%2$d&amp;post_id=%3$d&amp;origin=%4$s&amp;obj_id=%2$d-%3$d-%5$s%6$s&amp;block=1%7$s', rawurlencode( JETPACK__VERSION ), $blog_id, $post_id, $domain, $uniqid, $new_layout, $show_avatars_param );
 	}
 
 	$name    = sprintf( 'like-post-frame-%1$d-%2$d-%3$s', $blog_id, $post_id, $uniqid );