@@ -30,7 +30,7 @@ import { store as blockEditorStore } from '../../store';
 import { useGetNumberOfBlocksBeforeCell } from './use-get-number-of-blocks-before-cell';
 import ButtonBlockAppender from '../button-block-appender';
 import { unlock } from '../../lock-unlock';
-import { getUpdatedChildLayoutStyle } from '../../hooks/layout-child';
+import { getUpdatedChildLayoutStyle } from '../../hooks/block-style-state';
 import type { ChildLayoutBlockStyle } from '../../hooks/types';
 import type {
 	AutoGridVisualizerProps,
 
@@ -1,7 +1,13 @@
 import { createContext, useContext } from '@wordpress/element';
 import { cleanEmptyObject } from './utils';
 import { getValueFromObjectPath, setImmutably } from '../utils/object';
-import type { BlockStyle, BlockStyleState, ResetAllFilter } from './types';
+import type {
+	BlockStyle,
+	BlockStyleState,
+	ChildLayoutBlockStyle,
+	ResetAllFilter,
+} from './types';
+import type { ChildLayout } from '../components/child-layout-control/types';
 
 const DEFAULT_STATE_VALUE = 'default';
 
@@ -182,3 +188,44 @@ export function scopeResetAllFilterToState<
 		};
 	};
 }
+
+/**
+ * Merges child layout changes into the active layout style state.
+ *
+ * @param style         Block style attributes.
+ * @param layout        Child layout changes.
+ * @param selectedState Selected block style state.
+ * @return Updated block style attributes.
+ */
+export function getUpdatedChildLayoutStyle(
+	style: ChildLayoutBlockStyle | undefined,
+	layout: ChildLayout,
+	selectedState: BlockStyleState | undefined
+): ChildLayoutBlockStyle | undefined {
+	if ( ! hasViewportBlockStyleState( selectedState ) ) {
+		return {
+			...style,
+			layout: {
+				...style?.layout,
+				...layout,
+			},
+		};
+	}
+
+	const layoutState = {
+		// A viewport state is selected here.
+		viewport: selectedState!.viewport,
+		pseudo: DEFAULT_BLOCK_STYLE_STATE.pseudo,
+	};
+	// A style state holds the child layout it overrides.
+	const stateStyle = getStyleForState( style, layoutState ) as
+		ChildLayoutBlockStyle | undefined;
+
+	return setStyleForState( style, layoutState, {
+		...stateStyle,
+		layout: {
+			...stateStyle?.layout,
+			...layout,
+		},
+	} );
+}
@@ -18,11 +18,9 @@ import { BLOCK_VISIBILITY_VIEWPORTS } from '../components/block-visibility/const
 import {
 	DEFAULT_BLOCK_STYLE_STATE,
 	getStyleForState,
-	hasViewportBlockStyleState,
-	setStyleForState,
+	getUpdatedChildLayoutStyle,
 } from './block-style-state';
 import type {
-	BlockStyleState,
 	BlockListBlockFeatureProps,
 	ChildLayoutBlockStyle,
 	ChildLayoutControlsPureProps,
@@ -294,47 +292,6 @@ export function getResponsiveChildLayoutStyles( {
 		.join( '' );
 }
 
-/**
- * Merges child layout changes into the active layout style state.
- *
- * @param style         Block style attributes.
- * @param layout        Child layout changes.
- * @param selectedState Selected block style state.
- * @return Updated block style attributes.
- */
-export function getUpdatedChildLayoutStyle(
-	style: ChildLayoutBlockStyle | undefined,
-	layout: ChildLayout,
-	selectedState: BlockStyleState | undefined
-): ChildLayoutBlockStyle | undefined {
-	if ( ! hasViewportBlockStyleState( selectedState ) ) {
-		return {
-			...style,
-			layout: {
-				...style?.layout,
-				...layout,
-			},
-		};
-	}
-
-	const layoutState = {
-		// A viewport state is selected here.
-		viewport: selectedState!.viewport,
-		pseudo: DEFAULT_BLOCK_STYLE_STATE.pseudo,
-	};
-	// A style state holds the child layout it overrides.
-	const stateStyle = getStyleForState( style, layoutState ) as
-		ChildLayoutBlockStyle | undefined;
-
-	return setStyleForState( style, layoutState, {
-		...stateStyle,
-		layout: {
-			...stateStyle?.layout,
-			...layout,
-		},
-	} );
-}
-
 function useBlockPropsChildLayoutStyles( {
 	style,
 }: BlockListBlockFeatureProps & { style?: ChildLayoutBlockStyle } ) {
 
@@ -3,8 +3,8 @@ import {
 	getChildLayoutStyleRules,
 	getChildLayoutStyles,
 	getResponsiveChildLayoutStyles,
-	getUpdatedChildLayoutStyle,
 } from '../layout-child';
+import { getUpdatedChildLayoutStyle } from '../block-style-state';
 
 describe( 'layout child', () => {
 	describe( 'getChildLayoutStyleRules()', () => {