From 39b3c80af7618108eed0a448743d9a9eed136b82 Mon Sep 17 00:00:00 2001
From: karthick-murugan <karthick.murugan02@gmail.com>
Date: Wed, 18 Dec 2024 11:57:33 +0530
Subject: [PATCH] feedback changes

---
 .../block-library/src/latest-posts/edit.js    | 62 ++++++++++---------
 .../src/latest-posts/editor.scss              | 16 +++++
 2 files changed, 49 insertions(+), 29 deletions(-)

diff --git a/packages/block-library/src/latest-posts/edit.js b/packages/block-library/src/latest-posts/edit.js
index e75cc7adb95767..5c5a39033246f7 100644
--- a/packages/block-library/src/latest-posts/edit.js
+++ b/packages/block-library/src/latest-posts/edit.js
@@ -360,36 +360,40 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 					/>
 					{ displayFeaturedImage && (
 						<>
-							<ImageSizeControl
-								onChange={ ( value ) => {
-									const newAttrs = {};
-									if ( value.hasOwnProperty( 'width' ) ) {
-										newAttrs.featuredImageSizeWidth =
-											value.width;
-									}
-									if ( value.hasOwnProperty( 'height' ) ) {
-										newAttrs.featuredImageSizeHeight =
-											value.height;
+							<div className="latest-posts-image-size-control-wrapper">
+								<ImageSizeControl
+									onChange={ ( value ) => {
+										const newAttrs = {};
+										if ( value.hasOwnProperty( 'width' ) ) {
+											newAttrs.featuredImageSizeWidth =
+												value.width;
+										}
+										if (
+											value.hasOwnProperty( 'height' )
+										) {
+											newAttrs.featuredImageSizeHeight =
+												value.height;
+										}
+										setAttributes( newAttrs );
+									} }
+									slug={ featuredImageSizeSlug }
+									width={ featuredImageSizeWidth }
+									height={ featuredImageSizeHeight }
+									imageWidth={ defaultImageWidth }
+									imageHeight={ defaultImageHeight }
+									imageSizeOptions={ imageSizeOptions }
+									imageSizeHelp={ __(
+										'Select the size of the source image.'
+									) }
+									onChangeImage={ ( value ) =>
+										setAttributes( {
+											featuredImageSizeSlug: value,
+											featuredImageSizeWidth: undefined,
+											featuredImageSizeHeight: undefined,
+										} )
 									}
-									setAttributes( newAttrs );
-								} }
-								slug={ featuredImageSizeSlug }
-								width={ featuredImageSizeWidth }
-								height={ featuredImageSizeHeight }
-								imageWidth={ defaultImageWidth }
-								imageHeight={ defaultImageHeight }
-								imageSizeOptions={ imageSizeOptions }
-								imageSizeHelp={ __(
-									'Select the size of the source image.'
-								) }
-								onChangeImage={ ( value ) =>
-									setAttributes( {
-										featuredImageSizeSlug: value,
-										featuredImageSizeWidth: undefined,
-										featuredImageSizeHeight: undefined,
-									} )
-								}
-							/>
+								/>
+							</div>
 							<ToggleGroupControl
 								className="editor-latest-posts-image-alignment-control"
 								__nextHasNoMarginBottom
diff --git a/packages/block-library/src/latest-posts/editor.scss b/packages/block-library/src/latest-posts/editor.scss
index 26ef7bcd55b5ff..9acff8d34a78d2 100644
--- a/packages/block-library/src/latest-posts/editor.scss
+++ b/packages/block-library/src/latest-posts/editor.scss
@@ -26,3 +26,19 @@
 .latest-posts-toggle-control-margin-top {
 	margin-top: 15px !important;
 }
+
+.latest-posts-image-size-control-wrapper {
+	display: flex;
+	flex-direction: column;
+	gap: 10px; /* Adjust spacing between lines */
+}
+
+.latest-posts-image-size-control-wrapper > * {
+	margin-bottom: 20px; /* Optional: Ensures consistent spacing */
+	margin-top: 8px;
+}
+
+.latest-posts-image-size-control-wrapper .block-editor-image-size-control {
+	display: grid;
+	gap: 15px;
+}