@wordpress/edit-site 5.3.4 → 5.3.6

package/build-style/style-rtl.css

@@ -413,15 +413,18 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   }
 }
 .interface-interface-skeleton__actions:focus, .interface-interface-skeleton__actions:focus-within {
-  top: 46px;
+  top: auto;
   bottom: 0;
 }
+.is-entity-save-view-open .interface-interface-skeleton__actions:focus, .is-entity-save-view-open .interface-interface-skeleton__actions:focus-within {
+  top: 46px;
+}
 @media (min-width: 782px) {
-  .interface-interface-skeleton__actions:focus, .interface-interface-skeleton__actions:focus-within {
+  .is-entity-save-view-open .interface-interface-skeleton__actions:focus, .is-entity-save-view-open .interface-interface-skeleton__actions:focus-within {
     border-right: 1px solid #ddd;
     top: 32px;
   }
-  .is-fullscreen-mode .interface-interface-skeleton__actions:focus, .is-fullscreen-mode .interface-interface-skeleton__actions:focus-within {
+  .is-fullscreen-mode .is-entity-save-view-open .interface-interface-skeleton__actions:focus, .is-fullscreen-mode .is-entity-save-view-open .interface-interface-skeleton__actions:focus-within {
     top: 0;
   }
 }
@@ -615,9 +618,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   }
 }
 
-.edit-site-custom-template-modal__suggestions_list {
-  margin-top: 16px;
-}
 @media (min-width: 600px) {
   .edit-site-custom-template-modal__suggestions_list {
     height: 232px;
@@ -668,8 +668,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   border: 1px solid #ccc;
   border-radius: 2px;
   padding: 16px;
-  margin-bottom: 0;
-  margin-top: 16px;
 }
 
 @media (min-width: 782px) {
@@ -716,7 +714,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   height: 100%;
   display: block;
   overflow: hidden;
-  background-color: #2f2f2f;
+  background-color: #1e1e1e;
   align-items: center;
   /*
   	Temporary to hide the contextual toolbar in view mode.
@@ -1527,7 +1525,6 @@ body.is-fullscreen-mode .edit-site-list-header {
 .edit-site-list-added-by__icon {
   display: flex;
   flex-shrink: 0;
-  position: relative;
   align-items: center;
   justify-content: center;
   width: 32px;
@@ -1538,17 +1535,6 @@ body.is-fullscreen-mode .edit-site-list-header {
 .edit-site-list-added-by__icon svg {
   fill: #fff;
 }
-.edit-site-list-added-by__icon.is-customized::after {
-  position: absolute;
-  content: "";
-  background: var(--wp-admin-theme-color);
-  height: 8px;
-  width: 8px;
-  outline: 2px solid #fff;
-  border-radius: 100%;
-  top: -1px;
-  left: -1px;
-}
 
 .edit-site-list-added-by__avatar {
   flex-shrink: 0;
@@ -1576,6 +1562,11 @@ body.is-fullscreen-mode .edit-site-list-header {
   opacity: 1;
 }
 
+.edit-site-list-added-by__customized-info {
+  display: block;
+  color: #757575;
+}
+
 @keyframes loadingpulse {
   0% {
     opacity: 1;
@@ -1694,6 +1685,14 @@ body.is-fullscreen-mode .edit-site-list-header {
   margin: 0;
 }
 
+.show-icon-labels .edit-site-global-styles-sidebar__header .components-button.has-icon svg {
+  display: none;
+}
+.show-icon-labels .edit-site-global-styles-sidebar__header .components-button.has-icon::after {
+  content: attr(aria-label);
+  font-size: 12px;
+}
+
 .components-panel__header.edit-site-sidebar-edit-mode__panel-tabs {
   justify-content: flex-start;
   padding-right: 0;
@@ -1847,10 +1846,6 @@ h3.edit-site-template-card__template-areas-title {
   display: flex;
   justify-content: center;
 }
-.edit-site-layout__actions:focus .edit-site-editor__toggle-save-panel, .edit-site-layout__actions:focus-within .edit-site-editor__toggle-save-panel {
-  top: auto;
-  bottom: 0;
-}
 
 .edit-site .components-editor-notices__snackbar {
   position: fixed;
@@ -2323,9 +2318,12 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
   background: #fff;
 }
 .edit-site-layout__actions:focus, .edit-site-layout__actions:focus-within {
-  top: 0;
+  top: auto;
   bottom: 0;
 }
+.edit-site-layout__actions.is-entity-save-view-open:focus, .edit-site-layout__actions.is-entity-save-view-open:focus-within {
+  top: 0;
+}
 @media (min-width: 782px) {
   .edit-site-layout__actions {
     border-right: 1px solid #ddd;
@@ -2380,6 +2378,22 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
   padding: 0 12px;
 }
 
+.edit-site-sidebar-button {
+  color: #e0e0e0;
+  flex-shrink: 0;
+}
+.edit-site-sidebar-button:focus:not(:disabled) {
+  box-shadow: none;
+  outline: none;
+}
+.edit-site-sidebar-button:focus-visible:not(:disabled) {
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  outline: 3px solid transparent;
+}
+.edit-site-sidebar-button:hover, .edit-site-sidebar-button:focus-visible, .edit-site-sidebar-button:focus, .edit-site-sidebar-button:not([aria-disabled=true]):active {
+  color: #fff;
+}
+
 .edit-site-sidebar-navigation-item.components-item {
   color: #949494;
   border-width: 1.5px;
@@ -2438,29 +2452,18 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
 
 .edit-site-sidebar-navigation-screen__title {
   font-size: calc(1.56 * 13px);
+  line-height: normal;
   font-weight: 500;
   flex-grow: 1;
   color: #fff;
   margin: 0;
 }
 
-.edit-site-sidebar-navigation-screen__back {
-  color: #e0e0e0;
-}
-.edit-site-sidebar-navigation-screen__back:hover, .edit-site-sidebar-navigation-screen__back:not([aria-disabled=true]):active {
-  color: #fff;
-}
-
 .edit-site-sidebar-navigation-screen-templates__see-all {
   /* Overrides the margin that comes from the Item component */
   margin-top: 16px !important;
 }
 
-.edit-site-sidebar-navigation-screen-templates__add-button {
-  /* Overrides the color for all states of the button */
-  color: inherit !important;
-}
-
 .edit-site-site-hub {
   display: flex;
   align-items: center;

package/build-style/style.css

@@ -413,15 +413,18 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   }
 }
 .interface-interface-skeleton__actions:focus, .interface-interface-skeleton__actions:focus-within {
-  top: 46px;
+  top: auto;
   bottom: 0;
 }
