From 81a5043495d2ac3a658f1d5fc17fb1c304dfb2fb Mon Sep 17 00:00:00 2001
From: Nik Tsekouras <ntsekouras@outlook.com>
Date: Mon, 13 Dec 2021 11:38:59 +0200
Subject: [PATCH] [Global Styles]: Make Blocks section more distinguishable
 (#37293)

---
 .../components/global-styles/screen-root.js   | 24 +++++++++++++------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/screen-root.js b/packages/edit-site/src/components/global-styles/screen-root.js
index 04cf788b35753f..26fbf29cf9810d 100644
--- a/packages/edit-site/src/components/global-styles/screen-root.js
+++ b/packages/edit-site/src/components/global-styles/screen-root.js
@@ -4,11 +4,14 @@
 import {
 	__experimentalItemGroup as ItemGroup,
 	__experimentalItem as Item,
+	__experimentalHStack as HStack,
+	FlexItem,
 	CardBody,
 	Card,
 	CardDivider,
 } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { isRTL, __ } from '@wordpress/i18n';
+import { chevronLeft, chevronRight, Icon } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -33,14 +36,21 @@ function ScreenRoot() {
 			<CardBody>
 				<ItemGroup>
 					<Item>
-						<p>
-							{ __(
-								'Customize the appearance of specific blocks for the whole site.'
-							) }
-						</p>
+						{ __(
+							'Customize the appearance of specific blocks for the whole site.'
+						) }
 					</Item>
 					<NavigationButton path="/blocks">
-						{ __( 'Blocks' ) }
+						<HStack justify="space-between">
+							<FlexItem>{ __( 'Blocks' ) }</FlexItem>
+							<FlexItem>
+								<Icon
+									icon={
+										isRTL() ? chevronLeft : chevronRight
+									}
+								/>
+							</FlexItem>
+						</HStack>
 					</NavigationButton>
 				</ItemGroup>
 			</CardBody>