From 0e90225a6bfcfdd5de9cc05ddb4cc67d01583245 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Enrique=20S=C3=A1nchez?= <enrique.sanchez.garcia@gmail.com>
Date: Tue, 27 Aug 2019 15:24:01 -0500
Subject: [PATCH 1/2] Add keyboard shortcut styling to "/" in default tip

---
 packages/block-editor/src/components/inserter/menu.js | 6 +++++-
 packages/components/src/tip/style.scss                | 4 ++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
index 0d555633d91a96..f50f94be5ab50d 100644
--- a/packages/block-editor/src/components/inserter/menu.js
+++ b/packages/block-editor/src/components/inserter/menu.js
@@ -404,7 +404,11 @@ export class InserterMenu extends Component {
 								</div>
 								<Tip>
 									{ __(
-										'While writing, you can press "/" to quickly insert new blocks.'
+										'While writing, you can press'
+									) }
+									<kbd className="edit-post-keyboard-shortcut-help__shortcut-key">/</kbd>
+									{ __(
+										' to quickly insert new blocks.'
 									) }
 								</Tip>
 							</div>
diff --git a/packages/components/src/tip/style.scss b/packages/components/src/tip/style.scss
index d02afb1bdf8d09..2ac7cb9f6eb3ef 100644
--- a/packages/components/src/tip/style.scss
+++ b/packages/components/src/tip/style.scss
@@ -12,4 +12,8 @@
 	p {
 		margin: 0;
 	}
+
+	kbd {
+		font-weight: 600;
+	}
 }

From be8df5831df2b841e3d51d336527b76901208467 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Enrique=20S=C3=A1nchez?= <enrique.sanchez.garcia@gmail.com>
Date: Wed, 28 Aug 2019 14:07:50 -0500
Subject: [PATCH 2/2] Duplicate keyboard shortcut styles instead of reusing
 another component's class

---
 packages/block-editor/src/components/inserter/menu.js | 2 +-
 packages/components/src/tip/style.scss                | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
index f50f94be5ab50d..94d0596c4fe471 100644
--- a/packages/block-editor/src/components/inserter/menu.js
+++ b/packages/block-editor/src/components/inserter/menu.js
@@ -406,7 +406,7 @@ export class InserterMenu extends Component {
 									{ __(
 										'While writing, you can press'
 									) }
-									<kbd className="edit-post-keyboard-shortcut-help__shortcut-key">/</kbd>
+									<kbd>/</kbd>
 									{ __(
 										' to quickly insert new blocks.'
 									) }
diff --git a/packages/components/src/tip/style.scss b/packages/components/src/tip/style.scss
index 2ac7cb9f6eb3ef..4a9004386a96ec 100644
--- a/packages/components/src/tip/style.scss
+++ b/packages/components/src/tip/style.scss
@@ -15,5 +15,8 @@
 
 	kbd {
 		font-weight: 600;
+		padding: 0.25rem 0.5rem;
+		border-radius: 8%;
+		margin: 0 0.2rem 0 0.2rem;
 	}
 }