@wordpress/block-editor 11.3.6 → 11.5.0

package/src/store/actions.js

@@ -232,17 +232,24 @@ export function selectBlock( clientId, initialPosition = 0 ) {
 
 /**
  * Yields action objects used in signalling that the block preceding the given
- * clientId should be selected.
+ * clientId (or optionally, its first parent from bottom to top)
+ * should be selected.
  *
- * @param {string} clientId Block client ID.
+ * @param {string}  clientId      Block client ID.
+ * @param {boolean} orFirstParent If true, select the first parent if there is no previous block.
  */
 export const selectPreviousBlock =
-	( clientId ) =>
+	( clientId, orFirstParent = false ) =>
 	( { select, dispatch } ) => {
 		const previousBlockClientId =
 			select.getPreviousBlockClientId( clientId );
 		if ( previousBlockClientId ) {
 			dispatch.selectBlock( previousBlockClientId, -1 );
+		} else if ( orFirstParent ) {
+			const firstParentClientId = select.getBlockRootClientId( clientId );
+			if ( firstParentClientId ) {
+				dispatch.selectBlock( firstParentClientId, -1 );
+			}
 		}
 	};
 
@@ -1197,7 +1204,8 @@ export const removeBlocks =
 		}
 
 		if ( selectPrevious ) {
-			dispatch.selectPreviousBlock( clientIds[ 0 ] );
+			const shouldSelectParent = true;
+			dispatch.selectPreviousBlock( clientIds[ 0 ], shouldSelectParent );
 		}
 
 		dispatch( { type: 'REMOVE_BLOCKS', clientIds } );

package/src/store/reducer.js

@@ -1416,9 +1416,19 @@ export function selection( state = {}, action ) {
 			}
 	}
 
+	const selectionStart = selectionHelper( state.selectionStart, action );
+	const selectionEnd = selectionHelper( state.selectionEnd, action );
+
+	if (
+		selectionStart === state.selectionStart &&
+		selectionEnd === state.selectionEnd
+	) {
+		return state;
+	}
+
 	return {
-		selectionStart: selectionHelper( state.selectionStart, action ),
-		selectionEnd: selectionHelper( state.selectionEnd, action ),
+		selectionStart,
+		selectionEnd,
 	};
 }
 
@@ -1750,45 +1760,6 @@ export function lastBlockAttributesChange( state = null, action ) {
 	return state;
 }
 
