From 05bef82c0e38e7fd62df076c4d98920238cf3dbc Mon Sep 17 00:00:00 2001
From: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Date: Wed, 21 Dec 2022 10:29:02 +0900
Subject: [PATCH] FocalPointPicker: Fix layout misalignment when placed in the
 `BlockInspector` (#46631)

* FocalPointPicker: Reset margin-bottom of UnitControl to align vertical position

* Update changelog

* Apply fixes to the `BlockInspector` component

* Move changelog into block-editor package
---
 packages/block-editor/CHANGELOG.md                         | 1 +
 .../block-editor/src/components/block-inspector/style.scss | 7 +++++++
 2 files changed, 8 insertions(+)

diff --git a/packages/block-editor/CHANGELOG.md b/packages/block-editor/CHANGELOG.md
index 34cd726c55fdf..a990b54f945b3 100644
--- a/packages/block-editor/CHANGELOG.md
+++ b/packages/block-editor/CHANGELOG.md
@@ -14,6 +14,7 @@
 ### Bug Fix
 
 -   `SpacingSizesControl`: Change ARIA role from `region` to `group` to avoid unwanted ARIA landmark regions ([#46530](https://github.com/WordPress/gutenberg/pull/46530)).
+-   `FocalPointPicker`:  Fix layout misalignment when placed in the `BlockInspector` ([#46631](https://github.com/WordPress/gutenberg/pull/46631)).
 
 ## 10.5.0 (2022-11-16)
 
diff --git a/packages/block-editor/src/components/block-inspector/style.scss b/packages/block-editor/src/components/block-inspector/style.scss
index 08ca013629927..3dd4744fb87e2 100644
--- a/packages/block-editor/src/components/block-inspector/style.scss
+++ b/packages/block-editor/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;