@wordpress/block-editor 10.4.0 → 11.0.0

package/src/components/use-setting/test/index.js

@@ -0,0 +1,99 @@
+/**
+ * WordPress dependencies
+ */
+import { addFilter, removeFilter } from '@wordpress/hooks';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import useSetting from '..';
+import * as BlockEditContext from '../../block-edit/context';
+
+// Mock useSelect() functions used by useSetting()
+jest.mock( '@wordpress/data/src/components/use-select' );
+
+let selectMock = {};
+const setupSelectMock = () => {
+	selectMock = {
+		getSettings: () => ( {} ),
+		getBlockParents: () => [],
+		getBlockName: () => '',
+	};
+};
+
+useSelect.mockImplementation( ( callback ) => callback( () => selectMock ) );
+
+const mockSettings = ( settings ) => {
+	selectMock.getSettings = () => ( {
+		__experimentalFeatures: settings,
+	} );
+};
+
+const mockCurrentBlockContext = (
+	blockContext = { name: '', isSelected: false }
+) => {
+	jest.spyOn( BlockEditContext, 'useBlockEditContext' ).mockReturnValue(
+		blockContext
+	);
+};
+
+describe( 'useSetting', () => {
+	beforeEach( () => {
+		setupSelectMock();
+		mockCurrentBlockContext();
+	} );
+
+	it( 'uses block setting', () => {
+		mockSettings( {
+			blocks: {
+				'core/test-block': {
+					layout: {
+						contentSize: '840px',
+					},
+				},
+			},
+		} );
+
+		mockCurrentBlockContext( {
+			name: 'core/test-block',
+		} );
+
+		expect( useSetting( 'layout.contentSize' ) ).toBe( '840px' );
+	} );
+
+	it( 'uses blockEditor.useSetting.before hook override', () => {
+		mockSettings( {
+			blocks: {
+				'core/test-block': {
+					layout: {
+						contentSize: '840px',
+					},
+				},
+			},
+		} );
+
+		mockCurrentBlockContext( {
+			name: 'core/test-block',
+		} );
+
+		addFilter(
+			'blockEditor.useSetting.before',
+			'test/useSetting.before',
+			( result, path, clientId, blockName ) => {
+				if ( blockName === 'core/test-block' ) {
+					return '960px';
+				}
+
+				return result;
+			}
+		);
+
+		expect( useSetting( 'layout.contentSize' ) ).toBe( '960px' );
+
+		removeFilter(
+			'blockEditor.useSetting.before',
+			'test/useSetting.before'
+		);
+	} );
+} );

package/src/content.scss

@@ -0,0 +1,10 @@
+@import "./components/block-list/content.scss";
+@import "./components/block-list-appender/content.scss";
+@import "./components/block-content-overlay/content.scss";
+@import "./components/block-draggable/content.scss";
+@import "./components/block-preview/content.scss";
+@import "./components/default-block-appender/content.scss";
+@import "./components/inner-blocks/content.scss";
+@import "./components/media-placeholder/content.scss";
+@import "./components/plain-text/content.scss";
+@import "./components/rich-text/content.scss";

package/src/hooks/child-layout.js

