Block Directory: Update layout for smaller inserter width. (#22124)

* Change block meta icon column to row layout.

* Reduce margin bottom for rows.

* Make padding consistent and extend block tile to full inserter width.

* Remove border radius from list item.

packages/block-directory/src/components/downloadable-block-author-info/style.scss

@@ -1,9 +1,9 @@
 .block-directory-downloadable-block-author-info__content {
 	color: $dark-gray-400;
-	margin-bottom: 4px;
+	font-size: 12px;
 }
 
 .block-directory-downloadable-block-author-info__content-author {
 	margin-bottom: 4px;
-	font-size: 14px;
+	font-size: $default-font-size;
 }

packages/block-directory/src/components/downloadable-block-info/index.js

@@ -15,24 +15,28 @@ function DownloadableBlockInfo( {
 			<p className="block-directory-downloadable-block-info__content">
 				{ description }
 			</p>
-			<div className="block-directory-downloadable-block-info__row">
-				<div className="block-directory-downloadable-block-info__column">
-					<Icon icon={ chartLine }></Icon>
-					{ sprintf(
-						/* translators: %s: number of active installations. */
-						_n(
-							'%d active installation',
-							'%d active installations',
-							activeInstalls
-						),
+			<div className="block-directory-downloadable-block-info__meta">
+				<Icon
+					className="block-directory-downloadable-block-info__icon"
+					icon={ chartLine }
+				/>
+				{ sprintf(
+					/* translators: %s: number of active installations. */
+					_n(
+						'%d active installation',
+						'%d active installations',
 						activeInstalls
-					) }
-				</div>
-				<div className="block-directory-downloadable-block-info__column">
-					<Icon icon={ update }></Icon>
-					{ // translators: %s: Humanized date of last update e.g: "2 months ago".
-					sprintf( __( 'Updated %s' ), humanizedUpdated ) }
-				</div>
+					),
+					activeInstalls
+				) }
+			</div>
+			<div className="block-directory-downloadable-block-info__meta">
+				<Icon
+					className="block-directory-downloadable-block-info__icon"
+					icon={ update }
+				/>
+				{ // translators: %s: Humanized date of last update e.g: "2 months ago".
+				sprintf( __( 'Updated %s' ), humanizedUpdated ) }
 			</div>
 		</Fragment>
 	);

packages/block-directory/src/components/downloadable-block-info/style.scss

@@ -1,21 +1,21 @@
 .block-directory-downloadable-block-info__content {
+	margin: 0 0 $grid-unit-20;
 	font-size: $default-font-size;
 }
 
-.block-directory-downloadable-block-info__row {
+.block-directory-downloadable-block-info__meta {
 	display: flex;
-	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 2px;
 	color: $dark-gray-400;
-	margin-top: $grid-unit-10;
 	font-size: 12px;
+}
 
-	.block-directory-downloadable-block-info__column {
-		display: flex;
-		align-items: center;
+.block-directory-downloadable-block-info__meta:last-child {
+	margin-bottom: 0;
+}
 
-		.dashicon {
-			font-size: 16px;
-			margin-right: 4px;
-		}
-	}
+.block-directory-downloadable-block-info__icon {
+	margin-right: 4px;
+	fill: $dark-gray-400;
 }

packages/block-directory/src/components/downloadable-block-list-item/style.scss

@@ -1,7 +1,7 @@
 .block-directory-downloadable-block-list-item {
 	width: 100%;
 	padding: 0;
-	margin: 0 0 12px;
+	margin: 0;
 	display: flex;
 	flex-direction: row;
 	font-size: $default-font-size;
@@ -10,15 +10,19 @@
 	justify-content: center;
 	background: transparent;
 	word-break: break-word;
-	border-radius: $radius-block-ui;
-	border: $border-width solid $light-gray-500;
+	border-top: $border-width solid $light-gray-500;
+	border-bottom: $border-width solid $light-gray-500;
 	transition: all 0.05s ease-in-out;
 	@include reduce-motion("transition");
 	position: relative;
 	text-align: left;
 	overflow: hidden;
 }
 
+.block-directory-downloadable-block-list-item:last-child:not(:only-of-type) {
+	border-top: 0;
+}
+
 .block-directory-downloadable-block-list-item__panel {
 	display: flex;
 	flex-grow: 1;
@@ -28,19 +32,19 @@
 .block-directory-downloadable-block-list-item__header {
 	display: flex;
 	flex-direction: column;
-	padding: 12px 12px 0;
+	padding: $grid-unit-20 $grid-unit-20 0;
 }
 
 .block-directory-downloadable-block-list-item__body {
 	display: flex;
 	flex-direction: column;
-	padding: 12px;
+	padding: $grid-unit-20;
 }
 
 .block-directory-downloadable-block-list-item__footer {
 	display: flex;
 	flex-direction: column;
-	padding: 12px;
+	padding: $grid-unit-20;
 	background-color: $light-gray-200;
 }
 

packages/block-directory/src/components/downloadable-blocks-list/style.scss

@@ -1,6 +1,6 @@
 .block-directory-downloadable-blocks-list {
 	list-style: none;
-	padding: 2px 0;
+	margin: 0;
 	overflow: hidden;
 	display: flex;
 	flex-wrap: wrap;

packages/block-directory/src/components/downloadable-blocks-panel/style.scss

@@ -1,7 +1,8 @@
 
 .block-directory-downloadable-blocks-panel__description {
 	font-style: italic;
-	padding: 0;
+	padding: $grid-unit-20;
+	margin: 0;
 	text-align: left;
 	color: $dark-gray-400;
 }

packages/block-editor/src/components/inserter/block-list.js

@@ -282,11 +282,7 @@ function InserterBlockList( {
 			>
 				{ ( fills ) => {
 					if ( fills.length ) {
-						return (
-							<InserterPanel title={ __( 'Search Results' ) }>
-								{ fills }
-							</InserterPanel>
-						);
+						return fills;
 					}
 					if ( ! hasItems ) {
 						return <InserterNoResults />;