-/**
- * Reducer returning automatic change state.
- *
- * @param {?string} state  Current state.
- * @param {Object}  action Dispatched action.
- *
- * @return {string | undefined} Updated state.
- */
-export function automaticChangeStatus( state, action ) {
-	switch ( action.type ) {
-		case 'MARK_AUTOMATIC_CHANGE':
-			return 'pending';
-		case 'MARK_AUTOMATIC_CHANGE_FINAL':
-			if ( state === 'pending' ) {
-				return 'final';
-			}
-
-			return;
-		case 'SELECTION_CHANGE':
-			// As long as the state is not final, ignore any selection changes.
-			if ( state !== 'final' ) {
-				return state;
-			}
-
-			return;
-		// Undoing an automatic change should still be possible after mouse
-		// move or after visibility change.
-		case 'SET_BLOCK_VISIBILITY':
-		case 'START_TYPING':
-		case 'STOP_TYPING':
-		case 'UPDATE_BLOCK_LIST_SETTINGS':
-			return state;
-	}
-
-	// TODO: This is a source of bug, as each time there's a change in timing,
-	// or a new action is added, this could break.
-	// Reset the state by default (for any action not handled).
-}
-
 /**
  * Reducer returning current highlighted block.
  *
@@ -1863,7 +1834,7 @@ export function temporarilyEditingAsBlocks( state = '', action ) {
 	return state;
 }
 
-export default combineReducers( {
+const combinedReducers = combineReducers( {
 	blocks,
 	isTyping,
 	isBlockInterfaceHidden,
@@ -1881,9 +1852,63 @@ export default combineReducers( {
 	lastBlockAttributesChange,
 	editorMode,
 	hasBlockMovingClientId,
-	automaticChangeStatus,
 	highlightedBlock,
 	lastBlockInserted,
 	temporarilyEditingAsBlocks,
 	blockVisibility,
 } );
+
+function withAutomaticChangeReset( reducer ) {
+	return ( state, action ) => {
+		const nextState = reducer( state, action );
+
+		if ( ! state ) {
+			return nextState;
+		}
+
+		// Take over the last value without creating a new reference.
+		nextState.automaticChangeStatus = state.automaticChangeStatus;
+
+		if ( action.type === 'MARK_AUTOMATIC_CHANGE' ) {
+			return {
+				...nextState,
+				automaticChangeStatus: 'pending',
+			};
+		}
+
+		if (
+			action.type === 'MARK_AUTOMATIC_CHANGE_FINAL' &&
+			state.automaticChangeStatus === 'pending'
+		) {
+			return {
+				...nextState,
+				automaticChangeStatus: 'final',
+			};
+		}
+
+		// If there's a change that doesn't affect blocks or selection, maintain
+		// the current status.
+		if (
+			nextState.blocks === state.blocks &&
+			nextState.selection === state.selection
+		) {
+			return nextState;
+		}
+
+		// As long as the state is not final, ignore any selection changes.
+		if (
+			nextState.automaticChangeStatus !== 'final' &&
+			nextState.selection !== state.selection
+		) {
+			return nextState;
+		}
+
+		// Reset the status if blocks change or selection changes (when status is final).
+		return {
+			...nextState,
+			automaticChangeStatus: undefined,
+		};
+	};
+}
+
+export default withAutomaticChangeReset( combinedReducers );

package/src/store/selectors.js

@@ -55,6 +55,17 @@ const MILLISECONDS_PER_WEEK = 7 * 24 * 3600 * 1000;
  */
 const EMPTY_ARRAY = [];
 
