From 01069ee9af5d28bc474ec4e42610b91c3db393ca Mon Sep 17 00:00:00 2001
From: Dean Sas <dean.sas@automattic.com>
Date: Wed, 9 Nov 2022 10:38:49 -0700
Subject: [PATCH] Make Manage Reusable blocks match similar links

The Manage Reusable blocks link inside the reusable blocks inserter
should match other similar links such as 'Explore all patterns' on the
pattern inserter.
---
 .../src/components/inserter/reusable-blocks-tab.js   |  6 ++++--
 .../block-editor/src/components/inserter/style.scss  | 12 ++++++------
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/packages/block-editor/src/components/inserter/reusable-blocks-tab.js b/packages/block-editor/src/components/inserter/reusable-blocks-tab.js
index 2fbd5e49ae8c06..9505dd77f3b94d 100644
--- a/packages/block-editor/src/components/inserter/reusable-blocks-tab.js
+++ b/packages/block-editor/src/components/inserter/reusable-blocks-tab.js
@@ -4,6 +4,7 @@
 import { useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { addQueryArgs } from '@wordpress/url';
+import { Button } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -59,14 +60,15 @@ export function ReusableBlocksTab( { rootClientId, onInsert, onHover } ) {
 				rootClientId={ rootClientId }
 			/>
 			<div className="block-editor-inserter__manage-reusable-blocks-container">
-				<a
+				<Button
 					className="block-editor-inserter__manage-reusable-blocks"
+					variant="secondary"
 					href={ addQueryArgs( 'edit.php', {
 						post_type: 'wp_block',
 					} ) }
 				>
 					{ __( 'Manage Reusable blocks' ) }
-				</a>
+				</Button>
 			</div>
 		</>
 	);
diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss
index 210f2db211c00a..12a3690f71e4de 100644
--- a/packages/block-editor/src/components/inserter/style.scss
+++ b/packages/block-editor/src/components/inserter/style.scss
@@ -174,11 +174,15 @@ $block-inserter-tabs-height: 44px;
 	text-align: right;
 }
 
-.block-editor-inserter__manage-reusable-blocks {
-	display: inline-block;
+.block-editor-inserter__manage-reusable-blocks-container {
 	margin: $grid-unit-20;
 }
 
+.block-editor-inserter__manage-reusable-blocks {
+	justify-content: center;
+	width: 100%;
+}
+
 .block-editor-inserter__no-results {
 	padding: $grid-unit-40;
 	text-align: center;
@@ -341,10 +345,6 @@ $block-inserter-tabs-height: 44px;
 	position: relative; // prevents overscroll when block library is open
 }
 
-.block-editor-inserter__manage-reusable-blocks-container {
-	padding: $grid-unit-20;
-}
-
 .block-editor-inserter__quick-inserter {
 	width: 100%;