@wordpress/block-editor 12.2.0 → 12.3.0

package/build-style/style-rtl.css

@@ -1975,12 +1975,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;
@@ -2283,6 +2277,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-right: 0;
+}
 .block-editor-link-control__setting.block-editor-link-control__setting:last-child {
   margin-bottom: 0;
 }
@@ -2577,11 +2574,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,
@@ -4186,121 +4178,63 @@ 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: right;
-  height: 16px;
-  margin-top: 16px;
-}
-.component-spacing-sizes-control .components-spacing-sizes-control__side-label {
-  grid-column: 1/1;
-  justify-self: right;
-  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: right;
-  grid-row: 1/1;
-  align-self: center;
-  margin-right: 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-left: 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-right: 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;
+
+.spacing-sizes-control__wrapper + .spacing-sizes-control__wrapper {
   margin-top: 8px;
 }
 
+.spacing-sizes-control__header {
+  height: 16px;
+  margin-bottom: 8px;
+}
+
+.spacing-sizes-control__dropdown {
+  height: 24px;
+}
+
+.spacing-sizes-control__custom-select-control,
+.spacing-sizes-control__custom-value-input {
+  flex: 1;
+}
+
+.spacing-sizes-control__icon,
+.spacing-sizes-control__custom-toggle {
+  flex: 0 0 auto;
+}
+
 body.admin-color-light {
   --wp-admin-theme-color: #0085ba;
   --wp-admin-theme-color--rgb: 0, 133, 186;

package/build-style/style.css

@@ -1976,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;
@@ -2284,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;
 }
@@ -2578,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,
@@ -4187,121 +4179,63 @@ 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;
+
+.spacing-sizes-control__wrapper + .spacing-sizes-control__wrapper {
   margin-top: 8px;
 }
 
+.spacing-sizes-control__header {
+  height: 16px;
+  margin-bottom: 8px;
+}
+
+.spacing-sizes-control__dropdown {
+  height: 24px;
+}
+
+.spacing-sizes-control__custom-select-control,
+.spacing-sizes-control__custom-value-input {
+  flex: 1;
+}
+
+.spacing-sizes-control__icon,
+.spacing-sizes-control__custom-toggle {
+  flex: 0 0 auto;
+}
+
 body.admin-color-light {
   --wp-admin-theme-color: #0085ba;
   --wp-admin-theme-color--rgb: 0, 133, 186;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "12.2.0",
+	"version": "12.3.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.34.0",
-		"@wordpress/api-fetch": "^6.31.0",
-		"@wordpress/blob": "^3.34.0",
-		"@wordpress/blocks": "^12.11.0",
-		"@wordpress/components": "^25.0.0",
-		"@wordpress/compose": "^6.11.0",
-		"@wordpress/data": "^9.4.0",
-		"@wordpress/date": "^4.34.0",
-		"@wordpress/deprecated": "^3.34.0",
-		"@wordpress/dom": "^3.34.0",
-		"@wordpress/element": "^5.11.0",
-		"@wordpress/escape-html": "^2.34.0",
-		"@wordpress/hooks": "^3.34.0",
-		"@wordpress/html-entities": "^3.34.0",
-		"@wordpress/i18n": "^4.34.0",
-		"@wordpress/icons": "^9.25.0",
-		"@wordpress/is-shallow-equal": "^4.34.0",
-		"@wordpress/keyboard-shortcuts": "^4.11.0",
-		"@wordpress/keycodes": "^3.34.0",
-		"@wordpress/notices": "^4.2.0",
-		"@wordpress/preferences": "^3.11.0",
-		"@wordpress/private-apis": "^0.16.0",
-		"@wordpress/rich-text": "^6.11.0",
-		"@wordpress/shortcode": "^3.34.0",
-		"@wordpress/style-engine": "^1.17.0",
-		"@wordpress/token-list": "^2.34.0",
-		"@wordpress/url": "^3.35.0",
-		"@wordpress/warning": "^2.34.0",
-		"@wordpress/wordcount": "^3.34.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",
@@ -84,5 +84,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "c7c79cb11b677adcbf06cf5f8cfb6c5ec1699f19"
+	"gitHead": "a92f606309b1541b834ff9b0a76ed2a466fc45ed"
 }

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>;
 }

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