@@ -0,0 +1,190 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+	__experimentalUnitControl as UnitControl,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import useSetting from '../components/use-setting';
+
+function helpText( selfStretch, parentLayout ) {
+	const { orientation = 'horizontal' } = parentLayout;
+
+	if ( selfStretch === 'fill' ) {
+		return __( 'Stretch to fill available space.' );
+	}
+	if ( selfStretch === 'fixed' ) {
+		if ( orientation === 'horizontal' ) {
+			return __( 'Specify a fixed width.' );
+		}
+		return __( 'Specify a fixed height.' );
+	}
+	return __( '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.
+ */
+export function ChildLayoutEdit( {
+	attributes,
+	setAttributes,
+	__unstableParentLayout: parentLayout,
+} ) {
+	const { style = {} } = attributes;
+	const { layout: childLayout = {} } = style;
+	const { selfStretch, flexSize } = childLayout;
+
+	useEffect( () => {
+		if ( selfStretch === 'fixed' && ! flexSize ) {
+			setAttributes( {
+				style: {
+					...style,
+					layout: {
+						...childLayout,
+						selfStretch: 'fit',
+					},
+				},
+			} );
+		}
+	}, [] );
+
+	return (
+		<>
+			<ToggleGroupControl
+				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 }
+			>
+				<ToggleGroupControlOption
+					key={ 'fit' }
+					value={ 'fit' }
+					label={ __( 'Fit' ) }
+				/>
+				<ToggleGroupControlOption
+					key={ 'fill' }
+					value={ 'fill' }
+					label={ __( 'Fill' ) }
+				/>
+				<ToggleGroupControlOption
+					key={ 'fixed' }
+					value={ 'fixed' }
+					label={ __( 'Fixed' ) }
+				/>
+			</ToggleGroupControl>
+			{ selfStretch === 'fixed' && (
+				<UnitControl
+					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.
+ */
+export function hasChildLayoutSupport( {
+	__unstableParentLayout: parentLayout = {},
+} ) {
+	const {
+		type: parentLayoutType = 'default',
+		allowSizingOnChildren = false,
+	} = parentLayout;
+	const support = 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.
+ */
+export function hasChildLayoutValue( props ) {
+	return props.attributes.style?.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.
+ */
+export function resetChildLayout( { attributes = {}, setAttributes } ) {
+	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.
+ */
+export function useIsChildLayoutDisabled( props ) {
+	const isDisabled = ! useSetting( 'layout' );
+
+	return ! hasChildLayoutSupport( props ) || isDisabled;
+}
+
+export function childLayoutOrientation( parentLayout ) {
+	const { orientation = 'horizontal' } = parentLayout;
+
+	return orientation === 'horizontal' ? __( 'Width' ) : __( 'Height' );
+}

package/src/hooks/color-panel.js

@@ -29,7 +29,19 @@ export default function ColorPanel( {
 	const definedColors = settings.filter( ( setting ) => setting?.colorValue );
 
 	useEffect( () => {
-		if ( ! enableContrastChecking || ! definedColors.length ) {
+		if ( ! enableContrastChecking ) {
+			return;
+		}
+		if ( ! definedColors.length ) {
+			if ( detectedBackgroundColor ) {
+				setDetectedBackgroundColor();
+			}
+			if ( detectedColor ) {
+				setDetectedColor();
+			}
+			if ( detectedLinkColor ) {
+				setDetectedColor();
+			}
 			return;
 		}
 

package/src/hooks/color.js

@@ -459,6 +459,8 @@ export function ColorEdit( props ) {
 		Platform.OS === 'web' &&
 		! gradient &&
 		! style?.color?.gradient &&
+		hasBackgroundColor &&
+		( hasLinkColor || hasTextColor ) &&
 		// Contrast checking is enabled by default.
 		// Deactivating it requires `enableContrastChecker` to have
 		// an explicit value of `false`.

package/src/hooks/content-lock-ui.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { ToolbarButton } from '@wordpress/components';
+import { ToolbarButton, MenuItem } from '@wordpress/components';
 import { createHigherOrderComponent } from '@wordpress/compose';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { addFilter } from '@wordpress/hooks';
@@ -12,7 +12,7 @@ import { useEffect, useRef, useCallback } from '@wordpress/element';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../store';
-import { BlockControls } from '../components';
+import { BlockControls, BlockSettingsMenuControls } from '../components';
 /**
  * External dependencies
  */
@@ -107,39 +107,51 @@ export const withBlockControls = createHigherOrderComponent(
 		return (
 			<>
 				{ isEditingAsBlocks && ! isContentLocked && (
-					<StopEditingAsBlocksOnOutsideSelect
-						clientId={ props.clientId }
-						stopEditingAsBlock={ stopEditingAsBlock }
-					/>
+					<>
+						<StopEditingAsBlocksOnOutsideSelect
+							clientId={ props.clientId }
+							stopEditingAsBlock={ stopEditingAsBlock }
+						/>
+						<BlockControls group="other">
+							<ToolbarButton
+								onClick={ () => {
+									stopEditingAsBlock();
+								} }
+							>
+								{ __( 'Done' ) }
+							</ToolbarButton>
+						</BlockControls>
+					</>
+				) }
+				{ ! isEditingAsBlocks && isContentLocked && props.isSelected && (
+					<BlockSettingsMenuControls>
+						{ ( { onClose } ) => (
+							<MenuItem
+								onClick={ () => {
+									__unstableMarkNextChangeAsNotPersistent();
+									updateBlockAttributes( props.clientId, {
+										templateLock: undefined,
+									} );
+									updateBlockListSettings( props.clientId, {
+										...getBlockListSettings(
+											props.clientId
+										),
+										templateLock: false,
+									} );
+									focusModeToRevert.current =
+										getSettings().focusMode;
+									updateSettings( { focusMode: true } );
+									__unstableSetTemporarilyEditingAsBlocks(
+										props.clientId
+									);
+									onClose();
+								} }
+							>
+								{ __( 'Modify' ) }
+							</MenuItem>
+						) }
+					</BlockSettingsMenuControls>
 				) }
-				<BlockControls group="other">
-					<ToolbarButton
-						onClick={ () => {
-							if ( isEditingAsBlocks && ! isContentLocked ) {
-								stopEditingAsBlock();
-							} else {
-								__unstableMarkNextChangeAsNotPersistent();
-								updateBlockAttributes( props.clientId, {
-									templateLock: undefined,
-								} );
-								updateBlockListSettings( props.clientId, {
-									...getBlockListSettings( props.clientId ),
-									templateLock: false,
-								} );
-								focusModeToRevert.current =
-									getSettings().focusMode;
-								updateSettings( { focusMode: true } );
-								__unstableSetTemporarilyEditingAsBlocks(
-									props.clientId
-								);
-							}
-						} }
-					>
-						{ isEditingAsBlocks && ! isContentLocked
-							? __( 'Done' )
-							: __( 'Modify' ) }
-					</ToolbarButton>
-				</BlockControls>
 				<BlockEdit
 					{ ...props }
 					className={ classnames(
@@ -156,6 +168,6 @@ export const withBlockControls = createHigherOrderComponent(
 
 addFilter(
 	'editor.BlockEdit',
-	'core/style/with-block-controls',
+	'core/content-lock-ui/with-block-controls',
 	withBlockControls
 );

package/src/hooks/dimensions.js

@@ -6,10 +6,14 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { __experimentalToolsPanelItem as ToolsPanelItem } from '@wordpress/components';
+import {
+	__experimentalToolsPanelItem as ToolsPanelItem,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
 import { Platform, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { getBlockSupport } from '@wordpress/blocks';
+import { useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -30,6 +34,13 @@ import {
 	resetMargin,
 	useIsMarginDisabled,
 } from './margin';
+import {
+	MinHeightEdit,
+	hasMinHeightSupport,
+	hasMinHeightValue,
+	resetMinHeight,
+	useIsMinHeightDisabled,
+} from './min-height';
 import {
 	PaddingEdit,
 	PaddingVisualizer,
@@ -38,16 +49,38 @@ import {
 	resetPadding,
 	useIsPaddingDisabled,
 } from './padding';
+import {
+	ChildLayoutEdit,
+	hasChildLayoutSupport,
+	hasChildLayoutValue,
+	resetChildLayout,
+	useIsChildLayoutDisabled,
+	childLayoutOrientation,
+} from './child-layout';
 import useSetting from '../components/use-setting';
+import { store as blockEditorStore } from '../store';
 
+export const DIMENSIONS_SUPPORT_KEY = 'dimensions';
 export const SPACING_SUPPORT_KEY = 'spacing';
 export const ALL_SIDES = [ 'top', 'right', 'bottom', 'left' ];
 export const AXIAL_SIDES = [ 'vertical', 'horizontal' ];
 
 function useVisualizerMouseOver() {
 	const [ isMouseOver, setIsMouseOver ] = useState( false );
-	const onMouseOver = () => setIsMouseOver( true );
-	const onMouseOut = () => setIsMouseOver( false );
+	const {
+		__experimentalHideBlockInterface: hideBlockInterface,
+		__experimentalShowBlockInterface: showBlockInterface,
+	} = useDispatch( blockEditorStore );
+	const onMouseOver = ( e ) => {
+		e.stopPropagation();
+		hideBlockInterface();
+		setIsMouseOver( true );
+	};
+	const onMouseOut = ( e ) => {
+		e.stopPropagation();
+		showBlockInterface();
+		setIsMouseOver( false );
+	};
 	return { isMouseOver, onMouseOver, onMouseOut };
 }
 
@@ -56,14 +89,16 @@ function useVisualizerMouseOver() {
  *
  * @param {Object} props Block props.
  *
- * @return {WPElement} Inspector controls for spacing support features.
+ * @return {WPElement} Inspector controls for dimensions and spacing support features.
  */
 export function DimensionsPanel( props ) {
 	const isGapDisabled = useIsGapDisabled( props );
 	const isPaddingDisabled = useIsPaddingDisabled( props );
 	const isMarginDisabled = useIsMarginDisabled( props );
+	const isMinHeightDisabled = useIsMinHeightDisabled( props );
+	const isChildLayoutDisabled = useIsChildLayoutDisabled( props );
 	const isDisabled = useIsDimensionsDisabled( props );
-	const isSupported = hasDimensionsSupport( props.name );
+	const isSupported = hasDimensionsSupport( props );
 	const spacingSizes = useSetting( 'spacing.spacingSizes' );
 	const paddingMouseOver = useVisualizerMouseOver();
 	const marginMouseOver = useVisualizerMouseOver();
@@ -72,26 +107,34 @@ export function DimensionsPanel( props ) {
 		return null;
 	}
 
+	const defaultDimensionsControls = getBlockSupport( props.name, [
+		DIMENSIONS_SUPPORT_KEY,
+		'__experimentalDefaultControls',
+	] );
+
 	const defaultSpacingControls = getBlockSupport( props.name, [
 		SPACING_SUPPORT_KEY,
 		'__experimentalDefaultControls',
 	] );
 
-	const createResetAllFilter = ( attribute ) => ( newAttributes ) => ( {
-		...newAttributes,
-		style: {
-			...newAttributes.style,
-			spacing: {
-				...newAttributes.style?.spacing,
-				[ attribute ]: undefined,
+	const createResetAllFilter =
+		( attribute, featureSet ) => ( newAttributes ) => ( {
+			...newAttributes,
+			style: {
+				...newAttributes.style,
+				[ featureSet ]: {
+					...newAttributes.style?.[ featureSet ],
+					[ attribute ]: undefined,
+				},
 			},
-		},
-	} );
+		} );
 
 	const spacingClassnames = classnames( {
 		'tools-panel-item-spacing': spacingSizes && spacingSizes.length > 0,
 	} );
 
+	const { __unstableParentLayout: parentLayout } = props;
+
 	return (
 		<>
 			<InspectorControls __experimentalGroup="dimensions">
@@ -101,7 +144,10 @@ export function DimensionsPanel( props ) {
 						hasValue={ () => hasPaddingValue( props ) }
 						label={ __( 'Padding' ) }
 						onDeselect={ () => resetPadding( props ) }
-						resetAllFilter={ createResetAllFilter( 'padding' ) }
+						resetAllFilter={ createResetAllFilter(
+							'padding',
+							'spacing'
+						) }
 						isShownByDefault={ defaultSpacingControls?.padding }
 						panelId={ props.clientId }
 					>
@@ -118,7 +164,10 @@ export function DimensionsPanel( props ) {
 						hasValue={ () => hasMarginValue( props ) }
 						label={ __( 'Margin' ) }
 						onDeselect={ () => resetMargin( props ) }
-						resetAllFilter={ createResetAllFilter( 'margin' ) }
+						resetAllFilter={ createResetAllFilter(
+							'margin',
+							'spacing'
+						) }
 						isShownByDefault={ defaultSpacingControls?.margin }
 						panelId={ props.clientId }
 					>
@@ -135,13 +184,50 @@ export function DimensionsPanel( props ) {
 						hasValue={ () => hasGapValue( props ) }
 						label={ __( 'Block spacing' ) }
 						onDeselect={ () => resetGap( props ) }
-						resetAllFilter={ createResetAllFilter( 'blockGap' ) }
+						resetAllFilter={ createResetAllFilter(
+							'blockGap',
+							'spacing'
+						) }
 						isShownByDefault={ defaultSpacingControls?.blockGap }
 						panelId={ props.clientId }
 					>
 						<GapEdit { ...props } />
 					</ToolsPanelItem>
 				) }
+				{ ! isMinHeightDisabled && (
+					<ToolsPanelItem
+						hasValue={ () => hasMinHeightValue( props ) }
+						label={ __( 'Min. height' ) }
+						onDeselect={ () => resetMinHeight( props ) }
+						resetAllFilter={ createResetAllFilter(
+							'minHeight',
+							'dimensions'
+						) }
+						isShownByDefault={
+							defaultDimensionsControls?.minHeight
+						}
+						panelId={ props.clientId }
+					>
+						<MinHeightEdit { ...props } />
+					</ToolsPanelItem>
+				) }
+				{ ! isChildLayoutDisabled && (
+					<VStack
+						as={ ToolsPanelItem }
+						spacing={ 2 }
+						hasValue={ () => hasChildLayoutValue( props ) }
+						label={ childLayoutOrientation( parentLayout ) }
+						onDeselect={ () => resetChildLayout( props ) }
+						resetAllFilter={ createResetAllFilter(
+							'selfStretch',
+							'layout'
+						) }
+						isShownByDefault={ false }
+						panelId={ props.clientId }
+					>
+						<ChildLayoutEdit { ...props } />
+					</VStack>
+				) }
 			</InspectorControls>
 			{ ! isPaddingDisabled && (
 				<PaddingVisualizer
@@ -162,19 +248,23 @@ export function DimensionsPanel( props ) {
 /**
  * Determine whether there is dimensions related block support.
  *
- * @param {string} blockName Block name.
+ * @param {Object} props Block props.
  *
  * @return {boolean} Whether there is support.
  */
-export function hasDimensionsSupport( blockName ) {
+export function hasDimensionsSupport( props ) {
 	if ( Platform.OS !== 'web' ) {
 		return false;
 	}
 
+	const { name: blockName } = props;
+
 	return (
 		hasGapSupport( blockName ) ||
+		hasMinHeightSupport( blockName ) ||
 		hasPaddingSupport( blockName ) ||
-		hasMarginSupport( blockName )
+		hasMarginSupport( blockName ) ||
+		hasChildLayoutSupport( props )
 	);
 }
 
@@ -187,10 +277,18 @@ export function hasDimensionsSupport( blockName ) {
  */
 const useIsDimensionsDisabled = ( props = {} ) => {
 	const gapDisabled = useIsGapDisabled( props );
+	const minHeightDisabled = useIsMinHeightDisabled( props );
 	const paddingDisabled = useIsPaddingDisabled( props );
 	const marginDisabled = useIsMarginDisabled( props );
+	const childLayoutDisabled = useIsChildLayoutDisabled( props );
 
-	return gapDisabled && paddingDisabled && marginDisabled;
+	return (
+		gapDisabled &&
+		minHeightDisabled &&
+		paddingDisabled &&
+		marginDisabled &&
+		childLayoutDisabled
+	);
 };
 
 /**