feedback changes

karthick-murugan · Dec 18, 2024 · 39b3c80 · 39b3c80
1 parent f4851be
commit 39b3c80
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 29 deletions.
diff --git 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
@@ -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;
+}