@wordpress/block-editor 11.0.0 → 11.2.0

package/build-style/style.css

@@ -58,15 +58,15 @@
 * @param {string} hex - the hexadecimal value to convert
 * @return {string} comma separated rgb values
 */
-/**
- * Breakpoint mixins
- */
 /**
  * Long content fade mixin
  *
  * Creates a fading overlay to signify that the content is longer
  * than the space allows.
  */
+/**
+ * Breakpoint mixins
+ */
 /**
  * Focus styles.
  */
@@ -158,6 +158,9 @@
 .block-editor-block-inspector .components-base-control:last-child {
   margin-bottom: 8px;
 }
+.block-editor-block-inspector .components-focal-point-picker-control .components-base-control {
+  margin-bottom: 0;
+}
 .block-editor-block-inspector .components-panel__body {
   border: none;
   border-top: 1px solid #e0e0e0;
@@ -1171,6 +1174,9 @@
   width: 100%;
   border-radius: 2px;
 }
+.block-editor-block-pattern-setup.view-mode-grid {
+  padding-top: 4px;
+}
 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__toolbar {
   justify-content: center;
 }
@@ -1192,10 +1198,26 @@
 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container div[role=button] {
   cursor: pointer;
 }
+.block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__item:hover .block-editor-block-preview__container {
+  box-shadow: 0 0 0 2px var(--wp-admin-theme-color);
+}
+.block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__item:focus .block-editor-block-preview__container {
+  box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  outline: 2px solid transparent;
+}
+.block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__item:hover .block-editor-block-pattern-setup-list__item-title, .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__item:focus .block-editor-block-pattern-setup-list__item-title {
+  color: var(--wp-admin-theme-color);
+}
 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__list-item {
   break-inside: avoid-column;
   margin-bottom: 24px;
 }
+.block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__list-item .block-editor-block-pattern-setup-list__item-title {
+  padding-top: 8px;
+  font-size: 12px;
+  text-align: center;
+  cursor: pointer;
+}
 .block-editor-block-pattern-setup.view-mode-grid .block-editor-block-pattern-setup__container .block-editor-block-pattern-setup-list__list-item .block-editor-block-preview__container {
   min-height: 100px;
   border-radius: 2px;
@@ -1237,6 +1259,7 @@
   display: flex;
   flex-direction: column;
   width: 100%;
+  height: 100%;
   box-sizing: border-box;
 }
 .block-editor-block-pattern-setup .block-editor-block-pattern-setup__container .carousel-container {
@@ -1244,6 +1267,7 @@
   position: relative;
   padding: 0;
   margin: 0;
+  height: 100%;
   list-style: none;
   transform-style: preserve-3d;
 }
@@ -1254,6 +1278,8 @@
   position: absolute;
   top: 0;
   width: 100%;
+  height: 100%;
+  background-color: #fff;
   margin: auto;
   padding: 0;
   transition: transform 0.5s, z-index 0.5s;
@@ -1358,63 +1384,6 @@
   margin-right: 0;
 }
 
-.block-editor-button-block-appender {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: auto;
-  color: #1e1e1e;
-  box-shadow: inset 0 0 0 1px #1e1e1e;
-}
-.block-editor-button-block-appender.components-button.components-button {
-  padding: 12px;
-}
-.is-dark-theme .block-editor-button-block-appender {
-  color: rgba(255, 255, 255, 0.65);
-  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65);
-}
-.block-editor-button-block-appender:hover {
-  color: var(--wp-admin-theme-color);
-  box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color);
-}
-.block-editor-button-block-appender:focus {
-  box-shadow: inset 0 0 0 2px var(--wp-admin-theme-color);
-}
-.block-editor-button-block-appender:active {
-  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) > .wp-block-group__inner-container > .block-list-appender:only-child, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > .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) > .wp-block-group__inner-container > .block-list-appender:only-child::after, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > .block-list-appender:only-child::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  right: 0;
-  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::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) > .wp-block-group__inner-container > .block-list-appender:only-child::after::before, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > .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) > .wp-block-group__inner-container > .block-list-appender:only-child .block-editor-inserter, .is-layout-flow.block-editor-block-list__block:not(.is-selected) > .wp-block-group__inner-container > .block-list-appender:only-child .block-editor-inserter {
-  visibility: hidden;
-}
-
 .block-editor-color-gradient-control .block-editor-color-gradient-control__color-indicator {
   margin-bottom: 12px;
 }
