@wordpress/block-editor 12.17.0 → 12.18.0

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 ],
 };
 
 /**
@@ -336,6 +343,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,
@@ -218,11 +221,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',
@@ -262,7 +269,8 @@ export function useBlockSettings( name, parentLayout ) {
 		'color.link',
 		'color.text',
 		'color.heading',
-		'color.button'
+		'color.button',
+		'shadow'
 	);
 
 	const rawSettings = useMemo( () => {
@@ -304,9 +312,12 @@ export function useBlockSettings( name, parentLayout ) {
 					custom: fontFamilies,
 				},
 				fontSizes: {
-					custom: fontSizes,
+					custom: userFontSizes,
+					theme: themeFontSizes,
+					default: defaultFontSizes,
 				},
 				customFontSize,
+				defaultFontSizes: defaultFontSizesEnabled,
 				fontStyle,
 				fontWeight,
 				lineHeight,
@@ -336,12 +347,16 @@ export function useBlockSettings( name, parentLayout ) {
 			},
 			layout,
 			parentLayout,
+			shadow,
 		};
 	}, [
 		backgroundImage,
 		backgroundSize,
 		fontFamilies,
-		fontSizes,
+		userFontSizes,
+		themeFontSizes,
+		defaultFontSizes,
+		defaultFontSizesEnabled,
 		customFontSize,
 		fontStyle,
 		fontWeight,
@@ -383,6 +398,7 @@ export function useBlockSettings( name, parentLayout ) {
 		isTextEnabled,
 		isHeadingEnabled,
 		isButtonEnabled,
+		shadow,
 	] );
 
 	return useSettingsForBlockElement( rawSettings, name );
@@ -390,10 +406,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 +492,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';

package/src/store/actions.js

@@ -640,13 +640,15 @@ export function showInsertionPoint(
 	index,
 	__unstableOptions = {}
 ) {
-	const { __unstableWithInserter, operation } = __unstableOptions;
+	const { __unstableWithInserter, operation, nearestSide } =
+		__unstableOptions;
 	return {
 		type: 'SHOW_INSERTION_POINT',
 		rootClientId,
 		index,
 		__unstableWithInserter,
 		operation,
+		nearestSide,
 	};
 }
 /**
@@ -1679,20 +1681,23 @@ export function setBlockVisibility( updates ) {
 }
 
 /**
- * Action that sets whether a block is being temporaritly edited as blocks.
+ * Action that sets whether a block is being temporarily edited as blocks.
  *
  * DO-NOT-USE in production.
  * This action is created for internal/experimental only usage and may be
  * removed anytime without any warning, causing breakage on any plugin or theme invoking it.
  *
- * @param {?string} temporarilyEditingAsBlocks The block's clientId being temporaritly edited as blocks.
+ * @param {?string} temporarilyEditingAsBlocks The block's clientId being temporarily edited as blocks.
+ * @param {?string} focusModeToRevert          The focus mode to revert after temporarily edit as blocks finishes.
  */
 export function __unstableSetTemporarilyEditingAsBlocks(
-	temporarilyEditingAsBlocks
+	temporarilyEditingAsBlocks,
+	focusModeToRevert
 ) {
 	return {
 		type: 'SET_TEMPORARILY_EDITING_AS_BLOCKS',
 		temporarilyEditingAsBlocks,
+		focusModeToRevert,
 	};
 }
 

package/src/store/index.js

@@ -10,6 +10,7 @@ import reducer from './reducer';
 import * as selectors from './selectors';
 import * as privateActions from './private-actions';
 import * as privateSelectors from './private-selectors';
+import * as resolvers from './resolvers';
 import * as actions from './actions';
 import { STORE_NAME } from './constants';
 import { unlock } from '../lock-unlock';
@@ -22,6 +23,7 @@ import { unlock } from '../lock-unlock';
 export const storeConfig = {
 	reducer,
 	selectors,
+	resolvers,
 	actions,
 };
 

package/src/store/private-actions.js

@@ -338,3 +338,35 @@ export function setLastFocus( lastFocus = null ) {
 		lastFocus,
 	};
 }
+
+/**
+ * Action that stops temporarily editing as blocks.
+ *
+ * @param {string} clientId The block's clientId.
+ */
+export function stopEditingAsBlocks( clientId ) {
+	return ( { select, dispatch } ) => {
+		const focusModeToRevert =
+			select.__unstableGetTemporarilyEditingFocusModeToRevert();
+		dispatch.__unstableMarkNextChangeAsNotPersistent();
+		dispatch.updateBlockAttributes( clientId, {
+			templateLock: 'contentOnly',
+		} );
+		dispatch.updateBlockListSettings( clientId, {
+			...select.getBlockListSettings( clientId ),
+			templateLock: 'contentOnly',
+		} );
+		dispatch.updateSettings( { focusMode: focusModeToRevert } );
+		dispatch.__unstableSetTemporarilyEditingAsBlocks();
+	};
+}
+
+export function registerBlockBindingsSource( source ) {
+	return {
+		type: 'REGISTER_BLOCK_BINDINGS_SOURCE',
+		sourceName: source.name,
+		sourceLabel: source.label,
+		useSource: source.useSource,
+		lockAttributesEditing: source.lockAttributesEditing,
+	};
+}