+/**
+ * Shared reference to an empty Set for cases where it is important to avoid
+ * returning a new Set reference on every invocation, as in a connected or
+ * other pure component which performs `shouldComponentUpdate` check on props.
+ * This should be used as a last resort, since the normalized data should be
+ * maintained by the reducer result in state.
+ *
+ * @type {Set}
+ */
+const EMPTY_SET = new Set();
+
 /**
  * Returns a block's name given its client ID, or null if no block exists with
  * the client ID.
@@ -499,6 +510,10 @@ export const getBlockParents = createSelector(
 			parents.push( current );
 		}
 
+		if ( ! parents.length ) {
+			return EMPTY_ARRAY;
+		}
+
 		return ascending ? parents : parents.reverse();
 	},
 	( state ) => [ state.blocks.parents ]
@@ -2722,11 +2737,15 @@ export function isBlockVisible( state, clientId ) {
  */
 export const __unstableGetVisibleBlocks = createSelector(
 	( state ) => {
-		return new Set(
+		const visibleBlocks = new Set(
 			Object.keys( state.blockVisibility ).filter(
 				( key ) => state.blockVisibility[ key ]
 			)
 		);
+		if ( visibleBlocks.size === 0 ) {
+			return EMPTY_SET;
+		}
+		return visibleBlocks;
 	},
 	( state ) => [ state.blockVisibility ]
 );

package/src/store/test/actions.js

@@ -625,7 +625,8 @@ describe( 'actions', () => {
 			removeBlocks( clientIds )( { select, dispatch } );
 
 			expect( dispatch.selectPreviousBlock ).toHaveBeenCalledWith(
-				clientId
+				clientId,
+				true
 			);
 
 			expect( dispatch ).toHaveBeenCalledWith( {
@@ -734,7 +735,8 @@ describe( 'actions', () => {
 			removeBlock( clientId )( { select, dispatch } );
 
 			expect( dispatch.selectPreviousBlock ).toHaveBeenCalledWith(
-				clientId
+				clientId,
+				true
 			);
 
 			expect( dispatch ).toHaveBeenCalledWith( {

package/src/utils/parse-css-unit-to-px.js

@@ -24,7 +24,11 @@ function parseUnit( cssUnit ) {
  * @return {number} evaluated expression.
  */
 function calculate( expression ) {
-	return Function( `'use strict'; return (${ expression })` )();
+	try {
+		return Function( `'use strict'; return (${ expression })` )();
+	} catch ( err ) {
+		return null;
+	}
 }
 
 /**
@@ -117,9 +121,9 @@ function isMathExpression( cssUnit ) {
 function evalMathExpression( cssUnit ) {
 	let errorFound = false;
 	// Convert every part of the expression to px values.
-	const cssUnitsBits = cssUnit
-		.split( /(?!^-)[+*\/-](\s?-)?/g )
-		.filter( Boolean );
+	// The following regex matches numbers that have a following unit
+	// E.g. 5.25rem, 1vw
+	const cssUnitsBits = cssUnit.match( /\d+\.?\d*[a-zA-Z]+|\.\d+[a-zA-Z]+/g );
 	for ( const unit of cssUnitsBits ) {
 		// Standardize the unit to px and extract the value.
 		const parsedUnit = parseUnit( getPxFromCssUnit( unit ) );
@@ -131,7 +135,33 @@ function evalMathExpression( cssUnit ) {
 		cssUnit = cssUnit.replace( unit, parsedUnit.value );
 	}
 
-	return errorFound ? null : calculate( cssUnit ).toFixed( 0 ) + 'px';
+	// For mixed math expressions wrapped within CSS expressions
+	if ( ! errorFound && cssUnit.match( /(max|min|clamp)/g ) ) {
+		const values = cssUnit.split( ',' );
+		for ( const currentValue of values ) {
+			// Check for nested calc() and remove them to calculate the value.
+			const rawCurrentValue = currentValue.replace( /\s|calc/g, '' );
+
+			if ( isMathExpression( rawCurrentValue ) ) {
+				const calculatedExpression = calculate( rawCurrentValue );
+
+				if ( calculatedExpression ) {
+					const calculatedValue =
+						calculatedExpression.toFixed( 0 ) + 'px';
+					cssUnit = cssUnit.replace( currentValue, calculatedValue );
+				}
+			}
+		}
+		const parsedValue = parseUnitFunction( cssUnit );
+		return ! parsedValue ? null : parsedValue.value + parsedValue.unit;
+	}
+
+	if ( errorFound ) {
+		return null;
+	}
+
+	const calculatedResult = calculate( cssUnit );
+	return calculatedResult ? calculatedResult.toFixed( 0 ) + 'px' : null;
 }
 
 /**

package/src/utils/test/parse-css-unit-to-px.js

@@ -116,6 +116,18 @@ describe( 'getPxFromCssUnit', () => {
 			[ 'console.log("howdy"); + 10px', null ],
 			[ 'calc(12vw * 10px', null ], // Missing closing bracket.
 			[ 'calc( 1em + 0.875rem )', '30px' ], // Decimals
+			[
+				'clamp(1.8rem, 1.8rem + ((1vw / 0.48rem + 1rem) * 2.885), 3rem)',
+				'48px',
+			],
+			[
+				'clamp(5rem, 5.25rem + ((1vw - 0.48rem) * 9.096), 8rem)',
+				'80px',
+			],
+			[
+				'clamp(2.625rem, calc(2.625rem + ((1vw - 0.48rem) * 8.4135)), 3.25rem)',
+				'42px',
+			],
 		];
 
 		test.each( testData )( 'getPxFromCssUnit( %s )', ( unit, expected ) => {

package/build/hooks/child-layout.js

@@ -1,213 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ChildLayoutEdit = ChildLayoutEdit;
-exports.childLayoutOrientation = childLayoutOrientation;
-exports.hasChildLayoutSupport = hasChildLayoutSupport;
-exports.hasChildLayoutValue = hasChildLayoutValue;
-exports.resetChildLayout = resetChildLayout;
-exports.useIsChildLayoutDisabled = useIsChildLayoutDisabled;
-
-var _element = require("@wordpress/element");
-
-var _components = require("@wordpress/components");
-
-var _i18n = require("@wordpress/i18n");
-
-var _useSetting = _interopRequireDefault(require("../components/use-setting"));
-
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-function helpText(selfStretch, parentLayout) {
-  const {
-    orientation = 'horizontal'
-  } = parentLayout;
-
-  if (selfStretch === 'fill') {
-    return (0, _i18n.__)('Stretch to fill available space.');
-  }
-
-  if (selfStretch === 'fixed') {
-    if (orientation === 'horizontal') {
-      return (0, _i18n.__)('Specify a fixed width.');
-    }
-
-    return (0, _i18n.__)('Specify a fixed height.');
-  }
-
-  return (0, _i18n.__)('Fit contents.');
-}
-/**
- * Inspector controls containing the child layout related configuration.
- *
- * @param {Object} props                        Block props.
- * @param {Object} props.attributes             Block attributes.
- * @param {Object} props.setAttributes          Function to set block attributes.
- * @param {Object} props.__unstableParentLayout
- *
- * @return {WPElement} child layout edit element.
- */
-
-
-function ChildLayoutEdit(_ref) {
-  let {
-    attributes,
-    setAttributes,
-    __unstableParentLayout: parentLayout
-  } = _ref;
-  const {
-    style = {}
-  } = attributes;
-  const {
-    layout: childLayout = {}
-  } = style;
-  const {
-    selfStretch,
-    flexSize
-  } = childLayout;
-  (0, _element.useEffect)(() => {
-    if (selfStretch === 'fixed' && !flexSize) {
-      setAttributes({
-        style: { ...style,
-          layout: { ...childLayout,
-            selfStretch: 'fit'
-          }
-        }
-      });
-    }
-  }, []);
-  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.__experimentalToggleGroupControl, {
-    __nextHasNoMarginBottom: true,
-    size: '__unstable-large',
-    label: childLayoutOrientation(parentLayout),
-    value: selfStretch || 'fit',
-    help: helpText(selfStretch, parentLayout),
-    onChange: value => {
-      const newFlexSize = value !== 'fixed' ? null : flexSize;
-      setAttributes({
-        style: { ...style,
-          layout: { ...childLayout,
-            selfStretch: value,
-            flexSize: newFlexSize
-          }
-        }
-      });
-    },
-    isBlock: true
-  }, (0, _element.createElement)(_components.__experimentalToggleGroupControlOption, {
-    key: 'fit',
-    value: 'fit',
-    label: (0, _i18n.__)('Fit')
-  }), (0, _element.createElement)(_components.__experimentalToggleGroupControlOption, {
-    key: 'fill',
-    value: 'fill',
-    label: (0, _i18n.__)('Fill')
-  }), (0, _element.createElement)(_components.__experimentalToggleGroupControlOption, {
-    key: 'fixed',
-    value: 'fixed',
-    label: (0, _i18n.__)('Fixed')
-  })), selfStretch === 'fixed' && (0, _element.createElement)(_components.__experimentalUnitControl, {
-    size: '__unstable-large',
-    onChange: value => {
-      setAttributes({
-        style: { ...style,
-          layout: { ...childLayout,
-            flexSize: value
-          }
-        }
-      });
-    },
-    value: flexSize
-  }));
-}
-/**
- * Determines if there is child layout support.
- *
- * @param {Object} props                        Block Props object.
- * @param {Object} props.__unstableParentLayout Parent layout.
- *
- * @return {boolean}     Whether there is support.
- */
-
-
-function hasChildLayoutSupport(_ref2) {
-  let {
-    __unstableParentLayout: parentLayout = {}
-  } = _ref2;
-  const {
-    type: parentLayoutType = 'default',
-    default: {
-      type: defaultParentLayoutType = 'default'
-    } = {},
-    allowSizingOnChildren = false
-  } = parentLayout;
-  const support = (defaultParentLayoutType === 'flex' || parentLayoutType === 'flex') && allowSizingOnChildren;
-  return support;
-}
-/**
- * Checks if there is a current value in the child layout attributes.
- *
- * @param {Object} props Block props.
- * @return {boolean}      Whether or not the block has a child layout value set.
- */
-
-
-function hasChildLayoutValue(props) {
-  var _props$attributes$sty;
-
-  return ((_props$attributes$sty = props.attributes.style) === null || _props$attributes$sty === void 0 ? void 0 : _props$attributes$sty.layout) !== undefined;
-}
-/**
- * Resets the child layout attribute. This can be used when disabling
- * child layout controls for a block via a progressive discovery panel.
- *
- * @param {Object} props               Block props.
- * @param {Object} props.attributes    Block attributes.
- * @param {Object} props.setAttributes Function to set block attributes.
- */
-
-
-function resetChildLayout(_ref3) {
-  let {
-    attributes = {},
-    setAttributes
-  } = _ref3;
-  const {
-    style
-  } = attributes;
-  setAttributes({
-    style: { ...style,
-      layout: undefined
-    }
-  });
-}
-/**
- * Custom hook that checks if child layout settings have been disabled.
- *
- * @param {Object} props Block props.
- *
- * @return {boolean}     Whether the child layout setting is disabled.
- */
-
-
-function useIsChildLayoutDisabled(props) {
-  const isDisabled = !(0, _useSetting.default)('layout');
-  return !hasChildLayoutSupport(props) || isDisabled;
-}
-
-function childLayoutOrientation(parentLayout) {
-  const {
-    orientation = 'horizontal'
-  } = parentLayout;
-  return orientation === 'horizontal' ? (0, _i18n.__)('Width') : (0, _i18n.__)('Height');
-}
-//# sourceMappingURL=child-layout.js.map

package/build/hooks/child-layout.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["@wordpress/block-editor/src/hooks/child-layout.js"],"names":["helpText","selfStretch","parentLayout","orientation","ChildLayoutEdit","attributes","setAttributes","__unstableParentLayout","style","layout","childLayout","flexSize","childLayoutOrientation","value","newFlexSize","hasChildLayoutSupport","type","parentLayoutType","default","defaultParentLayoutType","allowSizingOnChildren","support","hasChildLayoutValue","props","undefined","resetChildLayout","useIsChildLayoutDisabled","isDisabled"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n\t__experimentalUnitControl as UnitControl,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useEffect } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport useSetting from '../components/use-setting';\n\nfunction helpText( selfStretch, parentLayout ) {\n\tconst { orientation = 'horizontal' } = parentLayout;\n\n\tif ( selfStretch === 'fill' ) {\n\t\treturn __( 'Stretch to fill available space.' );\n\t}\n\tif ( selfStretch === 'fixed' ) {\n\t\tif ( orientation === 'horizontal' ) {\n\t\t\treturn __( 'Specify a fixed width.' );\n\t\t}\n\t\treturn __( 'Specify a fixed height.' );\n\t}\n\treturn __( 'Fit contents.' );\n}\n\n/**\n * Inspector controls containing the child layout related configuration.\n *\n * @param {Object} props                        Block props.\n * @param {Object} props.attributes             Block attributes.\n * @param {Object} props.setAttributes          Function to set block attributes.\n * @param {Object} props.__unstableParentLayout\n *\n * @return {WPElement} child layout edit element.\n */\nexport function ChildLayoutEdit( {\n\tattributes,\n\tsetAttributes,\n\t__unstableParentLayout: parentLayout,\n} ) {\n\tconst { style = {} } = attributes;\n\tconst { layout: childLayout = {} } = style;\n\tconst { selfStretch, flexSize } = childLayout;\n\n\tuseEffect( () => {\n\t\tif ( selfStretch === 'fixed' && ! flexSize ) {\n\t\t\tsetAttributes( {\n\t\t\t\tstyle: {\n\t\t\t\t\t...style,\n\t\t\t\t\tlayout: {\n\t\t\t\t\t\t...childLayout,\n\t\t\t\t\t\tselfStretch: 'fit',\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t} );\n\t\t}\n\t}, [] );\n\n\treturn (\n\t\t<>\n\t\t\t<ToggleGroupControl\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tsize={ '__unstable-large' }\n\t\t\t\tlabel={ childLayoutOrientation( parentLayout ) }\n\t\t\t\tvalue={ selfStretch || 'fit' }\n\t\t\t\thelp={ helpText( selfStretch, parentLayout ) }\n\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\tconst newFlexSize = value !== 'fixed' ? null : flexSize;\n\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\t...style,\n\t\t\t\t\t\t\tlayout: {\n\t\t\t\t\t\t\t\t...childLayout,\n\t\t\t\t\t\t\t\tselfStretch: value,\n\t\t\t\t\t\t\t\tflexSize: newFlexSize,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t},\n\t\t\t\t\t} );\n\t\t\t\t} }\n\t\t\t\tisBlock={ true }\n\t\t\t>\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tkey={ 'fit' }\n\t\t\t\t\tvalue={ 'fit' }\n\t\t\t\t\tlabel={ __( 'Fit' ) }\n\t\t\t\t/>\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tkey={ 'fill' }\n\t\t\t\t\tvalue={ 'fill' }\n\t\t\t\t\tlabel={ __( 'Fill' ) }\n\t\t\t\t/>\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tkey={ 'fixed' }\n\t\t\t\t\tvalue={ 'fixed' }\n\t\t\t\t\tlabel={ __( 'Fixed' ) }\n\t\t\t\t/>\n\t\t\t</ToggleGroupControl>\n\t\t\t{ selfStretch === 'fixed' && (\n\t\t\t\t<UnitControl\n\t\t\t\t\tsize={ '__unstable-large' }\n\t\t\t\t\tonChange={ ( value ) => {\n\t\t\t\t\t\tsetAttributes( {\n\t\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\t\t...style,\n\t\t\t\t\t\t\t\tlayout: {\n\t\t\t\t\t\t\t\t\t...childLayout,\n\t\t\t\t\t\t\t\t\tflexSize: value,\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t} );\n\t\t\t\t\t} }\n\t\t\t\t\tvalue={ flexSize }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\n/**\n * Determines if there is child layout support.\n *\n * @param {Object} props                        Block Props object.\n * @param {Object} props.__unstableParentLayout Parent layout.\n *\n * @return {boolean}     Whether there is support.\n */\nexport function hasChildLayoutSupport( {\n\t__unstableParentLayout: parentLayout = {},\n} ) {\n\tconst {\n\t\ttype: parentLayoutType = 'default',\n\t\tdefault: { type: defaultParentLayoutType = 'default' } = {},\n\t\tallowSizingOnChildren = false,\n\t} = parentLayout;\n\n\tconst support =\n\t\t( defaultParentLayoutType === 'flex' || parentLayoutType === 'flex' ) &&\n\t\tallowSizingOnChildren;\n\n\treturn support;\n}\n\n/**\n * Checks if there is a current value in the child layout attributes.\n *\n * @param {Object} props Block props.\n * @return {boolean}      Whether or not the block has a child layout value set.\n */\nexport function hasChildLayoutValue( props ) {\n\treturn props.attributes.style?.layout !== undefined;\n}\n\n/**\n * Resets the child layout attribute. This can be used when disabling\n * child layout controls for a block via a progressive discovery panel.\n *\n * @param {Object} props               Block props.\n * @param {Object} props.attributes    Block attributes.\n * @param {Object} props.setAttributes Function to set block attributes.\n */\nexport function resetChildLayout( { attributes = {}, setAttributes } ) {\n\tconst { style } = attributes;\n\n\tsetAttributes( {\n\t\tstyle: {\n\t\t\t...style,\n\t\t\tlayout: undefined,\n\t\t},\n\t} );\n}\n\n/**\n * Custom hook that checks if child layout settings have been disabled.\n *\n * @param {Object} props Block props.\n *\n * @return {boolean}     Whether the child layout setting is disabled.\n */\nexport function useIsChildLayoutDisabled( props ) {\n\tconst isDisabled = ! useSetting( 'layout' );\n\n\treturn ! hasChildLayoutSupport( props ) || isDisabled;\n}\n\nexport function childLayoutOrientation( parentLayout ) {\n\tconst { orientation = 'horizontal' } = parentLayout;\n\n\treturn orientation === 'horizontal' ? __( 'Width' ) : __( 'Height' );\n}\n"]}