@wordpress/edit-site 6.6.1 → 6.7.1-next.5368f64a9.0

package/build-style/style.css

@@ -117,6 +117,8 @@
   container: dataviews-wrapper/inline-size;
   display: flex;
   flex-direction: column;
+  font-size: 13px;
+  line-height: 1.4;
 }
 
 .dataviews__view-actions,
@@ -218,53 +220,16 @@
     padding-right: 24px;
   }
 }
-.dataviews-bulk-actions__modal {
-  z-index: 1000001;
-}
-
-.dataviews-bulk-actions__edit-button.components-button {
-  flex-shrink: 0;
+.dataviews-bulk-actions-footer__item-count {
+  color: #1e1e1e;
+  font-weight: 500;
+  font-size: 11px;
+  text-transform: uppercase;
 }
 
-.dataviews-bulk-actions-toolbar {
-  position: sticky;
-  display: flex;
-  flex-direction: column;
-  align-content: center;
-  flex-wrap: wrap;
-  width: -moz-fit-content;
-  width: fit-content;
-  margin-left: auto;
+.dataviews-bulk-actions-footer__container {
   margin-right: auto;
-  bottom: 24px;
-  z-index: 2;
-}
-.dataviews-bulk-actions-toolbar .components-accessible-toolbar {
-  border-color: #ddd;
-  box-shadow: 0 0.7px 1px rgba(0, 0, 0, 0.1), 0 1.2px 1.7px -0.2px rgba(0, 0, 0, 0.1), 0 2.3px 3.3px -0.5px rgba(0, 0, 0, 0.1);
-}
-.dataviews-bulk-actions-toolbar .components-accessible-toolbar .components-toolbar-group {
-  border-color: #e0e0e0;
-}
-.dataviews-bulk-actions-toolbar .components-accessible-toolbar .components-toolbar-group:last-child {
-  border: 0;
-}
-.dataviews-bulk-actions-toolbar .dataviews-bulk-actions-toolbar__selection-count {
-  display: flex;
-  align-items: center;
-  margin: 0 8px 0 8px;
-}
-
-.dataviews-bulk-actions-toolbar__wrapper {
-  display: flex;
-  flex-grow: 1;
-  width: 100%;
-}
-.dataviews-bulk-actions-toolbar__wrapper .components-toolbar-group {
-  align-items: center;
-}
-.dataviews-bulk-actions-toolbar__wrapper .components-button.is-busy {
-  max-height: 36px;
+  min-height: 32px;
 }
 
 .dataviews-filters__button {
@@ -282,11 +247,17 @@
   opacity: 1;
 }
 
+.dataviews-filters__summary-popover {
+  font-size: 13px;
+  line-height: 1.4;
+}
 .dataviews-filters__summary-popover .components-popover__content {
   width: 230px;
-  padding: 0;
   border-radius: 4px;
 }
+.dataviews-filters__summary-popover.components-dropdown__content .components-popover__content {
+  padding: 0;
+}
 
 .dataviews-filters__summary-operators-container {
   padding: 8px 8px 0;
@@ -317,6 +288,7 @@
   position: relative;
   display: flex;
   align-items: center;
+  box-sizing: border-box;
 }
 .dataviews-filters__summary-chip-container .dataviews-filters__summary-chip.has-reset {
   padding-inline-end: 28px;
@@ -528,6 +500,7 @@
   font-size: 11px;
   outline: var(--wp-admin-border-width-focus) solid #fff;
   color: #fff;
+  box-sizing: border-box;
 }
 
 .dataviews-search {
@@ -535,7 +508,7 @@
   width: fit-content;
 }
 
-.dataviews-pagination {
+.dataviews-footer {
   position: sticky;
   bottom: 0;
   left: 0;
@@ -544,14 +517,37 @@
   border-top: 1px solid #f0f0f0;
   flex-shrink: 0;
   transition: padding ease-out 0.1s;
+  z-index: 2;
 }
 @media (prefers-reduced-motion: reduce) {
-  .dataviews-pagination {
+  .dataviews-footer {
     transition-duration: 0s;
     transition-delay: 0s;
   }
 }
 
+/* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
+@container (max-width: 430px) {
+  .dataviews-footer {
+    padding: 12px 24px;
+  }
+}
+/* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
+@container (max-width: 560px) {
+  .dataviews-footer {
+    flex-direction: column !important;
+  }
+  .dataviews-footer .dataviews-bulk-actions-footer__container {
+    width: 100%;
+  }
+  .dataviews-footer .dataviews-bulk-actions-footer__item-count {
+    flex-grow: 1;
+  }
+  .dataviews-footer .dataviews-pagination {
+    width: 100%;
+    justify-content: space-between;
+  }
+}
 .dataviews-pagination__page-select {
   font-size: 11px;
   font-weight: 500;
@@ -564,12 +560,6 @@
   }
 }
 
-/* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
-@container (max-width: 430px) {
-  .dataviews-pagination {
-    padding: 12px 24px;
-  }
-}
 .dataviews-action-modal {
   z-index: 1000001;
 }
@@ -593,6 +583,8 @@
   /* stylelint-disable-next-line property-no-unknown -- the linter needs to be updated to accepted the container-type property */
   container-type: inline-size;
   padding: 16px;
+  font-size: 13px;
+  line-height: 1.4;
 }
 
 .dataviews-view-config__sort-direction .components-toggle-group-control-option-base {
@@ -620,6 +612,10 @@
   grid-column: span 4;
 }
 
+.dataviews-settings-section:has(.dataviews-settings-section__content:empty) {
+  display: none;
+}
+
 /* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
 @container (max-width: 500px) {
   .dataviews-settings-section.dataviews-settings-section {
@@ -632,6 +628,25 @@
     grid-column: span 2;
   }
 }
+.dataviews-field-control__field {
+  height: 32px;
+}
+
+.dataviews-field-control__actions {
+  position: absolute;
+  top: -9999em;
+}
+
+.dataviews-field-control__actions.dataviews-field-control__actions {
+  gap: 4px;
+}
+
+.dataviews-field-control__field:hover .dataviews-field-control__actions,
+.dataviews-field-control__field:focus-within .dataviews-field-control__actions {
+  position: unset;
+  top: unset;
+}
+
 .dataviews-view-grid {
   margin-bottom: auto;
   grid-template-rows: max-content;
@@ -781,6 +796,10 @@
   top: 8px;
 }
 
+ul.dataviews-view-list {
+  list-style-type: none;
+}
+
 .dataviews-view-list {
   margin: 0 0 auto;
 }
@@ -834,12 +853,13 @@
 .dataviews-view-list li:not(.is-selected) .dataviews-view-list__primary-field {
   color: #1e1e1e;
 }
-.dataviews-view-list li:not(.is-selected):hover, .dataviews-view-list li:not(.is-selected):focus-within {
+.dataviews-view-list li:not(.is-selected):hover, .dataviews-view-list li:not(.is-selected).is-hovered, .dataviews-view-list li:not(.is-selected):focus-within {
   color: var(--wp-admin-theme-color);
   background-color: #f8f8f8;
 }
 .dataviews-view-list li:not(.is-selected):hover .dataviews-view-list__primary-field,
-.dataviews-view-list li:not(.is-selected):hover .dataviews-view-list__fields, .dataviews-view-list li:not(.is-selected):focus-within .dataviews-view-list__primary-field,
+.dataviews-view-list li:not(.is-selected):hover .dataviews-view-list__fields, .dataviews-view-list li:not(.is-selected).is-hovered .dataviews-view-list__primary-field,
+.dataviews-view-list li:not(.is-selected).is-hovered .dataviews-view-list__fields, .dataviews-view-list li:not(.is-selected):focus-within .dataviews-view-list__primary-field,
 .dataviews-view-list li:not(.is-selected):focus-within .dataviews-view-list__fields {
   color: var(--wp-admin-theme-color);
 }
@@ -855,6 +875,7 @@
   color: var(--wp-admin-theme-color);
 }
 .dataviews-view-list .dataviews-view-list__item {
+  box-sizing: border-box;
   padding: 16px 24px;
   width: 100%;
   scroll-margin: 8px 0;
@@ -862,7 +883,7 @@
 .dataviews-view-list .dataviews-view-list__item:focus-visible::before {
   position: absolute;
   content: "";
-  top: calc(var(--wp-admin-border-width-focus) + 1px);
+  top: var(--wp-admin-border-width-focus);
   right: var(--wp-admin-border-width-focus);
   bottom: var(--wp-admin-border-width-focus);
   left: var(--wp-admin-border-width-focus);
@@ -899,8 +920,8 @@
   border-radius: 4px;
 }
 .dataviews-view-list .dataviews-view-list__media-placeholder {
-  min-width: 32px;
-  height: 32px;
+  width: 52px;
+  height: 52px;
   background-color: #e0e0e0;
 }
 .dataviews-view-list .dataviews-view-list__field-wrapper {
@@ -939,11 +960,6 @@
   color: #757575;
   margin-bottom: auto;
 }
-.dataviews-view-table a {
-  text-decoration: none;
-  color: #1e1e1e;
-  font-weight: 500;
-}
 .dataviews-view-table th {
   text-align: left;
   color: #1e1e1e;
@@ -1076,10 +1092,6 @@
   opacity: 1;
 }
 
-.dataviews-view-table__cell-content-wrapper:empty {
-  display: none;
-}
-
 /* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
 @container (max-width: 430px) {
   .dataviews-view-table tr td:first-child,
@@ -1268,7 +1280,6 @@
 .edit-site-custom-template-modal__contents > .components-button,
 .edit-site-add-new-template__template-list__contents > .components-button {
   padding: 32px;
-  border-radius: 2px;
   display: flex;
   flex-direction: column;
   border: 1px solid #ddd;
@@ -1399,7 +1410,7 @@
   display: flex !important;
   align-items: center;
   justify-content: center;
-  border-radius: 2px;
+  border-radius: 1px;
 }
 
 .edit-site-global-styles-screen-typography__font-variants-count {
@@ -1464,14 +1475,14 @@
   position: relative;
   width: 100%;
   border: #e0e0e0 1px solid;
-  border-radius: 2px;
+  border-radius: 4px;
   overflow: hidden;
 }
 
 .edit-site-global-styles__shadow-preview-panel {
   height: 144px;
   border: #e0e0e0 1px solid;
-  border-radius: 2px;
+  border-radius: 4px;
   overflow: auto;
   background-image: repeating-linear-gradient(45deg, #f5f5f5 25%, #0000 0, #0000 75%, #f5f5f5 0, #f5f5f5), repeating-linear-gradient(45deg, #f5f5f5 25%, #0000 0, #0000 75%, #f5f5f5 0, #f5f5f5);
   background-position: 0 0, 8px 8px;
@@ -1817,7 +1828,7 @@
 .edit-site-page {
   color: #2f2f2f;
   background: #fff;
-  height: 100%;
+  height: calc(100% - 60px);
   /* stylelint-disable-next-line property-no-unknown -- '@container' not globally permitted */
   container: edit-site-page/inline-size;
   transition: width ease-out 0.2s;
@@ -1828,6 +1839,11 @@
     transition-delay: 0s;
   }
 }
+@media (min-width: 782px) {
+  .edit-site-page {
+    height: 100%;
+  }
+}
 
 .edit-site-page-header {
   padding: 16px 48px;
@@ -1886,10 +1902,6 @@
 .dataviews-view-table .page-patterns-preview-field {
   width: 96px;
   flex-grow: 0;
-  border-radius: 2px;
-}
-.dataviews-view-table .page-patterns-preview-field .page-patterns-preview-field__button {
-  border-radius: 2px;
 }
 .page-patterns-preview-field .page-patterns-preview-field__button {
   box-shadow: none;
@@ -1974,9 +1986,6 @@
   fill: currentcolor;
 }
 
-.edit-site-page-patterns-dataviews .dataviews-pagination {
-  z-index: 2;
-}
 .edit-site-page-patterns-dataviews .dataviews-view-grid__badge-fields .dataviews-view-grid__field-value:has(.edit-site-patterns__field-sync-status-fully) {
   background: rgba(var(--wp-block-synced-color--rgb), 0.04);
   color: var(--wp-block-synced-color);
@@ -2045,7 +2054,6 @@
   height: 100%;
 }
 .dataviews-view-table .page-templates-preview-field {
-  border-radius: 2px;
   position: relative;
   width: 120px;
   max-height: 160px;
@@ -2058,7 +2066,7 @@
   width: 100%;
   height: 100%;
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
-  border-radius: 2px;
+  border-radius: 4px;
 }
 
 .page-templates-description {
@@ -2485,20 +2493,6 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   padding-right: 16px;
 }
 
-.edit-site-layout.is-full-canvas .edit-site-layout__view-mode-toggle.components-button:focus-visible, .edit-site-layout.is-full-canvas .edit-site-layout__view-mode-toggle.components-button:focus {
-  box-shadow: none;
-  outline: none;
-  outline-offset: 0;
-}
-.edit-site-layout.is-full-canvas .edit-site-layout__view-mode-toggle.components-button:focus-visible .edit-site-site-icon svg, .edit-site-layout.is-full-canvas .edit-site-layout__view-mode-toggle.components-button:focus .edit-site-site-icon svg {
-  box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color, #3858e9);
-  outline: 3px solid #0000;
-  height: 40px;
-  width: 40px;
-  padding: 2px;
-  border-radius: 2px;
-}
-
 .edit-site-save-hub {
   color: #949494;
   border-top: 1px solid #2f2f2f;
@@ -2535,7 +2529,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   contain: content;
 }
 
-@keyframes _tghql_slide-from-right {
+@keyframes _g2zts_slide-from-right {
   from {
     transform: translateX(50px);
     opacity: 0;
@@ -2545,7 +2539,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
     opacity: 1;
   }
 }
-@keyframes _tghql_slide-from-left {
+@keyframes _g2zts_slide-from-left {
   from {
     transform: translateX(-50px);
     opacity: 0;
@@ -2601,10 +2595,10 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   }
 }
 .edit-site-sidebar__screen-wrapper.slide-from-left {
-  animation-name: _tghql_slide-from-left;
+  animation-name: _g2zts_slide-from-left;
 }
 .edit-site-sidebar__screen-wrapper.slide-from-right {
-  animation-name: _tghql_slide-from-right;
+  animation-name: _g2zts_slide-from-right;
 }
 
 .edit-site-sidebar-button {
@@ -2628,7 +2622,6 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   padding: 8px 6px 8px 16px;
   border: none;
   min-height: 40px;
-  border-radius: 2px;
 }
 .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] {
   color: #e0e0e0;
@@ -2777,7 +2770,6 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 .edit-site-sidebar-navigation-screen__input-control .components-input-control__input {
   color: #e0e0e0 !important;
   background: #2f2f2f !important;
-  border-radius: 2px;
 }
 .edit-site-sidebar-navigation-screen__input-control .components-input-control__backdrop {
   border: 4px !important;
@@ -3047,7 +3039,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
 
 .edit-site-editor-canvas-container__section {
   background: #fff;
-  border-radius: 2px;
+  border-radius: 8px;
   bottom: 0;
   left: 0;
   overflow: hidden;
@@ -3397,7 +3389,6 @@ button.font-library-modal__upload-area {
 
 .edit-site-global-styles-variations_item {
   box-sizing: border-box;
-  border-radius: 2px;
   cursor: pointer;
 }
 .edit-site-global-styles-variations_item .edit-site-global-styles-variations_item-preview {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "6.6.1",
+	"version": "6.7.1-next.5368f64a9.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -29,45 +29,45 @@
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.6.0",
-		"@wordpress/api-fetch": "^7.6.0",
-		"@wordpress/blob": "^4.6.0",
-		"@wordpress/block-editor": "^14.1.0",
-		"@wordpress/block-library": "^9.6.1",
-		"@wordpress/blocks": "^13.6.0",
-		"@wordpress/commands": "^1.6.0",
-		"@wordpress/components": "^28.6.0",
-		"@wordpress/compose": "^7.6.0",
-		"@wordpress/core-commands": "^1.6.0",
-		"@wordpress/core-data": "^7.6.0",
-		"@wordpress/data": "^10.6.0",
-		"@wordpress/dataviews": "^4.2.0",
-		"@wordpress/date": "^5.6.0",
-		"@wordpress/deprecated": "^4.6.0",
-		"@wordpress/dom": "^4.6.0",
-		"@wordpress/editor": "^14.6.0",
-		"@wordpress/element": "^6.6.0",
-		"@wordpress/escape-html": "^3.6.0",
-		"@wordpress/hooks": "^4.6.0",
-		"@wordpress/html-entities": "^4.6.0",
-		"@wordpress/i18n": "^5.6.0",
-		"@wordpress/icons": "^10.6.0",
-		"@wordpress/keyboard-shortcuts": "^5.6.0",
-		"@wordpress/keycodes": "^4.6.0",
-		"@wordpress/notices": "^5.6.0",
-		"@wordpress/patterns": "^2.6.0",
-		"@wordpress/plugins": "^7.6.0",
-		"@wordpress/preferences": "^4.6.0",
-		"@wordpress/primitives": "^4.6.0",
-		"@wordpress/priority-queue": "^3.6.0",
-		"@wordpress/private-apis": "^1.6.0",
-		"@wordpress/reusable-blocks": "^5.6.0",
-		"@wordpress/router": "^1.6.0",
-		"@wordpress/style-engine": "^2.6.0",
-		"@wordpress/url": "^4.6.0",
-		"@wordpress/viewport": "^6.6.0",
-		"@wordpress/widgets": "^4.6.0",
-		"@wordpress/wordcount": "^4.6.0",
+		"@wordpress/a11y": "^4.7.1-next.5368f64a9.0",
+		"@wordpress/api-fetch": "^7.7.1-next.5368f64a9.0",
+		"@wordpress/blob": "^4.7.1-next.5368f64a9.0",
+		"@wordpress/block-editor": "^14.2.1-next.5368f64a9.0",
+		"@wordpress/block-library": "^9.7.1-next.5368f64a9.0",
+		"@wordpress/blocks": "^13.7.1-next.5368f64a9.0",
+		"@wordpress/commands": "^1.7.1-next.5368f64a9.0",
+		"@wordpress/components": "^28.8.1-next.5368f64a9.0",
+		"@wordpress/compose": "^7.8.1-next.5368f64a9.0",
+		"@wordpress/core-commands": "^1.7.1-next.5368f64a9.0",
+		"@wordpress/core-data": "^7.7.1-next.5368f64a9.0",
+		"@wordpress/data": "^10.7.1-next.5368f64a9.0",
+		"@wordpress/dataviews": "^4.3.1-next.5368f64a9.0",
+		"@wordpress/date": "^5.7.1-next.5368f64a9.0",
+		"@wordpress/deprecated": "^4.7.1-next.5368f64a9.0",
+		"@wordpress/dom": "^4.7.1-next.5368f64a9.0",
+		"@wordpress/editor": "^14.7.1-next.5368f64a9.0",
+		"@wordpress/element": "^6.7.1-next.5368f64a9.0",
+		"@wordpress/escape-html": "^3.7.1-next.5368f64a9.0",
+		"@wordpress/hooks": "^4.7.1-next.5368f64a9.0",
+		"@wordpress/html-entities": "^4.7.1-next.5368f64a9.0",
+		"@wordpress/i18n": "^5.7.1-next.5368f64a9.0",
+		"@wordpress/icons": "^10.7.1-next.5368f64a9.0",
+		"@wordpress/keyboard-shortcuts": "^5.7.1-next.5368f64a9.0",
+		"@wordpress/keycodes": "^4.7.1-next.5368f64a9.0",
+		"@wordpress/notices": "^5.7.1-next.5368f64a9.0",
+		"@wordpress/patterns": "^2.7.1-next.5368f64a9.0",
+		"@wordpress/plugins": "^7.7.1-next.5368f64a9.0",
+		"@wordpress/preferences": "^4.7.1-next.5368f64a9.0",
+		"@wordpress/primitives": "^4.7.1-next.5368f64a9.0",
+		"@wordpress/priority-queue": "^3.7.1-next.5368f64a9.0",
+		"@wordpress/private-apis": "^1.7.1-next.5368f64a9.0",
+		"@wordpress/reusable-blocks": "^5.7.1-next.5368f64a9.0",
+		"@wordpress/router": "^1.7.1-next.5368f64a9.0",
+		"@wordpress/style-engine": "^2.7.1-next.5368f64a9.0",
+		"@wordpress/url": "^4.7.1-next.5368f64a9.0",
+		"@wordpress/viewport": "^6.7.1-next.5368f64a9.0",
+		"@wordpress/widgets": "^4.7.1-next.5368f64a9.0",
+		"@wordpress/wordcount": "^4.7.1-next.5368f64a9.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.9.2",
@@ -82,5 +82,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "2c178a34c8ea9b1c0e51c1fd48e24da95c418f6e"
+	"gitHead": "24934a1f5251bbee15045d1fd953d9c5650317cd"
 }

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

@@ -9,7 +9,7 @@ import {
 	FlexItem,
 	SearchControl,
 	TextHighlight,
-	privateApis as componentsPrivateApis,
+	Composite,
 	__experimentalText as Text,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
@@ -20,15 +20,8 @@ import { useDebouncedInput } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
-import { unlock } from '../../lock-unlock';
 import { mapToIHasNameAndId } from './utils';
 
-const {
-	CompositeV2: Composite,
-	CompositeItemV2: CompositeItem,
-	useCompositeStoreV2: useCompositeStore,
-} = unlock( componentsPrivateApis );
-
 const EMPTY_ARRAY = [];
 
 function SuggestionListItem( {
@@ -40,9 +33,11 @@ function SuggestionListItem( {
 	const baseCssClass =
 		'edit-site-custom-template-modal__suggestions_list__list-item';
 	return (
-		<CompositeItem
+		<Composite.Item
 			render={
 				<Button
+					// TODO: Switch to `true` (40px size) if possible
+					__next40pxDefaultSize={ false }
 					role="option"
 					className={ baseCssClass }
 					onClick={ () =>
@@ -75,7 +70,7 @@ function SuggestionListItem( {
 					{ suggestion.link }
 				</Text>
 			) }
-		</CompositeItem>
+		</Composite.Item>
 	);
 }
 
@@ -120,7 +115,6 @@ function useSearchSuggestions( entityForSuggestions, search ) {
 }
 
 function SuggestionList( { entityForSuggestions, onSelect } ) {
-	const composite = useCompositeStore( { orientation: 'vertical' } );
 	const [ search, setSearch, debouncedSearch ] = useDebouncedInput();
 	const suggestions = useSearchSuggestions(
 		entityForSuggestions,
@@ -144,7 +138,7 @@ function SuggestionList( { entityForSuggestions, onSelect } ) {
 			) }
 			{ !! suggestions?.length && (
 				<Composite
-					store={ composite }
+					orientation="vertical"
 					role="listbox"
 					className="edit-site-custom-template-modal__suggestions_list"
 					aria-label={ __( 'Suggestions list' ) }

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

@@ -107,6 +107,8 @@ function TemplateListItem( {
 } ) {
 	return (
 		<Button
+			// TODO: Switch to `true` (40px size) if possible
+			__next40pxDefaultSize={ false }
 			className={ className }
 			onClick={ onClick }
 			label={ description }
@@ -164,14 +166,10 @@ function NewTemplateModal( { onClose } ) {
 
 	const isMobile = useViewportMatch( 'medium', '<' );
 
-	const { homeUrl } = useSelect( ( select ) => {
-		const {
-			getUnstableBase, // Site index.
-		} = select( coreStore );
-
-		return {
-			homeUrl: getUnstableBase()?.home,
-		};
+	const homeUrl = useSelect( ( select ) => {
+		// Site index.
+		return select( coreStore ).getEntityRecord( 'root', '__unstableBase' )
+			?.home;
 	}, [] );
 
 	const TEMPLATE_SHORT_DESCRIPTIONS = {

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

@@ -82,7 +82,7 @@
 
 .edit-site-custom-template-modal__no-results {
 	border: $border-width solid $gray-400;
-	border-radius: $radius-block-ui;
+	border-radius: $radius-small;
 	padding: $grid-unit-20;
 }
 
@@ -132,7 +132,6 @@
 .edit-site-add-new-template__template-list__contents {
 	> .components-button {
 		padding: $grid-unit-40;
-		border-radius: $radius-block-ui;
 		display: flex;
 		flex-direction: column;
 		border: $border-width solid $gray-300;