@wordpress/block-editor 10.1.0 → 10.2.0

package/build-style/style-rtl.css

@@ -1216,6 +1216,16 @@
   display: none;
 }
 
+.block-editor-block-preview__container::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  z-index: 1;
+}
+
 .block-editor-block-settings-menu__popover .components-dropdown-menu__menu {
   padding: 0;
 }
@@ -1754,10 +1764,10 @@
   color: #000;
 }
 
-.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child {
+.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child, .is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__layout > .block-list-appender:only-child, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__layout > .block-list-appender:only-child {
   pointer-events: none;
 }
-.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child::after, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child::after {
+.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child::after, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child::after, .is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__layout > .block-list-appender:only-child::after, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__layout > .block-list-appender:only-child::after {
   content: "";
   position: absolute;
   top: 0;
@@ -1765,10 +1775,20 @@
   bottom: 0;
   right: 0;
   pointer-events: none;
-  border: 1px dashed currentColor;
   border-radius: 2px;
 }
-.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child .block-editor-inserter, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child .block-editor-inserter {
+.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child::after::before, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child::after::before, .is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__layout > .block-list-appender:only-child::after::before, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__layout > .block-list-appender:only-child::after::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  pointer-events: none;
+  background: currentColor;
+  opacity: 0.1;
+}
+.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child .block-editor-inserter, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child .block-editor-inserter, .is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__layout > .block-list-appender:only-child .block-editor-inserter, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__layout > .block-list-appender:only-child .block-editor-inserter {
   visibility: hidden;
 }
 
@@ -4315,7 +4335,8 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 .tools-panel-item-spacing {
   display: grid;
   grid-template-columns: auto 1fr auto;
-  grid-row-gap: 4px;
+  align-items: center;
+  grid-template-rows: 25px auto;
 }
 
 .component-spacing-sizes-control {
@@ -4330,19 +4351,28 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   grid-row: 1/1;
   align-self: center;
 }
+.component-spacing-sizes-control .components-base-control__label {
+  margin-bottom: 0;
+  height: 16px;
+}
 .component-spacing-sizes-control .components-spacing-sizes-control__side-labels {
   grid-column: 1/1;
-  min-height: 30px;
   justify-content: left;
+  height: 16px;
+  margin-top: 12px;
 }
-.component-spacing-sizes-control .components-spacing-sizes-control__hint-single {
-  margin-top: 0;
-  margin-right: 0;
+.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 {
+  margin-top: 12px;
 }
 .component-spacing-sizes-control .components-spacing-sizes-control__hint-single,
 .component-spacing-sizes-control .components-spacing-sizes-control__hint-all {
   color: #757575;
-  font-size: 12px;
+  margin-bottom: 0;
 }
 .component-spacing-sizes-control .components-spacing-sizes-control__hint-all {
   grid-column: 2/2;
@@ -4357,6 +4387,11 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   justify-self: end;
   padding: 0;
 }
+.component-spacing-sizes-control .components-spacing-sizes-control__custom-toggle-all.is-small.has-icon {
+  padding: 0;
+  min-width: 24px;
+  height: 16px;
+}
 .component-spacing-sizes-control .component-spacing-sizes-control__linked-button ~ .components-spacing-sizes-control__custom-toggle-all {
   margin-left: 4px;
 }
@@ -4364,10 +4399,11 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   grid-column: 3/3;
   justify-self: end;
 }
-.component-spacing-sizes-control .components-spacing-sizes-control__custom-toggle-all.is-small.has-icon,
 .component-spacing-sizes-control .components-spacing-sizes-control__custom-toggle-single.is-small.has-icon {
   padding: 0;
   min-width: 24px;
+  height: 16px;
+  margin-top: 12px;
 }
 .component-spacing-sizes-control .component-spacing-sizes-control__linked-button {
   grid-column: 3/3;
@@ -4377,7 +4413,6 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 .component-spacing-sizes-control .components-spacing-sizes-control__custom-value-range {
   grid-column: span 2;
   margin-right: 8px;
-  padding-left: 8px;
   height: 30px;
 }
 .component-spacing-sizes-control .components-spacing-sizes-control__custom-value-input {
@@ -4385,11 +4420,7 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 }
 .component-spacing-sizes-control .components-spacing-sizes-control__range-control {
   grid-column: span 3;
-  padding-left: 8px;
-  height: 30px;
-}
-.component-spacing-sizes-control .components-range-control__wrapper {
-  margin-bottom: 0;
+  height: 40px;
 }
 .component-spacing-sizes-control .components-range-control__mark {
   height: 4px;
@@ -4406,12 +4437,6 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 .component-spacing-sizes-control [class*=ThumbWrapper-thumbColor] {
   z-index: 3;
 }
-.component-spacing-sizes-control .components-spacing-sizes-control__side-label {
-  margin-left: 4px;
-  grid-column: 1/1;
-  justify-self: left;
-  font-size: 12px;
-}
 .component-spacing-sizes-control .components-spacing-sizes-control__custom-select-control {
   grid-column: span 3;
 }

package/build-style/style.css

@@ -1216,6 +1216,16 @@
   display: none;
 }
 
+.block-editor-block-preview__container::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+}
+
 .block-editor-block-settings-menu__popover .components-dropdown-menu__menu {
   padding: 0;
 }
@@ -1754,10 +1764,10 @@
   color: #000;
 }
 
-.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child {
+.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child, .is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__layout > .block-list-appender:only-child, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__layout > .block-list-appender:only-child {
   pointer-events: none;
 }
-.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child::after, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child::after {
+.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child::after, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child::after, .is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__layout > .block-list-appender:only-child::after, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__layout > .block-list-appender:only-child::after {
   content: "";
   position: absolute;
   top: 0;
@@ -1765,10 +1775,20 @@
   bottom: 0;
   left: 0;
   pointer-events: none;
-  border: 1px dashed currentColor;
   border-radius: 2px;
 }
-.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child .block-editor-inserter, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child .block-editor-inserter {
+.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child::after::before, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child::after::before, .is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__layout > .block-list-appender:only-child::after::before, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__layout > .block-list-appender:only-child::after::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  pointer-events: none;
+  background: currentColor;
+  opacity: 0.1;
+}
+.is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child .block-editor-inserter, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-list-appender:only-child .block-editor-inserter, .is-layout-constrained.block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__layout > .block-list-appender:only-child .block-editor-inserter, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__layout > .block-list-appender:only-child .block-editor-inserter {
   visibility: hidden;
 }
 
@@ -4315,7 +4335,8 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 .tools-panel-item-spacing {
   display: grid;
   grid-template-columns: auto 1fr auto;
-  grid-row-gap: 4px;
+  align-items: center;
+  grid-template-rows: 25px auto;
 }
 
 .component-spacing-sizes-control {
@@ -4330,19 +4351,28 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   grid-row: 1/1;
   align-self: center;
 }
+.component-spacing-sizes-control .components-base-control__label {
+  margin-bottom: 0;
+  height: 16px;
+}
 .component-spacing-sizes-control .components-spacing-sizes-control__side-labels {
   grid-column: 1/1;
-  min-height: 30px;
   justify-content: left;
+  height: 16px;
+  margin-top: 12px;
 }
-.component-spacing-sizes-control .components-spacing-sizes-control__hint-single {
-  margin-top: 0;
-  margin-left: 0;
+.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 {
+  margin-top: 12px;
 }
 .component-spacing-sizes-control .components-spacing-sizes-control__hint-single,
 .component-spacing-sizes-control .components-spacing-sizes-control__hint-all {
   color: #757575;
-  font-size: 12px;
+  margin-bottom: 0;
 }
 .component-spacing-sizes-control .components-spacing-sizes-control__hint-all {
   grid-column: 2/2;
@@ -4357,6 +4387,11 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   justify-self: end;
   padding: 0;
 }
+.component-spacing-sizes-control .components-spacing-sizes-control__custom-toggle-all.is-small.has-icon {
+  padding: 0;
+  min-width: 24px;
+  height: 16px;
+}
 .component-spacing-sizes-control .component-spacing-sizes-control__linked-button ~ .components-spacing-sizes-control__custom-toggle-all {
   margin-right: 4px;
 }
@@ -4364,10 +4399,11 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
   grid-column: 3/3;
   justify-self: end;
 }
-.component-spacing-sizes-control .components-spacing-sizes-control__custom-toggle-all.is-small.has-icon,
 .component-spacing-sizes-control .components-spacing-sizes-control__custom-toggle-single.is-small.has-icon {
   padding: 0;
   min-width: 24px;
+  height: 16px;
+  margin-top: 12px;
 }
 .component-spacing-sizes-control .component-spacing-sizes-control__linked-button {
   grid-column: 3/3;
@@ -4377,7 +4413,6 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 .component-spacing-sizes-control .components-spacing-sizes-control__custom-value-range {
   grid-column: span 2;
   margin-left: 8px;
-  padding-right: 8px;
   height: 30px;
 }
 .component-spacing-sizes-control .components-spacing-sizes-control__custom-value-input {
@@ -4385,11 +4420,7 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 }
 .component-spacing-sizes-control .components-spacing-sizes-control__range-control {
   grid-column: span 3;
-  padding-right: 8px;
-  height: 30px;
-}
-.component-spacing-sizes-control .components-range-control__wrapper {
-  margin-bottom: 0;
+  height: 40px;
 }
 .component-spacing-sizes-control .components-range-control__mark {
   height: 4px;
@@ -4406,12 +4437,6 @@ figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before
 .component-spacing-sizes-control [class*=ThumbWrapper-thumbColor] {
   z-index: 3;
 }
-.component-spacing-sizes-control .components-spacing-sizes-control__side-label {
-  margin-right: 4px;
-  grid-column: 1/1;
-  justify-self: left;
-  font-size: 12px;
-}
 .component-spacing-sizes-control .components-spacing-sizes-control__custom-select-control {
   grid-column: span 3;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "10.1.0",
+	"version": "10.2.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -33,33 +33,32 @@
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^3.18.0",
-		"@wordpress/api-fetch": "^6.15.0",
-		"@wordpress/blob": "^3.18.0",
-		"@wordpress/blocks": "^11.17.0",
-		"@wordpress/components": "^21.1.0",
-		"@wordpress/compose": "^5.16.0",
-		"@wordpress/data": "^7.2.0",
-		"@wordpress/date": "^4.18.0",
-		"@wordpress/deprecated": "^3.18.0",
-		"@wordpress/dom": "^3.18.0",
-		"@wordpress/element": "^4.16.0",
-		"@wordpress/hooks": "^3.18.0",
-		"@wordpress/html-entities": "^3.18.0",
-		"@wordpress/i18n": "^4.18.0",
-		"@wordpress/icons": "^9.9.0",
-		"@wordpress/is-shallow-equal": "^4.18.0",
-		"@wordpress/keyboard-shortcuts": "^3.16.0",
-		"@wordpress/keycodes": "^3.18.0",
-		"@wordpress/notices": "^3.18.0",
-		"@wordpress/rich-text": "^5.16.0",
-		"@wordpress/shortcode": "^3.18.0",
-		"@wordpress/style-engine": "^1.1.0",
-		"@wordpress/token-list": "^2.18.0",
-		"@wordpress/url": "^3.19.0",
-		"@wordpress/warning": "^2.18.0",
-		"@wordpress/wordcount": "^3.18.0",
-		"change-case": "^4.1.2",
+		"@wordpress/a11y": "^3.19.0",
+		"@wordpress/api-fetch": "^6.16.0",
+		"@wordpress/blob": "^3.19.0",
+		"@wordpress/blocks": "^11.18.0",
+		"@wordpress/components": "^21.2.0",
+		"@wordpress/compose": "^5.17.0",
+		"@wordpress/data": "^7.3.0",
+		"@wordpress/date": "^4.19.0",
+		"@wordpress/deprecated": "^3.19.0",
+		"@wordpress/dom": "^3.19.0",
+		"@wordpress/element": "^4.17.0",
+		"@wordpress/hooks": "^3.19.0",
+		"@wordpress/html-entities": "^3.19.0",
+		"@wordpress/i18n": "^4.19.0",
+		"@wordpress/icons": "^9.10.0",
+		"@wordpress/is-shallow-equal": "^4.19.0",
+		"@wordpress/keyboard-shortcuts": "^3.17.0",
+		"@wordpress/keycodes": "^3.19.0",
+		"@wordpress/notices": "^3.19.0",
+		"@wordpress/rich-text": "^5.17.0",
+		"@wordpress/shortcode": "^3.19.0",
+		"@wordpress/style-engine": "^1.2.0",
+		"@wordpress/token-list": "^2.19.0",
+		"@wordpress/url": "^3.20.0",
+		"@wordpress/warning": "^2.19.0",
+		"@wordpress/wordcount": "^3.19.0",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
 		"diff": "^4.0.2",
@@ -67,7 +66,7 @@
 		"inherits": "^2.0.3",
 		"lodash": "^4.17.21",
 		"react-autosize-textarea": "^7.1.0",
-		"react-easy-crop": "^3.0.0",
+		"react-easy-crop": "^4.5.1",
 		"rememo": "^4.0.0",
 		"remove-accents": "^0.4.2",
 		"traverse": "^0.6.6"
@@ -79,5 +78,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "23e136283fa1d3b8d9d8b33869f871ad5eb77726"
+	"gitHead": "8d42d2febb7d0ba8372a33e560a62f5a5f6a9112"
 }

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

@@ -5,7 +5,7 @@ import { useContext } from '@wordpress/element';
 import {
 	__experimentalToolbarContext as ToolbarContext,
 	ToolbarGroup,
-	__experimentalUseSlot as useSlot,
+	__experimentalUseSlotFills as useSlotFills,
 } from '@wordpress/components';
 
 /**
@@ -16,8 +16,8 @@ import groups from './groups';
 export default function BlockControlsSlot( { group = 'default', ...props } ) {
 	const accessibleToolbarState = useContext( ToolbarContext );
 	const Slot = groups[ group ].Slot;
-	const slot = useSlot( Slot.__unstableName );
-	const hasFills = Boolean( slot.fills && slot.fills.length );
+	const fills = useSlotFills( Slot.__unstableName );
+	const hasFills = Boolean( fills && fills.length );
 
 	if ( ! hasFills ) {
 		return null;

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

@@ -52,7 +52,7 @@ const BlockDraggable = ( {
 	}, [] );
 
 	if ( ! isDraggable ) {
-		return children( { isDraggable: false } );
+		return children( { draggable: false } );
 	}
 
 	const transferData = {

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

@@ -29,15 +29,6 @@ import {
 	getDraggableChip,
 } from './helpers';
 
-// Mock throttle to allow updating the dragging position on every "onDragOver" event.
-jest.mock( 'lodash', () => ( {
-	...jest.requireActual( 'lodash' ),
-	throttle: ( fn ) => {
-		fn.cancel = jest.fn();
-		return fn;
-	},
-} ) );
-
 beforeAll( () => {
 	// Register all core blocks
 	registerCoreBlocks();

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

@@ -10,7 +10,7 @@ import {
 } from '@wordpress/blocks';
 import {
 	PanelBody,
-	__experimentalUseSlot as useSlot,
+	__experimentalUseSlotFills as useSlotFills,
 	FlexItem,
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
@@ -143,7 +143,6 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 			getSelectedBlockCount,
 			getBlockName,
 			__unstableGetContentLockingParent,
-			getTemplateLock,
 		} = select( blockEditorStore );
 
 		const _selectedBlockClientId = getSelectedBlockClientId();
@@ -157,12 +156,9 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 			selectedBlockClientId: _selectedBlockClientId,
 			selectedBlockName: _selectedBlockName,
 			blockType: _blockType,
-			topLevelLockedBlock:
-				getTemplateLock( _selectedBlockClientId ) === 'contentOnly'
-					? _selectedBlockClientId
-					: __unstableGetContentLockingParent(
-							_selectedBlockClientId
-					  ),
+			topLevelLockedBlock: __unstableGetContentLockingParent(
+				_selectedBlockClientId
+			),
 		};
 	}, [] );
 
@@ -284,8 +280,8 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
 };
 
 const AdvancedControls = () => {
-	const slot = useSlot( InspectorAdvancedControls.slotName );
-	const hasFills = Boolean( slot.fills && slot.fills.length );
+	const fills = useSlotFills( InspectorAdvancedControls.slotName );
+	const hasFills = Boolean( fills && fills.length );
 
 	if ( ! hasFills ) {
 		return null;

package/src/components/block-list/use-in-between-inserter.js

@@ -83,19 +83,19 @@ export function useInBetweenInserter() {
 				const orientation =
 					getBlockListSettings( rootClientId )?.orientation ||
 					'vertical';
-				const rect = event.target.getBoundingClientRect();
-				const offsetTop = event.clientY - rect.top;
-				const offsetLeft = event.clientX - rect.left;
+				const offsetTop = event.clientY;
+				const offsetLeft = event.clientX;
 
 				const children = Array.from( event.target.children );
 				let element = children.find( ( blockEl ) => {
+					const blockElRect = blockEl.getBoundingClientRect();
 					return (
 						( blockEl.classList.contains( 'wp-block' ) &&
 							orientation === 'vertical' &&
-							blockEl.offsetTop > offsetTop ) ||
+							blockElRect.top > offsetTop ) ||
 						( blockEl.classList.contains( 'wp-block' ) &&
 							orientation === 'horizontal' &&
-							blockEl.offsetLeft > offsetLeft )
+							blockElRect.left > offsetLeft )
 					);
 				} );
 

package/src/components/block-parent-selector/index.js

@@ -83,10 +83,10 @@ export default function BlockParentSelector() {
 				label={ sprintf(
 					/* translators: %s: Name of the block's parent. */
 					__( 'Select %s' ),
-					blockInformation.title
+					blockInformation?.title
 				) }
 				showTooltip
-				icon={ <BlockIcon icon={ blockInformation.icon } /> }
+				icon={ <BlockIcon icon={ blockInformation?.icon } /> }
 			/>
 		</div>
 	);

package/src/components/block-popover/inbetween.js

@@ -226,7 +226,7 @@ function BlockPopoverInbetween( {
 			forcePopoverRecompute
 		);
 		return () => {
-			previousElement.ownerDocument.defaultView.removeEventListener(
+			previousElement.ownerDocument.defaultView?.removeEventListener(
 				'resize',
 				forcePopoverRecompute
 			);

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

@@ -42,24 +42,15 @@ function BlockPopover(
 		ref,
 		usePopoverScroll( __unstableContentRef ),
 	] );
-	const style = useMemo( () => {
-		if ( ! selectedElement || lastSelectedElement !== selectedElement ) {
-			return {};
-		}
-
-		return {
-			position: 'absolute',
-			width: selectedElement.offsetWidth,
-			height: selectedElement.offsetHeight,
-		};
-	}, [ selectedElement, lastSelectedElement, __unstableRefreshSize ] );
 
-	const [ popoverAnchorRecomputeCounter, forceRecomputePopoverAnchor ] =
-		useReducer(
-			// Module is there to make sure that the counter doesn't overflow.
-			( s ) => ( s + 1 ) % MAX_POPOVER_RECOMPUTE_COUNTER,
-			0
-		);
+	const [
+		popoverDimensionsRecomputeCounter,
+		forceRecomputePopoverDimensions,
+	] = useReducer(
+		// Module is there to make sure that the counter doesn't overflow.
+		( s ) => ( s + 1 ) % MAX_POPOVER_RECOMPUTE_COUNTER,
+		0
+	);
 
 	// When blocks are moved up/down, they are animated to their new position by
 	// updating the `transform` property manually (i.e. without using CSS
@@ -74,7 +65,7 @@ function BlockPopover(
 		}
 
 		const observer = new window.MutationObserver(
-			forceRecomputePopoverAnchor
+			forceRecomputePopoverDimensions
 		);
 		observer.observe( selectedElement, { attributes: true } );
 
@@ -83,12 +74,36 @@ function BlockPopover(
 		};
 	}, [ selectedElement ] );
 
+	const style = useMemo( () => {
+		if (
+			// popoverDimensionsRecomputeCounter is by definition always equal or greater
+			// than 0. This check is only there to satisfy the correctness of the
+			// exhaustive-deps rule for the `useMemo` hook.
+			popoverDimensionsRecomputeCounter < 0 ||
+			! selectedElement ||
+			lastSelectedElement !== selectedElement
+		) {
+			return {};
+		}
+
+		return {
+			position: 'absolute',
+			width: selectedElement.offsetWidth,
+			height: selectedElement.offsetHeight,
+		};
+	}, [
+		selectedElement,
+		lastSelectedElement,
+		__unstableRefreshSize,
+		popoverDimensionsRecomputeCounter,
+	] );
+
 	const popoverAnchor = useMemo( () => {
 		if (
-			// popoverAnchorRecomputeCounter is by definition always equal or greater
+			// popoverDimensionsRecomputeCounter is by definition always equal or greater
 			// than 0. This check is only there to satisfy the correctness of the
 			// exhaustive-deps rule for the `useMemo` hook.
-			popoverAnchorRecomputeCounter < 0 ||
+			popoverDimensionsRecomputeCounter < 0 ||
 			! selectedElement ||
 			( bottomClientId && ! lastSelectedElement )
 		) {
@@ -132,7 +147,7 @@ function BlockPopover(
 		bottomClientId,
 		lastSelectedElement,
 		selectedElement,
-		popoverAnchorRecomputeCounter,
+		popoverDimensionsRecomputeCounter,
 	] );
 
 	if ( ! selectedElement || ( bottomClientId && ! lastSelectedElement ) ) {
@@ -143,12 +158,12 @@ function BlockPopover(
 		<Popover
 			ref={ mergedRefs }
 			animate={ false }
-			position="top right left"
 			focusOnMount={ false }
 			anchor={ popoverAnchor }
 			// Render in the old slot if needed for backward compatibility,
 			// otherwise render in place (not in the default popover slot).
 			__unstableSlotName={ __unstablePopoverSlot || null }
+			placement="top-start"
 			resize={ false }
 			flip={ false }
 			shift

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

@@ -64,3 +64,16 @@
 		display: none;
 	}
 }
+
+// The goal of this pseudo-element is to cover the iframe
+// otherwise it won't be able to drag elements containing
+// the preview iframe in Safari.
+.block-editor-block-preview__container::after {
+	content: "";
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	z-index: 1;
+}