@@ -1,11 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useContext } from '@wordpress/element';
-import {
-	__experimentalToolbarContext as ToolbarContext,
-	ToolbarGroup,
-} from '@wordpress/components';
+import { ToolbarGroup } from '@wordpress/components';
 import warning from '@wordpress/warning';
 
 /**
@@ -14,7 +10,6 @@ import warning from '@wordpress/warning';
 import groups from './groups';
 
 export default function BlockControlsSlot( { group = 'default', ...props } ) {
-	const accessibleToolbarState = useContext( ToolbarContext );
 	const Slot = groups[ group ]?.Slot;
 	if ( ! Slot ) {
 		warning( `Unknown BlockControls group "${ group }" provided.` );
@@ -22,11 +17,11 @@ export default function BlockControlsSlot( { group = 'default', ...props } ) {
 	}
 
 	if ( group === 'default' ) {
-		return <Slot { ...props } fillProps={ accessibleToolbarState } />;
+		return <Slot { ...props } />;
 	}
 
 	return (
-		<Slot { ...props } fillProps={ accessibleToolbarState }>
+		<Slot { ...props }>
 			{ ( fills ) => {
 				if ( ! fills.length ) {
 					return null;

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

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { getBlockType } from '@wordpress/blocks';
+import { store as blocksStore } from '@wordpress/blocks';
 import { Draggable } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useEffect, useRef } from '@wordpress/element';
@@ -24,6 +24,7 @@ const BlockDraggable = ( {
 		( select ) => {
 			const { canMoveBlocks, getBlockRootClientId, getBlockName } =
 				select( blockEditorStore );
+			const { getBlockType } = select( blocksStore );
 			const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
 			const blockName = getBlockName( clientIds[ 0 ] );
 

package/src/components/block-edit/test/edit.js

@@ -107,7 +107,7 @@ describe( 'Edit', () => {
 		it( 'should assign context', () => {
 			const edit = ( { context } ) => context.value;
 			registerBlockType( 'core/test-block', {
-				apiVersion: 2,
+				apiVersion: 3,
 				category: 'text',
 				title: 'block title',
 				usesContext: [ 'value' ],

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

@@ -356,6 +356,7 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
 						</div>
 					) }
 					<InspectorControls.Slot />
+					<InspectorControls.Slot group="list" />
 					<InspectorControls.Slot
 						group="color"
 						label={ __( 'Color' ) }

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

@@ -161,15 +161,6 @@
 	padding: 0;
 }
 
-.block-editor-block-list__layout,
-.block-editor-block-list__block {
-	pointer-events: initial;
-
-	&.is-editing-disabled {
-		pointer-events: none;
-	}
-}
-
 .block-editor-block-list__layout .block-editor-block-list__block {
 	// With `position: static`, Safari marks a full-width selection rectangle, including margins.
 	// With `position: relative`, Safari marks an inline selection rectangle, similar to that of
@@ -178,12 +169,17 @@
 	// We choose relative, as that matches the multi-selection, which is limited to the block footprint.
 	position: relative;
 
-	// Re-enable text-selection on editable blocks.
-	user-select: text;
-
 	// Break long strings of text without spaces so they don't overflow the block.
 	overflow-wrap: break-word;
 
+	pointer-events: auto;
+	user-select: text;
+
+	&.is-editing-disabled {
+		pointer-events: none;
+		user-select: none;
+	}
+
 	.reusable-block-edit-panel * {
 		z-index: z-index(".block-editor-block-list__block .reusable-block-edit-panel *");
 	}