@@ -1701,6 +1670,13 @@
   font-size: 12px;
 }
 
+.show-icon-labels .block-editor-block-inspector__tabs .components-tab-panel__tabs .components-button.has-icon svg {
+  display: none;
+}
+.show-icon-labels .block-editor-block-inspector__tabs .components-tab-panel__tabs .components-button.has-icon::before {
+  content: attr(aria-label);
+}
+
 .block-editor-inspector-popover-header {
   margin-bottom: 16px;
 }
@@ -1776,6 +1752,7 @@
 .block-editor-link-control__field .components-base-control__label {
   margin-right: 16px;
   margin-bottom: 0;
+  min-width: 29px;
 }
 .block-editor-link-control__field input[type=text], .block-editor-link-control__field.block-editor-url-input input[type=text].block-editor-url-input__input {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
@@ -2202,9 +2179,13 @@
 .block-editor-list-view-leaf.is-selected.is-synced td {
   background: var(--wp-block-synced-color);
 }
+.block-editor-list-view-leaf.is-synced:not(.is-selected) .block-editor-list-view-block-contents:hover, .block-editor-list-view-leaf.is-synced:not(.is-selected) .block-editor-list-view-block-contents:focus,
 .block-editor-list-view-leaf.is-synced:not(.is-selected) .block-editor-list-view-block-contents .block-editor-block-icon {
   color: var(--wp-block-synced-color);
 }
+.block-editor-list-view-leaf.is-synced:not(.is-selected) .block-editor-list-view-block-contents:focus::after {
+  box-shadow: inset 0 0 0 1px #fff, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
+}
 .block-editor-list-view-leaf.is-selected .block-editor-list-view-block-contents, .block-editor-list-view-leaf.is-selected .components-button.has-icon {
   color: #fff;
 }
@@ -2239,7 +2220,7 @@
 .block-editor-list-view-leaf.is-branch-selected:not(.is-selected):not(.is-synced-branch) {
   background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
 }
-.block-editor-list-view-leaf.is-synced-branch:not(.is-selected) {
+.block-editor-list-view-leaf.is-synced-branch.is-branch-selected {
   background: rgba(var(--wp-block-synced-color--rgb), 0.04);
 }
 .block-editor-list-view-leaf.is-branch-selected.is-first-selected td:first-child {
@@ -2328,9 +2309,8 @@
   }
 }
 .block-editor-list-view-leaf .block-editor-block-icon {
-  align-self: flex-start;
   margin-right: 8px;
-  width: 24px;
+  flex: 0 0 24px;
 }
 .block-editor-list-view-leaf .block-editor-list-view-block__menu-cell,
 .block-editor-list-view-leaf .block-editor-list-view-block__mover-cell,
@@ -2462,11 +2442,6 @@
 }
 .block-editor-list-view-leaf .block-editor-list-view-block-select-button__lock {
   line-height: 0;
-  width: 24px;
-  min-width: 24px;
-  margin-left: auto;
-  padding: 0;
-  vertical-align: middle;
 }
 
 .block-editor-list-view-block-select-button__description,
@@ -3169,6 +3144,20 @@
   grid-column: span 1;
 }
 
+.block-editor-hooks__position-selection__select-control .components-custom-select-control__hint {
+  display: none;
+}
+
+.block-editor-hooks__position-selection__select-control__option.has-hint {
+  grid-template-columns: auto 30px;
+  line-height: 1.4;
+  margin-bottom: 0;
+}
+.block-editor-hooks__position-selection__select-control__option .components-custom-select-control__item-hint {
+  grid-row: 2;
+  text-align: left;
+}
+
 .typography-block-support-panel .single-column {
   grid-column: span 1;
 }
@@ -4143,7 +4132,7 @@
 .offcanvas-editor__appender .block-editor-inserter__toggle {
   background-color: #1e1e1e;
   color: #fff;
-  margin: 8px 0 0 28px;
+  margin: 8px 0 0 24px;
   border-radius: 2px;
   height: 24px;
   min-width: 24px;
@@ -4164,6 +4153,10 @@
   max-width: 248px;
 }
 
+.offcanvas-editor-list-view-is-empty {
+  margin-left: 16px;
+}
+
 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": "11.0.0",
