@wordpress/edit-site 6.11.0 → 6.12.0

package/build-style/style.css

@@ -198,6 +198,13 @@
   color: var(--wp-admin-theme-color);
 }
 
+.dataviews-view-list__primary-field--clickable,
+.dataviews-view-grid__primary-field--clickable,
+.dataviews-view-grid__media--clickable,
+.dataviews-view-table__primary-field > .dataviews-view-table__cell-content--clickable {
+  cursor: pointer;
+}
+
 .dataviews-no-results,
 .dataviews-loading {
   padding: 0 48px;
@@ -661,6 +668,9 @@
 .dataforms-combined-edit__field {
   flex: 1 1 auto;
 }
+.dataforms-combined-edit p.components-base-control__help:has(.components-checkbox-control__help) {
+  margin-top: 4px;
+}
 
 .dataviews-view-grid {
   margin-bottom: auto;
@@ -685,6 +695,10 @@
 .dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__primary-field {
   min-height: 32px;
 }
+.dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__primary-field--clickable {
+  width: -moz-fit-content;
+  width: fit-content;
+}
 .dataviews-view-grid .dataviews-view-grid__card.is-selected .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value {
   color: #1e1e1e;
 }
@@ -1693,6 +1707,10 @@ fieldset.fields-controls__featured-image .fields-controls__featured-image-remove
   display: flex;
   flex-direction: column;
 }
+.edit-site-global-styles-screen-revisions__revision-item[role=option]:active, .edit-site-global-styles-screen-revisions__revision-item[role=option]:focus {
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  outline: 2px solid transparent;
+}
 .edit-site-global-styles-screen-revisions__revision-item:hover {
   background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
 }
@@ -1715,25 +1733,22 @@ fieldset.fields-controls__featured-image .fields-controls__featured-image-remove
   z-index: 1;
   border: 4px solid transparent;
 }
