@wordpress/block-editor 9.3.0 → 9.6.0

package/build-module/utils/selection.js

@@ -0,0 +1,24 @@
+/**
+ * A robust way to retain selection position through various
+ * transforms is to insert a special character at the position and
+ * then recover it.
+ */
+export const START_OF_SELECTED_AREA = '\u0086';
+/**
+ * Retrieve the block attribute that contains the selection position.
+ *
+ * @param {Object} blockAttributes Block attributes.
+ * @return {string|void} The name of the block attribute that was previously selected.
+ */
+
+export function retrieveSelectedAttribute(blockAttributes) {
+  if (!blockAttributes) {
+    return;
+  }
+
+  return Object.keys(blockAttributes).find(name => {
+    const value = blockAttributes[name];
+    return typeof value === 'string' && value.indexOf(START_OF_SELECTED_AREA) !== -1;
+  });
+}
+//# sourceMappingURL=selection.js.map

package/build-module/utils/selection.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-editor/src/utils/selection.js"],"names":["START_OF_SELECTED_AREA","retrieveSelectedAttribute","blockAttributes","Object","keys","find","name","value","indexOf"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMA,sBAAsB,GAAG,QAA/B;AAEP;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASC,yBAAT,CAAoCC,eAApC,EAAsD;AAC5D,MAAK,CAAEA,eAAP,EAAyB;AACxB;AACA;;AAED,SAAOC,MAAM,CAACC,IAAP,CAAaF,eAAb,EAA+BG,IAA/B,CAAuCC,IAAF,IAAY;AACvD,UAAMC,KAAK,GAAGL,eAAe,CAAEI,IAAF,CAA7B;AACA,WACC,OAAOC,KAAP,KAAiB,QAAjB,IACAA,KAAK,CAACC,OAAN,CAAeR,sBAAf,MAA4C,CAAC,CAF9C;AAIA,GANM,CAAP;AAOA","sourcesContent":["/**\n * A robust way to retain selection position through various\n * transforms is to insert a special character at the position and\n * then recover it.\n */\nexport const START_OF_SELECTED_AREA = '\\u0086';\n\n/**\n * Retrieve the block attribute that contains the selection position.\n *\n * @param {Object} blockAttributes Block attributes.\n * @return {string|void} The name of the block attribute that was previously selected.\n */\nexport function retrieveSelectedAttribute( blockAttributes ) {\n\tif ( ! blockAttributes ) {\n\t\treturn;\n\t}\n\n\treturn Object.keys( blockAttributes ).find( ( name ) => {\n\t\tconst value = blockAttributes[ name ];\n\t\treturn (\n\t\t\ttypeof value === 'string' &&\n\t\t\tvalue.indexOf( START_OF_SELECTED_AREA ) !== -1\n\t\t);\n\t} );\n}\n"]}

package/build-style/style-rtl.css

@@ -177,7 +177,7 @@
   cursor: default;
 }
 .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected::after, .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-hovered::after,
-.block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not([contenteditable])::after,
+.block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected)::after,
 .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted::after,
 .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected::after {
   position: absolute;
@@ -193,13 +193,13 @@
   outline: 2px solid transparent;
 }
 .is-dark-theme .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected::after, .is-dark-theme .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-hovered::after,
-.is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not([contenteditable])::after,
+.is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected)::after,
 .is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted::after,
 .is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected::after {
   box-shadow: 0 0 0 1px #fff;
 }
 .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected .components-placeholder ::selection, .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-hovered .components-placeholder ::selection,
-.block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not([contenteditable]) .components-placeholder ::selection,
+.block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected) .components-placeholder ::selection,
 .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted .components-placeholder ::selection,
 .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected .components-placeholder ::selection {
   background: transparent;
@@ -368,7 +368,7 @@
 }
 
 .is-focus-mode .block-editor-block-list__block:not(.has-child-selected) {
-  opacity: 0.5;
+  opacity: 0.2;
   transition: opacity 0.1s linear;
 }
 @media (prefers-reduced-motion: reduce) {
@@ -709,6 +709,15 @@
   border-radius: 2px;
 }
 