+	"version": "11.2.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -33,33 +33,33 @@
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^3.23.0",
-		"@wordpress/api-fetch": "^6.20.0",
-		"@wordpress/blob": "^3.23.0",
-		"@wordpress/blocks": "^12.0.0",
-		"@wordpress/components": "^23.0.0",
-		"@wordpress/compose": "^6.0.0",
-		"@wordpress/data": "^8.0.0",
-		"@wordpress/date": "^4.23.0",
-		"@wordpress/deprecated": "^3.23.0",
-		"@wordpress/dom": "^3.23.0",
-		"@wordpress/element": "^5.0.0",
-		"@wordpress/escape-html": "^2.23.0",
-		"@wordpress/hooks": "^3.23.0",
-		"@wordpress/html-entities": "^3.23.0",
-		"@wordpress/i18n": "^4.23.0",
-		"@wordpress/icons": "^9.14.0",
-		"@wordpress/is-shallow-equal": "^4.23.0",
-		"@wordpress/keyboard-shortcuts": "^4.0.0",
-		"@wordpress/keycodes": "^3.23.0",
-		"@wordpress/notices": "^3.23.0",
-		"@wordpress/rich-text": "^6.0.0",
-		"@wordpress/shortcode": "^3.23.0",
-		"@wordpress/style-engine": "^1.6.0",
-		"@wordpress/token-list": "^2.23.0",
-		"@wordpress/url": "^3.24.0",
-		"@wordpress/warning": "^2.23.0",
-		"@wordpress/wordcount": "^3.23.0",
+		"@wordpress/a11y": "^3.25.0",
+		"@wordpress/api-fetch": "^6.22.0",
+		"@wordpress/blob": "^3.25.0",
+		"@wordpress/blocks": "^12.2.0",
+		"@wordpress/components": "^23.2.0",
+		"@wordpress/compose": "^6.2.0",
+		"@wordpress/data": "^8.2.0",
+		"@wordpress/date": "^4.25.0",
+		"@wordpress/deprecated": "^3.25.0",
+		"@wordpress/dom": "^3.25.0",
+		"@wordpress/element": "^5.2.0",
+		"@wordpress/escape-html": "^2.25.0",
+		"@wordpress/hooks": "^3.25.0",
+		"@wordpress/html-entities": "^3.25.0",
+		"@wordpress/i18n": "^4.25.0",
+		"@wordpress/icons": "^9.16.0",
+		"@wordpress/is-shallow-equal": "^4.25.0",
+		"@wordpress/keyboard-shortcuts": "^4.2.0",
+		"@wordpress/keycodes": "^3.25.0",
+		"@wordpress/notices": "^3.25.0",
+		"@wordpress/rich-text": "^6.2.0",
+		"@wordpress/shortcode": "^3.25.0",
+		"@wordpress/style-engine": "^1.8.0",
+		"@wordpress/token-list": "^2.25.0",
+		"@wordpress/url": "^3.26.0",
+		"@wordpress/warning": "^2.25.0",
+		"@wordpress/wordcount": "^3.25.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -81,5 +81,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "1eb65aabe6738097f4c062e78f69ae8f05879848"
+	"gitHead": "204c880ff65295768e9695dfee6c7a9fee1fdd05"
 }

package/src/components/alignment-control/test/index.js

@@ -14,6 +14,8 @@ import { alignLeft, alignCenter } from '@wordpress/icons';
  */
 import AlignmentUI from '../ui';
 
