@wordpress/block-editor 11.8.0 → 12.0.0

package/build-style/style.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /**
 *  Converts a hex value into the rgb equivalent.
 *
@@ -270,6 +271,44 @@
 /**
  * Block Toolbar when contextual.
  */
+.block-editor-block-contextual-toolbar.is-fixed {
+  /* Set left position when auto-fold is not on the body element. */
+  left: 0;
+}
+@media (min-width: 783px) {
+  .block-editor-block-contextual-toolbar.is-fixed {
+    left: 160px;
+  }
+}
+
+.auto-fold .block-editor-block-contextual-toolbar.is-fixed {
+  /* Auto fold is when on smaller breakpoints, nav menu auto collapses. */
+}
+@media (min-width: 783px) {
+  .auto-fold .block-editor-block-contextual-toolbar.is-fixed {
+    left: 36px;
+  }
+}
+@media (min-width: 961px) {
+  .auto-fold .block-editor-block-contextual-toolbar.is-fixed {
+    left: 160px;
+  }
+}
+
+/* Sidebar manually collapsed. */
+.folded .block-editor-block-contextual-toolbar.is-fixed {
+  left: 0;
+}
+@media (min-width: 783px) {
+  .folded .block-editor-block-contextual-toolbar.is-fixed {
+    left: 36px;
+  }
+}
+
+body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
+  left: 0 !important;
+}
+
 .block-editor-block-contextual-toolbar {
   display: inline-flex;
   border: 1px solid #1e1e1e;
@@ -283,10 +322,9 @@
 .block-editor-block-contextual-toolbar.is-fixed {
   position: sticky;
   top: 0;
-  width: 100%;
   z-index: 31;
-  min-height: 48px;
   display: block;
+  width: 100%;
   border: none;
   border-bottom: 1px solid #e0e0e0;
   border-radius: 0;
@@ -295,6 +333,119 @@
 .block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar .components-toolbar {
   border-right-color: #e0e0e0;
 }
+@media (min-width: 782px) {
+  .block-editor-block-contextual-toolbar.is-fixed {
+    margin-left: 64px;
+    position: fixed;
+    top: 40px;
+    min-height: initial;
+    border-bottom: none;
+    display: flex;
+  }
+  .block-editor-block-contextual-toolbar.is-fixed.is-collapsed {
+    width: initial;
+    margin-left: 216px;
+  }
+  .is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
+    margin-left: 120px;
+    top: 8px;
+  }
+  .is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed.is-collapsed {
+    width: initial;
+    margin-left: 280px;
+  }
+  .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar__group-collapse-fixed-toolbar {
+    border: none;
+  }
+  .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar__group-collapse-fixed-toolbar::after {
+    content: "";
+    width: 1px;
+    height: 24px;
+    margin-top: 12px;
+    margin-bottom: 12px;
+    background-color: #ddd;
+    position: absolute;
+    left: 44px;
+    top: -1px;
+  }
+  .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar__group-expand-fixed-toolbar {
+    border: none;
+  }
+  .block-editor-block-contextual-toolbar.is-fixed > .block-editor-block-toolbar__group-expand-fixed-toolbar::before {
+    content: "";
+    width: 1px;
+    margin-top: 12px;
+    margin-bottom: 12px;
+    background-color: #ddd;
+    position: relative;
+    left: -12px;
+    height: 24px;
+  }
+  .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed {
+    margin-left: 64px;
+  }
+  .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed.is-collapsed {
+    margin-left: 384px;
+  }
+  .is-fullscreen-mode .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed {
+    margin-left: 128px;
+  }
+  .is-fullscreen-mode .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed.is-collapsed {
+    margin-left: 448px;
+  }
+  .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed .block-editor-block-parent-selector .block-editor-block-parent-selector__button::after {
+    left: 0;
+  }
+  .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar__block-controls .block-editor-block-mover {
+    border-left: none;
+  }
+  .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar__block-controls .block-editor-block-mover::before {
+    content: "";
+    width: 1px;
+    margin-top: 12px;
+    margin-bottom: 12px;
+    background-color: #ddd;
+    position: relative;
+  }
+  .block-editor-block-contextual-toolbar.is-fixed .block-editor-block-parent-selector .block-editor-block-parent-selector__button {
+    position: relative;
+    top: -1px;
+    border: 0;
+    padding-right: 6px;
+    padding-left: 6px;
+  }
+  .block-editor-block-contextual-toolbar.is-fixed .block-editor-block-parent-selector .block-editor-block-parent-selector__button::after {
+    content: "·";
+    font-size: 16px;
+    line-height: 40px;
+    position: absolute;
+    left: 46px;
+    bottom: 4px;
+  }
+  .block-editor-block-contextual-toolbar:not(.is-fixed) .block-editor-block-parent-selector {
+    position: absolute;
+    top: -1px;
+    left: calc(-48px - 8px - 1px);
+  }
+  .show-icon-labels .block-editor-block-contextual-toolbar:not(.is-fixed) .block-editor-block-parent-selector {
+    position: relative;
+    left: auto;
+    top: auto;
+    margin-top: -1px;
+    margin-left: -1px;
+    margin-bottom: -1px;
+  }
+}
+@media (min-width: 782px) {
+  .block-editor-block-contextual-toolbar.is-fixed {
+    width: 100%;
+  }
+}
+@media (min-width: 960px) {
+  .block-editor-block-contextual-toolbar.is-fixed {
+    width: initial;
+  }
+}
 
 /**
  * Block Label for Navigation/Selection Mode
@@ -660,10 +811,12 @@
   .block-editor-block-mover.is-horizontal .block-editor-block-mover__move-button-container > * {
     width: 24px;
     min-width: 0 !important;
-    padding-left: 0 !important;
-    padding-right: 0 !important;
     overflow: hidden;
   }
+  .block-editor-block-mover.is-horizontal .block-editor-block-mover__move-button-container .block-editor-block-mover-button {
+    padding-left: 0;
+    padding-right: 0;
+  }
   .block-editor-block-mover.is-horizontal .block-editor-block-mover__move-button-container .block-editor-block-mover-button.is-up-button svg {
     left: 5px;
   }
@@ -676,10 +829,12 @@
   .block-editor-block-mover__drag-handle {
     width: 24px;
     min-width: 0 !important;
-    padding-left: 0 !important;
-    padding-right: 0 !important;
     overflow: hidden;
   }
+  .block-editor-block-mover .block-editor-block-mover__drag-handle.has-icon.has-icon {
+    padding-left: 0;
+    padding-right: 0;
+  }
 }
 
 .components-button.block-editor-block-mover-button::before {
@@ -1444,15 +1599,18 @@
   width: 230px;
 }
 
+.block-editor-global-styles-filters-panel__dropdown,
 .block-editor-global-styles-effects-panel__shadow-dropdown {
   display: block;
   padding: 0;
 }
-.block-editor-global-styles-effects-panel__shadow-dropdown > button {
+.block-editor-global-styles-filters-panel__dropdown button,
+.block-editor-global-styles-effects-panel__shadow-dropdown button {
   width: 100%;
   padding: 8px;
 }
-.block-editor-global-styles-effects-panel__shadow-dropdown > button.is-open {
+.block-editor-global-styles-filters-panel__dropdown button.is-open,
+.block-editor-global-styles-effects-panel__shadow-dropdown button.is-open {
   background-color: #f0f0f0;
 }
 
@@ -2131,6 +2289,12 @@
 .block-editor-list-view-leaf {
   position: relative;
 }
+.block-editor-list-view-leaf .components-button[aria-expanded=true] {
+  color: #1e1e1e;
+}
+.block-editor-list-view-leaf .components-button:hover {
+  color: var(--wp-admin-theme-color);
+}
 .block-editor-list-view-leaf.is-selected td {
   background: var(--wp-admin-theme-color);
 }
@@ -2187,16 +2351,16 @@
 .block-editor-list-view-leaf.is-branch-selected.is-first-selected td:last-child {
   border-top-right-radius: 2px;
 }
-.block-editor-list-view-leaf[aria-expanded=false].is-branch-selected.is-first-selected td:first-child {
+.block-editor-list-view-leaf[data-expanded=false].is-branch-selected.is-first-selected td:first-child {
   border-top-left-radius: 2px;
 }
-.block-editor-list-view-leaf[aria-expanded=false].is-branch-selected.is-first-selected td:last-child {
+.block-editor-list-view-leaf[data-expanded=false].is-branch-selected.is-first-selected td:last-child {
   border-top-right-radius: 2px;
 }
-.block-editor-list-view-leaf[aria-expanded=false].is-branch-selected.is-last-selected td:first-child {
+.block-editor-list-view-leaf[data-expanded=false].is-branch-selected.is-last-selected td:first-child {
   border-bottom-left-radius: 2px;
 }
-.block-editor-list-view-leaf[aria-expanded=false].is-branch-selected.is-last-selected td:last-child {
+.block-editor-list-view-leaf[data-expanded=false].is-branch-selected.is-last-selected td:last-child {
   border-bottom-right-radius: 2px;
 }
 .block-editor-list-view-leaf.is-branch-selected:not(.is-selected) td {
@@ -2464,25 +2628,25 @@
   visibility: hidden;
 }
 
-.block-editor-list-view-leaf[aria-expanded=true] .block-editor-list-view__expander svg {
+.block-editor-list-view-leaf[data-expanded=true] .block-editor-list-view__expander svg {
   visibility: visible;
   transition: transform 0.2s ease;
   transform: rotate(90deg);
 }
 @media (prefers-reduced-motion: reduce) {
-  .block-editor-list-view-leaf[aria-expanded=true] .block-editor-list-view__expander svg {
+  .block-editor-list-view-leaf[data-expanded=true] .block-editor-list-view__expander svg {
     transition-duration: 0s;
     transition-delay: 0s;
   }
 }
 
-.block-editor-list-view-leaf[aria-expanded=false] .block-editor-list-view__expander svg {
+.block-editor-list-view-leaf[data-expanded=false] .block-editor-list-view__expander svg {
   visibility: visible;
   transform: rotate(0deg);
   transition: transform 0.2s ease;
 }
 @media (prefers-reduced-motion: reduce) {
-  .block-editor-list-view-leaf[aria-expanded=false] .block-editor-list-view__expander svg {
+  .block-editor-list-view-leaf[data-expanded=false] .block-editor-list-view__expander svg {
     transition-duration: 0s;
     transition-delay: 0s;
   }
@@ -3176,6 +3340,30 @@
   border-right: none;
 }
 
+@media (min-width: 782px) {
+  .block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar .components-toolbar-group,
+.block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar .components-toolbar {
+    border-right: none;
+  }
+  .block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar .components-toolbar-group::after,
+.block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar .components-toolbar::after {
+    content: "";
+    width: 1px;
+    margin-top: 12px;
+    margin-bottom: 12px;
+    background-color: #ddd;
+    margin-left: 8px;
+  }
+  .block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar .components-toolbar-group .components-toolbar-group.components-toolbar-group::after,
+.block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar .components-toolbar .components-toolbar-group.components-toolbar-group::after {
+    display: none;
+  }
+  .block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar > :last-child::after,
+.block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar > :last-child .components-toolbar-group::after,
+.block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar > :last-child .components-toolbar::after {
+    display: none;
+  }
+}
 .block-editor-block-contextual-toolbar.has-parent:not(.is-fixed) {
   margin-left: calc(48px + 8px);
 }
@@ -3183,20 +3371,6 @@
   margin-left: 0;
 }
 
-.block-editor-block-parent-selector {
-  position: absolute;
-  top: -1px;
-  left: calc(-48px - 8px - 1px);
-}
-.show-icon-labels .block-editor-block-parent-selector {
-  position: relative;
-  left: auto;
-  top: auto;
-  margin-top: -1px;
-  margin-left: -1px;
-  margin-bottom: -1px;
-}
-
 .block-editor-block-toolbar__block-controls .block-editor-block-switcher .components-dropdown-menu__toggle .block-editor-block-icon,
 .block-editor-block-toolbar__block-controls .block-editor-block-switcher__no-switcher-icon .block-editor-block-icon {
   width: 24px !important;
@@ -3245,13 +3419,27 @@
 .show-icon-labels .block-editor-block-switcher__no-switcher-icon .block-editor-block-icon {
   width: 0 !important;
   height: 0 !important;
+  min-width: 0 !important;
+}
+.show-icon-labels .block-editor-block-parent-selector__button {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
 }
 .show-icon-labels .block-editor-block-parent-selector__button .block-editor-block-icon {
   width: 0;
 }
-.show-icon-labels .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container {
+.show-icon-labels .block-editor-block-mover .block-editor-block-mover__move-button-container {
   width: auto;
 }
+.show-icon-labels .block-editor-block-mover.is-horizontal .block-editor-block-mover__move-button-container,
+.show-icon-labels .block-editor-block-mover.is-horizontal .block-editor-block-mover-button {
+  padding-left: 6px;
+  padding-right: 6px;
+}
+.show-icon-labels .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover-button {
+  padding-left: 8px;
+  padding-right: 8px;
+}
 .show-icon-labels .block-editor-block-toolbar__block-controls .block-editor-block-mover {
   border-left: 1px solid #1e1e1e;
   margin-left: 6px;
@@ -3261,13 +3449,9 @@
 .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar__block-controls .block-editor-block-mover {
   border-left-color: #e0e0e0;
 }
-.show-icon-labels .block-editor-block-mover-button {
-  padding-left: 8px !important;
-  padding-right: 8px !important;
-}
-.show-icon-labels .block-editor-block-mover__drag-handle.has-icon {
-  padding-left: 12px !important;
-  padding-right: 12px !important;
+.show-icon-labels .block-editor-block-mover .block-editor-block-mover__drag-handle.has-icon {
+  padding-left: 12px;
+  padding-right: 12px;
 }
 .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed .block-editor-block-mover__move-button-container {
   border-width: 0;
@@ -3281,15 +3465,8 @@
   .show-icon-labels .block-editor-block-mover__move-button-container {
     border-left: 1px solid #1e1e1e;
   }
-  .show-icon-labels .block-editor-block-mover__move-button-container::before {
-    content: "";
-    display: block;
-    height: 1px;
-    background: #1e1e1e;
-    order: 2;
-  }
   .show-icon-labels .is-down-button.is-down-button.is-down-button {
-    order: 3;
+    order: 2;
   }
   .show-icon-labels .block-editor-block-contextual-toolbar.is-fixed .block-editor-block-mover__move-button-container::before {
     background: #ddd;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "11.8.0",
+	"version": "12.0.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -33,35 +33,35 @@
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^3.31.0",
-		"@wordpress/api-fetch": "^6.28.0",
-		"@wordpress/blob": "^3.31.0",
-		"@wordpress/blocks": "^12.8.0",
-		"@wordpress/components": "^23.8.0",
-		"@wordpress/compose": "^6.8.0",
-		"@wordpress/data": "^9.1.0",
-		"@wordpress/date": "^4.31.0",
-		"@wordpress/deprecated": "^3.31.0",
-		"@wordpress/dom": "^3.31.0",
-		"@wordpress/element": "^5.8.0",
-		"@wordpress/escape-html": "^2.31.0",
-		"@wordpress/hooks": "^3.31.0",
-		"@wordpress/html-entities": "^3.31.0",
-		"@wordpress/i18n": "^4.31.0",
-		"@wordpress/icons": "^9.22.0",
-		"@wordpress/is-shallow-equal": "^4.31.0",
-		"@wordpress/keyboard-shortcuts": "^4.8.0",
-		"@wordpress/keycodes": "^3.31.0",
-		"@wordpress/notices": "^3.31.0",
-		"@wordpress/preferences": "^3.8.0",
-		"@wordpress/private-apis": "^0.13.0",
-		"@wordpress/rich-text": "^6.8.0",
-		"@wordpress/shortcode": "^3.31.0",
-		"@wordpress/style-engine": "^1.14.0",
-		"@wordpress/token-list": "^2.31.0",
-		"@wordpress/url": "^3.32.0",
-		"@wordpress/warning": "^2.31.0",
-		"@wordpress/wordcount": "^3.31.0",
+		"@wordpress/a11y": "^3.32.0",
+		"@wordpress/api-fetch": "^6.29.0",
+		"@wordpress/blob": "^3.32.0",
+		"@wordpress/blocks": "^12.9.0",
+		"@wordpress/components": "^23.9.0",
+		"@wordpress/compose": "^6.9.0",
+		"@wordpress/data": "^9.2.0",
+		"@wordpress/date": "^4.32.0",
+		"@wordpress/deprecated": "^3.32.0",
+		"@wordpress/dom": "^3.32.0",
+		"@wordpress/element": "^5.9.0",
+		"@wordpress/escape-html": "^2.32.0",
+		"@wordpress/hooks": "^3.32.0",
+		"@wordpress/html-entities": "^3.32.0",
+		"@wordpress/i18n": "^4.32.0",
+		"@wordpress/icons": "^9.23.0",
+		"@wordpress/is-shallow-equal": "^4.32.0",
+		"@wordpress/keyboard-shortcuts": "^4.9.0",
+		"@wordpress/keycodes": "^3.32.0",
+		"@wordpress/notices": "^4.0.0",
+		"@wordpress/preferences": "^3.9.0",
+		"@wordpress/private-apis": "^0.14.0",
+		"@wordpress/rich-text": "^6.9.0",
+		"@wordpress/shortcode": "^3.32.0",
+		"@wordpress/style-engine": "^1.15.0",
+		"@wordpress/token-list": "^2.32.0",
+		"@wordpress/url": "^3.33.0",
+		"@wordpress/warning": "^2.32.0",
+		"@wordpress/wordcount": "^3.32.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -72,7 +72,7 @@
 		"lodash": "^4.17.21",
 		"react-autosize-textarea": "^7.1.0",
 		"react-easy-crop": "^4.5.1",
-		"rememo": "^4.0.0",
+		"rememo": "^4.0.2",
 		"remove-accents": "^0.4.2",
 		"traverse": "^0.6.6"
 	},
@@ -83,5 +83,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "d61700b9f1c72ba0b030fc815ef1685b4f4031ec"
+	"gitHead": "6df0c62d43b8901414ccd22ffbe56eaa99d012a6"
 }

package/src/components/block-info-slot-fill/index.js

@@ -0,0 +1,24 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import useDisplayBlockControls from '../use-display-block-controls';
+
+const { createPrivateSlotFill } = unlock( componentsPrivateApis );
+const { Fill, Slot } = createPrivateSlotFill( 'BlockInformation' );
+
+const BlockInfo = ( props ) => {
+	const isDisplayed = useDisplayBlockControls();
+	if ( ! isDisplayed ) {
+		return null;
+	}
+	return <Fill { ...props } />;
+};
+BlockInfo.Slot = ( props ) => <Slot { ...props } />;
+
+export default BlockInfo;

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

@@ -37,6 +37,7 @@ import useInspectorControlsTabs from '../inspector-controls-tabs/use-inspector-c
 import AdvancedControls from '../inspector-controls-tabs/advanced-controls-panel';
 import PositionControls from '../inspector-controls-tabs/position-controls-panel';
 import useBlockInspectorAnimationSettings from './useBlockInspectorAnimationSettings';
+import BlockInfo from '../block-info-slot-fill';
 
 function useContentBlocks( blockTypes, block ) {
 	const contentBlocksObjectAux = useMemo( () => {
@@ -115,6 +116,7 @@ function BlockInspectorLockedBlocks( { topLevelLockedBlock } ) {
 				className={ blockInformation.isSynced && 'is-synced' }
 			/>
 			<BlockVariationTransforms blockClientId={ topLevelLockedBlock } />
+			<BlockInfo.Slot />
 			<VStack
 				spacing={ 1 }
 				padding={ 4 }
@@ -326,6 +328,7 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
 				className={ blockInformation.isSynced && 'is-synced' }
 			/>
 			<BlockVariationTransforms blockClientId={ clientId } />
+			<BlockInfo.Slot />
 			{ showTabs && (
 				<InspectorControlsTabs
 					hasBlockStyles={ hasBlockStyles }

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

@@ -215,7 +215,7 @@ class BlockListBlock extends Component {
 			order + 1
 		);
 		const { isFullWidth, isContainerRelated } = alignmentHelpers;
-		const isFocused = isSelected || isInnerBlockSelected;
+		const accessible = ! ( isSelected || isInnerBlockSelected );
 		const screenWidth = Math.floor( Dimensions.get( 'window' ).width );
 		const isScreenWidthEqual = blockWidth === screenWidth;
 		const isScreenWidthWider = blockWidth < screenWidth;
@@ -224,9 +224,8 @@ class BlockListBlock extends Component {
 		return (
 			<TouchableWithoutFeedback
 				onPress={ this.onFocus }
-				accessible={ ! isFocused }
+				accessible={ accessible }
 				accessibilityRole={ 'button' }
-				disabled={ isFocused }
 			>
 				<View
 					style={ { flex: 1 } }

package/src/components/block-list/content.scss

@@ -35,11 +35,14 @@
 	}
 
 	// Block multi selection
-	.block-editor-block-list__block.is-multi-selected:not(.is-partially-selected) {
-		// Apply a rounded radius to the entire block.
+	// Apply a rounded radius to the entire block when multi selected, but with low specificity
+	// so explicit radii set by tools are preserved.
+	&:where(.block-editor-block-list__block.is-multi-selected:not(.is-partially-selected)) {
 		border-radius: $radius-block-ui;
 		overflow: hidden;
+	}
 
+	.block-editor-block-list__block.is-multi-selected:not(.is-partially-selected) {
 		// Hide the native selection indicator, for the selection, and children.
 		&::selection,
 		& ::selection {
@@ -68,24 +71,22 @@
 			// Show outline in high contrast mode.
 			outline: 2px solid transparent;
 		}
+
+		// Don't show the highlight focus style when multi selected.
+		&.is-highlighted::after {
+			box-shadow: none;
+		}
 	}
 
-	// Block highlight, and navigation mode, not focus.
-	// By not using a pseudo element, we can limit ourselves to only
-	// using ::after, leaving ::before free. Otherwise, highlight + multi-select
-	// would require the opacity-changing overlay to be on ::before.
+	// Block highlight, and navigation mode, and focus.
+	// This piece of code has gone back and forth between using a pseudo element
+	// vs. styling the block directly. Ultimately we likely need a pseudo element
+	// (unless styles like focus and selection overlay can be rendered as separate elements),
+	// since things like border-radius need to be able to be set on the block itself.
 	.block-editor-block-list__block.is-highlighted,
 	.block-editor-block-list__block.is-highlighted ~ .is-multi-selected,
 	&.is-navigate-mode .block-editor-block-list__block.is-selected,
-	& .is-block-moving-mode.block-editor-block-list__block.has-child-selected {
-		border-radius: $radius-block-ui;
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-
-		// Show outline in high contrast mode.
-		outline: 2px solid transparent;
-	}
-
-	// Block focus.
+	& .is-block-moving-mode.block-editor-block-list__block.has-child-selected,
 	.block-editor-block-list__block:not([contenteditable]):focus {
 		outline: none;