package/src/store/private-selectors.js

@@ -3,6 +3,11 @@
  */
 import createSelector from 'rememo';
 
+/**
+ * WordPress dependencies
+ */
+import { createRegistrySelector } from '@wordpress/data';
+
 /**
  * Internal dependencies
  */
@@ -11,11 +16,12 @@ import {
 	getBlockParents,
 	getBlockEditingMode,
 	getSettings,
-	__experimentalGetParsedPattern,
 	canInsertBlockType,
-	__experimentalGetAllowedPatterns,
 } from './selectors';
-import { getUserPatterns, checkAllowListRecursive } from './utils';
+import { checkAllowListRecursive, getAllPatternsDependants } from './utils';
+import { INSERTER_PATTERN_TYPES } from '../components/inserter/block-patterns-tab/utils';
+import { store } from './';
+import { unlock } from '../lock-unlock';
 
 /**
  * Returns true if the block interface is hidden, or false otherwise.
@@ -242,6 +248,10 @@ export const getInserterMediaCategories = createSelector(
 	]
 );
 
+export function getFetchedPatterns( state ) {
+	return state.blockPatterns;
+}
+
 /**
  * Returns whether there is at least one allowed pattern for inner blocks children.
  * This is useful for deferring the parsing of all patterns until needed.
@@ -251,35 +261,74 @@ export const getInserterMediaCategories = createSelector(
  *
  * @return {boolean} If there is at least one allowed pattern.
  */
-export const hasAllowedPatterns = createSelector(
-	( state, rootClientId = null ) => {
-		const patterns = state.settings.__experimentalBlockPatterns;
-		const userPatterns = getUserPatterns( state );
-		const { allowedBlockTypes } = getSettings( state );
-		return [ ...userPatterns, ...patterns ].some(
-			( { name, inserter = true } ) => {
+export const hasAllowedPatterns = createRegistrySelector( ( select ) =>
+	createSelector(
+		( state, rootClientId = null ) => {
+			const { getAllPatterns, __experimentalGetParsedPattern } = unlock(
+				select( store )
+			);
+			const patterns = getAllPatterns();
+			const { allowedBlockTypes } = getSettings( state );
+			return patterns.some( ( { name, inserter = true } ) => {
 				if ( ! inserter ) {
 					return false;
 				}
-				const { blocks } = __experimentalGetParsedPattern(
-					state,
-					name
-				);
+				const { blocks } = __experimentalGetParsedPattern( name );
 				return (
 					checkAllowListRecursive( blocks, allowedBlockTypes ) &&
 					blocks.every( ( { name: blockName } ) =>
 						canInsertBlockType( state, blockName, rootClientId )
 					)
 				);
+			} );
+		},
+		( state, rootClientId ) => [
+			getAllPatternsDependants( state ),
+			state.settings.allowedBlockTypes,
+			state.settings.templateLock,
+			state.blockListSettings[ rootClientId ],
+			state.blocks.byClientId.get( rootClientId ),
+		]
+	)
+);
+
+export const getAllPatterns = createRegistrySelector( ( select ) =>
+	createSelector( ( state ) => {
+		// This setting is left for back compat.
+		const {
+			__experimentalBlockPatterns = [],
+			__experimentalUserPatternCategories = [],
+			__experimentalReusableBlocks = [],
+		} = state.settings;
+		const userPatterns = ( __experimentalReusableBlocks ?? [] ).map(
+			( userPattern ) => {
+				return {
+					name: `core/block/${ userPattern.id }`,
+					id: userPattern.id,
+					type: INSERTER_PATTERN_TYPES.user,
+					title: userPattern.title.raw,
+					categories: userPattern.wp_pattern_category.map(
+						( catId ) => {
+							const category = (
+								__experimentalUserPatternCategories ?? []
+							).find( ( { id } ) => id === catId );
+							return category ? category.slug : catId;
+						}
+					),
+					content: userPattern.content.raw,
+					syncStatus: userPattern.wp_pattern_sync_status,
+				};
 			}
 		);
-	},
-	( state, rootClientId ) => [
-		...__experimentalGetAllowedPatterns.getDependants(
-			state,
-			rootClientId
-		),
-	]
+		return [
+			...userPatterns,
+			...__experimentalBlockPatterns,
+			...unlock( select( store ) ).getFetchedPatterns(),
+		].filter(
+			( x, index, arr ) =>
+				index === arr.findIndex( ( y ) => x.name === y.name )
+		);
+	}, getAllPatternsDependants )
 );
 
 /**
@@ -292,3 +341,11 @@ export const hasAllowedPatterns = createSelector(
 export function getLastFocus( state ) {
 	return state.lastFocus;
 }
+
+export function getAllBlockBindingsSources( state ) {
+	return state.blockBindingsSources;
+}
+
+export function getBlockBindingsSource( state, sourceName ) {
+	return state.blockBindingsSources[ sourceName ];
+}