+.block-editor-block-lock-modal__template-lock {
+  border-top: 1px solid #ddd;
+  margin-top: 16px;
+  padding: 12px 0;
+}
+.block-editor-block-lock-modal__template-lock .components-base-control__field {
+  margin: 0;
+}
+
 .block-editor-block-lock-modal__actions {
   margin-top: 24px;
 }
@@ -1434,6 +1443,8 @@
   display: block;
   width: 100%;
   padding: 32px;
+  padding-bottom: 0;
+  padding-top: 0;
   column-count: 2;
 }
 @media (min-width: 1440px) {
@@ -1465,7 +1476,8 @@
   text-align: right;
   margin: 0;
   color: #1e1e1e;
-  border-radius: 2px 2px 0 0;
+  position: absolute;
+  bottom: 0;
   background-color: #fff;
   display: flex;
   flex-direction: row;
@@ -1531,7 +1543,6 @@
 .block-editor-block-pattern-setup__carousel,
 .block-editor-block-pattern-setup__grid {
   width: 100%;
-  overflow-y: auto;
 }
 
 .block-editor-block-variation-transforms {
@@ -1669,8 +1680,8 @@
   margin-bottom: inherit;
 }
 
-.block-editor-panel-color-gradient-settings__dropdown-content .components-popover__content {
-  width: 280px;
+.block-editor-panel-color-gradient-settings__dropdown-content {
+  width: 228px;
 }
 
 .block-editor-panel-color-gradient-settings__color-indicator {
@@ -1721,6 +1732,10 @@
   width: 100%;
 }
 
+.block-editor-color-gradient-control__tab-panel {
+  padding-top: 8px;
+}
+
 .block-editor-contrast-checker > .components-notice {
   margin: 0;
 }
@@ -1868,6 +1883,10 @@
   font-size: 12px;
 }
 
+.block-editor-duotone-control__unset-indicator {
+  background: linear-gradient(45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
+}
+
 .components-font-appearance-control {
   margin-bottom: 24px;
 }
@@ -2544,7 +2563,7 @@
   align-items: center;
   width: 100%;
   height: auto;
-  padding: 6px 0 6px 12px;
+  padding: 6px 0 6px 4px;
   text-align: right;
   color: #1e1e1e;
   border-radius: 2px;
@@ -2662,7 +2681,7 @@
   padding: 0;
 }
 .block-editor-list-view-leaf .block-editor-list-view-block__menu-cell {
-  padding-left: 5px;
+  padding-left: 4px;
 }
 .block-editor-list-view-leaf .block-editor-list-view-block__menu-cell .components-button.has-icon {
   height: 24px;
@@ -2736,13 +2755,24 @@
 .block-editor-list-view-leaf .block-editor-inserter__toggle:active {
   color: #fff;
 }
+.block-editor-list-view-leaf .block-editor-list-view-block-select-button__label-wrapper {
+  min-width: 120px;
+}
+.block-editor-list-view-leaf .block-editor-list-view-block-select-button__title {
+  flex: 1;
+  position: relative;
+}
+.block-editor-list-view-leaf .block-editor-list-view-block-select-button__title .components-truncate {
+  position: absolute;
+  width: 100%;
+  transform: translateY(-50%);
+}
 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__anchor {
   background: rgba(0, 0, 0, 0.1);
   border-radius: 2px;
   display: inline-block;
   padding: 2px 6px;
-  margin: 0 8px;
-  max-width: 120px;
+  max-width: min(100px, 40%);
   overflow: hidden;
   text-overflow: ellipsis;
 }
@@ -4063,7 +4093,7 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 
 .block-editor-block-patterns-explorer__sidebar {
   position: absolute;
-  top: 60px;
+  top: 76px;
   right: 0;
   bottom: 0;
   width: 280px;

package/build-style/style.css

@@ -177,7 +177,7 @@
   cursor: default;
 }
 .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected::after, .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-hovered::after,
-.block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not([contenteditable])::after,
+.block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected)::after,
 .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted::after,
 .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected::after {
   position: absolute;
@@ -193,13 +193,13 @@
   outline: 2px solid transparent;
 }
 .is-dark-theme .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected::after, .is-dark-theme .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-hovered::after,
-.is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not([contenteditable])::after,
+.is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected)::after,
 .is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted::after,
 .is-dark-theme .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected::after {
   box-shadow: 0 0 0 1px #fff;
 }
 .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-selected .components-placeholder ::selection, .block-editor-block-list__layout.is-navigate-mode .block-editor-block-list__block.is-hovered .components-placeholder ::selection,
