reusable block hint spacing

WordPress · Jul 5, 2023 · 2c6a34a · 2c6a34a
1 parent e11f7a0
commit 2c6a34a
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 4 deletions.
diff --git a/packages/block-editor/src/components/inserter/reusable-block-rename-hint.js b/packages/block-editor/src/components/inserter/reusable-block-rename-hint.js
@@ -29,7 +29,7 @@ export default function ReusableBlocksRenameHint() {
 		<div ref={ ref } className="reusable-blocks-menu-items__rename-hint">
 			<div className="reusable-blocks-menu-items__rename-hint-content">
 				{ __(
-					'Reusable blocks are now called "patterns". A "synced" pattern will behave in exactly the same way as a reusable block.'
+					'Reusable blocks are now called patterns. A synced pattern will behave in exactly the same way as a reusable block.'
 				) }
 			</div>
 			<Button

diff --git a/packages/block-editor/src/components/inserter/reusable-blocks-tab.js b/packages/block-editor/src/components/inserter/reusable-blocks-tab.js
@@ -55,7 +55,9 @@ function ReusableBlocksList( { onHover, onInsert, rootClientId } ) {
 export function ReusableBlocksTab( { rootClientId, onInsert, onHover } ) {
 	return (
 		<>
-			<ReusableBlocksRenameHint />
+			<div className="block-editor-inserter__hint">
+				<ReusableBlocksRenameHint />
+			</div>
 			<ReusableBlocksList
 				onHover={ onHover }
 				onInsert={ onInsert }

diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss
@@ -712,14 +712,17 @@ $block-inserter-tabs-height: 44px;
 	}
 }
 
+.block-editor-inserter__hint {
+	margin: $grid-unit-20 $grid-unit-20 0;
+}
+
 .reusable-blocks-menu-items__rename-hint {
 	align-items: top;
 	background: $gray-100;
 	border-radius: $radius-block-ui;
 	color: $gray-900;
 	display: flex;
 	flex-direction: row;
-	margin: $grid-unit-20 $grid-unit-20 $grid-unit-20 $grid-unit-20;
 	max-width: 380px;
 }
 

diff --git a/...eusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js b/...eusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js
@@ -151,8 +151,8 @@ export default function ReusableBlockConvertButton( {
 									onClose();
 								} }
 							>
-								<ReusableBlocksRenameHint />
 								<VStack spacing="5">
+									<ReusableBlocksRenameHint />
 									<TextControl
 										__nextHasNoMarginBottom
 										label={ __( 'Name' ) }