@wordpress/block-editor 12.1.0 → 12.3.0

package/build-style/style.css

@@ -98,7 +98,7 @@
   --wp-block-synced-color: #7a00df;
   --wp-block-synced-color--rgb: 122, 0, 223;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   :root {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -832,6 +832,9 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   }
 }
 
+.block-editor-block-mover__drag-handle {
+  cursor: grab;
+}
 @media (min-width: 600px) {
   .block-editor-block-mover__drag-handle {
     width: 24px;
@@ -1166,17 +1169,17 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   }
 }
 .block-editor-block-switcher__preview__popover .components-popover__content {
-  box-shadow: none;
+  width: 300px;
   border: 1px solid #1e1e1e;
   background: #fff;
   border-radius: 2px;
   outline: none;
+  box-shadow: none;
 }
 .block-editor-block-switcher__preview__popover .block-editor-block-switcher__preview {
-  width: 300px;
-  height: auto;
   max-height: calc(500px - 32px);
-  margin: 16px;
+  margin: 16px 0;
+  padding: 0 16px;
   overflow: hidden;
 }
 
@@ -1644,6 +1647,8 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 
 .block-editor-global-styles-advanced-panel__custom-css-input textarea {
   font-family: Menlo, Consolas, monaco, monospace;
+  /*rtl:ignore*/
+  direction: ltr;
 }
 
 .block-editor-global-styles-advanced-panel__custom-css-validation-wrapper {
@@ -1971,12 +1976,6 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   top: auto;
 }
 
-.block-editor-link-control__search-results-label {
-  padding: 16px 32px 0;
-  display: block;
-  font-weight: 600;
-}
-
 .block-editor-link-control__search-results {
   margin: 0;
   padding: 8px 16px 8px;
@@ -2279,6 +2278,9 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
 .block-editor-link-control__setting {
   margin-bottom: 16px;
 }
+.block-editor-link-control__setting input {
+  margin-left: 0;
+}
 .block-editor-link-control__setting.block-editor-link-control__setting:last-child {
   margin-bottom: 0;
 }
@@ -2470,32 +2472,15 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   width: 36px;
   vertical-align: middle;
 }
-@media (prefers-reduced-motion: reduce) {
-  .block-editor-list-view-leaf .block-editor-list-view-block__menu-cell,
-.block-editor-list-view-leaf .block-editor-list-view-block__mover-cell {
-    transition-duration: 0s;
-    transition-delay: 0s;
-  }
-}
 .block-editor-list-view-leaf .block-editor-list-view-block__menu-cell > *,
 .block-editor-list-view-leaf .block-editor-list-view-block__mover-cell > * {
-  will-change: opacity;
   opacity: 0;
 }
-.block-editor-list-view-leaf .block-editor-list-view-block__menu-cell:hover > *, .block-editor-list-view-leaf .block-editor-list-view-block__menu-cell.is-visible > *,
+.block-editor-list-view-leaf .block-editor-list-view-block__menu-cell:hover > *, .block-editor-list-view-leaf .block-editor-list-view-block__menu-cell:focus-within > *, .block-editor-list-view-leaf .block-editor-list-view-block__menu-cell.is-visible > *,
 .block-editor-list-view-leaf .block-editor-list-view-block__mover-cell:hover > *,
+.block-editor-list-view-leaf .block-editor-list-view-block__mover-cell:focus-within > *,
 .block-editor-list-view-leaf .block-editor-list-view-block__mover-cell.is-visible > * {
   opacity: 1;
-  animation: edit-post__fade-in-animation 0.2s ease-out 0s;
-  animation-fill-mode: forwards;
-}
-@media (prefers-reduced-motion: reduce) {
-  .block-editor-list-view-leaf .block-editor-list-view-block__menu-cell:hover > *, .block-editor-list-view-leaf .block-editor-list-view-block__menu-cell.is-visible > *,
-.block-editor-list-view-leaf .block-editor-list-view-block__mover-cell:hover > *,
-.block-editor-list-view-leaf .block-editor-list-view-block__mover-cell.is-visible > * {
-    animation-duration: 1ms;
-    animation-delay: 0s;
-  }
 }
 .block-editor-list-view-leaf .block-editor-list-view-block__menu-cell,
 .block-editor-list-view-leaf .block-editor-list-view-block__menu-cell .components-button.has-icon,