+.is-entity-save-view-open .interface-interface-skeleton__actions:focus, .is-entity-save-view-open .interface-interface-skeleton__actions:focus-within {
+  top: 46px;
+}
 @media (min-width: 782px) {
-  .interface-interface-skeleton__actions:focus, .interface-interface-skeleton__actions:focus-within {
+  .is-entity-save-view-open .interface-interface-skeleton__actions:focus, .is-entity-save-view-open .interface-interface-skeleton__actions:focus-within {
     border-left: 1px solid #ddd;
     top: 32px;
   }
-  .is-fullscreen-mode .interface-interface-skeleton__actions:focus, .is-fullscreen-mode .interface-interface-skeleton__actions:focus-within {
+  .is-fullscreen-mode .is-entity-save-view-open .interface-interface-skeleton__actions:focus, .is-fullscreen-mode .is-entity-save-view-open .interface-interface-skeleton__actions:focus-within {
     top: 0;
   }
 }
@@ -615,9 +618,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   }
 }
 
-.edit-site-custom-template-modal__suggestions_list {
-  margin-top: 16px;
-}
 @media (min-width: 600px) {
   .edit-site-custom-template-modal__suggestions_list {
     height: 232px;
@@ -668,8 +668,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   border: 1px solid #ccc;
   border-radius: 2px;
   padding: 16px;
-  margin-bottom: 0;
-  margin-top: 16px;
 }
 
 @media (min-width: 782px) {
@@ -716,7 +714,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   height: 100%;
   display: block;
   overflow: hidden;
-  background-color: #2f2f2f;
+  background-color: #1e1e1e;
   align-items: center;
   /*
   	Temporary to hide the contextual toolbar in view mode.
@@ -1527,7 +1525,6 @@ body.is-fullscreen-mode .edit-site-list-header {
 .edit-site-list-added-by__icon {
   display: flex;
   flex-shrink: 0;
-  position: relative;
   align-items: center;
   justify-content: center;
   width: 32px;
@@ -1538,17 +1535,6 @@ body.is-fullscreen-mode .edit-site-list-header {
 .edit-site-list-added-by__icon svg {
   fill: #fff;
 }
-.edit-site-list-added-by__icon.is-customized::after {
-  position: absolute;
-  content: "";
-  background: var(--wp-admin-theme-color);
-  height: 8px;
-  width: 8px;
-  outline: 2px solid #fff;
-  border-radius: 100%;
-  top: -1px;
-  right: -1px;
-}
 
 .edit-site-list-added-by__avatar {
   flex-shrink: 0;
@@ -1576,6 +1562,11 @@ body.is-fullscreen-mode .edit-site-list-header {
   opacity: 1;
 }
 
+.edit-site-list-added-by__customized-info {
+  display: block;
+  color: #757575;
+}
+
 @keyframes loadingpulse {
   0% {
     opacity: 1;
@@ -1694,6 +1685,14 @@ body.is-fullscreen-mode .edit-site-list-header {
   margin: 0;
 }
 
+.show-icon-labels .edit-site-global-styles-sidebar__header .components-button.has-icon svg {
+  display: none;
+}
+.show-icon-labels .edit-site-global-styles-sidebar__header .components-button.has-icon::after {
+  content: attr(aria-label);
+  font-size: 12px;
+}
+
 .components-panel__header.edit-site-sidebar-edit-mode__panel-tabs {
   justify-content: flex-start;
   padding-left: 0;
@@ -1847,10 +1846,6 @@ h3.edit-site-template-card__template-areas-title {
   display: flex;
   justify-content: center;
 }
-.edit-site-layout__actions:focus .edit-site-editor__toggle-save-panel, .edit-site-layout__actions:focus-within .edit-site-editor__toggle-save-panel {
-  top: auto;
-  bottom: 0;
-}
 
 .edit-site .components-editor-notices__snackbar {
   position: fixed;
@@ -2323,9 +2318,12 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
   background: #fff;
 }
 .edit-site-layout__actions:focus, .edit-site-layout__actions:focus-within {
-  top: 0;
+  top: auto;
   bottom: 0;
 }
+.edit-site-layout__actions.is-entity-save-view-open:focus, .edit-site-layout__actions.is-entity-save-view-open:focus-within {
+  top: 0;
+}
 @media (min-width: 782px) {
   .edit-site-layout__actions {
     border-left: 1px solid #ddd;
@@ -2380,6 +2378,22 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
   padding: 0 12px;
 }
 
+.edit-site-sidebar-button {
+  color: #e0e0e0;
+  flex-shrink: 0;
+}
+.edit-site-sidebar-button:focus:not(:disabled) {
+  box-shadow: none;
+  outline: none;
+}
+.edit-site-sidebar-button:focus-visible:not(:disabled) {
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+  outline: 3px solid transparent;
+}
+.edit-site-sidebar-button:hover, .edit-site-sidebar-button:focus-visible, .edit-site-sidebar-button:focus, .edit-site-sidebar-button:not([aria-disabled=true]):active {
+  color: #fff;
+}
+
 .edit-site-sidebar-navigation-item.components-item {
   color: #949494;
   border-width: 1.5px;
@@ -2438,29 +2452,18 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
 
 .edit-site-sidebar-navigation-screen__title {
   font-size: calc(1.56 * 13px);
+  line-height: normal;
   font-weight: 500;
   flex-grow: 1;
   color: #fff;
   margin: 0;
 }
 
-.edit-site-sidebar-navigation-screen__back {
-  color: #e0e0e0;
-}
-.edit-site-sidebar-navigation-screen__back:hover, .edit-site-sidebar-navigation-screen__back:not([aria-disabled=true]):active {
-  color: #fff;
-}
-
 .edit-site-sidebar-navigation-screen-templates__see-all {
   /* Overrides the margin that comes from the Item component */
   margin-top: 16px !important;
 }
 
-.edit-site-sidebar-navigation-screen-templates__add-button {
-  /* Overrides the color for all states of the button */
-  color: inherit !important;
-}
-
 .edit-site-site-hub {
   display: flex;
   align-items: center;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "5.3.4",
+	"version": "5.3.6",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -29,33 +29,33 @@
 		"@babel/runtime": "^7.16.0",
 		"@wordpress/a11y": "^3.26.1",
 		"@wordpress/api-fetch": "^6.23.1",
-		"@wordpress/block-editor": "^11.3.4",
-		"@wordpress/block-library": "^8.3.4",
-		"@wordpress/blocks": "^12.3.2",
-		"@wordpress/components": "^23.3.3",
-		"@wordpress/compose": "^6.3.2",
-		"@wordpress/core-data": "^6.3.2",
-		"@wordpress/data": "^8.3.2",
+		"@wordpress/block-editor": "^11.3.6",
+		"@wordpress/block-library": "^8.3.6",
+		"@wordpress/blocks": "^12.3.3",
+		"@wordpress/components": "^23.3.5",
+		"@wordpress/compose": "^6.3.3",
+		"@wordpress/core-data": "^6.3.3",
+		"@wordpress/data": "^8.3.3",
 		"@wordpress/deprecated": "^3.26.1",
-		"@wordpress/editor": "^13.3.4",
-		"@wordpress/element": "^5.3.1",
+		"@wordpress/editor": "^13.3.6",
+		"@wordpress/element": "^5.3.2",
 		"@wordpress/hooks": "^3.26.1",
 		"@wordpress/html-entities": "^3.26.1",
 		"@wordpress/i18n": "^4.26.1",
-		"@wordpress/icons": "^9.17.1",
-		"@wordpress/interface": "^5.3.4",
-		"@wordpress/keyboard-shortcuts": "^4.3.2",
+		"@wordpress/icons": "^9.17.2",
+		"@wordpress/interface": "^5.3.6",
+		"@wordpress/keyboard-shortcuts": "^4.3.3",
 		"@wordpress/keycodes": "^3.26.2",
-		"@wordpress/media-utils": "^4.17.1",
-		"@wordpress/notices": "^3.26.2",
-		"@wordpress/plugins": "^5.3.2",
-		"@wordpress/preferences": "^3.3.3",
+		"@wordpress/media-utils": "^4.17.2",
+		"@wordpress/notices": "^3.26.3",
+		"@wordpress/plugins": "^5.3.3",
+		"@wordpress/preferences": "^3.3.5",
 		"@wordpress/private-apis": "^0.8.1",
-		"@wordpress/reusable-blocks": "^4.3.4",
+		"@wordpress/reusable-blocks": "^4.3.6",
 		"@wordpress/style-engine": "^1.9.1",
 		"@wordpress/url": "^3.27.1",
-		"@wordpress/viewport": "^5.3.2",
-		"@wordpress/widgets": "^3.3.4",
+		"@wordpress/viewport": "^5.3.3",
+		"@wordpress/widgets": "^3.3.6",
 		"classnames": "^2.3.1",
 		"colord": "^2.9.2",
 		"downloadjs": "^1.4.7",
@@ -73,5 +73,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "ccabeeffe1fe117c3934ec7705c15d52857d9a87"
+	"gitHead": "35f10c183655e9196d4ea12b8fa499a8ecbb7b6a"
 }

package/src/components/add-new-template/add-custom-template-modal.js

@@ -11,6 +11,7 @@ import {
 	SearchControl,
 	TextHighlight,
 	__experimentalText as Text,
+	__experimentalVStack as VStack,
 	__unstableComposite as Composite,
 	__unstableUseCompositeState as useCompositeState,
 	__unstableCompositeItem as CompositeItem,
@@ -158,9 +159,12 @@ function SuggestionList( { entityForSuggestions, onSelect } ) {
 				</Composite>
 			) }
 			{ debouncedSearch && ! suggestions?.length && (
-				<p className="edit-site-custom-template-modal__no-results">
+				<Text
+					as="p"
+					className="edit-site-custom-template-modal__no-results"
+				>
 					{ labels.not_found }
-				</p>
+				</Text>
 			) }
 		</>
 	);
