Blogroll: Add appender image placeholder and fix image sizing issue (#35494)

agrullon95 · web-flow · commit 463e1aca1cb2 · 2024-02-09T10:27:37.000+01:00
diff --git a/projects/plugins/jetpack/changelog/update-blogroll-site-appender-results-img-placeholder b/projects/plugins/jetpack/changelog/update-blogroll-site-appender-results-img-placeholder
@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+Fix blogroll item image size and fix blogroll appender result image placeholder
diff --git a/projects/plugins/jetpack/extensions/blocks/blogroll/blogroll-item/blogroll-item.php b/projects/plugins/jetpack/extensions/blocks/blogroll/blogroll-item/blogroll-item.php
@@ -75,7 +75,7 @@ function load_assets( $attr, $content, $block ) {
 
 	$placeholder_site_icon = '';
 	$site_icon_html        = <<<HTML
-	<img src="$icon" alt="$name_attr" onerror="this.parentNode.classList.add('empty-site-icon')">
+	<img class="blogroll-item-image" src="$icon" alt="$name_attr" onerror="this.parentNode.classList.add('empty-site-icon')">
 HTML;
 
 	if ( empty( $icon ) ) {
diff --git a/projects/plugins/jetpack/extensions/blocks/blogroll/blogroll-item/edit.js b/projects/plugins/jetpack/extensions/blocks/blogroll/blogroll-item/edit.js
@@ -18,6 +18,7 @@ function BlogrollItemEdit( { className, attributes, setAttributes } ) {
 					<Button variant="link" onClick={ open } style={ { padding: 0 } }>
 						<figure>
 							<img
+								class="blogroll-item-image"
 								onError={ event => {
 									event.target.parentNode.classList.add( 'empty-site-icon' );
 								} }
diff --git a/projects/plugins/jetpack/extensions/blocks/blogroll/blogroll-item/editor.scss b/projects/plugins/jetpack/extensions/blocks/blogroll/blogroll-item/editor.scss
@@ -15,13 +15,13 @@
 				background: url('../placeholder-site-icon.svg');
 				background-size: cover;
 
-				img {
+				.blogroll-item-image {
 					display: none;
 				}
 			}
 		}
 
-	img {
+	.blogroll-item-image {
 		border-radius: 50%;
 		width: 48px;
 		height: 48px;
diff --git a/projects/plugins/jetpack/extensions/blocks/blogroll/components/blogroll-appender-results/index.js b/projects/plugins/jetpack/extensions/blocks/blogroll/components/blogroll-appender-results/index.js
@@ -54,7 +54,15 @@ export default function BlogrollAppenderResults( { results, onSelect, searchInpu
 									onClick={ () => onSelect( result ) }
 								>
 									<div className="jetpack-blogroll__appender-result-image">
-										{ result.site_icon && <img src={ result.site_icon } alt={ result.name } /> }
+										{ result.site_icon && (
+											<img
+												src={ result.site_icon }
+												alt={ result.name }
+												onError={ event => {
+													event.target.parentNode.classList.add( 'empty-site-icon' );
+												} }
+											/>
+										) }
 									</div>
 									<div className="jetpack-blogroll__appender-result-text">
 										<span className="jetpack-blogroll__appender-result-title">{ result.name }</span>
diff --git a/projects/plugins/jetpack/extensions/blocks/blogroll/components/blogroll-appender-results/style.scss b/projects/plugins/jetpack/extensions/blocks/blogroll/components/blogroll-appender-results/style.scss
@@ -70,6 +70,15 @@
 				height: 40px;
 				flex-shrink: 0;
 
+				&.empty-site-icon {
+					background: url('../../placeholder-site-icon.svg');
+					background-size: cover;
+	
+					img {
+						display: none;
+					}
+				}
+
 				img {
 					border-radius: 50%;
 					width: 40px;

Original file line number	Diff line number	Diff line change
`@@ -15,13 +15,13 @@`
`15`	`15`	`background: url('../placeholder-site-icon.svg');`
`16`	`16`	`background-size: cover;`
`17`	`17`
`18`		`- img {`
	`18`	`+ .blogroll-item-image {`
`19`	`19`	`display: none;`
`20`	`20`	`}`
`21`	`21`	`}`
`22`	`22`	`}`
`23`	`23`
`24`		`- img {`
	`24`	`+ .blogroll-item-image {`
`25`	`25`	`border-radius: 50%;`
`26`	`26`	`width: 48px;`
`27`	`27`	`height: 48px;`