-.edit-site-global-styles-screen-revisions__revision-item.is-selected {
+.edit-site-global-styles-screen-revisions__revision-item[aria-selected=true] {
   border-radius: 2px;
   outline: 3px solid transparent;
   outline-offset: -2px;
   color: var(--wp-admin-theme-color);
   background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
 }
-.edit-site-global-styles-screen-revisions__revision-item.is-selected .edit-site-global-styles-screen-revisions__revision-button {
-  opacity: 1;
-}
-.edit-site-global-styles-screen-revisions__revision-item.is-selected .edit-site-global-styles-screen-revisions__date {
+.edit-site-global-styles-screen-revisions__revision-item[aria-selected=true] .edit-site-global-styles-screen-revisions__date {
   color: var(--wp-admin-theme-color);
 }
-.edit-site-global-styles-screen-revisions__revision-item.is-selected::before {
+.edit-site-global-styles-screen-revisions__revision-item[aria-selected=true]::before {
   background: var(--wp-admin-theme-color);
 }
-.edit-site-global-styles-screen-revisions__revision-item.is-selected .edit-site-global-styles-screen-revisions__changes > li,
-.edit-site-global-styles-screen-revisions__revision-item.is-selected .edit-site-global-styles-screen-revisions__meta,
-.edit-site-global-styles-screen-revisions__revision-item.is-selected .edit-site-global-styles-screen-revisions__applied-text {
+.edit-site-global-styles-screen-revisions__revision-item[aria-selected=true] .edit-site-global-styles-screen-revisions__changes > li,
+.edit-site-global-styles-screen-revisions__revision-item[aria-selected=true] .edit-site-global-styles-screen-revisions__meta,
+.edit-site-global-styles-screen-revisions__revision-item[aria-selected=true] .edit-site-global-styles-screen-revisions__applied-text {
   color: #1e1e1e;
 }
 .edit-site-global-styles-screen-revisions__revision-item::after {
@@ -1749,14 +1764,10 @@ fieldset.fields-controls__featured-image .fields-controls__featured-image-remove
 .edit-site-global-styles-screen-revisions__revision-item:last-child::after {
   height: 18px;
 }
-.edit-site-global-styles-screen-revisions__revision-item .edit-site-global-styles-screen-revisions__revision-button {
-  width: 100%;
-  height: auto;
+
+.edit-site-global-styles-screen-revisions__revision-item-wrapper {
   display: block;
   padding: 12px 12px 4px 40px;
-  z-index: 1;
-  position: relative;
-  outline-offset: -2px;
 }
 
 .edit-site-global-styles-screen-revisions__apply-button.is-primary,
@@ -2032,10 +2043,6 @@ fieldset.fields-controls__featured-image .fields-controls__featured-image-remove
   flex-shrink: 0;
 }
 
-.edit-site-patterns__pattern-lock-icon {
-  min-width: min-content;
-}
-
 .edit-site-patterns__section-header {
   border-bottom: 1px solid #f0f0f0;
   padding: 16px 48px;
@@ -2069,7 +2076,6 @@ fieldset.fields-controls__featured-image .fields-controls__featured-image-remove
 
 .edit-site-patterns__pattern-title {
   display: block;
-  width: 100%;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -2641,7 +2647,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   contain: content;
 }
 
-@keyframes _1qbfb_slide-from-right {
+@keyframes _8q3zk_slide-from-right {
   from {
     transform: translateX(50px);
     opacity: 0;
@@ -2651,7 +2657,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
     opacity: 1;
   }
 }
-@keyframes _1qbfb_slide-from-left {
+@keyframes _8q3zk_slide-from-left {
   from {
     transform: translateX(-50px);
     opacity: 0;
@@ -2707,10 +2713,10 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   }
 }
 .edit-site-sidebar__screen-wrapper.slide-from-left {
-  animation-name: _1qbfb_slide-from-left;
+  animation-name: _8q3zk_slide-from-left;
 }
 .edit-site-sidebar__screen-wrapper.slide-from-right {
-  animation-name: _1qbfb_slide-from-right;
+  animation-name: _8q3zk_slide-from-right;
 }
 
 .edit-site-sidebar-button {
@@ -2735,14 +2741,14 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   border: none;
   min-height: 40px;
 }
-.edit-site-sidebar-navigation-item.components-item:hover, .edit-site-sidebar-navigation-item.components-item:focus, .edit-site-sidebar-navigation-item.components-item[aria-current] {
+.edit-site-sidebar-navigation-item.components-item:hover, .edit-site-sidebar-navigation-item.components-item:focus, .edit-site-sidebar-navigation-item.components-item[aria-current=true] {
   color: #e0e0e0;
   background: #2f2f2f;
 }
-.edit-site-sidebar-navigation-item.components-item:hover .edit-site-sidebar-navigation-item__drilldown-indicator, .edit-site-sidebar-navigation-item.components-item:focus .edit-site-sidebar-navigation-item__drilldown-indicator, .edit-site-sidebar-navigation-item.components-item[aria-current] .edit-site-sidebar-navigation-item__drilldown-indicator {
+.edit-site-sidebar-navigation-item.components-item:hover .edit-site-sidebar-navigation-item__drilldown-indicator, .edit-site-sidebar-navigation-item.components-item:focus .edit-site-sidebar-navigation-item__drilldown-indicator, .edit-site-sidebar-navigation-item.components-item[aria-current=true] .edit-site-sidebar-navigation-item__drilldown-indicator {
   fill: #e0e0e0;
 }
-.edit-site-sidebar-navigation-item.components-item[aria-current] {
+.edit-site-sidebar-navigation-item.components-item[aria-current=true] {
   background: var(--wp-admin-theme-color);
   color: #fff;
 }
@@ -3111,6 +3117,21 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   border-radius: 0;
 }
 
+.edit-site-editor__view-mode-toggle button:focus {
+  position: relative;
+}
+.edit-site-editor__view-mode-toggle button:focus::before {
+  content: "";
+  display: block;
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 calc(1px + var(--wp-admin-border-width-focus)) #fff;
+}
+
 .edit-site-style-book {
   height: 100%;
   display: flex;
@@ -3144,7 +3165,6 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 
 .edit-site-editor-canvas-container {
   height: 100%;
-  background-color: #ddd;
 }
 .edit-site-editor-canvas-container iframe {
   display: block;
@@ -3184,6 +3204,11 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   justify-content: center;
 }
 
+.dataforms-layouts-panel__field-dropdown .fields-controls__password {
+  border-top: 1px solid #e0e0e0;
+  padding-top: 16px;
+}
+
 .edit-site-post-list__featured-image {
   height: 100%;
   object-fit: cover;
@@ -3243,6 +3268,27 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   overflow: hidden;
 }
 
+.dataviews-view-grid__primary-field.dataviews-view-grid__primary-field--clickable .edit-site-post-list__title span,
+.dataviews-view-table__primary-field > .dataviews-view-table__cell-content--clickable .edit-site-post-list__title span {
+  text-decoration: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  display: block;
+  flex-grow: 0;
+  color: #1e1e1e;
+}
+.dataviews-view-grid__primary-field.dataviews-view-grid__primary-field--clickable .edit-site-post-list__title span:hover,
+.dataviews-view-table__primary-field > .dataviews-view-table__cell-content--clickable .edit-site-post-list__title span:hover {
+  color: var(--wp-admin-theme-color);
+}
+.dataviews-view-grid__primary-field.dataviews-view-grid__primary-field--clickable .edit-site-post-list__title span:focus,
+.dataviews-view-table__primary-field > .dataviews-view-table__cell-content--clickable .edit-site-post-list__title span:focus {
+  color: var(--wp-admin-theme-color--rgb);
+  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color, #007cba);
+  border-radius: 2px;
+}
+
 .edit-site-post-list__title-badge {
   background: #f0f0f0;
   color: #2f2f2f;
@@ -3548,6 +3594,41 @@ button.font-library-modal__upload-area {
   outline-color: var(--wp-admin-theme-color);
 }
 
+.edit-site-styles .edit-site-page-content .edit-site-global-styles-screen-root {
+  box-shadow: none;
+}
+.edit-site-styles .edit-site-page-content .edit-site-global-styles-screen-root > div > hr {
+  display: none;
+}
+.edit-site-styles .edit-site-page-content .edit-site-global-styles-sidebar__navigator-provider {
+  overflow-y: auto;
+  padding-left: 0;
+  padding-right: 0;
+}
+.edit-site-styles .edit-site-page-content .edit-site-global-styles-sidebar__navigator-provider .components-tools-panel {
+  border-top: none;
+}
+.edit-site-styles .edit-site-page-content .edit-site-global-styles-sidebar__navigator-provider .edit-site-global-styles-sidebar__navigator-screen {
+  padding-top: 12px;
+  padding-left: 12px;
+  padding-right: 12px;
+  padding-bottom: 12px;
+  outline: none;
+}
+.edit-site-styles .edit-site-page-content .edit-site-page-header {
+  padding-left: 48px;
+  padding-right: 48px;
+}
+@container (max-width: 430px) {
+  .edit-site-styles .edit-site-page-content .edit-site-page-header {
+    padding-left: 24px;
+    padding-right: 24px;
+  }
+}
+.edit-site-styles .edit-site-page-content .edit-site-sidebar-button {
+  color: #1e1e1e;
+}
+
 /* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */
 ::view-transition-image-pair(root) {
   isolation: auto;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "6.11.0",
+	"version": "6.12.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -26,6 +26,7 @@
 	"main": "build/index.js",
 	"module": "build-module/index.js",
 	"react-native": "src/index",
+	"wpScript": true,
 	"dependencies": {
 		"@babel/runtime": "7.25.7",
 		"@react-spring/web": "^9.4.5",
@@ -60,7 +61,6 @@
 		"@wordpress/plugins": "*",
 		"@wordpress/preferences": "*",
 		"@wordpress/primitives": "*",
-		"@wordpress/priority-queue": "*",
 		"@wordpress/private-apis": "*",
 		"@wordpress/reusable-blocks": "*",
 		"@wordpress/router": "*",
@@ -83,6 +83,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"wpScript": true,
-	"gitHead": "dcf4613b33b0eda14e203ac30f700ed0db70347f"
+	"gitHead": "510540d99f3d222a96f08d3d7b66c9e7a726f705"
 }

package/src/components/app/index.js

@@ -18,7 +18,6 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
 import Layout from '../layout';
 import { unlock } from '../../lock-unlock';
 import { useCommonCommands } from '../../hooks/commands/use-common-commands';
-import { useEditModeCommands } from '../../hooks/commands/use-edit-mode-commands';
 import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url';
 import useActiveRoute from '../layout/router';
 import useSetCommandContext from '../../hooks/commands/use-set-command-context';
@@ -30,7 +29,6 @@ const { GlobalStylesProvider } = unlock( editorPrivateApis );
 function AppLayout() {
 	// This ensures the edited entity id and type are initialized properly.
 	useInitEditedEntityFromURL();
-	useEditModeCommands();
 	useCommonCommands();
 	useSetCommandContext();
 	useRegisterSiteEditorRoutes();

package/src/components/block-editor/use-editor-iframe-props.js

@@ -60,11 +60,10 @@ export default function useEditorIframeProps() {
 				} );
 			}
 		},
-		onClick: () => {
+		onClick: () =>
 			history.push( { ...params, canvas: 'edit' }, undefined, {
 				transition: 'canvas-mode-edit-transition',
-			} );
-		},
+			} ),
 		onClickCapture: ( event ) => {
 			if ( currentPostIsTrashed ) {
 				event.preventDefault();

package/src/components/editor/index.js

@@ -49,6 +49,7 @@ import useEditorIframeProps from '../block-editor/use-editor-iframe-props';
 import useEditorTitle from './use-editor-title';
 import { useIsSiteEditorLoading } from '../layout/hooks';
 import { useAdaptEditorToCanvas } from './use-adapt-editor-to-canvas';
+import { TEMPLATE_POST_TYPE } from '../../utils/constants';
 
 const { Editor, BackButton } = unlock( editorPrivateApis );
 const { useHistory, useLocation } = unlock( routerPrivateApis );
@@ -125,12 +126,15 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 			hasSiteIcon: !! siteData?.site_icon_url,
 		};
 	}, [] );
-	useEditorTitle();
+	const postWithTemplate = !! contextPostId;
+	useEditorTitle(
+		postWithTemplate ? contextPostType : editedPostType,
+		postWithTemplate ? contextPostId : editedPostId
+	);
 	const _isPreviewingTheme = isPreviewingTheme();
 	const hasDefaultEditorCanvasView = ! useHasEditorCanvasContainer();
 	const iframeProps = useEditorIframeProps();
 	const isEditMode = canvas === 'edit';
-	const postWithTemplate = !! contextPostId;
 	const loadingProgressId = useInstanceId(
 		CanvasLoader,
 		'edit-site-editor__loading-progress'
@@ -214,11 +218,19 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 
 	return (
 		<>
-			<GlobalStylesRenderer />
+			<GlobalStylesRenderer
+				disableRootPadding={ editedPostType !== TEMPLATE_POST_TYPE }
+			/>
 			<EditorKeyboardShortcutsRegister />
 			{ isEditMode && <BlockKeyboardShortcuts /> }
 			{ ! isReady ? <CanvasLoader id={ loadingProgressId } /> : null }
-			{ isEditMode && <WelcomeGuide /> }
+			{ isEditMode && (
+				<WelcomeGuide
+					postType={
+						postWithTemplate ? contextPostType : editedPostType
+					}
+				/>
+			) }
 			{ isReady && (
 				<Editor
 					postType={

package/src/components/editor/use-editor-title.js

@@ -2,34 +2,58 @@
  * WordPress dependencies
  */
 import { _x, sprintf } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { store as editorStore } from '@wordpress/editor';
+import { decodeEntities } from '@wordpress/html-entities';
 
 /**
  * Internal dependencies
  */
-import useEditedEntityRecord from '../use-edited-entity-record';
 import useTitle from '../routes/use-title';
 import { POST_TYPE_LABELS, TEMPLATE_POST_TYPE } from '../../utils/constants';
 
-function useEditorTitle() {
-	const {
-		record: editedPost,
-		getTitle,
-		isLoaded: hasLoadedPost,
-	} = useEditedEntityRecord();
-	let title;
-	if ( hasLoadedPost ) {
-		title = sprintf(
+function useEditorTitle( postType, postId ) {
+	const { title, isLoaded } = useSelect(
+		( select ) => {
+			const { getEditedEntityRecord, hasFinishedResolution } =
+				select( coreStore );
+			const { __experimentalGetTemplateInfo: getTemplateInfo } =
+				select( editorStore );
+			const _record = getEditedEntityRecord(
+				'postType',
+				postType,
+				postId
+			);
+			const _isLoaded = hasFinishedResolution( 'getEditedEntityRecord', [
+				'postType',
+				postType,
+				postId,
+			] );
+			const templateInfo = getTemplateInfo( _record );
+
+			return {
+				title: templateInfo.title,
+				isLoaded: _isLoaded,
+			};
+		},
+		[ postType, postId ]
+	);
+
+	let editorTitle;
+	if ( isLoaded ) {
+		editorTitle = sprintf(
 			// translators: A breadcrumb trail for the Admin document title. 1: title of template being edited, 2: type of template (Template or Template Part).
 			_x( '%1$s ‹ %2$s', 'breadcrumb trail' ),
-			getTitle(),
-			POST_TYPE_LABELS[ editedPost.type ] ??
+			decodeEntities( title ),
+			POST_TYPE_LABELS[ postType ] ??
 				POST_TYPE_LABELS[ TEMPLATE_POST_TYPE ]
 		);
 	}
 
 	// Only announce the title once the editor is ready to prevent "Replace"
 	// action in <URLQueryController> from double-announcing.
-	useTitle( hasLoadedPost && title );
+	useTitle( isLoaded && editorTitle );
 }
 
 export default useEditorTitle;

package/src/components/editor-canvas-container/style.scss

@@ -1,6 +1,5 @@
 .edit-site-editor-canvas-container {
 	height: 100%;
-	background-color: $gray-300;
 
 	// Controls height of editor and editor canvas container (style book, global styles revisions previews etc.)
 	iframe {

package/src/components/global-styles/screen-revisions/revisions-buttons.js

@@ -1,18 +1,13 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
 /**
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import { Button } from '@wordpress/components';
+import { Button, Composite } from '@wordpress/components';
 import { dateI18n, getDate, humanTimeDiff, getSettings } from '@wordpress/date';
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-
+import { ENTER, SPACE } from '@wordpress/keycodes';
 /**
  * Internal dependencies
  */
@@ -117,10 +112,11 @@ function RevisionsButtons( {
 	const { datetimeAbbreviated } = getSettings().formats;
 
 	return (
-		<ol
+		<Composite
+			orientation="vertical"
 			className="edit-site-global-styles-screen-revisions__revisions-list"
 			aria-label={ __( 'Global styles revisions list' ) }
-			role="group"
+			role="listbox"
 		>
 			{ userRevisions.map( ( revision, index ) => {
 				const { id, author, modified } = revision;
@@ -149,28 +145,26 @@ function RevisionsButtons( {
 				);
 
 				return (
-					<li
-						className={ clsx(
-							'edit-site-global-styles-screen-revisions__revision-item',
-							{
-								'is-selected': isSelected,
-								'is-active': areStylesEqual,
-								'is-reset': isReset,
-							}
-						) }
+					<Composite.Item
 						key={ id }
+						className="edit-site-global-styles-screen-revisions__revision-item"
 						aria-current={ isSelected }
-					>
-						<Button
-							__next40pxDefaultSize
-							className="edit-site-global-styles-screen-revisions__revision-button"
-							accessibleWhenDisabled
-							disabled={ isSelected }
-							onClick={ () => {
+						role="option"
+						onKeyDown={ ( event ) => {
+							const { keyCode } = event;
+							if ( keyCode === ENTER || keyCode === SPACE ) {
 								onChange( revision );
-							} }
-							aria-label={ revisionLabel }
-						>
+							}
+						} }
+						onClick={ ( event ) => {
+							event.preventDefault();
+							onChange( revision );
+						} }
+						aria-selected={ isSelected }
+						aria-label={ revisionLabel }
+						render={ <div /> }
+					>
+						<span className="edit-site-global-styles-screen-revisions__revision-item-wrapper">
 							{ isReset ? (
 								<span className="edit-site-global-styles-screen-revisions__description">
 									{ __( 'Default styles' ) }
@@ -211,7 +205,7 @@ function RevisionsButtons( {
 									) }
 								</span>
 							) }
-						</Button>
+						</span>
 						{ isSelected &&
 							( areStylesEqual ? (
 								<p className="edit-site-global-styles-screen-revisions__applied-text">
@@ -225,16 +219,19 @@ function RevisionsButtons( {
 									variant="primary"
 									className="edit-site-global-styles-screen-revisions__apply-button"
 									onClick={ onApplyRevision }
+									aria-label={ __(
+										'Apply the selected revision to your site.'
+									) }
 								>
 									{ isReset
 										? __( 'Reset to defaults' )
 										: __( 'Apply' ) }
 								</Button>
 							) ) }
-					</li>
+					</Composite.Item>
 				);
 			} ) }
-		</ol>
+		</Composite>
 	);
 }
 

package/src/components/global-styles/screen-revisions/style.scss

@@ -14,6 +14,11 @@
 	display: flex;
 	flex-direction: column;
 
+	&[role="option"]:active,
+	&[role="option"]:focus {
+		@include button-style__focus();
+	}
+
 	&:hover {
 		background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
 		.edit-site-global-styles-screen-revisions__date {
@@ -42,7 +47,7 @@
 		border: 4px solid transparent;
 	}
 
-	&.is-selected {
+	&[aria-selected="true"] {
 		border-radius: $radius-small;
 
 		// Only visible in Windows High Contrast mode.
@@ -52,10 +57,6 @@
 		color: var(--wp-admin-theme-color);
 		background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
 
-		.edit-site-global-styles-screen-revisions__revision-button {
-			opacity: 1;
-		}
-
 		.edit-site-global-styles-screen-revisions__date {
 			color: var(--wp-admin-theme-color);
 		}
@@ -86,23 +87,16 @@
 	&:last-child::after {
 		height: $grid-unit-20 + 2;
 	}
-
-	// Nested to override specificity of .components-button.
-	.edit-site-global-styles-screen-revisions__revision-button {
-		width: 100%;
-		height: auto;
-		display: block;
-		padding: $grid-unit-15 $grid-unit-15 $grid-unit-05 $grid-unit-50;
-		z-index: 1;
-		position: relative;
-		outline-offset: -2px;
-	}
+}
+.edit-site-global-styles-screen-revisions__revision-item-wrapper {
+	display: block;
+	padding: $grid-unit-15 $grid-unit-15 $grid-unit-05 $grid-unit-50;
 }
 
 .edit-site-global-styles-screen-revisions__apply-button.is-primary,
 .edit-site-global-styles-screen-revisions__applied-text {
 	align-self: flex-start;
-	// Left margin = left padding of .edit-site-global-styles-screen-revisions__revision-button.
+	// Left margin = left padding of .edit-site-global-styles-screen-revisions__revision-item-wrapper.
 	margin: $grid-unit-05 $grid-unit-15 $grid-unit-15 $grid-unit-50;
 }
 

package/src/components/global-styles/shadows-edit-panel.js

@@ -215,8 +215,10 @@ export default function ShadowsEditPanel() {
 					size="medium"
 				>
 					{ sprintf(
-						// translators: %s: name of the shadow
-						'Are you sure you want to delete "%s"?',
+						/* translators: %s: Name of the shadow preset. */
+						__(
+							'Are you sure you want to delete "%s" shadow preset?'
+						),
 						selectedShadow.name
 					) }
 				</ConfirmDialog>