@wordpress/block-editor 12.17.0 → 12.18.1

package/src/hooks/dimensions.js

@@ -1,7 +1,12 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
-import { useState, useEffect, useCallback } from '@wordpress/element';
+import { Platform, useState, useEffect, useCallback } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { getBlockSupport } from '@wordpress/blocks';
 import deprecated from '@wordpress/deprecated';
@@ -18,8 +23,7 @@ import { MarginVisualizer } from './margin';
 import { PaddingVisualizer } from './padding';
 import { store as blockEditorStore } from '../store';
 import { unlock } from '../lock-unlock';
-
-import { cleanEmptyObject } from './utils';
+import { cleanEmptyObject, shouldSkipSerialization } from './utils';
 
 export const DIMENSIONS_SUPPORT_KEY = 'dimensions';
 export const SPACING_SUPPORT_KEY = 'spacing';
@@ -125,6 +129,73 @@ export function DimensionsPanel( { clientId, name, setAttributes, settings } ) {
 	);
 }
 
+/**
+ * Determine whether there is block support for dimensions.
+ *
+ * @param {string} blockName Block name.
+ * @param {string} feature   Background image feature to check for.
+ *
+ * @return {boolean} Whether there is support.
+ */
+export function hasDimensionsSupport( blockName, feature = 'any' ) {
+	if ( Platform.OS !== 'web' ) {
+		return false;
+	}
+
+	const support = getBlockSupport( blockName, DIMENSIONS_SUPPORT_KEY );
+
+	if ( support === true ) {
+		return true;
+	}
+
+	if ( feature === 'any' ) {
+		return !! ( support?.aspectRatio || !! support?.minHeight );
+	}
+
+	return !! support?.[ feature ];
+}
+
+export default {
+	useBlockProps,
+	attributeKeys: [ 'minHeight', 'style' ],
+	hasSupport( name ) {
+		return hasDimensionsSupport( name, 'aspectRatio' );
+	},
+};
+
+function useBlockProps( { name, minHeight, style } ) {
+	if (
+		! hasDimensionsSupport( name, 'aspectRatio' ) ||
+		shouldSkipSerialization( name, DIMENSIONS_SUPPORT_KEY, 'aspectRatio' )
+	) {
+		return {};
+	}
+
+	const className = classnames( {
+		'has-aspect-ratio': !! style?.dimensions?.aspectRatio,
+	} );
+
+	// Allow dimensions-based inline style overrides to override any global styles rules that
+	// might be set for the block, and therefore affect the display of the aspect ratio.
+	const inlineStyleOverrides = {};
+
+	// Apply rules to unset incompatible styles.
+	// Note that a set `aspectRatio` will win out if both an aspect ratio and a minHeight are set.
+	// This is because the aspect ratio is a newer block support, so (in theory) any aspect ratio
+	// that is set should be intentional and should override any existing minHeight. The Cover block
+	// and dimensions controls have logic that will manually clear the aspect ratio if a minHeight
+	// is set.
+	if ( style?.dimensions?.aspectRatio ) {
+		// To ensure the aspect ratio does not get overridden by `minHeight` unset any existing rule.
+		inlineStyleOverrides.minHeight = 'unset';
+	} else if ( minHeight || style?.dimensions?.minHeight ) {
+		// To ensure the minHeight does not get overridden by `aspectRatio` unset any existing rule.
+		inlineStyleOverrides.aspectRatio = 'unset';
+	}
+
+	return { className, style: inlineStyleOverrides };
+}
+
 /**
  * @deprecated
  */

package/src/hooks/effects.js

@@ -0,0 +1,57 @@
+/**
+ * WordPress dependencies
+ */
+import { hasBlockSupport } from '@wordpress/blocks';
+import { useSelect } from '@wordpress/data';
+/**
+ * Internal dependencies
+ */
+import StylesEffectsPanel, {
+	useHasEffectsPanel,
+} from '../components/global-styles/effects-panel';
+import { InspectorControls } from '../components';
+import { store as blockEditorStore } from '../store';
+import { cleanEmptyObject } from './utils';
+
+export const SHADOW_SUPPORT_KEY = 'shadow';
+export const EFFECTS_SUPPORT_KEYS = [ SHADOW_SUPPORT_KEY ];
+
+export function hasEffectsSupport( blockName ) {
+	return EFFECTS_SUPPORT_KEYS.some( ( key ) =>
+		hasBlockSupport( blockName, key )
+	);
+}
+
+function EffectsInspectorControl( { children, resetAllFilter } ) {
+	return (
+		<InspectorControls group="effects" resetAllFilter={ resetAllFilter }>
+			{ children }
+		</InspectorControls>
+	);
+}
+export function EffectsPanel( { clientId, setAttributes, settings } ) {
+	const isEnabled = useHasEffectsPanel( settings );
+	const value = useSelect(
+		( select ) =>
+			select( blockEditorStore ).getBlockAttributes( clientId )?.style,
+		[ clientId ]
+	);
+
+	const onChange = ( newStyle ) => {
+		setAttributes( { style: cleanEmptyObject( newStyle ) } );
+	};
+
+	if ( ! isEnabled ) {
+		return null;
+	}
+
+	return (
+		<StylesEffectsPanel
+			as={ EffectsInspectorControl }
+			panelId={ clientId }
+			settings={ settings }
+			value={ value }
+			onChange={ onChange }
+		/>
+	);
+}