@@ -188,12 +192,12 @@ function AddCustomTemplateModal( {
 		>
 			{ isCreatingTemplate && <TemplateActionsLoadingScreen /> }
 			{ ! showSearchEntities && (
-				<>
-					<p>
+				<VStack spacing={ 4 }>
+					<Text as="p">
 						{ __(
 							'Select whether to create a single template for all items or a specific one.'
 						) }
-					</p>
+					</Text>
 					<Flex
 						className={ `${ baseCssClass }__contents` }
 						gap="4"
@@ -245,20 +249,20 @@ function AddCustomTemplateModal( {
 							</Text>
 						</FlexItem>
 					</Flex>
-				</>
+				</VStack>
 			) }
 			{ showSearchEntities && (
-				<>
-					<p>
+				<VStack spacing={ 4 }>
+					<Text as="p">
 						{ __(
 							'This template will be used only for the specific item chosen.'
 						) }
-					</p>
+					</Text>
 					<SuggestionList
 						entityForSuggestions={ entityForSuggestions }
 						onSelect={ onSelect }
 					/>
-				</>
+				</VStack>
 			) }
 		</Modal>
 	);

package/src/components/add-new-template/new-template-part.js

@@ -67,12 +67,9 @@ export default function NewTemplatePart( {
 			setCanvasMode( 'edit' );
 
 			// Navigate to the created template part editor.
-			window.queueMicrotask( () => {
-				history.push( {
-					postId: templatePart.id,
-					postType: 'wp_template_part',
-					path: '/template-parts/single',
-				} );
+			history.push( {
+				postId: templatePart.id,
+				postType: 'wp_template_part',
 			} );
 
 			// TODO: Add a success notice?
@@ -89,11 +86,12 @@ export default function NewTemplatePart( {
 			setIsModalOpen( false );
 		}
 	}
+	const { as: Toggle = Button, ...restToggleProps } = toggleProps ?? {};
 
 	return (
 		<>
-			<Button
-				{ ...toggleProps }
+			<Toggle
+				{ ...restToggleProps }
 				onClick={ () => {
 					setIsModalOpen( true );
 				} }
@@ -101,7 +99,7 @@ export default function NewTemplatePart( {
 				label={ postType.labels.add_new }
 			>
 				{ showIcon ? null : postType.labels.add_new }
-			</Button>
+			</Toggle>
 			{ isModalOpen && (
 				<CreateTemplatePartModal
 					closeModal={ () => setIsModalOpen( false ) }

package/src/components/add-new-template/new-template.js

@@ -143,12 +143,9 @@ export default function NewTemplate( {
 			setCanvasMode( 'edit' );
 
 			// Navigate to the created template editor.
-			window.queueMicrotask( () => {
-				history.push( {
-					postId: newTemplate.id,
-					postType: newTemplate.type,
-					path: '/templates/single',
-				} );
+			history.push( {
+				postId: newTemplate.id,
+				postType: newTemplate.type,
 			} );
 
 			createSuccessNotice(

package/src/components/add-new-template/style.scss

@@ -69,8 +69,6 @@
 }
 
 .edit-site-custom-template-modal__suggestions_list {
-	margin-top: $grid-unit-20;
-
 	@include break-small() {
 		height: 232px;
 		overflow: scroll;
@@ -130,11 +128,8 @@
 	border: 1px solid $gray-400;
 	border-radius: $radius-block-ui;
 	padding: $grid-unit-20;
-	margin-bottom: 0;
-	margin-top: $grid-unit-20;
 }
 
-
 .edit-site-custom-generic-template__modal {
 	.components-base-control {
 		@include break-medium() {

package/src/components/block-editor/style.scss

@@ -17,7 +17,7 @@
 	height: 100%;
 	display: block;
 	overflow: hidden;
-	background-color: $gray-800;
+	background-color: $gray-900;
 	// Centralize the editor horizontally (flex-direction is column).
 	align-items: center;
 

package/src/components/editor/index.js

@@ -25,7 +25,7 @@ import { __, sprintf } from '@wordpress/i18n';
 import { SidebarComplementaryAreaFills } from '../sidebar-edit-mode';
 import BlockEditor from '../block-editor';
 import CodeEditor from '../code-editor';
-import KeyboardShortcuts from '../keyboard-shortcuts';
+import KeyboardShortcutsEditMode from '../keyboard-shortcuts/edit-mode';
 import InserterSidebar from '../secondary-sidebar/inserter-sidebar';
 import ListViewSidebar from '../secondary-sidebar/list-view-sidebar';
 import WelcomeGuide from '../welcome-guide';
@@ -150,7 +150,6 @@ export default function Editor() {
 	return (
 		<>
 			{ isEditMode && <WelcomeGuide /> }
-			<KeyboardShortcuts.Register />
 			<EntityProvider kind="root" type="site">
 				<EntityProvider
 					kind="postType"
@@ -186,7 +185,9 @@ export default function Editor() {
 												) }
 											</Notice>
 										) }
-										{ isEditMode && <KeyboardShortcuts /> }
+										{ isEditMode && (
+											<KeyboardShortcutsEditMode />
+										) }
 									</>
 								}
 								secondarySidebar={

package/src/components/editor/style.scss

@@ -6,12 +6,6 @@
 	padding: $grid-unit-30;
 	display: flex;
 	justify-content: center;
-
-	.edit-site-layout__actions:focus &,
-	.edit-site-layout__actions:focus-within & {
-		top: auto;
-		bottom: 0;
-	}
 }
 
 // Adjust the position of the notices

package/src/components/global-styles/screen-border.js

@@ -16,7 +16,7 @@ function ScreenBorder( { name, variation = '' } ) {
 	const variationClassName = getVariationClassName( variation );
 	return (
 		<>
-			<ScreenHeader title={ __( 'Border & Shadow' ) } />
+			<ScreenHeader title={ __( 'Border' ) } />
 			<BlockPreviewPanel name={ name } variation={ variationClassName } />
 			{ hasBorderPanel && (
 				<BorderPanel name={ name } variation={ variation } />

package/src/components/global-styles/screen-variations.js

@@ -24,7 +24,6 @@ export function ScreenVariations( { name, path = '' } ) {
 	return (
 		<div className="edit-site-global-styles-screen-variations">
 			<VStack spacing={ 3 }>
-				<p>Manage style variations, saved block appearence presets.</p>
 				<Subtitle>{ __( 'Style Variations' ) }</Subtitle>
 				<VariationsPanel name={ name } />
 			</VStack>

package/src/components/global-styles/shadow-panel.js

@@ -143,9 +143,9 @@ function ShadowPopoverContainer( { shadow, onShadowChange } ) {
 function ShadowPresets( { presets, activeShadow, onSelect } ) {
 	return ! presets ? null : (
 		<Grid columns={ 6 } gap={ 0 } align="center" justify="center">
-			{ presets.map( ( { name, shadow }, i ) => (
+			{ presets.map( ( { name, slug, shadow } ) => (
 				<ShadowIndicator
-					key={ i }
+					key={ slug }
 					label={ name }
 					isActive={ shadow === activeShadow }
 					onSelect={ () =>
@@ -164,8 +164,9 @@ function ShadowIndicator( { label, isActive, onSelect, shadow } ) {
 			<Button
 				className="edit-site-global-styles__shadow-indicator"
 				onClick={ onSelect }
-				aria-label={ label }
+				label={ label }
 				style={ { boxShadow: shadow } }
+				showTooltip
 			>
 				{ isActive && <Icon icon={ check } /> }
 			</Button>

package/src/components/global-styles/ui.js

@@ -68,7 +68,7 @@ function GlobalStylesActionMenu() {
 		<GlobalStylesMenuFill>
 			<DropdownMenu
 				icon={ moreVertical }
-				label={ __( 'More Styles actions' ) }
+				label={ __( 'Styles actions' ) }
 				controls={ [
 					{
 						title: __( 'Reset to defaults' ),