Replace clickable div elements with buttons in the Add template modal. (

WordPress#42668)
Luc45 · Jul 27, 2022 · b9967bf · b9967bf
1 parent 8d2e12d
commit b9967bf
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 13 deletions.
diff --git a/packages/edit-site/src/components/add-new-template/add-custom-template-modal.js b/packages/edit-site/src/components/add-new-template/add-custom-template-modal.js
@@ -11,7 +11,6 @@ import {
 	SearchControl,
 	TextHighlight,
 	__experimentalText as Text,
-	__experimentalHeading as Heading,
 	__unstableComposite as Composite,
 	__unstableUseCompositeState as useCompositeState,
 	__unstableCompositeItem as CompositeItem,
@@ -191,15 +190,16 @@ function AddCustomTemplateModal( { onClose, onSelect, entityForSuggestions } ) {
 					>
 						<FlexItem
 							isBlock
+							as={ Button }
 							onClick={ () => {
 								const { slug, title, description } =
 									entityForSuggestions.template;
 								onSelect( { slug, title, description } );
 							} }
 						>
-							<Heading level={ 5 }>
+							<Text as="span" weight={ 600 }>
 								{ entityForSuggestions.labels.all_items }
-							</Heading>
+							</Text>
 							<Text as="span">
 								{
 									// translators: The user is given the choice to set up a template for all items of a post type or taxonomy, or just a specific one.
@@ -209,13 +209,14 @@ function AddCustomTemplateModal( { onClose, onSelect, entityForSuggestions } ) {
 						</FlexItem>
 						<FlexItem
 							isBlock
+							as={ Button }
 							onClick={ () => {
 								setShowSearchEntities( true );
 							} }
 						>
-							<Heading level={ 5 }>
+							<Text as="span" weight={ 600 }>
 								{ entityForSuggestions.labels.singular_name }
-							</Heading>
+							</Text>
 							<Text as="span">
 								{
 									// translators: The user is given the choice to set up a template for all items of a post type or taxonomy, or just a specific one.

diff --git a/packages/edit-site/src/components/add-new-template/style.scss b/packages/edit-site/src/components/add-new-template/style.scss
@@ -12,33 +12,45 @@
 
 .edit-site-custom-template-modal {
 	&__contents {
-		> div {
-			text-align: center;
-			cursor: pointer;
+		> .components-button {
 			padding: $grid-unit-30;
-			border: 1px solid $gray-300;
+			box-shadow: inset 0 0 0 $border-width $gray-600;
 			border-radius: $radius-block-ui;
 			width: 256px;
+			height: auto;
 			display: flex;
 			flex-direction: column;
 			gap: $grid-unit;
-			align-items: center;
-			justify-content: center;
+
+			// Show the boundary of the button, in High Contrast Mode.
+			outline: 1px solid transparent;
+
+			span:first-child {
+				color: $gray-900;
+			}
 
 			span {
 				color: $gray-700;
 			}
 
 			&:hover {
-				border-color: var(--wp-admin-theme-color);
+				color: var(--wp-admin-theme-color-darker-10);
+				box-shadow: inset 0 0 0 $border-width var(--wp-admin-theme-color-darker-10);
 
-				h5 {
+				span:first-child {
 					color: var(--wp-admin-theme-color);
 				}
 			}
 
 			&:focus {
 				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+
+				// Windows High Contrast mode will show this outline, but not the box-shadow.
+				outline: 3px solid transparent;
+
+				span:first-child {
+					color: var(--wp-admin-theme-color);
+				}
 			}
 		}
 	}