package/src/hooks/index.js

@@ -16,6 +16,7 @@ import './generated-class-name';
 import style from './style';
 import './settings';
 import color from './color';
+import dimensions from './dimensions';
 import duotone from './duotone';
 import fontFamily from './font-family';
 import fontSize from './font-size';
@@ -25,9 +26,9 @@ import layout from './layout';
 import childLayout from './layout-child';
 import contentLockUI from './content-lock-ui';
 import './metadata';
-import customFields from './custom-fields';
 import blockHooks from './block-hooks';
 import blockRenaming from './block-renaming';
+import './use-bindings-attributes';
 
 createBlockEditFilter(
 	[
@@ -39,7 +40,6 @@ createBlockEditFilter(
 		position,
 		layout,
 		contentLockUI,
-		window.__experimentalConnections ? customFields : null,
 		blockHooks,
 		blockRenaming,
 	].filter( Boolean )
@@ -48,6 +48,7 @@ createBlockListBlockFilter( [
 	align,
 	style,
 	color,
+	dimensions,
 	duotone,
 	fontFamily,
 	fontSize,
@@ -70,6 +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 { 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,6 +28,7 @@ createBlockSaveFilter( [
 ] );
 
 export { getBorderClassesAndStyles, useBorderProps } from './use-border-props';
+export { getShadowClassesAndStyles, useShadowProps } 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

@@ -27,6 +27,11 @@ import {
 	SPACING_SUPPORT_KEY,
 	DimensionsPanel,
 } from './dimensions';
+import {
+	EFFECTS_SUPPORT_KEYS,
+	SHADOW_SUPPORT_KEY,
+	EffectsPanel,
+} from './effects';
 import {
 	shouldSkipSerialization,
 	useStyleOverride,
@@ -37,6 +42,7 @@ import { useBlockEditingMode } from '../components/block-editing-mode';
 
 const styleSupportKeys = [
 	...TYPOGRAPHY_SUPPORT_KEYS,
+	...EFFECTS_SUPPORT_KEYS,
 	BORDER_SUPPORT_KEY,
 	COLOR_SUPPORT_KEY,
 	DIMENSIONS_SUPPORT_KEY,
@@ -110,6 +116,7 @@ const skipSerializationPathsEdit = {
 	[ `${ SPACING_SUPPORT_KEY }.__experimentalSkipSerialization` ]: [
 		SPACING_SUPPORT_KEY,
 	],
+	[ `${ SHADOW_SUPPORT_KEY }` ]: [ SHADOW_SUPPORT_KEY ],
 };
 
 /**
@@ -126,10 +133,14 @@ const skipSerializationPathsEdit = {
  */
 const skipSerializationPathsSave = {
 	...skipSerializationPathsEdit,
+	[ `${ DIMENSIONS_SUPPORT_KEY }.aspectRatio` ]: [
+		`${ DIMENSIONS_SUPPORT_KEY }.aspectRatio`,
+	], // Skip serialization of aspect ratio in save mode.
 	[ `${ BACKGROUND_SUPPORT_KEY }` ]: [ BACKGROUND_SUPPORT_KEY ], // Skip serialization of background support in save mode.
 };
 
 const skipSerializationPathsSaveChecks = {
+	[ `${ DIMENSIONS_SUPPORT_KEY }.aspectRatio` ]: true,
 	[ `${ BACKGROUND_SUPPORT_KEY }` ]: true,
 };
 
@@ -336,6 +347,7 @@ function BlockStyleControls( {
 			<TypographyPanel { ...passedProps } />
 			<BorderPanel { ...passedProps } />
 			<DimensionsPanel { ...passedProps } />
+			<EffectsPanel { ...passedProps } />
 		</>
 	);
 }

package/src/hooks/supports.js

@@ -59,8 +59,10 @@ const TYPOGRAPHY_SUPPORT_KEYS = [
 	WRITING_MODE_SUPPORT_KEY,
 	LETTER_SPACING_SUPPORT_KEY,
 ];
+const EFFECTS_SUPPORT_KEYS = [ 'shadow' ];
 const SPACING_SUPPORT_KEY = 'spacing';
 const styleSupportKeys = [
+	...EFFECTS_SUPPORT_KEYS,
 	...TYPOGRAPHY_SUPPORT_KEYS,
 	BORDER_SUPPORT_KEY,
 	COLOR_SUPPORT_KEY,

package/src/hooks/test/effects.js

@@ -0,0 +1,39 @@
+/**
+ * Internal dependencies
+ */
+import { hasEffectsSupport } from '../effects';
+
+describe( 'effects', () => {
+	describe( 'hasEffectsSupport', () => {
+		it( 'should return false if the block does not support effects', () => {
+			const settings = {
+				supports: {
+					shadow: false,
+				},
+			};
+
+			expect( hasEffectsSupport( settings ) ).toBe( false );
+		} );
+
+		it( 'should return true if the block supports effects', () => {
+			const settings = {
+				supports: {
+					shadow: true,
+				},
+			};
+
+			expect( hasEffectsSupport( settings ) ).toBe( true );
+		} );
+
+		it( 'should return true if the block supports effects and other features', () => {
+			const settings = {
+				supports: {
+					shadow: true,
+					align: true,
+				},
+			};
+
+			expect( hasEffectsSupport( settings ) ).toBe( true );
+		} );
+	} );
+} );

package/src/hooks/typography.native.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { pure } from '@wordpress/compose';
+import { memo } from '@wordpress/element';
 import { PanelBody } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
@@ -57,4 +57,4 @@ function TypographyPanelPure( { clientId, 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 TypographyPanel = pure( TypographyPanelPure );
+export const TypographyPanel = memo( TypographyPanelPure );

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

@@ -0,0 +1,148 @@
+/**
+ * WordPress dependencies
+ */
+import { getBlockType } from '@wordpress/blocks';
+import { createHigherOrderComponent } from '@wordpress/compose';
+import { useRegistry, useSelect } from '@wordpress/data';
+import { addFilter } from '@wordpress/hooks';
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../store';
+import { useBlockEditContext } from '../components/block-edit/context';
+import { unlock } from '../lock-unlock';
+
+/** @typedef {import('@wordpress/compose').WPHigherOrderComponent} WPHigherOrderComponent */
+/** @typedef {import('@wordpress/blocks').WPBlockSettings} WPBlockSettings */
+
+/**
+ * Given a binding of block attributes, returns a higher order component that
+ * overrides its `attributes` and `setAttributes` props to sync any changes needed.
+ *
+ * @return {WPHigherOrderComponent} Higher-order component.
+ */
+
+const BLOCK_BINDINGS_ALLOWED_BLOCKS = {
+	'core/paragraph': [ 'content' ],
+	'core/heading': [ 'content' ],
+	'core/image': [ 'url', 'title', 'alt' ],
+	'core/button': [ 'url', 'text', 'linkTarget' ],
+};
+
+const createEditFunctionWithBindingsAttribute = () =>
+	createHigherOrderComponent(
+		( BlockEdit ) => ( props ) => {
+			const { clientId, name: blockName } = useBlockEditContext();
+			const { getBlockBindingsSource } = unlock(
+				useSelect( blockEditorStore )
+			);
+			const { getBlockAttributes, updateBlockAttributes } =
+				useSelect( blockEditorStore );
+
+			const updatedAttributes = getBlockAttributes( clientId );
+			if ( updatedAttributes?.metadata?.bindings ) {
+				Object.entries( updatedAttributes.metadata.bindings ).forEach(
+					( [ attributeName, settings ] ) => {
+						const source = getBlockBindingsSource(
+							settings.source.name
+						);
+
+						if ( source ) {
+							// Second argument (`updateMetaValue`) will be used to update the value in the future.
+							const {
+								placeholder,
+								useValue: [ metaValue = null ] = [],
+							} = source.useSource(
+								props,
+								settings.source.attributes
+							);
+
+							if ( placeholder && ! metaValue ) {
+								// If the attribute is `src` or `href`, a placeholder can't be used because it is not a valid url.
+								// Adding this workaround until attributes and metadata fields types are improved and include `url`.
+								const htmlAttribute =
+									getBlockType( blockName ).attributes[
+										attributeName
+									].attribute;
+								if (
+									htmlAttribute === 'src' ||
+									htmlAttribute === 'href'
+								) {
+									updatedAttributes[ attributeName ] = null;
+								} else {
+									updatedAttributes[ attributeName ] =
+										placeholder;
+								}
+							}
+
+							if ( metaValue ) {
+								updatedAttributes[ attributeName ] = metaValue;
+							}
+						}
+					}
+				);
+			}
+
+			const registry = useRegistry();
+
+			return (
+				<>
+					<BlockEdit
+						key="edit"
+						attributes={ updatedAttributes }
+						setAttributes={ ( newAttributes, blockId ) =>
+							registry.batch( () =>
+								updateBlockAttributes( blockId, newAttributes )
+							)
+						}
+						{ ...props }
+					/>
+				</>
+			);
+		},
+		'useBoundAttributes'
+	);
+
+/**
+ * Filters a registered block's settings to enhance a block's `edit` component
+ * to upgrade bound attributes.
+ *
+ * @param {WPBlockSettings} settings Registered block settings.
+ *
+ * @return {WPBlockSettings} Filtered block settings.
+ */
+function shimAttributeSource( settings ) {
+	if ( ! ( settings.name in BLOCK_BINDINGS_ALLOWED_BLOCKS ) ) {
+		return settings;
+	}
+	settings.edit = createEditFunctionWithBindingsAttribute()( settings.edit );
+
+	return settings;
+}
+
+addFilter(
+	'blocks.registerBlockType',
+	'core/editor/custom-sources-backwards-compatibility/shim-attribute-source',
+	shimAttributeSource
+);
+
+// Add the context to all blocks.
+addFilter(
+	'blocks.registerBlockType',
+	'core/block-bindings-ui',
+	( settings, name ) => {
+		if ( ! ( name in BLOCK_BINDINGS_ALLOWED_BLOCKS ) ) {
+			return settings;
+		}
+		const contextItems = [ 'postId', 'postType', 'queryId' ];
+		const usesContextArray = settings.usesContext;
+		const oldUsesContextArray = new Set( usesContextArray );
+		contextItems.forEach( ( item ) => {
+			if ( ! oldUsesContextArray.has( item ) ) {
+				usesContextArray.push( item );
+			}
+		} );
+		settings.usesContext = usesContextArray;
+		return settings;
+	}
+);

package/src/hooks/use-shadow-props.js

@@ -0,0 +1,37 @@
+/**
+ * Internal dependencies
+ */
+import { getInlineStyles } from './style';
+
+// This utility is intended to assist where the serialization of the shadow
+// block support is being skipped for a block but the shadow related CSS classes
+// & styles still need to be generated so they can be applied to inner elements.
+
+/**
+ * Provides the CSS class names and inline styles for a block's shadow support
+ * attributes.
+ *
+ * @param {Object} attributes Block attributes.
+ * @return {Object} Shadow block support derived CSS classes & styles.
+ */
+export function getShadowClassesAndStyles( attributes ) {
+	const shadow = attributes.style?.shadow || '';
+
+	return {
+		className: undefined,
+		style: getInlineStyles( { shadow } ),
+	};
+}
+
+/**
+ * Derives the shadow related props for a block from its shadow block support
+ * attributes.
+ *
+ * @param {Object} attributes Block attributes.
+ *
+ * @return {Object} ClassName & style props from shadow block support.
+ */
+export function useShadowProps( attributes ) {
+	const shadowProps = getShadowClassesAndStyles( attributes );
+	return shadowProps;
+}

package/src/hooks/utils.js

@@ -2,9 +2,9 @@
  * WordPress dependencies
  */
 import { getBlockSupport } from '@wordpress/blocks';
-import { useMemo, useEffect, useId, useState } from '@wordpress/element';
+import { memo, useMemo, useEffect, useId, useState } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
-import { createHigherOrderComponent, pure } from '@wordpress/compose';
+import { createHigherOrderComponent } from '@wordpress/compose';
 import { addFilter } from '@wordpress/hooks';
 
 /**
@@ -177,7 +177,10 @@ export function useBlockSettings( name, parentLayout ) {
 		backgroundImage,
 		backgroundSize,
 		fontFamilies,
-		fontSizes,
+		userFontSizes,
+		themeFontSizes,
+		defaultFontSizes,
+		defaultFontSizesEnabled,
 		customFontSize,
 		fontStyle,
 		fontWeight,
@@ -192,6 +195,7 @@ export function useBlockSettings( name, parentLayout ) {
 		blockGap,
 		spacingSizes,
 		units,
+		aspectRatio,
 		minHeight,
 		layout,
 		borderColor,
@@ -218,11 +222,15 @@ export function useBlockSettings( name, parentLayout ) {
 		isTextEnabled,
 		isHeadingEnabled,
 		isButtonEnabled,
+		shadow,
 	] = useSettings(
 		'background.backgroundImage',
 		'background.backgroundSize',
 		'typography.fontFamilies',
-		'typography.fontSizes',
+		'typography.fontSizes.custom',
+		'typography.fontSizes.theme',
+		'typography.fontSizes.default',
+		'typography.defaultFontSizes',
 		'typography.customFontSize',
 		'typography.fontStyle',
 		'typography.fontWeight',
@@ -237,6 +245,7 @@ export function useBlockSettings( name, parentLayout ) {
 		'spacing.blockGap',
 		'spacing.spacingSizes',
 		'spacing.units',
+		'dimensions.aspectRatio',
 		'dimensions.minHeight',
 		'layout',
 		'border.color',
@@ -262,7 +271,8 @@ export function useBlockSettings( name, parentLayout ) {
 		'color.link',
 		'color.text',
 		'color.heading',
-		'color.button'
+		'color.button',
+		'shadow'
 	);
 
 	const rawSettings = useMemo( () => {
@@ -304,9 +314,12 @@ export function useBlockSettings( name, parentLayout ) {
 					custom: fontFamilies,
 				},
 				fontSizes: {
-					custom: fontSizes,
+					custom: userFontSizes,
+					theme: themeFontSizes,
+					default: defaultFontSizes,
 				},
 				customFontSize,
+				defaultFontSizes: defaultFontSizesEnabled,
 				fontStyle,
 				fontWeight,
 				lineHeight,
@@ -332,16 +345,21 @@ export function useBlockSettings( name, parentLayout ) {
 				width: borderWidth,
 			},
 			dimensions: {
+				aspectRatio,
 				minHeight,
 			},
 			layout,
 			parentLayout,
+			shadow,
 		};
 	}, [
 		backgroundImage,
 		backgroundSize,
 		fontFamilies,
-		fontSizes,
+		userFontSizes,
+		themeFontSizes,
+		defaultFontSizes,
+		defaultFontSizesEnabled,
 		customFontSize,
 		fontStyle,
 		fontWeight,
@@ -356,6 +374,7 @@ export function useBlockSettings( name, parentLayout ) {
 		blockGap,
 		spacingSizes,
 		units,
+		aspectRatio,
 		minHeight,
 		layout,
 		parentLayout,
@@ -383,6 +402,7 @@ export function useBlockSettings( name, parentLayout ) {
 		isTextEnabled,
 		isHeadingEnabled,
 		isButtonEnabled,
+		shadow,
 	] );
 
 	return useSettingsForBlockElement( rawSettings, name );
@@ -390,10 +410,10 @@ export function useBlockSettings( name, parentLayout ) {
 
 export function createBlockEditFilter( features ) {
 	// 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
+	// `memo` will prevent re-renders unless props change, so only pass the
 	// needed props and not the whole attributes object.
 	features = features.map( ( settings ) => {
-		return { ...settings, Edit: pure( settings.edit ) };
+		return { ...settings, Edit: memo( settings.edit ) };
 	} );
 	const withBlockEditHooks = createHigherOrderComponent(
 		( OriginalBlockEdit ) => ( props ) => {
@@ -476,7 +496,7 @@ function BlockProps( { index, useBlockProps, setAllWrapperProps, ...props } ) {
 	return null;
 }
 
-const BlockPropsPure = pure( BlockProps );
+const BlockPropsPure = memo( BlockProps );
 
 export function createBlockListBlockFilter( features ) {
 	const withBlockListBlockHooks = createHigherOrderComponent(

package/src/index.js

@@ -11,6 +11,8 @@ export {
 	useCustomSides as __experimentalUseCustomSides,
 	getSpacingClassesAndStyles as __experimentalGetSpacingClassesAndStyles,
 	getGapCSSValue as __experimentalGetGapCSSValue,
+	getShadowClassesAndStyles as __experimentalGetShadowClassesAndStyles,
+	useShadowProps as __experimentalUseShadowProps,
 	useCachedTruthy,
 } from './hooks';
 export * from './components';