+jest.useFakeTimers();
+
 describe( 'AlignmentUI', () => {
 	const alignment = 'left';
 	const onChangeSpy = jest.fn();

package/src/components/alignment-control/ui.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { find } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -46,8 +41,7 @@ function AlignmentUI( {
 		return () => onChange( value === align ? undefined : align );
 	}
 
-	const activeAlignment = find(
-		alignmentControls,
+	const activeAlignment = alignmentControls.find(
 		( control ) => control.align === value
 	);
 

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

@@ -12,6 +12,7 @@ import {
  * Internal dependencies
  */
 import { useNotifyCopy } from '../copy-handler';
+import usePasteStyles from '../use-paste-styles';
 import { store as blockEditorStore } from '../../store';
 
 export default function BlockActions( {
@@ -60,6 +61,7 @@ export default function BlockActions( {
 	} = useDispatch( blockEditorStore );
 
 	const notifyCopy = useNotifyCopy();
+	const pasteStyles = usePasteStyles();
 
 	return children( {
 		canDuplicate,
@@ -128,5 +130,8 @@ export default function BlockActions( {
 			}
 			notifyCopy( 'copy', selectedBlockClientIds );
 		},
+		async onPasteStyles() {
+			await pasteStyles( blocks );
+		},
 	} );
 }

package/src/components/block-alignment-control/test/index.js

@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import BlockAlignmentUI from '../ui';
 
+jest.useFakeTimers();
+
 describe( 'BlockAlignmentUI', () => {
 	const alignment = 'left';
 	const onChange = jest.fn();

package/src/components/block-alignment-control/use-available-alignments.js

@@ -10,6 +10,7 @@ import { useLayout } from '../block-list/layout';
 import { store as blockEditorStore } from '../../store';
 import { getLayoutType } from '../../layouts';
 
+const EMPTY_ARRAY = [];
 const DEFAULT_CONTROLS = [ 'none', 'left', 'center', 'right', 'wide', 'full' ];
 const WIDE_CONTROLS = [ 'wide', 'full' ];
 
@@ -40,14 +41,14 @@ export default function useAvailableAlignments( controls = DEFAULT_CONTROLS ) {
 		// While we treat `none` as an alignment, we shouldn't return it if no
 		// other alignments exist.
 		if ( alignments.length === 1 && alignments[ 0 ].name === 'none' ) {
-			return [];
+			return EMPTY_ARRAY;
 		}
 		return alignments;
 	}
 
 	// Starting here, it's the fallback for themes not supporting the layout config.
 	if ( layoutType.name !== 'default' && layoutType.name !== 'constrained' ) {
-		return [];
+		return EMPTY_ARRAY;
 	}
 	const { alignments: availableAlignments = DEFAULT_CONTROLS } = layout;
 	const enabledControls = controls
@@ -66,7 +67,7 @@ export default function useAvailableAlignments( controls = DEFAULT_CONTROLS ) {
 		enabledControls.length === 1 &&
 		enabledControls[ 0 ].name === 'none'
 	) {
-		return [];
+		return EMPTY_ARRAY;
 	}
 
 	return enabledControls;

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

@@ -10,14 +10,16 @@ import { Icon } from '@wordpress/components';
 import { blockDefault } from '@wordpress/icons';
 import { memo } from '@wordpress/element';
 
-function BlockIcon( { icon, showColors = false, className } ) {
+function BlockIcon( { icon, showColors = false, className, context } ) {
 	if ( icon?.src === 'block-default' ) {
 		icon = {
 			src: blockDefault,
 		};
 	}
 
-	const renderedIcon = <Icon icon={ icon && icon.src ? icon.src : icon } />;
+	const renderedIcon = (
+		<Icon icon={ icon && icon.src ? icon.src : icon } context={ context } />
+	);
 	const style = showColors
 		? {
 				backgroundColor: icon && icon.background,

package/src/components/block-icon/test/index.js

@@ -13,6 +13,10 @@ import { image } from '@wordpress/icons';
  */
 import BlockIcon from '../';
 
+function getIconWrapper( container ) {
+	return container.firstChild;
+}
+
 describe( 'BlockIcon', () => {
 	it( 'renders a Icon', () => {
 		const { container } = render( <BlockIcon icon={ image } /> );
@@ -23,13 +27,13 @@ describe( 'BlockIcon', () => {
 	it( 'renders a span without the has-colors classname', () => {
 		const { container } = render( <BlockIcon icon={ image } /> );
 
-		expect( container.firstChild ).not.toHaveClass( 'has-colors' );
+		expect( getIconWrapper( container ) ).not.toHaveClass( 'has-colors' );
 	} );
 
 	it( 'renders a span with the has-colors classname', () => {
 		const { container } = render( <BlockIcon icon={ image } showColors /> );
 
-		expect( container.firstChild ).toHaveClass( 'has-colors' );
+		expect( getIconWrapper( container ) ).toHaveClass( 'has-colors' );
 	} );
 
 	it( 'supports adding a className to the wrapper', () => {
@@ -37,7 +41,7 @@ describe( 'BlockIcon', () => {
 			<BlockIcon icon={ image } className="foo-bar" />
 		);
 
-		expect( container.firstChild ).toHaveClass( 'foo-bar' );
+		expect( getIconWrapper( container ) ).toHaveClass( 'foo-bar' );
 	} );
 
 	it( 'skips adding background and foreground styles when colors are not enabled', () => {
@@ -51,7 +55,7 @@ describe( 'BlockIcon', () => {
 			/>
 		);
 
-		expect( container.firstChild ).not.toHaveAttribute( 'style' );
+		expect( getIconWrapper( container ) ).not.toHaveAttribute( 'style' );
 	} );
 
 	it( 'adds background and foreground styles when colors are enabled', () => {
@@ -66,7 +70,7 @@ describe( 'BlockIcon', () => {
 			/>
 		);
 
-		expect( container.firstChild ).toHaveStyle( {
+		expect( getIconWrapper( container ) ).toHaveStyle( {
 			backgroundColor: 'white',
 			color: 'black',
 		} );

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

@@ -14,6 +14,7 @@ import {
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
 	Button,
+	__unstableMotion as motion,
 } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useMemo, useCallback } from '@wordpress/element';
@@ -34,6 +35,7 @@ import { default as InspectorControls } from '../inspector-controls';
 import { default as InspectorControlsTabs } from '../inspector-controls-tabs';
 import useInspectorControlsTabs from '../inspector-controls-tabs/use-inspector-controls-tabs';
 import AdvancedControls from '../inspector-controls-tabs/advanced-controls-panel';
+import PositionControls from '../inspector-controls-tabs/position-controls-panel';
 
 function useContentBlocks( blockTypes, block ) {
 	const contentBlocksObjectAux = useMemo( () => {
@@ -171,6 +173,24 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 	const availableTabs = useInspectorControlsTabs( blockType?.name );
 	const showTabs = availableTabs?.length > 1;
 
+	const isOffCanvasNavigationEditorEnabled =
+		window?.__experimentalEnableOffCanvasNavigationEditor === true;
+
+	const blockInspectorAnimationSettings = useSelect(
+		( select ) => {
+			if ( isOffCanvasNavigationEditorEnabled && blockType ) {
+				const globalBlockInspectorAnimationSettings =
+					select( blockEditorStore ).getSettings()
+						.__experimentalBlockInspectorAnimation;
+				return globalBlockInspectorAnimationSettings?.[
+					blockType.name
+				];
+			}
+			return null;
+		},
+		[ selectedBlockClientId, isOffCanvasNavigationEditorEnabled, blockType ]
+	);
+
 	if ( count > 1 ) {
 		return (
 			<div className="block-editor-block-inspector">
@@ -231,11 +251,65 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 			/>
 		);
 	}
+
 	return (
-		<BlockInspectorSingleBlock
-			clientId={ selectedBlockClientId }
-			blockName={ blockType.name }
-		/>
+		<BlockInspectorSingleBlockWrapper
+			animate={
+				isOffCanvasNavigationEditorEnabled &&
+				blockInspectorAnimationSettings
+			}
+			wrapper={ ( children ) => (
+				<AnimatedContainer
+					blockInspectorAnimationSettings={
+						blockInspectorAnimationSettings
+					}
+					selectedBlockClientId={ selectedBlockClientId }
+				>
+					{ children }
+				</AnimatedContainer>
+			) }
+		>
+			<BlockInspectorSingleBlock
+				clientId={ selectedBlockClientId }
+				blockName={ blockType.name }
+			/>
+		</BlockInspectorSingleBlockWrapper>
+	);
+};
+
+const BlockInspectorSingleBlockWrapper = ( { animate, wrapper, children } ) => {
+	return animate ? wrapper( children ) : children;
+};
+
+const AnimatedContainer = ( {
+	blockInspectorAnimationSettings,
+	selectedBlockClientId,
+	children,
+} ) => {
+	const animationOrigin =
+		blockInspectorAnimationSettings &&
+		blockInspectorAnimationSettings.enterDirection === 'leftToRight'
+			? -50
+			: 50;
+
+	return (
+		<motion.div
+			animate={ {
+				x: 0,
+				opacity: 1,
+				transition: {
+					ease: 'easeInOut',
+					duration: 0.14,
+				},
+			} }
+			initial={ {
+				x: animationOrigin,
+				opacity: 0,
+			} }
+			key={ selectedBlockClientId }
+		>
+			{ children }
+		</motion.div>
 	);
 };
 
@@ -304,6 +378,7 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
 						__experimentalGroup="border"
 						label={ __( 'Border' ) }
 					/>
+					<PositionControls />
 					<div>
 						<AdvancedControls />
 					</div>

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

@@ -17,6 +17,13 @@
 			margin-bottom: $grid-unit-10;
 		}
 	}
+
+	// Reset unexpected margin-bottom from being applied to the `BaseControl`
+	// component of the `FocalPointPicker` component.
+	.components-focal-point-picker-control .components-base-control {
+		margin-bottom: 0;
+	}
+
 	.components-panel__body {
 		border: none;
 		border-top: $border-width solid $gray-200;