@wordpress/block-editor 7.0.4 → 8.0.0

package/build-style/style.css

@@ -986,8 +986,17 @@
   font-size: 13px;
 }
 
-.is-dragging {
-  display: none !important;
+.block-editor-block-list__layout .is-dragging {
+  background-color: currentColor !important;
+  opacity: 0.05 !important;
+  border-radius: 2px !important;
+  pointer-events: none !important;
+}
+.block-editor-block-list__layout .is-dragging::selection {
+  background: transparent !important;
+}
+.block-editor-block-list__layout .is-dragging::after {
+  content: none !important;
 }
 
 .block-editor-block-mobile-toolbar {
@@ -1148,7 +1157,7 @@
 
 .block-editor-block-patterns-list__list-item {
   cursor: pointer;
-  margin-top: 16px;
+  margin-bottom: 24px;
 }
 .block-editor-block-patterns-list__list-item.is-placeholder {
   min-height: 100px;
@@ -1159,23 +1168,28 @@
 
 .block-editor-block-patterns-list__item {
   height: 100%;
+}
+.block-editor-block-patterns-list__item .block-editor-block-preview__container {
+  display: flex;
+  align-items: center;
+  overflow: hidden;
   border-radius: 2px;
-  transition: all 0.05s ease-in-out;
-  position: relative;
-  border: 1px solid transparent;
+  border: 1px solid #f0f0f0;
+}
+.block-editor-block-patterns-list__item .block-editor-block-patterns-list__item-title {
+  padding-top: 8px;
+  font-size: 12px;
+  text-align: center;
 }
-.block-editor-block-patterns-list__item:hover {
+.block-editor-block-patterns-list__item:hover .block-editor-block-preview__container {
   border: 1px solid var(--wp-admin-theme-color);
 }
-.block-editor-block-patterns-list__item:focus {
+.block-editor-block-patterns-list__item:focus .block-editor-block-preview__container {
   box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
   outline: 2px solid transparent;
 }
-
-.block-editor-block-patterns-list__item-title {
-  padding: 4px;
-  font-size: 12px;
-  text-align: center;
+.block-editor-block-patterns-list__item:hover .block-editor-block-patterns-list__item-title, .block-editor-block-patterns-list__item:focus .block-editor-block-patterns-list__item-title {
+  color: var(--wp-admin-theme-color);
 }
 
 .block-editor-block-preview__container {
@@ -1778,13 +1792,9 @@
 }
 @media screen and (min-width: 782px) {
   .block-editor-panel-color-gradient-settings .components-circular-option-picker__swatches {
-    margin-right: 0;
-  }
-  .block-editor-panel-color-gradient-settings .components-circular-option-picker__option-wrapper {
-    margin-right: calc((100% - (28px * 6)) / 5);
-  }
-  .block-editor-panel-color-gradient-settings .components-circular-option-picker__option-wrapper:nth-child(6n+6) {
-    margin-right: 0;
+    display: grid;
+    grid-template-columns: repeat(6, 28px);
+    justify-content: space-between;
   }
 }
 .block-editor-block-inspector .block-editor-panel-color-gradient-settings .components-base-control {
@@ -1839,21 +1849,26 @@
   right: 0;
 }
 
-.block-editor-duotone-control__popover .components-popover__content {
-  border: 1px solid #1e1e1e;
-  min-width: 214px;
-}
-.block-editor-duotone-control__popover .components-circular-option-picker {
-  padding: 12px;
+.block-editor-duotone-control__popover > .components-popover__content > div {
+  padding: 16px;
+  width: 280px;
 }
 .block-editor-duotone-control__popover .components-menu-group__label {
-  padding: 12px 12px 0 12px;
-  width: 100%;
-  box-sizing: border-box;
+  padding: 0;
+}
+.block-editor-duotone-control__popover .components-custom-gradient-picker__gradient-bar {
+  margin: 16px 0 12px;
+}
+.block-editor-duotone-control__popover .components-circular-option-picker__swatches {
+  display: grid;
+  grid-template-columns: repeat(6, 28px);
+  gap: 12px;
+  justify-content: space-between;
 }
 
-.block-editor-duotone-control__popover > .components-popover__content {
-  width: 334px;
+.block-editor-duotone-control__description {
+  margin: 16px 0;
+  font-size: 12px;
 }
 
 .block-editor-duotone-control__popover:not([data-y-axis=middle][data-x-axis=right]) > .components-popover__content {
@@ -1909,7 +1924,27 @@
   position: relative;
 }
 
-.block-editor-link-control .block-editor-link-control__search-input.block-editor-link-control__search-input input[type=text] {
+.block-editor-link-control__search-input-container {
+  position: relative;
+}
+
+.block-editor-link-control__search-input.has-no-label .block-editor-url-input__input {
+  flex: 1;
+}
+
+.block-editor-link-control__field {
+  margin: 16px;
+}
+.block-editor-link-control__field > .components-base-control__field {
+  display: flex;
+  align-items: center;
+  margin: 0;
+}
+.block-editor-link-control__field .components-base-control__label {
+  margin-right: 16px;
+  margin-bottom: 0;
+}
+.block-editor-link-control__field input[type=text], .block-editor-link-control__field.block-editor-url-input input[type=text].block-editor-url-input__input {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   padding: 6px 8px;
   box-shadow: 0 0 0 transparent;
@@ -1924,42 +1959,39 @@
   display: block;
   padding: 11px 16px;
   padding-right: 36px;
-  margin: 16px;
+  margin: 0;
   position: relative;
   border: 1px solid #ddd;
   border-radius: 2px;
 }
 @media (prefers-reduced-motion: reduce) {
-  .block-editor-link-control .block-editor-link-control__search-input.block-editor-link-control__search-input input[type=text] {
+  .block-editor-link-control__field input[type=text], .block-editor-link-control__field.block-editor-url-input input[type=text].block-editor-url-input__input {
     transition-duration: 0s;
     transition-delay: 0s;
   }
 }
 @media (min-width: 600px) {
-  .block-editor-link-control .block-editor-link-control__search-input.block-editor-link-control__search-input input[type=text] {
+  .block-editor-link-control__field input[type=text], .block-editor-link-control__field.block-editor-url-input input[type=text].block-editor-url-input__input {
     font-size: 13px;
     /* Override core line-height. To be reviewed. */
     line-height: normal;
   }
 }
-.block-editor-link-control .block-editor-link-control__search-input.block-editor-link-control__search-input input[type=text]:focus {
+.block-editor-link-control__field input[type=text]:focus, .block-editor-link-control__field.block-editor-url-input input[type=text].block-editor-url-input__input:focus {
   border-color: var(--wp-admin-theme-color);
   box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
   outline: 2px solid transparent;
 }
-.block-editor-link-control .block-editor-link-control__search-input.block-editor-link-control__search-input input[type=text]::-webkit-input-placeholder {
+.block-editor-link-control__field input[type=text]::-webkit-input-placeholder, .block-editor-link-control__field.block-editor-url-input input[type=text].block-editor-url-input__input::-webkit-input-placeholder {
   color: rgba(30, 30, 30, 0.62);
 }
-.block-editor-link-control .block-editor-link-control__search-input.block-editor-link-control__search-input input[type=text]::-moz-placeholder {
+.block-editor-link-control__field input[type=text]::-moz-placeholder, .block-editor-link-control__field.block-editor-url-input input[type=text].block-editor-url-input__input::-moz-placeholder {
   opacity: 1;
   color: rgba(30, 30, 30, 0.62);
 }
-.block-editor-link-control .block-editor-link-control__search-input.block-editor-link-control__search-input input[type=text]:-ms-input-placeholder {
+.block-editor-link-control__field input[type=text]:-ms-input-placeholder, .block-editor-link-control__field.block-editor-url-input input[type=text].block-editor-url-input__input:-ms-input-placeholder {
   color: rgba(30, 30, 30, 0.62);
 }
-.block-editor-link-control .block-editor-link-control__search-input .components-base-control__field {
-  margin-bottom: 0;
-}
 
 .block-editor-link-control__search-error {
   margin: -8px 16px 16px;
@@ -1972,14 +2004,13 @@
    * when suggestions are rendered.
    *
    * Compensate for:
-   *  - Input margin ($grid-unit-20)
    *  - Border (1px)
    *  - Vertically, for the difference in height between the input (40px) and
    *    the icon buttons.
    *  - Horizontally, pad to the minimum of: default input padding, or the
    *    equivalent of the vertical padding.
    */
-  top: 19px;
+  top: 3px;
   right: 19px;
 }
 
@@ -2069,7 +2100,6 @@
   flex-direction: row;
   align-items: flex-start;
   margin-right: 8px;
-  overflow: hidden;
   white-space: pre-wrap;
   word-wrap: break-word;
 }
@@ -2080,9 +2110,6 @@
 .block-editor-link-control__search-item.is-error .block-editor-link-control__search-item-header {
   align-items: center;
 }
-.block-editor-link-control__search-item .block-editor-link-control__search-item-details {
-  overflow: hidden;
-}
 .block-editor-link-control__search-item .block-editor-link-control__search-item-icon {
   position: relative;
   top: 0.2em;
@@ -2492,9 +2519,6 @@
 .block-editor-list-view-leaf.is-branch-selected:not(.is-selected) .block-editor-list-view-block-contents {
   border-radius: 0;
 }
-.block-editor-list-view-leaf.is-branch-selected.is-last-of-selected-branch .block-editor-list-view-block-contents {
-  border-radius: 0 0 2px 2px;
-}
 .block-editor-list-view-leaf.is-dragging {
   display: none;
 }
@@ -2542,6 +2566,9 @@
 .is-dragging-components-draggable .block-editor-list-view-leaf .block-editor-list-view-block-contents:focus::after {
   box-shadow: none;
 }
+.block-editor-list-view-leaf.has-single-cell .block-editor-list-view-block-contents:focus::after {
+  right: 0;
+}
 .block-editor-list-view-leaf .block-editor-list-view-block__menu:focus {
   box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
   z-index: 1;
@@ -2799,6 +2826,12 @@
   box-shadow: none;
 }
 
+.block-editor-list-view-placeholder {
+  padding: 0;
+  margin: 0;
+  height: 36px;
+}
+
 .modal-open .block-editor-media-replace-flow__options {
   display: none;
 }
@@ -3077,10 +3110,6 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   z-index: 100000;
 }
 
-.block-editor-text-decoration-and-transform {
-  display: flex;
-}
-
 .block-editor-text-transform-control {
   flex: 0 0 50%;
 }
@@ -3468,7 +3497,12 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   font-size: 12px;
 }
 
-.block-editor-hooks__flex-layout-justification-controls legend {
+.block-editor-hooks__flex-layout-justification-controls,
+.block-editor-hooks__flex-layout-orientation-controls {
+  margin-bottom: 12px;
+}
+.block-editor-hooks__flex-layout-justification-controls legend,
+.block-editor-hooks__flex-layout-orientation-controls legend {
   margin-bottom: 8px;
 }
 
@@ -3486,6 +3520,19 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   margin-bottom: 8px;
 }
 
+.typography-block-support-panel .components-font-appearance-control,
+.typography-block-support-panel .components-font-size-picker__controls,
+.typography-block-support-panel .block-editor-text-decoration-control__buttons,
+.typography-block-support-panel .block-editor-text-transform-control__buttons {
+  margin-bottom: 0;
+}
+.typography-block-support-panel .block-editor-line-height-control input {
+  max-width: 100%;
+}
+.typography-block-support-panel .single-column {
+  grid-column: span 1;
+}
+
 /**
  * Block Toolbar
  */
@@ -3792,7 +3839,8 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 }
 
 .block-editor-inserter__panel-dropdown select.components-select-control__input.components-select-control__input.components-select-control__input {
-  line-height: 1.2;
+  height: 36px;
+  line-height: 36px;
 }
 
 .block-editor-inserter__panel-dropdown select {
@@ -3917,6 +3965,12 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   grid-template-columns: 1fr 1fr;
   grid-gap: 8px;
 }
+.block-editor-inserter__quick-inserter-patterns .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
+  margin-bottom: 0;
+}
+.block-editor-inserter__quick-inserter-patterns .block-editor-block-patterns-list .block-editor-block-preview__container {
+  min-height: 100px;
+}
 
 .block-editor-inserter__quick-inserter-separator {
   border-top: 1px solid #ddd;
@@ -3946,6 +4000,55 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   border-color: var(--wp-admin-theme-color);
 }
 
+.block-editor-block-patterns-explorer__sidebar {
+  position: absolute;
+  top: 60px;
+  left: 0;
+  bottom: 0;
+  width: 280px;
+  padding: 24px 32px 32px;
+  overflow-x: visible;
+  overflow-y: scroll;
+}
+.block-editor-block-patterns-explorer__sidebar__categories-list__item {
+  display: block;
+  width: 100%;
+  height: 48px;
+  text-align: left;
+}
+.block-editor-block-patterns-explorer__search {
+  margin-bottom: 32px;
+}
+.block-editor-block-patterns-explorer__search-results-count {
+  padding-bottom: 32px;
+}
+.block-editor-block-patterns-explorer__list {
+  margin-left: 248px;
+}
+.block-editor-block-patterns-explorer .block-editor-block-patterns-list {
+  display: grid;
+  grid-gap: 32px;
+  grid-template-columns: repeat(1, 1fr);
+}
+@media (min-width: 1080px) {
+  .block-editor-block-patterns-explorer .block-editor-block-patterns-list {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media (min-width: 1440px) {
+  .block-editor-block-patterns-explorer .block-editor-block-patterns-list {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+.block-editor-block-patterns-explorer .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
+  min-height: 240px;
+}
+.block-editor-block-patterns-explorer .block-editor-block-patterns-list .block-editor-block-preview__container {
+  height: inherit;
+  min-height: 100px;
+  max-height: 800px;
+}
+
 .block-editor-post-preview__dropdown {
   padding: 0;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "7.0.4",
+	"version": "8.0.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -34,29 +34,28 @@
 		"@babel/runtime": "^7.13.10",
 		"@react-spring/web": "^9.2.4",
 		"@wordpress/a11y": "^3.2.3",
-		"@wordpress/api-fetch": "^5.2.4",
+		"@wordpress/api-fetch": "^5.2.5",
 		"@wordpress/blob": "^3.2.1",
 		"@wordpress/block-serialization-default-parser": "^4.2.2",
-		"@wordpress/blocks": "^11.1.2",
-		"@wordpress/components": "^19.0.0",
-		"@wordpress/compose": "^5.0.4",
-		"@wordpress/data": "^6.1.2",
-		"@wordpress/data-controls": "^2.2.5",
+		"@wordpress/blocks": "^11.1.3",
+		"@wordpress/components": "^19.0.1",
+		"@wordpress/compose": "^5.0.5",
+		"@wordpress/data": "^6.1.3",
 		"@wordpress/deprecated": "^3.2.2",
-		"@wordpress/dom": "^3.2.5",
+		"@wordpress/dom": "^3.2.6",
 		"@wordpress/element": "^4.0.3",
 		"@wordpress/hooks": "^3.2.1",
 		"@wordpress/html-entities": "^3.2.2",
 		"@wordpress/i18n": "^4.2.3",
-		"@wordpress/icons": "^6.0.1",
+		"@wordpress/icons": "^6.1.0",
 		"@wordpress/is-shallow-equal": "^4.2.0",
-		"@wordpress/keyboard-shortcuts": "^3.0.4",
+		"@wordpress/keyboard-shortcuts": "^3.0.5",
 		"@wordpress/keycodes": "^3.2.3",
-		"@wordpress/notices": "^3.2.5",
-		"@wordpress/rich-text": "^5.0.4",
+		"@wordpress/notices": "^3.2.6",
+		"@wordpress/rich-text": "^5.0.5",
 		"@wordpress/shortcode": "^3.2.2",
 		"@wordpress/token-list": "^2.2.1",
-		"@wordpress/url": "^3.2.3",
+		"@wordpress/url": "^3.3.0",
 		"@wordpress/warning": "^2.2.2",
 		"@wordpress/wordcount": "^3.2.2",
 		"classnames": "^2.3.1",
@@ -76,5 +75,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "157f4ae53ab98e574af01f72213ae5a9613159ff"
+	"gitHead": "393c2b5533837fd637e998d23f0124c081a10df0"
 }

package/src/components/alignment-control/test/__snapshots__/index.js.snap

@@ -56,7 +56,6 @@ exports[`AlignmentUI should allow custom alignment controls to be specified 1`]
   }
   toggleProps={
     Object {
-      "className": "is-pressed",
       "describedBy": "Change text alignment",
     }
   }
@@ -134,7 +133,6 @@ exports[`AlignmentUI should match snapshot 1`] = `
   }
   toggleProps={
     Object {
-      "className": "is-pressed",
       "describedBy": "Change text alignment",
     }
   }

package/src/components/alignment-control/ui.js

@@ -63,10 +63,7 @@ function AlignmentUI( {
 		<UIComponent
 			icon={ setIcon() }
 			label={ label }
-			toggleProps={ {
-				describedBy,
-				className: activeAlignment ? 'is-pressed' : undefined,
-			} }
+			toggleProps={ { describedBy } }
 			popoverProps={ POPOVER_PROPS }
 			controls={ alignmentControls.map( ( control ) => {
 				const { align } = control;

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

@@ -45,8 +45,23 @@
 	}
 }
 
-// This hides the block being dragged.
-// The effect is that the block being dragged appears to be "lifted".
-.is-dragging {
-	display: none !important;
+// This creates a "slot" where the block you're dragging appeared.
+// We use !important as one of the rules are meant to be overriden.
+.block-editor-block-list__layout .is-dragging {
+	background-color: currentColor !important;
+	opacity: 0.05 !important;
+	border-radius: $radius-block-ui !important;
+
+	// Disabling pointer events during the drag event is necessary,
+	// lest the block might affect your drag operation.
+	pointer-events: none !important;
+
+	// Hide the multi selection indicator when dragging.
+	&::selection {
+		background: transparent !important;
+	}
+
+	&::after {
+		content: none !important;
+	}
 }

package/src/components/block-icon/index.js

@@ -8,8 +8,9 @@ import classnames from 'classnames';
  */
 import { Icon } from '@wordpress/components';
 import { blockDefault } from '@wordpress/icons';
+import { memo } from '@wordpress/element';
 
-export default function BlockIcon( { icon, showColors = false, className } ) {
+function BlockIcon( { icon, showColors = false, className } ) {
 	if ( icon?.src === 'block-default' ) {
 		icon = {
 			src: blockDefault,
@@ -35,3 +36,5 @@ export default function BlockIcon( { icon, showColors = false, className } ) {
 		</span>
 	);
 }
+
+export default memo( BlockIcon );

package/src/components/block-inspector/index.js

@@ -129,6 +129,11 @@ const BlockInspectorSingleBlock = ( {
 				</div>
 			) }
 			<InspectorControls.Slot bubblesVirtually={ bubblesVirtually } />
+			<InspectorControls.Slot
+				__experimentalGroup="typography"
+				bubblesVirtually={ bubblesVirtually }
+				label={ __( 'Typography' ) }
+			/>
 			<InspectorControls.Slot
 				__experimentalGroup="dimensions"
 				bubblesVirtually={ bubblesVirtually }

package/src/components/block-list/index.native.js

@@ -24,7 +24,7 @@ import { __ } from '@wordpress/i18n';
  */
 import styles from './style.scss';
 import BlockListAppender from '../block-list-appender';
-import BlockListItem from './block-list-item.native';
+import BlockListItem from './block-list-item';
 import { store as blockEditorStore } from '../../store';
 
 const BlockListContext = createContext();

package/src/components/block-list/use-block-props/use-multi-selection.js

@@ -165,16 +165,36 @@ export function useMultiSelection( clientId ) {
 
 				if ( event.shiftKey ) {
 					const blockSelectionStart = getBlockSelectionStart();
-					// Handle the case where we select a single block by
-					// holding the `shiftKey` and don't mark this action
-					// as multiselection.
+					// By checking `blockSelectionStart` to be set, we handle the
+					// case where we select a single block. We also have to check
+					// the selectionEnd (clientId) not to be included in the
+					// `blockSelectionStart`'s parents because the click event is
+					// propagated.
+					const startParents = getBlockParents( blockSelectionStart );
 					if (
 						blockSelectionStart &&
-						blockSelectionStart !== clientId
+						blockSelectionStart !== clientId &&
+						! startParents?.includes( clientId )
 					) {
-						toggleRichText( node, false );
-						multiSelect( blockSelectionStart, clientId );
-						event.preventDefault();
+						const startPath = [
+							...startParents,
+							blockSelectionStart,
+						];
+						const endPath = [
+							...getBlockParents( clientId ),
+							clientId,
+						];
+						const depth =
+							Math.min( startPath.length, endPath.length ) - 1;
+						const start = startPath[ depth ];
+						const end = endPath[ depth ];
+						// Handle the case of having selected a parent block and
+						// then sfift+click on a child.
+						if ( start !== end ) {
+							toggleRichText( node, false );
+							multiSelect( start, end );
+							event.preventDefault();
+						}
 					}
 				} else if ( hasMultiSelection() ) {
 					// Allow user to escape out of a multi-selection to a

package/src/components/block-navigation/dropdown.js

@@ -67,7 +67,6 @@ function BlockNavigationDropdown(
 
 					<ListView
 						showNestedBlocks
-						showOnlyCurrentHierarchy
 						__experimentalFeatures={ __experimentalFeatures }
 					/>
 				</div>

package/src/components/block-patterns-list/index.js

@@ -9,22 +9,15 @@ import {
 } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
-import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import BlockPreview from '../block-preview';
 import InserterDraggableBlocks from '../inserter-draggable-blocks';
-import { store as blockEditorStore } from '../../store';
 
 function BlockPattern( { isDraggable, pattern, onClick, composite } ) {
-	const { name, viewportWidth } = pattern;
-	const { blocks } = useSelect(
-		( select ) =>
-			select( blockEditorStore ).__experimentalGetParsedPattern( name ),
-		[ name ]
-	);
+	const { blocks, viewportWidth } = pattern;
 	const instanceId = useInstanceId( BlockPattern );
 	const descriptionId = `block-editor-block-patterns-list__item-description-${ instanceId }`;
 

package/src/components/block-patterns-list/style.scss

@@ -1,6 +1,6 @@
 .block-editor-block-patterns-list__list-item {
 	cursor: pointer;
-	margin-top: $grid-unit-20;
+	margin-bottom: $grid-unit-30;
 
 	&.is-placeholder {
 		min-height: 100px;
@@ -13,25 +13,35 @@
 
 .block-editor-block-patterns-list__item {
 	height: 100%;
-	border-radius: $radius-block-ui;
-	transition: all 0.05s ease-in-out;
-	position: relative;
-	border: $border-width solid transparent;
 
-	&:hover {
+	.block-editor-block-preview__container {
+		display: flex;
+		align-items: center;
+		overflow: hidden;
+		border-radius: $radius-block-ui;
+		border: $border-width solid $gray-100;
+	}
+
+	.block-editor-block-patterns-list__item-title {
+		padding-top: $grid-unit-10;
+		font-size: 12px;
+		text-align: center;
+	}
+
+	&:hover .block-editor-block-preview__container {
 		border: $border-width solid var(--wp-admin-theme-color);
 	}
 
-	&:focus {
+	&:focus .block-editor-block-preview__container {
 		box-shadow: inset 0 0 0 1px $white, 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: 2px solid transparent;
 	}
-}
 
-.block-editor-block-patterns-list__item-title {
-	padding: $grid-unit-05;
-	font-size: 12px;
-	text-align: center;
+
+	&:hover .block-editor-block-patterns-list__item-title,
+	&:focus .block-editor-block-patterns-list__item-title {
+		color: var(--wp-admin-theme-color);
+	}
 }