-.block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not([contenteditable]) .components-placeholder ::selection,
+.block-editor-block-list__layout .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected) .components-placeholder ::selection,
 .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted .components-placeholder ::selection,
 .block-editor-block-list__layout .block-editor-block-list__block.is-highlighted ~ .is-multi-selected .components-placeholder ::selection {
   background: transparent;
@@ -368,7 +368,7 @@
 }
 
 .is-focus-mode .block-editor-block-list__block:not(.has-child-selected) {
-  opacity: 0.5;
+  opacity: 0.2;
   transition: opacity 0.1s linear;
 }
 @media (prefers-reduced-motion: reduce) {
@@ -709,6 +709,15 @@
   border-radius: 2px;
 }
 
+.block-editor-block-lock-modal__template-lock {
+  border-top: 1px solid #ddd;
+  margin-top: 16px;
+  padding: 12px 0;
+}
+.block-editor-block-lock-modal__template-lock .components-base-control__field {
+  margin: 0;
+}
+
 .block-editor-block-lock-modal__actions {
   margin-top: 24px;
 }
@@ -1434,6 +1443,8 @@
   display: block;
   width: 100%;
   padding: 32px;
+  padding-bottom: 0;
+  padding-top: 0;
   column-count: 2;
 }
 @media (min-width: 1440px) {
@@ -1465,7 +1476,8 @@
   text-align: left;
   margin: 0;
   color: #1e1e1e;
-  border-radius: 2px 2px 0 0;
+  position: absolute;
+  bottom: 0;
   background-color: #fff;
   display: flex;
   flex-direction: row;
@@ -1531,7 +1543,6 @@
 .block-editor-block-pattern-setup__carousel,
 .block-editor-block-pattern-setup__grid {
   width: 100%;
-  overflow-y: auto;
 }
 
 .block-editor-block-variation-transforms {
@@ -1669,8 +1680,8 @@
   margin-bottom: inherit;
 }
 
-.block-editor-panel-color-gradient-settings__dropdown-content .components-popover__content {
-  width: 280px;
+.block-editor-panel-color-gradient-settings__dropdown-content {
+  width: 228px;
 }
 
 .block-editor-panel-color-gradient-settings__color-indicator {
@@ -1721,6 +1732,10 @@
   width: 100%;
 }
 
+.block-editor-color-gradient-control__tab-panel {
+  padding-top: 8px;
+}
+
 .block-editor-contrast-checker > .components-notice {
   margin: 0;
 }
@@ -1868,6 +1883,10 @@
   font-size: 12px;
 }
 
+.block-editor-duotone-control__unset-indicator {
+  background: linear-gradient(-45deg, transparent 48%, #ddd 48%, #ddd 52%, transparent 52%);
+}
+
 .components-font-appearance-control {
   margin-bottom: 24px;
 }
@@ -2544,7 +2563,7 @@
   align-items: center;
   width: 100%;
   height: auto;
-  padding: 6px 12px 6px 0;
+  padding: 6px 4px 6px 0;
   text-align: left;
   color: #1e1e1e;
   border-radius: 2px;
@@ -2662,7 +2681,7 @@
   padding: 0;
 }
 .block-editor-list-view-leaf .block-editor-list-view-block__menu-cell {
-  padding-right: 5px;
+  padding-right: 4px;
 }
 .block-editor-list-view-leaf .block-editor-list-view-block__menu-cell .components-button.has-icon {
   height: 24px;
@@ -2736,13 +2755,24 @@
 .block-editor-list-view-leaf .block-editor-inserter__toggle:active {
   color: #fff;
 }
+.block-editor-list-view-leaf .block-editor-list-view-block-select-button__label-wrapper {
+  min-width: 120px;
+}
+.block-editor-list-view-leaf .block-editor-list-view-block-select-button__title {
+  flex: 1;
+  position: relative;
+}
+.block-editor-list-view-leaf .block-editor-list-view-block-select-button__title .components-truncate {
+  position: absolute;
+  width: 100%;
+  transform: translateY(-50%);
+}
 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__anchor {
   background: rgba(0, 0, 0, 0.1);
   border-radius: 2px;
   display: inline-block;
   padding: 2px 6px;
-  margin: 0 8px;
-  max-width: 120px;
+  max-width: min(100px, 40%);
   overflow: hidden;
   text-overflow: ellipsis;
 }
@@ -4063,7 +4093,7 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 
 .block-editor-block-patterns-explorer__sidebar {
   position: absolute;
-  top: 60px;
+  top: 76px;
   left: 0;
   bottom: 0;
   width: 280px;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "9.3.0",
+	"version": "9.6.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -33,32 +33,32 @@
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^3.11.0",
-		"@wordpress/api-fetch": "^6.8.0",
-		"@wordpress/blob": "^3.11.0",
-		"@wordpress/blocks": "^11.10.0",
-		"@wordpress/components": "^19.13.0",
-		"@wordpress/compose": "^5.9.0",
-		"@wordpress/data": "^6.11.0",
-		"@wordpress/date": "^4.11.0",
-		"@wordpress/deprecated": "^3.11.0",
-		"@wordpress/dom": "^3.11.0",
-		"@wordpress/element": "^4.9.0",
-		"@wordpress/hooks": "^3.11.0",
-		"@wordpress/html-entities": "^3.11.0",
-		"@wordpress/i18n": "^4.11.0",
-		"@wordpress/icons": "^9.2.0",
-		"@wordpress/is-shallow-equal": "^4.11.0",
-		"@wordpress/keyboard-shortcuts": "^3.9.0",
-		"@wordpress/keycodes": "^3.11.0",
-		"@wordpress/notices": "^3.11.0",
-		"@wordpress/rich-text": "^5.9.0",
-		"@wordpress/shortcode": "^3.11.0",
-		"@wordpress/style-engine": "^0.10.0",
-		"@wordpress/token-list": "^2.11.0",
-		"@wordpress/url": "^3.12.0",
-		"@wordpress/warning": "^2.11.0",
-		"@wordpress/wordcount": "^3.11.0",
+		"@wordpress/a11y": "^3.14.0",
+		"@wordpress/api-fetch": "^6.11.0",
+		"@wordpress/blob": "^3.14.0",
+		"@wordpress/blocks": "^11.13.0",
+		"@wordpress/components": "^19.16.0",
+		"@wordpress/compose": "^5.12.0",
+		"@wordpress/data": "^6.14.0",
+		"@wordpress/date": "^4.14.0",
+		"@wordpress/deprecated": "^3.14.0",
+		"@wordpress/dom": "^3.14.0",
+		"@wordpress/element": "^4.12.0",
+		"@wordpress/hooks": "^3.14.0",
+		"@wordpress/html-entities": "^3.14.0",
+		"@wordpress/i18n": "^4.14.0",
+		"@wordpress/icons": "^9.5.0",
+		"@wordpress/is-shallow-equal": "^4.14.0",
+		"@wordpress/keyboard-shortcuts": "^3.12.0",
+		"@wordpress/keycodes": "^3.14.0",
+		"@wordpress/notices": "^3.14.0",
+		"@wordpress/rich-text": "^5.12.0",
+		"@wordpress/shortcode": "^3.14.0",
+		"@wordpress/style-engine": "^0.13.0",
+		"@wordpress/token-list": "^2.14.0",
+		"@wordpress/url": "^3.15.0",
+		"@wordpress/warning": "^2.14.0",
+		"@wordpress/wordcount": "^3.14.0",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
 		"diff": "^4.0.2",
@@ -77,5 +77,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "48d5f37dfb52d2e77c8eeb662f9874cf141b8c6b"
+	"gitHead": "0315dbc240cb2aa146d7c1bafd251f004b88300e"
 }

package/src/components/block-draggable/test/helpers.native.js

@@ -7,7 +7,7 @@ import {
 	initializeEditor,
 	waitForStoreResolvers,
 	within,
-	advanceAnimationByFrame,
+	advanceAnimationByFrames,
 } from 'test/helpers';
 import { fireGestureHandler } from 'react-native-gesture-handler/jest-utils';
 import { State } from 'react-native-gesture-handler';
@@ -135,7 +135,7 @@ export const fireLongPress = (
 	}
 	// Advance timers one frame to ensure that shared values
 	// are updated and trigger animation reactions.
-	act( () => advanceAnimationByFrame( 1 ) );
+	act( () => advanceAnimationByFrames( 1 ) );
 };
 
 /**
@@ -162,7 +162,7 @@ export const firePanGesture = (
 	] );
 	// Advance timers one frame to ensure that shared values
 	// are updated and trigger animation reactions.
-	act( () => advanceAnimationByFrame( 1 ) );
+	act( () => advanceAnimationByFrames( 1 ) );
 };
 
 /**

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

@@ -1,27 +1,62 @@
+/**
+ * External dependencies
+ */
+import { TouchableWithoutFeedback } from 'react-native';
+
 /**
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { createBlock } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
 import Warning from '../warning';
+import { store as blockEditorStore } from '../../store';
 
-export default function BlockInvalidWarning( { blockTitle, icon } ) {
+export default function BlockInvalidWarning( { blockTitle, icon, clientId } ) {
 	const accessibilityLabel = sprintf(
 		/* translators: accessibility text for blocks with invalid content. %d: localized block title */
 		__( '%s block. This block has invalid content' ),
 		blockTitle
 	);
 
