@wordpress/block-editor 12.18.1 → 12.19.0

package/src/hooks/background.js

@@ -18,6 +18,7 @@ import {
 	__experimentalVStack as VStack,
 	DropZone,
 	FlexItem,
+	FocalPointPicker,
 	MenuItem,
 	VisuallyHidden,
 	__experimentalItemGroup as ItemGroup,
@@ -59,13 +60,17 @@ export function hasBackgroundImageValue( style ) {
 
 /**
  * Checks if there is a current value in the background size block support
- * attributes.
+ * attributes. Background size values include background size as well
+ * as background position.
  *
  * @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;
+	return (
+		style?.background?.backgroundPosition !== undefined ||
+		style?.background?.backgroundSize !== undefined
+	);
 }
 
 /**
@@ -130,6 +135,7 @@ function resetBackgroundSize( style = {}, setAttributes ) {
 			...style,
 			background: {
 				...style?.background,
+				backgroundPosition: undefined,
 				backgroundRepeat: undefined,
 				backgroundSize: undefined,
 			},
@@ -359,14 +365,34 @@ function BackgroundImagePanelItem( {
 
 function backgroundSizeHelpText( value ) {
 	if ( value === 'cover' || value === undefined ) {
-		return __( 'Stretch image to cover the block.' );
+		return __( 'Image covers the space evenly.' );
 	}
 	if ( value === 'contain' ) {
-		return __( 'Resize image to fit without cropping.' );
+		return __( 'Image is contained without distortion.' );
 	}
-	return __( 'Set a fixed width.' );
+	return __( 'Specify a fixed width.' );
 }
 
+export const coordsToBackgroundPosition = ( value ) => {
+	if ( ! value || isNaN( value.x ) || isNaN( value.y ) ) {
+		return undefined;
+	}
+
+	return `${ value.x * 100 }% ${ value.y * 100 }%`;
+};
+
+export const backgroundPositionToCoords = ( value ) => {
+	if ( ! value ) {
+		return { x: undefined, y: undefined };
+	}
+
+	let [ x, y ] = value.split( ' ' ).map( ( v ) => parseFloat( v ) / 100 );
+	x = isNaN( x ) ? undefined : x;
+	y = isNaN( y ) ? x : y;
+
+	return { x, y };
+};
+
 function BackgroundSizePanelItem( {
 	clientId,
 	isShownByDefault,
@@ -446,6 +472,18 @@ function BackgroundSizePanelItem( {
 		} );
 	};
 
+	const updateBackgroundPosition = ( next ) => {
+		setAttributes( {
+			style: cleanEmptyObject( {
+				...style,
+				background: {
+					...style?.background,
+					backgroundPosition: coordsToBackgroundPosition( next ),
+				},
+			} ),
+		} );
+	};
+
 	const toggleIsRepeated = () => {
 		setAttributes( {
 			style: cleanEmptyObject( {
@@ -471,8 +509,16 @@ function BackgroundSizePanelItem( {
 			resetAllFilter={ resetAllFilter }
 			panelId={ clientId }
 		>
+			<FocalPointPicker
+				__next40pxDefaultSize
+				label={ __( 'Position' ) }
+				url={ style?.background?.backgroundImage?.url }
+				value={ backgroundPositionToCoords(
+					style?.background?.backgroundPosition
+				) }
+				onChange={ updateBackgroundPosition }
+			/>
 			<ToggleGroupControl
-				__nextHasNoMarginBottom
 				size={ '__unstable-large' }
 				label={ __( 'Size' ) }
 				value={ currentValueForToggle }
@@ -507,8 +553,7 @@ function BackgroundSizePanelItem( {
 			) : null }
 			{ currentValueForToggle !== 'cover' && (
 				<ToggleControl
-					__nextHasNoMarginBottom
-					label={ __( 'Repeat image' ) }
+					label={ __( 'Repeat' ) }
 					checked={ repeatCheckedValue }
 					onChange={ toggleIsRepeated }
 				/>

package/src/hooks/border.js

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { getBlockSupport } from '@wordpress/blocks';
+import { hasBlockSupport, getBlockSupport } from '@wordpress/blocks';
 import { __experimentalHasSplitBorders as hasSplitBorders } from '@wordpress/components';
 import { Platform, useCallback, useMemo } from '@wordpress/element';
 import { addFilter } from '@wordpress/hooks';
@@ -24,8 +24,10 @@ import {
 	BorderPanel as StylesBorderPanel,
 } from '../components/global-styles';
 import { store as blockEditorStore } from '../store';
+import { __ } from '@wordpress/i18n';
 
 export const BORDER_SUPPORT_KEY = '__experimentalBorder';
+export const SHADOW_SUPPORT_KEY = 'shadow';
 
 const getColorByProperty = ( colors, property, value ) => {
 	let matchedColor;
@@ -109,7 +111,7 @@ function attributesToStyle( attributes ) {
 	};
 }
 
-function BordersInspectorControl( { children, resetAllFilter } ) {
+function BordersInspectorControl( { label, children, resetAllFilter } ) {
 	const attributesResetAllFilter = useCallback(
 		( attributes ) => {
 			const existingStyle = attributesToStyle( attributes );
@@ -126,6 +128,7 @@ function BordersInspectorControl( { children, resetAllFilter } ) {
 		<InspectorControls
 			group="border"
 			resetAllFilter={ attributesResetAllFilter }
+			label={ label }
 		>
 			{ children }
 		</InspectorControls>
@@ -152,10 +155,16 @@ export function BorderPanel( { clientId, name, setAttributes, settings } ) {
 		return null;
 	}
 
-	const defaultControls = getBlockSupport( name, [
-		BORDER_SUPPORT_KEY,
-		'__experimentalDefaultControls',
-	] );
+	const defaultControls = {
+		...getBlockSupport( name, [
+			BORDER_SUPPORT_KEY,
+			'__experimentalDefaultControls',
+		] ),
+		...getBlockSupport( name, [
+			SHADOW_SUPPORT_KEY,
+			'__experimentalDefaultControls',
+		] ),
+	};
 
 	return (
 		<StylesBorderPanel
@@ -200,6 +209,38 @@ export function hasBorderSupport( blockName, feature = 'any' ) {
 	return !! support?.[ feature ];
 }
 
+/**
+ * Determine whether there is block support for shadow properties.
+ *
+ * @param {string} blockName Block name.
+ *
+ * @return {boolean} Whether there is support.
+ */
+export function hasShadowSupport( blockName ) {
+	return hasBlockSupport( blockName, SHADOW_SUPPORT_KEY );
+}
+
+export function getBorderPanelLabel( {
+	blockName,
+	hasBorderControl,
+	hasShadowControl,
+} = {} ) {
+	if ( ! hasBorderControl && ! hasShadowControl && blockName ) {
+		hasBorderControl = hasBorderSupport( blockName );
+		hasShadowControl = hasShadowSupport( blockName );
+	}
+
+	if ( hasBorderControl && hasShadowControl ) {
+		return __( 'Border & Shadow' );
+	}
+
+	if ( hasShadowControl ) {
+		return __( 'Shadow' );
+	}
+
+	return __( 'Border' );
+}
+
 /**
  * Returns a new style object where the specified border attribute has been
  * removed.

package/src/hooks/font-size.js

@@ -4,7 +4,6 @@
 import { addFilter } from '@wordpress/hooks';
 import { hasBlockSupport } from '@wordpress/blocks';
 import TokenList from '@wordpress/token-list';
-import { select } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -22,7 +21,6 @@ import {
 	shouldSkipSerialization,
 } from './utils';
 import { useSettings } from '../components/use-settings';
-import { store as blockEditorStore } from '../store';
 import {
 	getTypographyFontSizeValue,
 	getFluidTypographyOptionsFromSettings,
@@ -133,7 +131,6 @@ export function FontSizeEdit( props ) {
 			withReset={ false }
 			withSlider
 			size="__unstable-large"
-			__nextHasNoMarginBottom
 		/>
 	);
 }
@@ -154,58 +151,61 @@ export function useIsFontSizeDisabled( { name: blockName } = {} ) {
 }
 
 function useBlockProps( { name, fontSize, style } ) {
-	const [ fontSizes ] = useSettings( 'typography.fontSizes' );
+	const [ fontSizes, fluidTypographySettings, layoutSettings ] = useSettings(
+		'typography.fontSizes',
+		'typography.fluid',
+		'layout'
+	);
 
-	// Only add inline styles if the block supports font sizes,
-	// doesn't skip serialization of font sizes,
-	// doesn't already have an inline font size,
-	// and does have a class to extract the font size from.
+	/*
+	 * Only add inline styles if the block supports font sizes,
+	 * doesn't skip serialization of font sizes,
+	 * and has either a custom font size or a preset font size.
+	 */
 	if (
 		! hasBlockSupport( name, FONT_SIZE_SUPPORT_KEY ) ||
 		shouldSkipSerialization( name, TYPOGRAPHY_SUPPORT_KEY, 'fontSize' ) ||
-		! fontSize
+		( ! fontSize && ! style?.typography?.fontSize )
 	) {
 		return;
 	}
 
-	let props = {};
+	let props;
+
+	if ( style?.typography?.fontSize ) {
+		const fluidSettings = getFluidTypographyOptionsFromSettings( {
+			typography: {
+				fluid: fluidTypographySettings,
+			},
+			layout: layoutSettings,
+		} );
 
-	if ( ! style?.typography?.fontSize ) {
 		props = {
 			style: {
-				fontSize: getFontSize(
-					fontSizes,
-					fontSize,
-					style?.typography?.fontSize
-				).size,
+				fontSize: getTypographyFontSizeValue(
+					{ size: style.typography.fontSize },
+					fluidSettings
+				),
 			},
 		};
 	}
 
-	// TODO: This sucks! We should be using useSetting( 'typography.fluid' )
-	// or even useSelect( blockEditorStore ). We can't do either here
-	// because getEditWrapperProps is a plain JavaScript function called by
-	// BlockListBlock and not a React component rendered within
-	// BlockListContext.Provider. If we set fontSize using editor.
-	// BlockListBlock instead of using getEditWrapperProps then the value is
-	// clobbered when the core/style/addEditProps filter runs.
-
-	// TODO: We can do the thing above now.
-	const fluidTypographySettings = getFluidTypographyOptionsFromSettings(
-		select( blockEditorStore ).getSettings().__experimentalFeatures
-	);
-
 	if ( fontSize ) {
 		props = {
 			style: {
-				fontSize: getTypographyFontSizeValue(
-					{ size: fontSize },
-					fluidTypographySettings
-				),
+				fontSize: getFontSize(
+					fontSizes,
+					fontSize,
+					style?.typography?.fontSize
+				).size,
 			},
 		};
 	}
 
+	if ( ! props ) {
+		return;
+	}
+
 	return addSaveProps( props, name, { fontSize } );
 }
 

package/src/hooks/index.js

@@ -71,7 +71,7 @@ createBlockSaveFilter( [
 export { useCustomSides } from './dimensions';
 export { useLayoutClasses, useLayoutStyles } from './layout';
 export { getBorderClassesAndStyles, useBorderProps } from './use-border-props';
-export { getShadowClassesAndStyles, useShadowProps } from './use-shadow-props';
+export { getShadowClassesAndStyles } from './use-shadow-props';
 export { getColorClassesAndStyles, useColorProps } from './use-color-props';
 export { getSpacingClassesAndStyles } from './use-spacing-props';
 export { getTypographyClassesAndStyles } from './use-typography-props';

package/src/hooks/index.native.js

@@ -28,7 +28,7 @@ createBlockSaveFilter( [
 ] );
 
 export { getBorderClassesAndStyles, useBorderProps } from './use-border-props';
-export { getShadowClassesAndStyles, useShadowProps } from './use-shadow-props';
+export { getShadowClassesAndStyles } from './use-shadow-props';
 export { getColorClassesAndStyles, useColorProps } from './use-color-props';
 export { getSpacingClassesAndStyles } from './use-spacing-props';
 export { useCachedTruthy } from './use-cached-truthy';

package/src/hooks/style.js

@@ -15,7 +15,7 @@ import { getCSSRules, compileCSS } from '@wordpress/style-engine';
  * Internal dependencies
  */
 import { BACKGROUND_SUPPORT_KEY, BackgroundImagePanel } from './background';
-import { BORDER_SUPPORT_KEY, BorderPanel } from './border';
+import { BORDER_SUPPORT_KEY, BorderPanel, SHADOW_SUPPORT_KEY } from './border';
 import { COLOR_SUPPORT_KEY, ColorEdit } from './color';
 import {
 	TypographyPanel,
@@ -27,11 +27,6 @@ import {
 	SPACING_SUPPORT_KEY,
 	DimensionsPanel,
 } from './dimensions';
-import {
-	EFFECTS_SUPPORT_KEYS,
-	SHADOW_SUPPORT_KEY,
-	EffectsPanel,
-} from './effects';
 import {
 	shouldSkipSerialization,
 	useStyleOverride,
@@ -42,12 +37,12 @@ import { useBlockEditingMode } from '../components/block-editing-mode';
 
 const styleSupportKeys = [
 	...TYPOGRAPHY_SUPPORT_KEYS,
-	...EFFECTS_SUPPORT_KEYS,
 	BORDER_SUPPORT_KEY,
 	COLOR_SUPPORT_KEY,
 	DIMENSIONS_SUPPORT_KEY,
 	BACKGROUND_SUPPORT_KEY,
 	SPACING_SUPPORT_KEY,
+	SHADOW_SUPPORT_KEY,
 ];
 
 const hasStyleSupport = ( nameOrType ) =>
@@ -116,7 +111,9 @@ const skipSerializationPathsEdit = {
 	[ `${ SPACING_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [
 		SPACING_SUPPORT_KEY,
 	],
-	[ `${ SHADOW_SUPPORT_KEY }` ]: [ SHADOW_SUPPORT_KEY ],
+	[ `${ SHADOW_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [
+		SHADOW_SUPPORT_KEY,
+	],
 };
 
 /**
@@ -347,7 +344,6 @@ function BlockStyleControls( {
 			<TypographyPanel { ...passedProps } />
 			<BorderPanel { ...passedProps } />
 			<DimensionsPanel { ...passedProps } />
-			<EffectsPanel { ...passedProps } />
 		</>
 	);
 }

package/src/hooks/test/background.js

@@ -0,0 +1,50 @@
+/**
+ * Internal dependencies
+ */
+
+import {
+	backgroundPositionToCoords,
+	coordsToBackgroundPosition,
+} from '../background';
+
+describe( 'backgroundPositionToCoords', () => {
+	it( 'should return the correct coordinates for a percentage value using 2-value syntax', () => {
+		expect( backgroundPositionToCoords( '25% 75%' ) ).toEqual( {
+			x: 0.25,
+			y: 0.75,
+		} );
+	} );
+
+	it( 'should return the correct coordinates for a percentage using 1-value syntax', () => {
+		expect( backgroundPositionToCoords( '50%' ) ).toEqual( {
+			x: 0.5,
+			y: 0.5,
+		} );
+	} );
+
+	it( 'should return undefined coords in given an empty value', () => {
+		expect( backgroundPositionToCoords( '' ) ).toEqual( {
+			x: undefined,
+			y: undefined,
+		} );
+	} );
+
+	it( 'should return undefined coords in given a string that cannot be converted', () => {
+		expect( backgroundPositionToCoords( 'apples' ) ).toEqual( {
+			x: undefined,
+			y: undefined,
+		} );
+	} );
+} );
+
+describe( 'coordsToBackgroundPosition', () => {
+	it( 'should return the correct background position for a set of coordinates', () => {
+		expect( coordsToBackgroundPosition( { x: 0.25, y: 0.75 } ) ).toBe(
+			'25% 75%'
+		);
+	} );
+
+	it( 'should return undefined if no coordinates are provided', () => {
+		expect( coordsToBackgroundPosition( {} ) ).toBeUndefined();
+	} );
+} );

package/src/hooks/test/font-size.js

@@ -0,0 +1,164 @@
+/**
+ * External dependencies
+ */
+import { renderHook } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { addFilter, removeFilter } from '@wordpress/hooks';
+import {
+	getBlockTypes,
+	registerBlockType,
+	unregisterBlockType,
+} from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import _fontSize from '../font-size';
+
+const noop = () => {};
+
+function addUseSettingFilter( callback ) {
+	addFilter(
+		'blockEditor.useSetting.before',
+		'test/useSetting.before',
+		callback
+	);
+}
+
+describe( 'useBlockProps', () => {
+	const blockSettings = {
+		save: () => noop,
+		category: 'text',
+		title: 'font size title',
+		name: 'test/font-size',
+		supports: {
+			typography: {
+				fontSize: true,
+			},
+		},
+	};
+
+	afterEach( () => {
+		getBlockTypes().forEach( ( block ) => {
+			unregisterBlockType( block.name );
+		} );
+		removeFilter(
+			'blockEditor.useSetting.before',
+			'test/useSetting.before'
+		);
+	} );
+
+	it( 'should return preset classname', () => {
+		registerBlockType( blockSettings.name, blockSettings );
+		addUseSettingFilter( ( result, path ) => {
+			if ( 'typography.fontSizes' === path ) {
+				return [
+					{
+						name: 'A larger font',
+						size: '32px',
+						slug: 'larger',
+					},
+				];
+			}
+
+			if ( 'typography.fluid' === path ) {
+				return false;
+			}
+
+			if ( 'layout' === path ) {
+				return {};
+			}
+
+			return result;
+		} );
+
+		const { result } = renderHook( () =>
+			_fontSize.useBlockProps( {
+				name: blockSettings.name,
+				fontSize: 'larger',
+			} )
+		);
+		const { style, className } = result.current;
+		expect( className ).toBe( 'has-larger-font-size' );
+		expect( style.fontSize ).toBe( '32px' );
+
+		removeFilter(
+			'blockEditor.useSetting.before',
+			'test/useSetting.before'
+		);
+	} );
+
+	it( 'should return custom font size', () => {
+		registerBlockType( blockSettings.name, blockSettings );
+		addUseSettingFilter( ( result, path ) => {
+			if ( 'typography.fontSizes' === path ) {
+				return [];
+			}
+
+			if ( 'typography.fluid' === path ) {
+				return false;
+			}
+
+			if ( 'layout' === path ) {
+				return {};
+			}
+
+			return result;
+		} );
+
+		const { result } = renderHook( () =>
+			_fontSize.useBlockProps( {
+				name: blockSettings.name,
+				style: {
+					typography: {
+						fontSize: '28px',
+					},
+				},
+			} )
+		);
+		const { style } = result.current;
+		expect( style.fontSize ).toBe( '28px' );
+
+		removeFilter(
+			'blockEditor.useSetting.before',
+			'test/useSetting.before'
+		);
+	} );
+
+	it( 'should convert custom font sizes to fluid', () => {
+		registerBlockType( blockSettings.name, blockSettings );
+		addUseSettingFilter( ( result, path ) => {
+			if ( 'typography.fontSizes' === path ) {
+				return [];
+			}
+
+			if ( 'typography.fluid' === path ) {
+				return true;
+			}
+
+			if ( 'layout' === path ) {
+				return {};
+			}
+
+			return result;
+		} );
+
+		const { result } = renderHook( () =>
+			_fontSize.useBlockProps( {
+				name: blockSettings.name,
+				style: {
+					typography: {
+						fontSize: '28px',
+					},
+				},
+			} )
+		);
+		const { style } = result.current;
+		expect( style.fontSize ).toBe(
+			'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 0.789), 28px)'
+		);
+	} );
+} );

package/src/hooks/use-bindings-attributes.js

@@ -3,7 +3,7 @@
  */
 import { getBlockType } from '@wordpress/blocks';
 import { createHigherOrderComponent } from '@wordpress/compose';
-import { useRegistry, useSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { addFilter } from '@wordpress/hooks';
 /**
  * Internal dependencies
@@ -22,7 +22,7 @@ import { unlock } from '../lock-unlock';
  * @return {WPHigherOrderComponent} Higher-order component.
  */
 
-const BLOCK_BINDINGS_ALLOWED_BLOCKS = {
+export const BLOCK_BINDINGS_ALLOWED_BLOCKS = {
 	'core/paragraph': [ 'content' ],
 	'core/heading': [ 'content' ],
 	'core/image': [ 'url', 'title', 'alt' ],
@@ -36,15 +36,14 @@ const createEditFunctionWithBindingsAttribute = () =>
 			const { getBlockBindingsSource } = unlock(
 				useSelect( blockEditorStore )
 			);
-			const { getBlockAttributes, updateBlockAttributes } =
-				useSelect( blockEditorStore );
+			const { getBlockAttributes } = useSelect( blockEditorStore );
 
 			const updatedAttributes = getBlockAttributes( clientId );
 			if ( updatedAttributes?.metadata?.bindings ) {
 				Object.entries( updatedAttributes.metadata.bindings ).forEach(
 					( [ attributeName, settings ] ) => {
 						const source = getBlockBindingsSource(
-							settings.source.name
+							settings.source
 						);
 
 						if ( source ) {
@@ -52,10 +51,7 @@ const createEditFunctionWithBindingsAttribute = () =>
 							const {
 								placeholder,
 								useValue: [ metaValue = null ] = [],
-							} = source.useSource(
-								props,
-								settings.source.attributes
-							);
+							} = source.useSource( props, settings.args );
 
 							if ( placeholder && ! metaValue ) {
 								// If the attribute is `src` or `href`, a placeholder can't be used because it is not a valid url.
@@ -83,21 +79,12 @@ const createEditFunctionWithBindingsAttribute = () =>
 				);
 			}
 
-			const registry = useRegistry();
-
 			return (
-				<>
-					<BlockEdit
-						key="edit"
-						attributes={ updatedAttributes }
-						setAttributes={ ( newAttributes, blockId ) =>
-							registry.batch( () =>
-								updateBlockAttributes( blockId, newAttributes )
-							)
-						}
-						{ ...props }
-					/>
-				</>
+				<BlockEdit
+					key="edit"
+					{ ...props }
+					attributes={ updatedAttributes }
+				/>
 			);
 		},
 		'useBoundAttributes'