From ed4c2d30cd0ce54c5324353c6e6c13751cf2a17d Mon Sep 17 00:00:00 2001
From: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Date: Wed, 11 Dec 2024 17:09:40 +0900
Subject: [PATCH] ChildLayoutControl: Use units defined in theme.json (#67784)

Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: tellthemachines <isabel_brison@git.wordpress.org>
Co-authored-by: jhmonroe <jhmonroe@git.wordpress.org>
---
 .../src/components/child-layout-control/index.js   | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/packages/block-editor/src/components/child-layout-control/index.js b/packages/block-editor/src/components/child-layout-control/index.js
index 022acf2e1074a..20791d9751bcd 100644
--- a/packages/block-editor/src/components/child-layout-control/index.js
+++ b/packages/block-editor/src/components/child-layout-control/index.js
@@ -9,6 +9,7 @@ import {
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
 	__experimentalToolsPanelItem as ToolsPanelItem,
+	__experimentalUseCustomUnits as useCustomUnits,
 	Flex,
 	FlexItem,
 } from '@wordpress/components';
@@ -21,6 +22,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
  */
 import { useGetNumberOfBlocksBeforeCell } from '../grid/use-get-number-of-blocks-before-cell';
 import { store as blockEditorStore } from '../../store';
+import { useSettings } from '../use-settings';
 
 function helpText( selfStretch, parentLayout ) {
 	const { orientation = 'horizontal' } = parentLayout;
@@ -98,6 +100,17 @@ function FlexControls( {
 	const hasFlexValue = () => !! selfStretch;
 	const flexResetLabel =
 		orientation === 'horizontal' ? __( 'Width' ) : __( 'Height' );
+	const [ availableUnits ] = useSettings( 'spacing.units' );
+	const units = useCustomUnits( {
+		availableUnits: availableUnits || [
+			'%',
+			'px',
+			'em',
+			'rem',
+			'vh',
+			'vw',
+		],
+	} );
 	const resetFlex = () => {
 		onChange( {
 			selfStretch: undefined,
@@ -167,6 +180,7 @@ function FlexControls( {
 			{ selfStretch === 'fixed' && (
 				<UnitControl
 					size="__unstable-large"
+					units={ units }
 					onChange={ ( value ) => {
 						onChange( {
 							selfStretch,