Add close icon.

WordPress · Mar 22, 2021 · 9a4c0cd · 9a4c0cd
1 parent 1aeb0a8
commit 9a4c0cd
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git a/packages/block-library/src/navigation/edit.js b/packages/block-library/src/navigation/edit.js
@@ -25,6 +25,7 @@ import {
 } from '@wordpress/components';
 import { compose } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
+import { closeSmall, Icon } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -192,7 +193,7 @@ function Navigation( {
 									setResponsiveMenuOpen( false );
 								} }
 							>
-								X
+								<Icon icon={ closeSmall } />
 							</Button>
 							<div
 								className="wp-block-navigation__responsive-container-content"

diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php
@@ -166,7 +166,7 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 	<div class="wp-block-navigation__responsive-container" id="modal-1" aria-hidden="true">
 		<div class="wp-block-navigation__responsive-close" tabindex="-1" data-micromodal-close>
 			<div class="wp-block-navigation__responsive-dialog" role="dialog" aria-modal="true" aria-labelledby="modal-1-title" >
-					<button aria-label="Close modal" data-micromodal-close class="wp-block-navigation__responsive-container-close">X</button>
+					<button aria-label="Close modal" data-micromodal-close class="wp-block-navigation__responsive-container-close"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" role="img" aria-hidden="true" focusable="false"><path d="M13 11.9l3.3-3.4-1.1-1-3.2 3.3-3.2-3.3-1.1 1 3.3 3.4-3.5 3.6 1 1L12 13l3.5 3.5 1-1z"></path></svg></button>
 				<div class="wp-block-navigation__responsive-content" id="modal-1-content">
 					<ul class="wp-block-navigation__container">%1$s</ul>
 				</div>

diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
@@ -92,9 +92,12 @@
 	position: absolute;
 	top: 60px;
 	right: 16px;
-	font-size: 1rem;
-	background-color: #000;
 	color: #fff;
+
+	svg {
+		fill: currentColor;
+	}
+
 	@include break-mobile() {
 		display: none;
 	}