+	const selector = ( select ) => {
+		const { getBlock } = select( blockEditorStore );
+		const block = getBlock( clientId );
+		return {
+			block,
+		};
+	};
+
+	const { block } = useSelect( selector, [ clientId ] );
+
+	const { replaceBlock } = useDispatch( blockEditorStore );
+
+	const recoverBlock = ( { name, attributes, innerBlocks } ) =>
+		createBlock( name, attributes, innerBlocks );
+
+	const attemptBlockRecovery = () => {
+		replaceBlock( block.clientId, recoverBlock( block ) );
+	};
+
 	return (
-		<Warning
-			title={ blockTitle }
-			message={ __( 'Problem displaying block' ) }
-			icon={ icon }
+		<TouchableWithoutFeedback
+			onPress={ attemptBlockRecovery }
 			accessible={ true }
-			accessibilityLabel={ accessibilityLabel }
-		/>
+			accessibilityRole={ 'button' }
+		>
+			<Warning
+				title={ blockTitle }
+				// eslint-disable-next-line @wordpress/i18n-no-collapsible-whitespace
+				message={ __(
+					'Problem displaying block. \nTap to attempt block recovery.'
+				) }
+				icon={ icon }
+				accessibilityLabel={ accessibilityLabel }
+			/>
+		</TouchableWithoutFeedback>
 	);
 }

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

