@wordpress/block-editor 12.16.0 → 12.16.1-next.79a6196f.0

package/src/hooks/background.js

@@ -10,7 +10,12 @@ import { isBlobURL } from '@wordpress/blob';
 import { getBlockSupport } from '@wordpress/blocks';
 import { focus } from '@wordpress/dom';
 import {
+	ToggleControl,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 	__experimentalToolsPanelItem as ToolsPanelItem,
+	__experimentalUnitControl as UnitControl,
+	__experimentalVStack as VStack,
 	DropZone,
 	FlexItem,
 	MenuItem,
@@ -24,7 +29,6 @@ import { Platform, useCallback, useRef } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 import { getFilename } from '@wordpress/url';
-import { pure } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -53,6 +57,17 @@ export function hasBackgroundImageValue( style ) {
 	return hasValue;
 }
 
+/**
+ * Checks if there is a current value in the background size block support
+ * attributes.
+ *
+ * @param {Object} style Style attribute.
+ * @return {boolean}     Whether or not the block has a background size value set.
+ */
+export function hasBackgroundSizeValue( style ) {
+	return style?.background?.backgroundSize !== undefined;
+}
+
 /**
  * Determine whether there is block support for background.
  *
@@ -73,7 +88,11 @@ export function hasBackgroundSupport( blockName, feature = 'any' ) {
 	}
 
 	if ( feature === 'any' ) {
-		return !! support?.backgroundImage;
+		return (
+			!! support?.backgroundImage ||
+			!! support?.backgroundSize ||
+			!! support?.backgroundRepeat
+		);
 	}
 
 	return !! support?.[ feature ];
@@ -98,6 +117,37 @@ export function resetBackgroundImage( style = {}, setAttributes ) {
 	} );
 }
 
+/**
+ * Resets the background size block support attributes. This can be used when disabling
+ * the background size controls for a block via a `ToolsPanel`.
+ *
+ * @param {Object}   style         Style attribute.
+ * @param {Function} setAttributes Function to set block's attributes.
+ */
+function resetBackgroundSize( style = {}, setAttributes ) {
+	setAttributes( {
+		style: cleanEmptyObject( {
+			...style,
+			background: {
+				...style?.background,
+				backgroundRepeat: undefined,
+				backgroundSize: undefined,
+			},
+		} ),
+	} );
+}
+
+/**
+ * Generates a CSS class name if an background image is set.
+ *
+ * @param {Object} style A block's style attribute.
+ *
+ * @return {string} CSS class name.
+ */
+export function getBackgroundImageClasses( style ) {
+	return hasBackgroundImageValue( style ) ? 'has-background' : '';
+}
+
 function InspectorImagePreview( { label, filename, url: imgUrl } ) {
 	const imgLabel = label || getFilename( imgUrl );
 	return (
@@ -143,22 +193,27 @@ function InspectorImagePreview( { label, filename, url: imgUrl } ) {
 	);
 }
 
-function BackgroundImagePanelItem( { clientId, setAttributes } ) {
-	const style = useSelect(
-		( select ) =>
-			select( blockEditorStore ).getBlockAttributes( clientId )?.style,
+function BackgroundImagePanelItem( {
+	clientId,
+	isShownByDefault,
+	setAttributes,
+} ) {
+	const { style, mediaUpload } = useSelect(
+		( select ) => {
+			const { getBlockAttributes, getSettings } =
+				select( blockEditorStore );
+
+			return {
+				style: getBlockAttributes( clientId )?.style,
+				mediaUpload: getSettings().mediaUpload,
+			};
+		},
 		[ clientId ]
 	);
 	const { id, title, url } = style?.background?.backgroundImage || {};
 
 	const replaceContainerRef = useRef();
 
-	const { mediaUpload } = useSelect( ( select ) => {
-		return {
-			mediaUpload: select( blockEditorStore ).getSettings().mediaUpload,
-		};
-	} );
-
 	const { createErrorNotice } = useDispatch( noticesStore );
 	const onUploadError = ( message ) => {
 		createErrorNotice( message, { type: 'snackbar' } );
@@ -252,7 +307,7 @@ function BackgroundImagePanelItem( { clientId, setAttributes } ) {
 			hasValue={ () => hasValue }
 			label={ __( 'Background image' ) }
 			onDeselect={ () => resetBackgroundImage( style, setAttributes ) }
-			isShownByDefault={ true }
+			isShownByDefault={ isShownByDefault }
 			resetAllFilter={ resetAllFilter }
 			panelId={ clientId }
 		>
@@ -302,8 +357,172 @@ function BackgroundImagePanelItem( { clientId, setAttributes } ) {
 	);
 }
 
-function BackgroundImagePanelPure( props ) {
-	const [ backgroundImage ] = useSettings( 'background.backgroundImage' );
+function backgroundSizeHelpText( value ) {
+	if ( value === 'cover' || value === undefined ) {
+		return __( 'Stretch image to cover the block.' );
+	}
+	if ( value === 'contain' ) {
+		return __( 'Resize image to fit without cropping.' );
+	}
+	return __( 'Set a fixed width.' );
+}
+
+function BackgroundSizePanelItem( {
+	clientId,
+	isShownByDefault,
+	setAttributes,
+} ) {
+	const style = useSelect(
+		( select ) =>
+			select( blockEditorStore ).getBlockAttributes( clientId )?.style,
+		[ clientId ]
+	);
+
+	const sizeValue = style?.background?.backgroundSize;
+	const repeatValue = style?.background?.backgroundRepeat;
+
+	// An `undefined` value is treated as `cover` by the toggle group control.
+	// An empty string is treated as `auto` by the toggle group control. This
+	// allows a user to select "Size" and then enter a custom value, with an
+	// empty value being treated as `auto`.
+	const currentValueForToggle =
+		( sizeValue !== undefined &&
+			sizeValue !== 'cover' &&
+			sizeValue !== 'contain' ) ||
+		sizeValue === ''
+			? 'auto'
+			: sizeValue || 'cover';
+
+	// If the current value is `cover` and the repeat value is `undefined`, then
+	// the toggle should be unchecked as the default state. Otherwise, the toggle
+	// should reflect the current repeat value.
+	const repeatCheckedValue =
+		repeatValue === 'no-repeat' ||
+		( currentValueForToggle === 'cover' && repeatValue === undefined )
+			? false
+			: true;
+
+	const hasValue = hasBackgroundSizeValue( style );
+
+	const resetAllFilter = useCallback( ( previousValue ) => {
+		return {
+			...previousValue,
+			style: {
+				...previousValue.style,
+				background: {
+					...previousValue.style?.background,
+					backgroundRepeat: undefined,
+					backgroundSize: undefined,
+				},
+			},
+		};
+	}, [] );
+
+	const updateBackgroundSize = ( next ) => {
+		// When switching to 'contain' toggle the repeat off.
+		let nextRepeat = repeatValue;
+
+		if ( next === 'contain' ) {
+			nextRepeat = 'no-repeat';
+		}
+
+		if (
+			( currentValueForToggle === 'cover' ||
+				currentValueForToggle === 'contain' ) &&
+			next === 'auto'
+		) {
+			nextRepeat = undefined;
+		}
+
+		setAttributes( {
+			style: cleanEmptyObject( {
+				...style,
+				background: {
+					...style?.background,
+					backgroundRepeat: nextRepeat,
+					backgroundSize: next,
+				},
+			} ),
+		} );
+	};
+
+	const toggleIsRepeated = () => {
+		setAttributes( {
+			style: cleanEmptyObject( {
+				...style,
+				background: {
+					...style?.background,
+					backgroundRepeat:
+						repeatCheckedValue === true ? 'no-repeat' : undefined,
+				},
+			} ),
+		} );
+	};
+
+	return (
+		<VStack
+			as={ ToolsPanelItem }
+			spacing={ 2 }
+			className="single-column"
+			hasValue={ () => hasValue }
+			label={ __( 'Size' ) }
+			onDeselect={ () => resetBackgroundSize( style, setAttributes ) }
+			isShownByDefault={ isShownByDefault }
+			resetAllFilter={ resetAllFilter }
+			panelId={ clientId }
+		>
+			<ToggleGroupControl
+				__nextHasNoMarginBottom
+				size={ '__unstable-large' }
+				label={ __( 'Size' ) }
+				value={ currentValueForToggle }
+				onChange={ updateBackgroundSize }
+				isBlock={ true }
+				help={ backgroundSizeHelpText( sizeValue ) }
+			>
+				<ToggleGroupControlOption
+					key={ 'cover' }
+					value={ 'cover' }
+					label={ __( 'Cover' ) }
+				/>
+				<ToggleGroupControlOption
+					key={ 'contain' }
+					value={ 'contain' }
+					label={ __( 'Contain' ) }
+				/>
+				<ToggleGroupControlOption
+					key={ 'fixed' }
+					value={ 'auto' }
+					label={ __( 'Fixed' ) }
+				/>
+			</ToggleGroupControl>
+			{ sizeValue !== undefined &&
+			sizeValue !== 'cover' &&
+			sizeValue !== 'contain' ? (
+				<UnitControl
+					size={ '__unstable-large' }
+					onChange={ updateBackgroundSize }
+					value={ sizeValue }
+				/>
+			) : null }
+			{ currentValueForToggle !== 'cover' && (
+				<ToggleControl
+					__nextHasNoMarginBottom
+					label={ __( 'Repeat image' ) }
+					checked={ repeatCheckedValue }
+					onChange={ toggleIsRepeated }
+				/>
+			) }
+		</VStack>
+	);
+}
+
+export function BackgroundImagePanel( props ) {
+	const [ backgroundImage, backgroundSize ] = useSettings(
+		'background.backgroundImage',
+		'background.backgroundSize'
+	);
+
 	if (
 		! backgroundImage ||
 		! hasBackgroundSupport( props.name, 'backgroundImage' )
@@ -311,14 +530,27 @@ function BackgroundImagePanelPure( props ) {
 		return null;
 	}
 
+	const showBackgroundSize = !! (
+		backgroundSize && hasBackgroundSupport( props.name, 'backgroundSize' )
+	);
+
+	const defaultControls = getBlockSupport( props.name, [
+		BACKGROUND_SUPPORT_KEY,
+		'__experimentalDefaultControls',
+	] );
+
 	return (
 		<InspectorControls group="background">
-			<BackgroundImagePanelItem { ...props } />
+			<BackgroundImagePanelItem
+				isShownByDefault={ defaultControls?.backgroundImage }
+				{ ...props }
+			/>
+			{ showBackgroundSize && (
+				<BackgroundSizePanelItem
+					isShownByDefault={ defaultControls?.backgroundSize }
+					{ ...props }
+				/>
+			) }
 		</InspectorControls>
 	);
 }
-
-// We don't want block controls to re-render when typing inside a block. `pure`
-// will prevent re-renders unless props change, so only pass the needed props
-// and not the whole attributes object.
-export const BackgroundImagePanel = pure( BackgroundImagePanelPure );

package/src/hooks/border.js

@@ -8,7 +8,6 @@ import classnames from 'classnames';
  */
 import { getBlockSupport } from '@wordpress/blocks';
 import { __experimentalHasSplitBorders as hasSplitBorders } from '@wordpress/components';
-import { pure } from '@wordpress/compose';
 import { Platform, useCallback, useMemo } from '@wordpress/element';
 import { addFilter } from '@wordpress/hooks';
 import { useSelect } from '@wordpress/data';
@@ -133,7 +132,7 @@ function BordersInspectorControl( { children, resetAllFilter } ) {
 	);
 }
 
-function BorderPanelPure( { clientId, name, setAttributes, settings } ) {
+export function BorderPanel( { clientId, name, setAttributes, settings } ) {
 	const isEnabled = useHasBorderPanel( settings );
 	function selector( select ) {
 		const { style, borderColor } =
@@ -170,11 +169,6 @@ function BorderPanelPure( { clientId, name, setAttributes, settings } ) {
 	);
 }
 
-// We don't want block controls to re-render when typing inside a block. `pure`
-// will prevent re-renders unless props change, so only pass the needed props
-// and not the whole attributes object.
-export const BorderPanel = pure( BorderPanelPure );
-
 /**
  * Determine whether there is block support for border properties.
  *
@@ -348,6 +342,7 @@ function useBlockProps( { name, borderColor, style } ) {
 
 export default {
 	useBlockProps,
+	addSaveProps,
 	attributeKeys: [ 'borderColor', 'style' ],
 	hasSupport( name ) {
 		return hasBorderSupport( name, 'color' );
@@ -359,9 +354,3 @@ addFilter(
 	'core/border/addAttributes',
 	addAttributes
 );
-
-addFilter(
-	'blocks.getSaveContent.extraProps',
-	'core/border/addSaveProps',
-	addSaveProps
-);

package/src/hooks/color.js

@@ -9,7 +9,6 @@ import classnames from 'classnames';
 import { addFilter } from '@wordpress/hooks';
 import { getBlockSupport } from '@wordpress/blocks';
 import { useMemo, Platform, useCallback } from '@wordpress/element';
-import { pure } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
 
 /**
@@ -25,6 +24,7 @@ import {
 	transformStyles,
 	shouldSkipSerialization,
 } from './utils';
+import { getBackgroundImageClasses } from './background';
 import { useSettings } from '../components/use-settings';
 import InspectorControls from '../components/inspector-controls';
 import {
@@ -267,7 +267,7 @@ function ColorInspectorControl( { children, resetAllFilter } ) {
 	);
 }
 
-function ColorEditPure( { clientId, name, setAttributes, settings } ) {
+export function ColorEdit( { clientId, name, setAttributes, settings } ) {
 	const isEnabled = useHasColorPanel( settings );
 	function selector( select ) {
 		const { style, textColor, backgroundColor, gradient } =
@@ -336,11 +336,6 @@ function ColorEditPure( { clientId, name, setAttributes, settings } ) {
 	);
 }
 
-// We don't want block controls to re-render when typing inside a block. `pure`
-// will prevent re-renders unless props change, so only pass the needed props
-// and not the whole attributes object.
-export const ColorEdit = pure( ColorEditPure );
-
 function useBlockProps( {
 	name,
 	backgroundColor,
@@ -389,16 +384,32 @@ function useBlockProps( {
 		)?.color;
 	}
 
-	return addSaveProps( { style: extraStyles }, name, {
+	const saveProps = addSaveProps( { style: extraStyles }, name, {
 		textColor,
 		backgroundColor,
 		gradient,
 		style,
 	} );
+
+	const hasBackgroundValue =
+		backgroundColor ||
+		style?.color?.background ||
+		gradient ||
+		style?.color?.gradient;
+
+	return {
+		...saveProps,
+		className: classnames(
+			saveProps.className,
+			// Add background image classes in the editor, if not already handled by background color values.
+			! hasBackgroundValue && getBackgroundImageClasses( style )
+		),
+	};
 }
 
 export default {
 	useBlockProps,
+	addSaveProps,
 	attributeKeys: [ 'backgroundColor', 'textColor', 'gradient', 'style' ],
 	hasSupport: hasColorSupport,
 };
@@ -437,12 +448,6 @@ addFilter(
 	addAttributes
 );
 
-addFilter(
-	'blocks.getSaveContent.extraProps',
-	'core/color/addSaveProps',
-	addSaveProps
-);
-
 addFilter(
 	'blocks.switchToBlockType.transformedBlock',
 	'core/color/addTransforms',

package/src/hooks/custom-class-name.js

@@ -65,6 +65,7 @@ function CustomClassNameControlsPure( { className, setAttributes } ) {
 
 export default {
 	edit: CustomClassNameControlsPure,
+	addSaveProps,
 	attributeKeys: [ 'className' ],
 	hasSupport( name ) {
 		return hasBlockSupport( name, 'customClassName', true );
@@ -140,11 +141,6 @@ addFilter(
 	'core/editor/custom-class-name/attribute',
 	addAttribute
 );
-addFilter(
-	'blocks.getSaveContent.extraProps',
-	'core/editor/custom-class-name/save-props',
-	addSaveProps
-);
 
 addFilter(
 	'blocks.switchToBlockType.transformedBlock',

package/src/hooks/custom-class-name.native.js

@@ -60,8 +60,11 @@ addFilter(
 	'core/custom-class-name/attribute',
 	addAttribute
 );
-addFilter(
-	'blocks.getSaveContent.extraProps',
-	'core/custom-class-name/save-props',
-	addSaveProps
-);
+
+export default {
+	addSaveProps,
+	attributeKeys: [ 'className' ],
+	hasSupport( name ) {
+		return hasBlockSupport( name, 'customClassName', true );
+	},
+};

package/src/hooks/dimensions.js

@@ -5,7 +5,6 @@ import { useState, useEffect, useCallback } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { getBlockSupport } from '@wordpress/blocks';
 import deprecated from '@wordpress/deprecated';
-import { pure } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -66,7 +65,7 @@ function DimensionsInspectorControl( { children, resetAllFilter } ) {
 	);
 }
 
-function DimensionsPanelPure( { clientId, name, setAttributes, settings } ) {
+export function DimensionsPanel( { clientId, name, setAttributes, settings } ) {
 	const isEnabled = useHasDimensionsPanel( settings );
 	const value = useSelect(
 		( select ) =>
@@ -126,11 +125,6 @@ function DimensionsPanelPure( { clientId, name, setAttributes, settings } ) {
 	);
 }
 
-// We don't want block controls to re-render when typing inside a block. `pure`
-// will prevent re-renders unless props change, so only pass the needed props
-// and not the whole attributes object.
-export const DimensionsPanel = pure( DimensionsPanelPure );
-
 /**
  * @deprecated
  */

package/src/hooks/font-family.js

@@ -4,13 +4,14 @@
 import { addFilter } from '@wordpress/hooks';
 import { hasBlockSupport } from '@wordpress/blocks';
 import TokenList from '@wordpress/token-list';
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import { shouldSkipSerialization } from './utils';
 import { TYPOGRAPHY_SUPPORT_KEY } from './typography';
-import { kebabCase } from '../utils/object';
+import { unlock } from '../lock-unlock';
 
 export const FONT_FAMILY_SUPPORT_KEY = 'typography.__experimentalFontFamily';
 
@@ -67,6 +68,7 @@ function addSaveProps( props, blockType, attributes ) {
 
 	// Use TokenList to dedupe classes.
 	const classes = new TokenList( props.className );
+	const { kebabCase } = unlock( componentsPrivateApis );
 	classes.add( `has-${ kebabCase( attributes?.fontFamily ) }-font-family` );
 	const newClassName = classes.value;
 	props.className = newClassName ? newClassName : undefined;
@@ -80,6 +82,7 @@ function useBlockProps( { name, fontFamily } ) {
 
 export default {
 	useBlockProps,
+	addSaveProps,
 	attributeKeys: [ 'fontFamily' ],
 	hasSupport( name ) {
 		return hasBlockSupport( name, FONT_FAMILY_SUPPORT_KEY );
@@ -103,9 +106,3 @@ addFilter(
 	'core/fontFamily/addAttribute',
 	addAttributes
 );
-
-addFilter(
-	'blocks.getSaveContent.extraProps',
-	'core/fontFamily/addSaveProps',
-	addSaveProps
-);

package/src/hooks/font-size.js

@@ -211,6 +211,7 @@ function useBlockProps( { name, fontSize, style } ) {
 
 export default {
 	useBlockProps,
+	addSaveProps,
 	attributeKeys: [ 'fontSize', 'style' ],
 	hasSupport( name ) {
 		return hasBlockSupport( name, FONT_SIZE_SUPPORT_KEY );
@@ -245,12 +246,6 @@ addFilter(
 	addAttributes
 );
 
-addFilter(
-	'blocks.getSaveContent.extraProps',
-	'core/font/addSaveProps',
-	addSaveProps
-);
-
 addFilter(
 	'blocks.switchToBlockType.transformedBlock',
 	'core/font-size/addTransforms',

package/src/hooks/index.js

@@ -1,12 +1,16 @@
 /**
  * Internal dependencies
  */
-import { createBlockEditFilter, createBlockListBlockFilter } from './utils';
+import {
+	createBlockEditFilter,
+	createBlockListBlockFilter,
+	createBlockSaveFilter,
+} from './utils';
 import './compat';
 import align from './align';
 import './lock';
 import anchor from './anchor';
-import './aria-label';
+import ariaLabel from './aria-label';
 import customClassName from './custom-class-name';
 import './generated-class-name';
 import style from './style';
@@ -19,9 +23,8 @@ import border from './border';
 import position from './position';
 import layout from './layout';
 import childLayout from './layout-child';
-import './content-lock-ui';
+import contentLockUI from './content-lock-ui';
 import './metadata';
-import customFields from './custom-fields';
 import blockHooks from './block-hooks';
 import blockRenaming from './block-renaming';
 
@@ -34,7 +37,7 @@ createBlockEditFilter(
 		duotone,
 		position,
 		layout,
-		window.__experimentalConnections ? customFields : null,
+		contentLockUI,
 		blockHooks,
 		blockRenaming,
 	].filter( Boolean )
@@ -50,6 +53,17 @@ createBlockListBlockFilter( [
 	position,
 	childLayout,
 ] );
+createBlockSaveFilter( [
+	align,
+	anchor,
+	ariaLabel,
+	customClassName,
+	border,
+	color,
+	style,
+	fontFamily,
+	fontSize,
+] );
 
 export { useCustomSides } from './dimensions';
 export { useLayoutClasses, useLayoutStyles } from './layout';

package/src/hooks/index.native.js

@@ -1,18 +1,31 @@
 /**
  * Internal dependencies
  */
-import { createBlockEditFilter } from './utils';
+import {
+	createBlockEditFilter,
+	createBlockListBlockFilter,
+	createBlockSaveFilter,
+} from './utils';
 import './compat';
 import align from './align';
 import anchor from './anchor';
-import './custom-class-name';
+import customClassName from './custom-class-name';
 import './generated-class-name';
 import style from './style';
-import './color';
-import './font-size';
+import color from './color';
+import fontSize from './font-size';
 import './layout';
 
 createBlockEditFilter( [ align, anchor, style ] );
+createBlockListBlockFilter( [ align, style, color, fontSize ] );
+createBlockSaveFilter( [
+	align,
+	anchor,
+	customClassName,
+	color,
+	style,
+	fontSize,
+] );
 
 export { getBorderClassesAndStyles, useBorderProps } from './use-border-props';
 export { getColorClassesAndStyles, useColorProps } from './use-color-props';