@wordpress/block-editor 12.18.2 → 12.19.1

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/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,8 +36,7 @@ const createEditFunctionWithBindingsAttribute = () =>
 			const { getBlockBindingsSource } = unlock(
 				useSelect( blockEditorStore )
 			);
-			const { getBlockAttributes, updateBlockAttributes } =
-				useSelect( blockEditorStore );
+			const { getBlockAttributes } = useSelect( blockEditorStore );
 
 			const updatedAttributes = getBlockAttributes( clientId );
 			if ( updatedAttributes?.metadata?.bindings ) {
@@ -47,7 +46,7 @@ const createEditFunctionWithBindingsAttribute = () =>
 							settings.source
 						);
 
-						if ( source ) {
+						if ( source && source.useSource ) {
 							// Second argument (`updateMetaValue`) will be used to update the value in the future.
 							const {
 								placeholder,
@@ -80,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'

package/src/private-apis.js

@@ -7,6 +7,7 @@ import { lock } from './lock-unlock';
 import { getRichTextValues } from './components/rich-text/get-rich-text-values';
 import ResizableBoxPopover from './components/resizable-box-popover';
 import { ComposedPrivateInserter as PrivateInserter } from './components/inserter';
+import { default as PrivateQuickInserter } from './components/inserter/quick-inserter';
 import { PrivateListView } from './components/list-view';
 import BlockInfo from './components/block-info-slot-fill';
 import { useCanBlockToolbarBeFocused } from './utils/use-can-block-toolbar-be-focused';
@@ -24,6 +25,7 @@ import {
 import { usesContextKey } from './components/rich-text/format-edit';
 import { ExperimentalBlockCanvas } from './components/block-canvas';
 import { getDuotoneFilter } from './components/duotone/utils';
+import { useFlashEditableBlocks } from './components/use-flash-editable-blocks';
 
 /**
  * Private @wordpress/block-editor APIs.
@@ -36,6 +38,7 @@ lock( privateApis, {
 	getDuotoneFilter,
 	getRichTextValues,
 	PrivateInserter,
+	PrivateQuickInserter,
 	PrivateListView,
 	ResizableBoxPopover,
 	BlockInfo,
@@ -52,4 +55,5 @@ lock( privateApis, {
 	ReusableBlocksRenameHint,
 	useReusableBlocksRenameHint,
 	usesContextKey,
+	useFlashEditableBlocks,
 } );