@@ -56,10 +56,10 @@ function mergeWrapperProps( propsA, propsB ) {
 		...propsB,
 	};
 
-	if ( propsA && propsB && propsA.className && propsB.className ) {
+	if ( propsA?.className && propsB?.className ) {
 		newProps.className = classnames( propsA.className, propsB.className );
 	}
-	if ( propsA && propsB && propsA.style && propsB.style ) {
+	if ( propsA?.style && propsB?.style ) {
 		newProps.style = { ...propsA.style, ...propsB.style };
 	}
 

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

@@ -272,6 +272,7 @@ class BlockListBlock extends Component {
 									<BlockInvalidWarning
 										blockTitle={ title }
 										icon={ icon }
+										clientId={ clientId }
 									/>
 								)
 							}

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

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { identity } from 'lodash';
 import { View, Platform, TouchableWithoutFeedback } from 'react-native';
 
 /**
@@ -35,6 +34,7 @@ import { BlockDraggableWrapper } from '../block-draggable';
 import { store as blockEditorStore } from '../../store';
 
 export const OnCaretVerticalPositionChange = createContext();
+const identity = ( x ) => x;
 
 const stylesMemo = {};
 const getStyles = (

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

@@ -7,6 +7,7 @@ import { createContext, useContext } from '@wordpress/element';
  * Internal dependencies
  */
 import { getLayoutType } from '../../layouts';
+import useSetting from '../use-setting';
 
 export const defaultLayout = { type: 'default' };
 
@@ -24,12 +25,23 @@ export function useLayout() {
 	return useContext( Layout );
 }
 
-export function LayoutStyle( { layout = {}, ...props } ) {
+export function LayoutStyle( { layout = {}, css, ...props } ) {
 	const layoutType = getLayoutType( layout.type );
+	const blockGapSupport = useSetting( 'spacing.blockGap' );
+	const hasBlockGapSupport = blockGapSupport !== null;
 
 	if ( layoutType ) {
-		return <layoutType.save layout={ layout } { ...props } />;
+		if ( css ) {
+			return <style>{ css }</style>;
+		}
+		const layoutStyle = layoutType.getLayoutStyle?.( {
+			hasBlockGapSupport,
+			layout,
+			...props,
+		} );
+		if ( layoutStyle ) {
+			return <style>{ layoutStyle }</style>;
+		}
 	}
-
 	return null;
 }

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

@@ -26,7 +26,7 @@
 	// When selecting multiple blocks, we provide an additional selection indicator.
 	&.is-navigate-mode .block-editor-block-list__block.is-selected,
 	&.is-navigate-mode .block-editor-block-list__block.is-hovered,
-	.block-editor-block-list__block.is-multi-selected:not([contenteditable]),
+	.block-editor-block-list__block.is-multi-selected:not(.is-partially-selected),
 	.block-editor-block-list__block.is-highlighted,
 	.block-editor-block-list__block.is-highlighted ~ .is-multi-selected {
 		&::after {
@@ -293,7 +293,7 @@
 
 // Spotlight mode. Fade out blocks unless they contain a selected block.
 .is-focus-mode .block-editor-block-list__block:not(.has-child-selected) {
-	opacity: 0.5;
+	opacity: 0.2;
 	transition: opacity 0.1s linear;
 	@include reduce-motion("transition");
 

package/src/components/block-list/use-block-props/use-block-class-names.js

@@ -33,6 +33,7 @@ export function useBlockClassNames( clientId ) {
 				getSettings,
 				hasSelectedInnerBlock,
 				isTyping,
+				__unstableIsFullySelected,
 			} = select( blockEditorStore );
 			const { outlineMode } = getSettings();
 			const isDragging = isBlockBeingDragged( clientId );
@@ -44,10 +45,13 @@ export function useBlockClassNames( clientId ) {
 				clientId,
 				checkDeep
 			);
+			const isMultiSelected = isBlockMultiSelected( clientId );
 			return classnames( {
 				'is-selected': isSelected,
 				'is-highlighted': isBlockHighlighted( clientId ),
-				'is-multi-selected': isBlockMultiSelected( clientId ),
+				'is-multi-selected': isMultiSelected,
+				'is-partially-selected':
+					isMultiSelected && ! __unstableIsFullySelected(),
 				'is-reusable': isReusableBlock( getBlockType( name ) ),
 				'is-dragging': isDragging,
 				'has-child-selected': isAncestorOfSelectedBlock,