@wordpress/edit-site 7.3.0 → 7.4.0

package/build-style/style.css

@@ -242,6 +242,10 @@
   flex-grow: 1;
 }
 
+.dataviews__search .dataviews-search {
+  flex-basis: 210px;
+}
+
 .dataviews-no-results,
 .dataviews-loading {
   padding: 0 var(--wpds-dimension-padding-2xl, 24px);
@@ -513,7 +517,7 @@
 }
 
 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove svg {
-  fill: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
+  color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
 }
 
 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:hover, .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:focus {
@@ -521,11 +525,11 @@
 }
 
 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:hover svg, .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove:focus svg {
-  fill: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
+  color: var(--wpds-color-foreground-interactive-neutral-active, #1e1e1e);
 }
 
 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove.has-values svg {
-  fill: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
+  color: var(--wpds-color-foreground-interactive-brand, var(--wp-admin-theme-color, #3858e9));
 }
 
 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip-remove.has-values:hover {
@@ -589,8 +593,9 @@
 }
 
 .dataviews-filters__search-widget-listitem:hover .dataviews-filters__search-widget-listitem-multi-selection, .dataviews-filters__search-widget-listitem[data-active-item] .dataviews-filters__search-widget-listitem-multi-selection, .dataviews-filters__search-widget-listitem:focus .dataviews-filters__search-widget-listitem-multi-selection {
+  /* stylelint-disable-next-line plugin-wpds/no-token-fallback-values -- Preserve custom background theming with older @wordpress/theme runtimes that do not set this token. */
+  background-color: var(--wpds-color-background-interactive-neutral, var(--wpds-color-background-surface-neutral-strong, #fff));
   border-color: var(--wpds-color-stroke-interactive-brand-active, color-mix(in oklch, var(--wp-admin-theme-color, #3858e9) 85%, black));
-  background: var(--wpds-color-background-surface-neutral-strong, #fff);
 }
 
 .dataviews-filters__search-widget-listitem:hover .dataviews-filters__search-widget-listitem-multi-selection.is-selected, .dataviews-filters__search-widget-listitem[data-active-item] .dataviews-filters__search-widget-listitem-multi-selection.is-selected, .dataviews-filters__search-widget-listitem:focus .dataviews-filters__search-widget-listitem-multi-selection.is-selected {
@@ -738,10 +743,6 @@
   box-shadow: none;
 }
 
-.dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection::-moz-placeholder {
-  color: rgba(30, 30, 30, 0.62);
-}
-
 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection::placeholder {
   color: rgba(30, 30, 30, 0.62);
 }
@@ -799,7 +800,8 @@
 
 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection {
   position: relative;
-  background: var(--wpds-color-background-interactive-neutral-weak, rgba(0, 0, 0, 0));
+  /* stylelint-disable-next-line plugin-wpds/no-token-fallback-values -- Preserve custom background theming with older @wordpress/theme runtimes that do not set this token. */
+  background: var(--wpds-color-background-interactive-neutral, var(--wpds-color-background-surface-neutral-strong, #fff));
   color: var(--wpds-color-foreground-content-neutral, #1e1e1e);
   margin: 0;
   padding: 0;
@@ -824,7 +826,7 @@
 
 .dataviews-filters__search-widget-listitem .dataviews-filters__search-widget-listitem-multi-selection.is-selected svg {
   --checkmark-size: var(--checkbox-size);
-  fill: var(--wpds-color-foreground-interactive-neutral-strong, #f0f0f0);
+  color: var(--wpds-color-foreground-interactive-neutral-strong, #f0f0f0);
   position: absolute;
   left: 50%;
   top: 50%;
@@ -872,10 +874,6 @@
   box-shadow: none;
 }
 
-.dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::-moz-placeholder {
-  color: rgba(30, 30, 30, 0.62);
-}
-
 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::placeholder {
   color: rgba(30, 30, 30, 0.62);
 }
@@ -900,10 +898,6 @@
   background: var(--wpds-color-background-surface-neutral-strong, #fff);
 }
 
-.dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::-moz-placeholder {
-  color: var(--wpds-color-foreground-content-neutral-weak, #707070);
-}
-
 .dataviews-filters__search-widget-filter-combobox__wrapper .dataviews-filters__search-widget-filter-combobox__input::placeholder {
   color: var(--wpds-color-foreground-content-neutral-weak, #707070);
 }
@@ -950,10 +944,6 @@
   box-sizing: border-box;
 }
 
-.dataviews-search {
-  flex-basis: 210px;
-}
-
 .dataviews-filters__user-input-widget {
   padding: var(--wpds-dimension-padding-lg, 16px);
 }
@@ -1232,7 +1222,6 @@
 
 .dataviews-view-grid .dataviews-view-grid__card .dataviews-view-grid__title-field--clickable,
 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__card .dataviews-view-grid__title-field--clickable {
-  width: -moz-fit-content;
   width: fit-content;
 }
 
@@ -1268,7 +1257,6 @@
 
 .dataviews-view-grid .dataviews-view-grid__media img,
 .dataviews-view-grid-infinite-scroll .dataviews-view-grid__media img {
-  -o-object-fit: cover;
   object-fit: cover;
   width: 100%;
   height: 100%;
@@ -1304,7 +1292,6 @@
 
 .dataviews-view-grid.has-media-fit-contain .dataviews-view-grid__media img,
 .dataviews-view-grid-infinite-scroll.has-media-fit-contain .dataviews-view-grid__media img {
-  -o-object-fit: contain;
   object-fit: contain;
 }
 
@@ -1470,7 +1457,6 @@ div.dataviews-view-list {
 .dataviews-view-list div[role=row] .dataviews-view-list__item-actions,
 .dataviews-view-list div[role=article] .dataviews-view-list__item-actions {
   display: flex;
-  width: -moz-max-content;
   width: max-content;
   flex: 0 0 auto;
   gap: var(--wpds-dimension-gap-xs, 4px);
@@ -1565,8 +1551,6 @@ div.dataviews-view-list {
   z-index: 1;
   inset: 0;
   scroll-margin: var(--wpds-dimension-gap-sm, 8px) 0;
-  -webkit-appearance: none;
-  -moz-appearance: none;
   appearance: none;
   border: none;
   background: none;
@@ -1611,7 +1595,6 @@ div.dataviews-view-list {
 .dataviews-view-list .dataviews-view-list__media-wrapper img {
   width: 100%;
   height: 100%;
-  -o-object-fit: cover;
   object-fit: cover;
 }
 
@@ -1996,7 +1979,6 @@ div.dataviews-view-list {
 .dataviews-column-primary__media img {
   width: var(--wpds-dimension-size-md, 32px);
   height: var(--wpds-dimension-size-md, 32px);
-  -o-object-fit: cover;
   object-fit: cover;
 }
 
@@ -2077,7 +2059,6 @@ div.dataviews-view-list {
 }
 
 .dataviews-view-picker-grid .dataviews-view-picker-grid__card .dataviews-view-picker-grid__title-field--clickable {
-  width: -moz-fit-content;
   width: fit-content;
 }
 
@@ -2120,7 +2101,6 @@ div.dataviews-view-list {
 }
 
 .dataviews-view-picker-grid .dataviews-view-picker-grid__media img {
-  -o-object-fit: cover;
   object-fit: cover;
   width: 100%;
   height: 100%;
@@ -2143,7 +2123,6 @@ div.dataviews-view-list {
 }
 
 .dataviews-view-picker-grid.has-media-fit-contain .dataviews-view-picker-grid__media img {
-  -o-object-fit: contain;
   object-fit: contain;
 }
 
@@ -2310,7 +2289,6 @@ div.dataviews-view-list {
 
 .dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__primary-actions {
   display: flex;
-  width: -moz-max-content;
   width: max-content;
   flex: 0 0 auto;
 }
@@ -2444,7 +2422,6 @@ div.dataviews-view-list {
   width: 100%;
   height: 100%;
   margin: 0 auto;
-  -o-object-fit: cover;
   object-fit: cover;
   border-radius: 50%;
   box-sizing: border-box;
@@ -2661,7 +2638,6 @@ div.dataviews-view-list {
   width: 100%;
   height: 100%;
   margin: 0 auto;
-  -o-object-fit: cover;
   object-fit: cover;
   border-radius: 50%;
   box-sizing: border-box;
@@ -2718,25 +2694,17 @@ div.dataviews-view-list {
 }
 
 .dataviews-validated-control__wrapper-with-error-delegate:has(input[type=radio]:invalid[data-validity-visible]), .dataviews-validated-control__wrapper-with-error-delegate:has(input:invalid[data-validity-visible]) .components-form-token-field__input-container:not(:has([aria-expanded=true])), .dataviews-validated-control .components-combobox-control__suggestions-container:has(input:invalid[data-validity-visible]):not(:has([aria-expanded=true])), .dataviews-validated-control:has(:is(input, select):invalid[data-validity-visible]) .components-input-control__backdrop {
-  --focus-color: #cc1818;
-}
-
-.dataviews-validated-control:has(:is(input, select):invalid[data-validity-visible]) .components-input-control__backdrop {
-  border-color: #cc1818;
+  --focus-color: var(--wpds-color-stroke-interactive-error, #cc1818);
 }
 
-.dataviews-validated-control .components-combobox-control__suggestions-container:has(input:invalid[data-validity-visible]):not(:has([aria-expanded=true])) {
-  border-color: #cc1818;
+.dataviews-validated-control__wrapper-with-error-delegate:has(input:invalid[data-validity-visible]) .components-form-token-field__input-container:not(:has([aria-expanded=true])), .dataviews-validated-control .components-combobox-control__suggestions-container:has(input:invalid[data-validity-visible]):not(:has([aria-expanded=true])), .dataviews-validated-control:has(:is(input, select):invalid[data-validity-visible]) .components-input-control__backdrop {
+  border-color: var(--wpds-color-stroke-interactive-error, #cc1818);
 }
 
 .dataviews-validated-control__wrapper-with-error-delegate {
   position: relative;
 }
 
-.dataviews-validated-control__wrapper-with-error-delegate:has(input:invalid[data-validity-visible]) .components-form-token-field__input-container:not(:has([aria-expanded=true])) {
-  border-color: #cc1818;
-}
-
 .dataviews-validated-control__error-delegate {
   position: absolute;
   top: 0;
@@ -3130,7 +3098,7 @@ div.dataviews-view-list {
   display: grid;
   align-items: center;
   grid-template-columns: min-content 1fr min-content;
-  grid-gap: 4px 8px;
+  gap: 4px 8px;
   color: #1e1e1e;
 }
 
@@ -3415,9 +3383,7 @@ fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-exp
 fieldset.fields__media-edit .fields__media-edit-expanded .fields__media-edit-thumbnail {
   width: 100%;
   height: 100%;
-  -o-object-fit: cover;
   object-fit: cover;
-  -o-object-position: 50% 50%;
   object-position: 50% 50%;
 }
 
@@ -3479,7 +3445,6 @@ fieldset.fields__media-edit .fields__media-edit-expanded:not(.is-empty) .fields_
 .fields-controls__author-avatar img {
   width: 16px;
   height: 16px;
-  -o-object-fit: cover;
   object-fit: cover;
   opacity: 0;
   border-radius: 100%;
@@ -3517,10 +3482,6 @@ fieldset.fields__media-edit .fields__media-edit-expanded:not(.is-empty) .fields_
   margin: 0;
 }
 
-.fields-controls__slug .fields-controls__slug-external-icon {
-  margin-left: 5ch;
-}
-
 .fields-controls__slug .fields-controls__slug-input input.components-input-control__input {
   padding-inline-start: 0 !important;
 }
@@ -4420,11 +4381,6 @@ button.font-library__upload-area {
 .edit-site-custom-template-modal__contents-wrapper > * {
   width: 100%;
 }
-.edit-site-custom-template-modal__contents-wrapper__suggestions_list {
-  margin-left: -12px;
-  margin-right: -12px;
-  width: calc(100% + 24px);
-}
 .edit-site-custom-template-modal__contents > .components-button {
   height: auto;
   justify-content: center;
@@ -4436,8 +4392,12 @@ button.font-library__upload-area {
 }
 @media (min-width: 600px) {
   .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list {
-    max-height: 224px;
     overflow-y: auto;
+    max-height: calc(224px + 4 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
+    padding: calc(2 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
+    margin-inline: calc(-2 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
+    width: calc(100% + 4 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
+    scroll-padding-block: calc(2 * var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px)));
   }
 }
 .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item {
@@ -4465,9 +4425,6 @@ button.font-library__upload-area {
 .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item:focus {
   background-color: #f0f0f0;
 }
-.edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item:focus:not(:disabled) {
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color) inset;
-}
 .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item__title, .edit-site-custom-template-modal .edit-site-custom-template-modal__suggestions_list__list-item__info {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -4501,7 +4458,7 @@ button.font-library__upload-area {
 }
 .edit-site-add-new-template__modal .edit-site-add-new-template__template-button svg,
 .edit-site-add-new-template__modal .edit-site-add-new-template__custom-template-button svg {
-  fill: var(--wp-admin-theme-color);
+  color: var(--wp-admin-theme-color);
 }
 .edit-site-add-new-template__modal .edit-site-add-new-template__custom-template-button .edit-site-add-new-template__template-name {
   flex-grow: 1;
@@ -4522,7 +4479,6 @@ button.font-library__upload-area {
   flex-direction: column;
   border: 1px solid #ddd;
   justify-content: center;
-  outline: 1px solid transparent;
 }
 .edit-site-custom-template-modal__contents > .components-button span:first-child,
 .edit-site-add-new-template__template-list__contents > .components-button span:first-child {
@@ -4542,12 +4498,6 @@ button.font-library__upload-area {
 .edit-site-add-new-template__template-list__contents > .components-button:hover span {
   color: var(--wp-admin-theme-color);
 }
-.edit-site-custom-template-modal__contents > .components-button:focus,
-.edit-site-add-new-template__template-list__contents > .components-button:focus {
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-  border-color: transparent;
-  outline: 3px solid transparent;
-}
 .edit-site-custom-template-modal__contents > .components-button:focus span:first-child,
 .edit-site-add-new-template__template-list__contents > .components-button:focus span:first-child {
   color: var(--wp-admin-theme-color);
@@ -4773,8 +4723,7 @@ button.font-library__upload-area {
 .edit-site-welcome-guide__image > img {
   display: block;
   max-width: 100%;
-  -o-object-fit: cover;
-     object-fit: cover;
+  object-fit: cover;
 }
 .edit-site-welcome-guide__heading {
   font-family: -apple-system, system-ui, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
@@ -4797,7 +4746,7 @@ button.font-library__upload-area {
   vertical-align: text-top;
 }
 .edit-site-welcome-guide .components-button:hover svg {
-  fill: #fff;
+  color: #fff;
 }
 
 .edit-site-layout {
@@ -5366,11 +5315,6 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   margin-right: -16px;
 }
 
-.edit-site-sidebar-navigation-screen-templates-browse {
-  margin-left: -16px;
-  margin-right: -16px;
-}
-
 .edit-site-sidebar-dataviews {
   margin-left: -16px;
   margin-right: -16px;
@@ -5480,7 +5424,6 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 body:has(.edit-site-resizable-frame__inner.is-resizing) {
   cursor: col-resize;
   -webkit-user-select: none;
-     -moz-user-select: none;
           user-select: none;
 }
 
@@ -5566,6 +5509,12 @@ body:has(.edit-site-resizable-frame__inner.is-resizing) {
   color: var(--wpds-color-foreground-interactive-neutral, #1e1e1e);
 }
 
+.edit-site-styles__content {
+  flex-grow: 1;
+  min-height: 0;
+  background-color: var(--wpds-color-background-surface-neutral-strong, #fff);
+}
+
 .show-icon-labels .edit-site-styles__header-actions .components-button.has-icon {
   width: auto;
   padding: 0 var(--wpds-dimension-padding-xs, 4px);
@@ -5578,6 +5527,14 @@ body:has(.edit-site-resizable-frame__inner.is-resizing) {
   font-size: var(--wpds-typography-font-size-sm, 12px);
 }
 
+.edit-site-sidebar-identity__form {
+  flex-grow: 1;
+  min-height: 0;
+  overflow: auto;
+  background-color: var(--wpds-color-background-surface-neutral-strong, #fff);
+  padding: var(--wpds-dimension-padding-lg, 16px) var(--wpds-dimension-padding-2xl, 24px);
+}
+
 ::view-transition-image-pair(root) {
   isolation: auto;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "7.3.0",
+	"version": "7.4.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -47,57 +47,47 @@
 	],
 	"dependencies": {
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.54.0",
-		"@wordpress/admin-ui": "^2.9.0",
-		"@wordpress/api-fetch": "^7.54.0",
-		"@wordpress/base-styles": "^13.0.0",
-		"@wordpress/blob": "^4.54.0",
-		"@wordpress/block-editor": "^17.0.0",
-		"@wordpress/block-library": "^10.5.0",
-		"@wordpress/blocks": "^15.27.0",
-		"@wordpress/commands": "^1.54.0",
-		"@wordpress/components": "^40.0.0",
-		"@wordpress/compose": "^8.7.0",
-		"@wordpress/core-data": "^7.54.0",
-		"@wordpress/data": "^10.54.0",
-		"@wordpress/dataviews": "^18.1.0",
-		"@wordpress/date": "^5.54.0",
-		"@wordpress/deprecated": "^4.54.0",
-		"@wordpress/dom": "^4.54.0",
-		"@wordpress/editor": "^14.54.0",
-		"@wordpress/element": "^8.6.0",
-		"@wordpress/escape-html": "^3.54.0",
-		"@wordpress/fields": "^0.46.0",
-		"@wordpress/global-styles-engine": "^1.21.0",
-		"@wordpress/global-styles-ui": "^1.21.0",
-		"@wordpress/hooks": "^4.54.0",
-		"@wordpress/html-entities": "^4.54.0",
-		"@wordpress/i18n": "^6.27.0",
-		"@wordpress/icons": "^15.5.0",
-		"@wordpress/keyboard-shortcuts": "^5.54.0",
-		"@wordpress/keycodes": "^4.54.0",
-		"@wordpress/media-utils": "^5.54.0",
-		"@wordpress/notices": "^5.54.0",
-		"@wordpress/patterns": "^2.54.0",
-		"@wordpress/plugins": "^7.54.0",
-		"@wordpress/preferences": "^4.54.0",
-		"@wordpress/primitives": "^4.54.0",
-		"@wordpress/private-apis": "^1.54.0",
-		"@wordpress/reusable-blocks": "^5.54.0",
-		"@wordpress/router": "^1.54.0",
-		"@wordpress/style-engine": "^2.54.0",
-		"@wordpress/theme": "^2.0.0",
-		"@wordpress/ui": "^0.21.0",
-		"@wordpress/url": "^4.54.0",
-		"@wordpress/viewport": "^6.54.0",
-		"@wordpress/views": "^1.21.0",
-		"@wordpress/widgets": "^4.54.0",
-		"@wordpress/wordcount": "^4.54.0",
+		"@wordpress/a11y": "^4.55.0",
+		"@wordpress/admin-ui": "^2.10.0",
+		"@wordpress/api-fetch": "^7.55.0",
+		"@wordpress/base-styles": "^13.1.0",
+		"@wordpress/block-editor": "^17.1.0",
+		"@wordpress/block-library": "^11.0.0",
+		"@wordpress/blocks": "^16.0.0",
+		"@wordpress/commands": "^1.55.0",
+		"@wordpress/components": "^40.1.0",
+		"@wordpress/compose": "^8.8.0",
+		"@wordpress/core-data": "^8.0.0",
+		"@wordpress/data": "^10.55.0",
+		"@wordpress/dataviews": "^19.0.0",
+		"@wordpress/deprecated": "^4.55.0",
+		"@wordpress/dom": "^4.55.0",
+		"@wordpress/editor": "^15.0.0",
+		"@wordpress/element": "^8.7.0",
+		"@wordpress/fields": "^0.47.0",
+		"@wordpress/global-styles-engine": "^1.22.0",
+		"@wordpress/global-styles-ui": "^1.22.0",
+		"@wordpress/html-entities": "^4.55.0",
+		"@wordpress/i18n": "^6.28.0",
+		"@wordpress/icons": "^16.0.0",
+		"@wordpress/keyboard-shortcuts": "^5.55.0",
+		"@wordpress/keycodes": "^4.55.0",
+		"@wordpress/notices": "^5.55.0",
+		"@wordpress/patterns": "^2.55.0",
+		"@wordpress/plugins": "^7.55.0",
+		"@wordpress/preferences": "^4.55.0",
+		"@wordpress/private-apis": "^1.55.0",
+		"@wordpress/router": "^1.55.0",
+		"@wordpress/theme": "^2.1.0",
+		"@wordpress/ui": "^0.22.0",
+		"@wordpress/url": "^4.55.0",
+		"@wordpress/views": "^1.22.0",
+		"@wordpress/widgets": "^4.55.0",
 		"change-case": "^4.1.2",
-		"clsx": "^2.1.1",
-		"colord": "^2.9.3",
-		"fast-deep-equal": "^3.1.3",
-		"react-autosize-textarea": "^7.1.0"
+		"clsx": "^2.1.1"
+	},
+	"devDependencies": {
+		"vitest": "^5.0.0"
 	},
 	"peerDependencies": {
 		"react": "^18 || ^19",
@@ -106,5 +96,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "5ef24f60261976bb198ad035db24bf81c1fb92b4"
+	"gitHead": "485f42ae8a1c58ceea18371a507fd4acfa86fbd8"
 }

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

@@ -10,12 +10,6 @@
 		> * {
 			width: 100%;
 		}
-
-		&__suggestions_list {
-			margin-left: - $grid-unit-15;
-			margin-right: - $grid-unit-15;
-			width: calc(100% + #{$grid-unit-15 * 2});
-		}
 	}
 
 	&__contents {
@@ -31,8 +25,14 @@
 
 	.edit-site-custom-template-modal__suggestions_list {
 		@include break-small() {
-			max-height: $grid-unit-70 * 4; // Height of four buttons
 			overflow-y: auto;
+			// Height of four buttons
+			max-height: calc(#{$grid-unit-70 * 4} + 4 * var(--wpds-border-width-focus));
+			// Room for the focus ring, and keep it in view while arrowing.
+			padding: calc(2 * var(--wpds-border-width-focus));
+			margin-inline: calc(-2 * var(--wpds-border-width-focus));
+			width: calc(100% + 4 * var(--wpds-border-width-focus));
+			scroll-padding-block: calc(2 * var(--wpds-border-width-focus));
 		}
 
 		&__list-item {
@@ -65,10 +65,6 @@
 				background-color: $gray-100;
 			}
 
-			&:focus:not(:disabled) {
-				box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color) inset;
-			}
-
 			&__title,
 			&__info {
 				overflow: hidden;
@@ -112,7 +108,7 @@
 	.edit-site-add-new-template__template-button,
 	.edit-site-add-new-template__custom-template-button {
 		svg {
-			fill: var(--wp-admin-theme-color);
+			color: var(--wp-admin-theme-color);
 		}
 	}
 
@@ -141,9 +137,6 @@
 		border: $border-width solid $gray-300;
 		justify-content: center;
 
-		// Show the boundary of the button, in High Contrast Mode.
-		outline: 1px solid transparent;
-
 		span:first-child {
 			color: $gray-900;
 		}
@@ -163,12 +156,6 @@
 		}
 
 		&:focus {
-			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-			border-color: transparent;
-
-			// 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);
 			}