@@ -2590,11 +2575,6 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   line-height: 0;
 }
 
-.block-editor-list-view-block-select-button__description,
-.block-editor-list-view-appender__description {
-  display: none;
-}
-
 .block-editor-list-view-block__contents-cell .block-editor-list-view-block__contents-container,
 .block-editor-list-view-block__contents-cell .block-editor-list-view-appender__container,
 .block-editor-list-view-appender__cell .block-editor-list-view-block__contents-container,
@@ -4199,151 +4179,61 @@ body.is-fullscreen-mode .block-editor-block-contextual-toolbar.is-fixed {
   }
 }
 
-.tools-panel-item-spacing {
-  display: grid;
-  grid-template-columns: auto 1fr auto;
-  align-items: center;
-  grid-template-rows: 24px auto;
-}
-
-.component-spacing-sizes-control {
-  box-sizing: border-box;
-  padding-bottom: 12px;
-  width: 100%;
-  display: contents;
-}
-.component-spacing-sizes-control legend {
-  padding: 0;
-  grid-column: 1/1;
-  grid-row: 1/1;
-  align-self: center;
-}
-.component-spacing-sizes-control .components-base-control__label {
-  margin-bottom: 8px;
-  height: 16px;
-}
-.component-spacing-sizes-control .components-spacing-sizes-control__side-labels {
-  grid-column: 1/1;
-  justify-content: left;
-  height: 16px;
-  margin-top: 16px;
-}
-.component-spacing-sizes-control .components-spacing-sizes-control__side-label {
-  grid-column: 1/1;
-  justify-self: left;
-  margin-bottom: 0;
-}
-.component-spacing-sizes-control.is-unlinked .components-range-control.components-spacing-sizes-control__range-control,
-.component-spacing-sizes-control.is-unlinked .components-spacing-sizes-control__custom-value-input {
-  margin-top: 8px;
-}
-.component-spacing-sizes-control .components-spacing-sizes-control__hint-single,
-.component-spacing-sizes-control .components-spacing-sizes-control__hint-all {
-  color: #757575;
+.spacing-sizes-control .spacing-sizes-control__custom-value-input,
+.spacing-sizes-control .spacing-sizes-control__label {
   margin-bottom: 0;
 }
-.component-spacing-sizes-control .components-spacing-sizes-control__hint-all {
-  grid-column: 2/2;
-  justify-self: left;
-  grid-row: 1/1;
-  align-self: center;
-  margin-left: 4px;
-  margin-bottom: 8px;
-}
-.component-spacing-sizes-control .components-spacing-sizes-control__custom-toggle-all {
-  grid-column: 2/2;
-  grid-row: 1/1;
-  justify-self: end;
-  margin-top: -4px;
-}
-.component-spacing-sizes-control .component-spacing-sizes-control__linked-button ~ .components-spacing-sizes-control__custom-toggle-all {
-  margin-right: 4px;
-}
-.component-spacing-sizes-control .components-spacing-sizes-control__custom-toggle-single {
-  grid-column: 3/3;
-  justify-self: end;
-  margin-top: 12px;
-}
-.component-spacing-sizes-control .component-spacing-sizes-control__linked-button {
-  grid-column: 3/3;
-  grid-row: 1/1;
-  justify-self: end;
-  line-height: 0;
-  margin-top: -4px;
-}
-.component-spacing-sizes-control .components-spacing-sizes-control__custom-value-range {
-  grid-column: span 2;
-  margin-left: 16px;
-}
-.component-spacing-sizes-control .components-base-control.components-spacing-sizes-control__custom-value-input {
-  width: 124px;
-  grid-column: 1;
-  margin-bottom: 0;
-}
-.component-spacing-sizes-control .components-base-control.components-range-control {
+.spacing-sizes-control .spacing-sizes-control__range-control,
+.spacing-sizes-control .spacing-sizes-control__custom-value-range {
   height: 40px;
   /* Vertically center the RangeControl until it has true 40px height. */
   display: flex;
   align-items: center;
   margin-bottom: 0;
+  flex: 1;
 }
-.component-spacing-sizes-control .components-base-control.components-range-control > .components-base-control__field {
+.spacing-sizes-control .spacing-sizes-control__range-control > .components-base-control__field,
+.spacing-sizes-control .spacing-sizes-control__custom-value-range > .components-base-control__field {
   /* Fixes RangeControl contents when the outer wrapper is flex */
   flex: 1;
 }
-.component-spacing-sizes-control .components-spacing-sizes-control__range-control {
-  grid-column: span 3;
-}
-.component-spacing-sizes-control .components-range-control__mark {
+.spacing-sizes-control .components-range-control__mark {
   height: 4px;
   width: 3px;
   background-color: #fff;
   z-index: 1;
 }
-.component-spacing-sizes-control .components-range-control__marks {
+.spacing-sizes-control .components-range-control__marks {
   margin-top: 17px;
 }
-.component-spacing-sizes-control .components-range-control__marks :first-child {
+.spacing-sizes-control .components-range-control__marks :first-child {
   display: none;
 }
-.component-spacing-sizes-control .components-range-control__thumb-wrapper {
+.spacing-sizes-control .components-range-control__thumb-wrapper {
   z-index: 3;
 }
-.component-spacing-sizes-control .components-spacing-sizes-control__custom-select-control {
-  grid-column: span 3;
-  margin-top: 8px;
-}
 
-.offcanvas-editor-appender .block-editor-inserter__toggle {
-  background-color: #1e1e1e;
-  color: #fff;
-  margin: 8px 0 0 24px;
-  border-radius: 2px;
-  height: 24px;
-  min-width: 24px;
-  padding: 0;
-}
-.offcanvas-editor-appender .block-editor-inserter__toggle:hover, .offcanvas-editor-appender .block-editor-inserter__toggle:focus {
-  background: var(--wp-admin-theme-color);
-  color: #fff;
+.spacing-sizes-control__wrapper + .spacing-sizes-control__wrapper {
+  margin-top: 8px;
 }
 
-.offcanvas-editor-appender__description {
-  display: none;
+.spacing-sizes-control__header {
+  height: 16px;
+  margin-bottom: 8px;
 }
 
-.offcanvas-editor-list-view-tree-wrapper {
-  max-width: 100%;
-  overflow-x: auto;
+.spacing-sizes-control__dropdown {
+  height: 24px;
 }
 
-.offcanvas-editor-list-view-leaf {
-  display: block;
-  max-width: 248px;
+.spacing-sizes-control__custom-select-control,
+.spacing-sizes-control__custom-value-input {
+  flex: 1;
 }
 
-.offcanvas-editor-list-view-is-empty {
-  margin-left: 16px;
+.spacing-sizes-control__icon,
+.spacing-sizes-control__custom-toggle {
+  flex: 0 0 auto;
 }
 
 body.admin-color-light {
@@ -4355,7 +4245,7 @@ body.admin-color-light {
   --wp-admin-theme-color-darker-20--rgb: 0, 97, 135;
   --wp-admin-border-width-focus: 2px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   body.admin-color-light {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -4370,7 +4260,7 @@ body.admin-color-modern {
   --wp-admin-theme-color-darker-20--rgb: 24, 58, 214;
   --wp-admin-border-width-focus: 2px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   body.admin-color-modern {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -4385,7 +4275,7 @@ body.admin-color-blue {
   --wp-admin-theme-color-darker-20--rgb: 6, 64, 84;
   --wp-admin-border-width-focus: 2px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   body.admin-color-blue {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -4400,7 +4290,7 @@ body.admin-color-coffee {
   --wp-admin-theme-color-darker-20--rgb: 43, 39, 36;
   --wp-admin-border-width-focus: 2px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   body.admin-color-coffee {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -4415,7 +4305,7 @@ body.admin-color-ectoplasm {
   --wp-admin-theme-color-darker-20--rgb: 58, 44, 77;
   --wp-admin-border-width-focus: 2px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   body.admin-color-ectoplasm {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -4430,7 +4320,7 @@ body.admin-color-midnight {
   --wp-admin-theme-color-darker-20--rgb: 208, 44, 33;
   --wp-admin-border-width-focus: 2px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   body.admin-color-midnight {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -4445,7 +4335,7 @@ body.admin-color-ocean {
   --wp-admin-theme-color-darker-20--rgb: 76, 96, 102;
   --wp-admin-border-width-focus: 2px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   body.admin-color-ocean {
     --wp-admin-border-width-focus: 1.5px;
   }
@@ -4460,7 +4350,7 @@ body.admin-color-sunrise {
   --wp-admin-theme-color-darker-20--rgb: 195, 105, 34;
   --wp-admin-border-width-focus: 2px;
 }
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (min-resolution: 192dpi) {
   body.admin-color-sunrise {
     --wp-admin-border-width-focus: 1.5px;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "12.1.0",
+	"version": "12.3.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -33,38 +33,39 @@
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^3.33.0",
-		"@wordpress/api-fetch": "^6.30.0",
-		"@wordpress/blob": "^3.33.0",
-		"@wordpress/blocks": "^12.10.0",
-		"@wordpress/components": "^24.0.0",
-		"@wordpress/compose": "^6.10.0",
-		"@wordpress/data": "^9.3.0",
-		"@wordpress/date": "^4.33.0",
-		"@wordpress/deprecated": "^3.33.0",
-		"@wordpress/dom": "^3.33.0",
-		"@wordpress/element": "^5.10.0",
-		"@wordpress/escape-html": "^2.33.0",
-		"@wordpress/hooks": "^3.33.0",
-		"@wordpress/html-entities": "^3.33.0",
-		"@wordpress/i18n": "^4.33.0",
-		"@wordpress/icons": "^9.24.0",
-		"@wordpress/is-shallow-equal": "^4.33.0",
-		"@wordpress/keyboard-shortcuts": "^4.10.0",
-		"@wordpress/keycodes": "^3.33.0",
-		"@wordpress/notices": "^4.1.0",
-		"@wordpress/preferences": "^3.10.0",
-		"@wordpress/private-apis": "^0.15.0",
-		"@wordpress/rich-text": "^6.10.0",
-		"@wordpress/shortcode": "^3.33.0",
-		"@wordpress/style-engine": "^1.16.0",
-		"@wordpress/token-list": "^2.33.0",
-		"@wordpress/url": "^3.34.0",
-		"@wordpress/warning": "^2.33.0",
-		"@wordpress/wordcount": "^3.33.0",
+		"@wordpress/a11y": "^3.35.0",
+		"@wordpress/api-fetch": "^6.32.0",
+		"@wordpress/blob": "^3.35.0",
+		"@wordpress/blocks": "^12.12.0",
+		"@wordpress/components": "^25.1.0",
+		"@wordpress/compose": "^6.12.0",
+		"@wordpress/data": "^9.5.0",
+		"@wordpress/date": "^4.35.0",
+		"@wordpress/deprecated": "^3.35.0",
+		"@wordpress/dom": "^3.35.0",
+		"@wordpress/element": "^5.12.0",
+		"@wordpress/escape-html": "^2.35.0",
+		"@wordpress/hooks": "^3.35.0",
+		"@wordpress/html-entities": "^3.35.0",
+		"@wordpress/i18n": "^4.35.0",
+		"@wordpress/icons": "^9.26.0",
+		"@wordpress/is-shallow-equal": "^4.35.0",
+		"@wordpress/keyboard-shortcuts": "^4.12.0",
+		"@wordpress/keycodes": "^3.35.0",
+		"@wordpress/notices": "^4.3.0",
+		"@wordpress/preferences": "^3.12.0",
+		"@wordpress/private-apis": "^0.17.0",
+		"@wordpress/rich-text": "^6.12.0",
+		"@wordpress/shortcode": "^3.35.0",
+		"@wordpress/style-engine": "^1.18.0",
+		"@wordpress/token-list": "^2.35.0",
+		"@wordpress/url": "^3.36.0",
+		"@wordpress/warning": "^2.35.0",
+		"@wordpress/wordcount": "^3.35.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
+		"deepmerge": "^4.3.0",
 		"diff": "^4.0.2",
 		"dom-scroll-into-view": "^1.2.1",
 		"fast-deep-equal": "^3.1.3",
@@ -83,5 +84,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "e936127e1e13881f1a940b7bd1593a9e500147f3"
+	"gitHead": "a92f606309b1541b834ff9b0a76ed2a466fc45ed"
 }

package/src/autocompleters/block.js

@@ -16,6 +16,7 @@ import useBlockTypesState from '../components/inserter/hooks/use-block-types-sta
 import BlockIcon from '../components/block-icon';
 import { store as blockEditorStore } from '../store';
 import { orderBy } from '../utils/sorting';
+import { orderInserterBlockItems } from '../utils/order-inserter-block-items';
 
 const noop = () => {};
 const SHOWN_BLOCK_TYPES = 9;
@@ -34,23 +35,26 @@ function createBlockCompleter() {
 		triggerPrefix: '/',
 
 		useItems( filterValue ) {
-			const { rootClientId, selectedBlockName } = useSelect(
-				( select ) => {
+			const { rootClientId, selectedBlockName, prioritizedBlocks } =
+				useSelect( ( select ) => {
 					const {
 						getSelectedBlockClientId,
 						getBlockName,
 						getBlockInsertionPoint,
+						getBlockListSettings,
 					} = select( blockEditorStore );
 					const selectedBlockClientId = getSelectedBlockClientId();
+					const _rootClientId = getBlockInsertionPoint().rootClientId;
 					return {
 						selectedBlockName: selectedBlockClientId
 							? getBlockName( selectedBlockClientId )
 							: null,
-						rootClientId: getBlockInsertionPoint().rootClientId,
+						rootClientId: _rootClientId,
+						prioritizedBlocks:
+							getBlockListSettings( _rootClientId )
+								?.prioritizedInserterBlocks,
 					};
-				},
-				[]
-			);
+				}, [] );
 			const [ items, categories, collections ] = useBlockTypesState(
 				rootClientId,
 				noop
@@ -64,7 +68,10 @@ function createBlockCompleter() {
 							collections,
 							filterValue
 					  )
-					: orderBy( items, 'frecency', 'desc' );
+					: orderInserterBlockItems(
+							orderBy( items, 'frecency', 'desc' ),
+							prioritizedBlocks
+					  );
 
 				return initialFilteredItems
 					.filter( ( item ) => item.name !== selectedBlockName )
@@ -75,6 +82,7 @@ function createBlockCompleter() {
 				items,
 				categories,
 				collections,
+				prioritizedBlocks,
 			] );
 
 			const options = useMemo(

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

@@ -11,6 +11,7 @@ import { chevronRightSmall, Icon } from '@wordpress/icons';
  */
 import BlockTitle from '../block-title';
 import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 /**
  * Block breadcrumb component, displaying the hierarchy of the current block selection as a breadcrumb.
@@ -22,11 +23,18 @@ import { store as blockEditorStore } from '../../store';
 function BlockBreadcrumb( { rootLabelText } ) {
 	const { selectBlock, clearSelectedBlock } = useDispatch( blockEditorStore );
 	const { clientId, parents, hasSelection } = useSelect( ( select ) => {
-		const { getSelectionStart, getSelectedBlockClientId, getBlockParents } =
-			select( blockEditorStore );
+		const {
+			getSelectionStart,
+			getSelectedBlockClientId,
+			getBlockParents,
+			getBlockEditingMode,
+		} = unlock( select( blockEditorStore ) );
 		const selectedBlockClientId = getSelectedBlockClientId();
 		return {
-			parents: getBlockParents( selectedBlockClientId ),
+			parents: getBlockParents( selectedBlockClientId ).filter(
+				( parentClientId ) =>
+					getBlockEditingMode( parentClientId ) !== 'disabled'
+			),
 			clientId: selectedBlockClientId,
 			hasSelection: !! getSelectionStart().clientId,
 		};

package/src/components/block-controls/fill.js

@@ -1,14 +1,8 @@
-/**
- * External dependencies
- */
-import { isEmpty } from 'lodash';
-
 /**
  * WordPress dependencies
  */
 import {
 	__experimentalStyleProvider as StyleProvider,
-	__experimentalToolbarContext as ToolbarContext,
 	ToolbarGroup,
 } from '@wordpress/components';
 
@@ -31,21 +25,25 @@ export default function BlockControlsFill( {
 		return null;
 	}
 
+	const innerMarkup = (
+		<>
+			{ group === 'default' && <ToolbarGroup controls={ controls } /> }
+			{ children }
+		</>
+	);
+
 	return (
 		<StyleProvider document={ document }>
 			<Fill>
 				{ ( fillProps ) => {
-					// Children passed to BlockControlsFill will not have access to any
-					// React Context whose Provider is part of the BlockControlsSlot tree.
-					// So we re-create the Provider in this subtree.
-					const value = ! isEmpty( fillProps ) ? fillProps : null;
-					return (
-						<ToolbarContext.Provider value={ value }>
-							{ group === 'default' && (
-								<ToolbarGroup controls={ controls } />
-							) }
-							{ children }
-						</ToolbarContext.Provider>
+					// `fillProps.forwardedContext` is an array of context provider entries, provided by slot,
+					// that should wrap the fill markup.
+					const { forwardedContext = [] } = fillProps;
+					return forwardedContext.reduce(
+						( inner, [ Provider, props ] ) => (
+							<Provider { ...props }>{ inner }</Provider>
+						),
+						innerMarkup
 					);
 				} }
 			</Fill>

package/src/components/block-controls/slot.js

@@ -1,8 +1,9 @@
 /**
  * WordPress dependencies
  */
-import { useContext } from '@wordpress/element';
+import { useContext, useMemo } from '@wordpress/element';
 import {
+	privateApis,
 	__experimentalToolbarContext as ToolbarContext,
 	ToolbarGroup,
 	__experimentalUseSlotFills as useSlotFills,
@@ -13,9 +14,23 @@ import warning from '@wordpress/warning';
  * Internal dependencies
  */
 import groups from './groups';
+import { unlock } from '../../lock-unlock';
+
+const { ComponentsContext } = unlock( privateApis );
 
 export default function BlockControlsSlot( { group = 'default', ...props } ) {
-	const accessibleToolbarState = useContext( ToolbarContext );
+	const toolbarState = useContext( ToolbarContext );
+	const contextState = useContext( ComponentsContext );
+	const fillProps = useMemo(
+		() => ( {
+			forwardedContext: [
+				[ ToolbarContext.Provider, { value: toolbarState } ],
+				[ ComponentsContext.Provider, { value: contextState } ],
+			],
+		} ),
+		[ toolbarState, contextState ]
+	);
+
 	const Slot = groups[ group ]?.Slot;
 	const fills = useSlotFills( Slot?.__unstableName );
 	if ( ! Slot ) {
@@ -27,23 +42,11 @@ export default function BlockControlsSlot( { group = 'default', ...props } ) {
 		return null;
 	}
 
+	const slot = <Slot { ...props } bubblesVirtually fillProps={ fillProps } />;
+
 	if ( group === 'default' ) {
-		return (
-			<Slot
-				{ ...props }
-				bubblesVirtually
-				fillProps={ accessibleToolbarState }
-			/>
-		);
+		return slot;
 	}
 
-	return (
-		<ToolbarGroup>
-			<Slot
-				{ ...props }
-				bubblesVirtually
-				fillProps={ accessibleToolbarState }
-			/>
-		</ToolbarGroup>
-	);
+	return <ToolbarGroup>{ slot }</ToolbarGroup>;
 }