Merge branch 'trunk' into docs/fundamentals-block-development---diagr…

…am-links
WordPress · Dec 12, 2023 · 0d7a248 · 0d7a248
2 parents 0b0f8d3 + 16ec554
commit 0d7a248
Show file tree

Hide file tree

Showing 45 changed files with 740 additions and 492 deletions.
diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js
@@ -54,10 +54,18 @@ function mergeWrapperProps( propsA, propsB ) {
 		...propsB,
 	};
 
-	if ( propsA?.className && propsB?.className ) {
+	// May be set to undefined, so check if the property is set!
+	if (
+		propsA?.hasOwnProperty( 'className' ) &&
+		propsB?.hasOwnProperty( 'className' )
+	) {
 		newProps.className = classnames( propsA.className, propsB.className );
 	}
-	if ( propsA?.style && propsB?.style ) {
+
+	if (
+		propsA?.hasOwnProperty( 'style' ) &&
+		propsB?.hasOwnProperty( 'style' )
+	) {
 		newProps.style = { ...propsA.style, ...propsB.style };
 	}
 

diff --git a/packages/block-editor/src/components/block-list/block.native.js b/packages/block-editor/src/components/block-list/block.native.js
@@ -253,10 +253,13 @@ function BlockListBlock( {
 	);
 
 	// Block level styles.
-	const wrapperProps = getWrapperProps(
-		attributes,
-		blockType.getEditWrapperProps
-	);
+	let wrapperProps = {};
+	if ( blockType?.getEditWrapperProps ) {
+		wrapperProps = getWrapperProps(
+			attributes,
+			blockType.getEditWrapperProps
+		);
+	}
 
 	// Inherited styles merged with block level styles.
 	const mergedStyle = useMemo( () => {

diff --git a/packages/block-editor/src/hooks/border.js b/packages/block-editor/src/hooks/border.js
@@ -258,16 +258,16 @@ function addAttributes( settings ) {
 /**
  * Override props assigned to save component to inject border color.
  *
- * @param {Object} props      Additional props applied to save element.
- * @param {Object} blockType  Block type definition.
- * @param {Object} attributes Block's attributes.
+ * @param {Object}        props           Additional props applied to save element.
+ * @param {Object|string} blockNameOrType Block type definition.
+ * @param {Object}        attributes      Block's attributes.
  *
  * @return {Object} Filtered props to apply to save element.
  */
-function addSaveProps( props, blockType, attributes ) {
+function addSaveProps( props, blockNameOrType, attributes ) {
 	if (
-		! hasBorderSupport( blockType, 'color' ) ||
-		shouldSkipSerialization( blockType, BORDER_SUPPORT_KEY, 'color' )
+		! hasBorderSupport( blockNameOrType, 'color' ) ||
+		shouldSkipSerialization( blockNameOrType, BORDER_SUPPORT_KEY, 'color' )
 	) {
 		return props;
 	}
@@ -300,36 +300,6 @@ export function getBorderClasses( attributes ) {
 	} );
 }
 
-/**
- * Filters the registered block settings to apply border color styles and
- * classnames to the block edit wrapper.
- *
- * @param {Object} settings Original block settings.
- *
- * @return {Object} Filtered block settings.
- */
-function addEditProps( settings ) {
-	if (
-		! hasBorderSupport( settings, 'color' ) ||
-		shouldSkipSerialization( settings, BORDER_SUPPORT_KEY, 'color' )
-	) {
-		return settings;
-	}
-
-	const existingGetEditWrapperProps = settings.getEditWrapperProps;
-	settings.getEditWrapperProps = ( attributes ) => {
-		let props = {};
-
-		if ( existingGetEditWrapperProps ) {
-			props = existingGetEditWrapperProps( attributes );
-		}
-
-		return addSaveProps( props, settings, attributes );
-	};
-
-	return settings;
-}
-
 function useBlockProps( { name, borderColor, style } ) {
 	const { colors } = useMultipleOriginColorsAndGradients();
 
@@ -369,7 +339,11 @@ function useBlockProps( { name, borderColor, style } ) {
 		borderLeftColor: borderLeftColor || borderColorValue,
 	};
 
-	return { style: cleanEmptyObject( extraStyles ) || {} };
+	return addSaveProps(
+		{ style: cleanEmptyObject( extraStyles ) || {} },
+		name,
+		{ borderColor, style }
+	);
 }
 
 export default {
@@ -391,9 +365,3 @@ addFilter(
 	'core/border/addSaveProps',
 	addSaveProps
 );
-
-addFilter(
-	'blocks.registerBlockType',
-	'core/border/addEditProps',
-	addEditProps
-);
diff --git a/packages/block-editor/src/hooks/color.js b/packages/block-editor/src/hooks/color.js
@@ -36,8 +36,8 @@ import { store as blockEditorStore } from '../store';
 
 export const COLOR_SUPPORT_KEY = 'color';
 
-const hasColorSupport = ( blockType ) => {
-	const colorSupport = getBlockSupport( blockType, COLOR_SUPPORT_KEY );
+const hasColorSupport = ( blockNameOrType ) => {
+	const colorSupport = getBlockSupport( blockNameOrType, COLOR_SUPPORT_KEY );
 	return (
 		colorSupport &&
 		( colorSupport.link === true ||
@@ -61,8 +61,8 @@ const hasLinkColorSupport = ( blockType ) => {
 	);
 };
 
-const hasGradientSupport = ( blockType ) => {
-	const colorSupport = getBlockSupport( blockType, COLOR_SUPPORT_KEY );
+const hasGradientSupport = ( blockNameOrType ) => {
+	const colorSupport = getBlockSupport( blockNameOrType, COLOR_SUPPORT_KEY );
 
 	return (
 		colorSupport !== null &&
@@ -126,27 +126,31 @@ function addAttributes( settings ) {
 /**
  * Override props assigned to save component to inject colors classnames.
  *
- * @param {Object} props      Additional props applied to save element.
- * @param {Object} blockType  Block type.
- * @param {Object} attributes Block attributes.
+ * @param {Object}        props           Additional props applied to save element.
+ * @param {Object|string} blockNameOrType Block type.
+ * @param {Object}        attributes      Block attributes.
  *
  * @return {Object} Filtered props applied to save element.
  */
-export function addSaveProps( props, blockType, attributes ) {
+export function addSaveProps( props, blockNameOrType, attributes ) {
 	if (
-		! hasColorSupport( blockType ) ||
-		shouldSkipSerialization( blockType, COLOR_SUPPORT_KEY )
+		! hasColorSupport( blockNameOrType ) ||
+		shouldSkipSerialization( blockNameOrType, COLOR_SUPPORT_KEY )
 	) {
 		return props;
 	}
 
-	const hasGradient = hasGradientSupport( blockType );
+	const hasGradient = hasGradientSupport( blockNameOrType );
 
 	// I'd have preferred to avoid the "style" attribute usage here
 	const { backgroundColor, textColor, gradient, style } = attributes;
 
 	const shouldSerialize = ( feature ) =>
-		! shouldSkipSerialization( blockType, COLOR_SUPPORT_KEY, feature );
+		! shouldSkipSerialization(
+			blockNameOrType,
+			COLOR_SUPPORT_KEY,
+			feature
+		);
 
 	// Primary color classes must come before the `has-text-color`,
 	// `has-background` and `has-link-color` classes to maintain backwards
@@ -192,33 +196,6 @@ export function addSaveProps( props, blockType, attributes ) {
 	return props;
 }
 
-/**
- * Filters registered block settings to extend the block edit wrapper
- * to apply the desired styles and classnames properly.
- *
- * @param {Object} settings Original block settings.
- *
- * @return {Object} Filtered block settings.
- */
-export function addEditProps( settings ) {
-	if (
-		! hasColorSupport( settings ) ||
-		shouldSkipSerialization( settings, COLOR_SUPPORT_KEY )
-	) {
-		return settings;
-	}
-	const existingGetEditWrapperProps = settings.getEditWrapperProps;
-	settings.getEditWrapperProps = ( attributes ) => {
-		let props = {};
-		if ( existingGetEditWrapperProps ) {
-			props = existingGetEditWrapperProps( attributes );
-		}
-		return addSaveProps( props, settings, attributes );
-	};
-
-	return settings;
-}
-
 function styleToAttributes( style ) {
 	const textColorValue = style?.color?.text;
 	const textColorSlug = textColorValue?.startsWith( 'var:preset|color|' )
@@ -364,7 +341,13 @@ function ColorEditPure( { clientId, name, setAttributes, settings } ) {
 // and not the whole attributes object.
 export const ColorEdit = pure( ColorEditPure );
 
-function useBlockProps( { name, backgroundColor, textColor } ) {
+function useBlockProps( {
+	name,
+	backgroundColor,
+	textColor,
+	gradient,
+	style,
+} ) {
 	const [ userPalette, themePalette, defaultPalette ] = useSettings(
 		'color.palette.custom',
 		'color.palette.theme',
@@ -406,12 +389,17 @@ function useBlockProps( { name, backgroundColor, textColor } ) {
 		)?.color;
 	}
 
-	return { style: extraStyles };
+	return addSaveProps( { style: extraStyles }, name, {
+		textColor,
+		backgroundColor,
+		gradient,
+		style,
+	} );
 }
 
 export default {
 	useBlockProps,
-	attributeKeys: [ 'backgroundColor', 'textColor' ],
+	attributeKeys: [ 'backgroundColor', 'textColor', 'gradient', 'style' ],
 	hasSupport: hasColorSupport,
 };
 
@@ -455,12 +443,6 @@ addFilter(
 	addSaveProps
 );
 
-addFilter(
-	'blocks.registerBlockType',
-	'core/color/addEditProps',
-	addEditProps
-);
-
 addFilter(
 	'blocks.switchToBlockType.transformedBlock',
 	'core/color/addTransforms',

diff --git a/packages/block-editor/src/hooks/content-lock-ui.js b/packages/block-editor/src/hooks/content-lock-ui.js
@@ -2,9 +2,7 @@
  * WordPress dependencies
  */
 import { ToolbarButton, MenuItem } from '@wordpress/components';
-import { createHigherOrderComponent, pure } from '@wordpress/compose';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { addFilter } from '@wordpress/hooks';
 import { __ } from '@wordpress/i18n';
 import { useEffect, useRef, useCallback } from '@wordpress/element';
 
@@ -147,28 +145,9 @@ function ContentLockControlsPure( { clientId, isSelected } ) {
 	);
 }
 
-// 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.
-const ContentLockControls = pure( ContentLockControlsPure );
-
-export const withContentLockControls = createHigherOrderComponent(
-	( BlockEdit ) => ( props ) => {
-		return (
-			<>
-				<ContentLockControls
-					clientId={ props.clientId }
-					isSelected={ props.isSelected }
-				/>
-				<BlockEdit key="edit" { ...props } />
-			</>
-		);
+export default {
+	edit: ContentLockControlsPure,
+	hasSupport() {
+		return true;
 	},
-	'withContentLockControls'
-);
-
-addFilter(
-	'editor.BlockEdit',
-	'core/content-lock-ui/with-block-controls',
-	withContentLockControls
-);
+};
diff --git a/packages/block-editor/src/hooks/font-family.js b/packages/block-editor/src/hooks/font-family.js
@@ -74,31 +74,18 @@ function addSaveProps( props, blockType, attributes ) {
 	return props;
 }
 
-/**
- * Filters registered block settings to expand the block edit wrapper
- * by applying the desired styles and classnames.
- *
- * @param {Object} settings Original block settings.
- *
- * @return {Object} Filtered block settings.
- */
-function addEditProps( settings ) {
-	if ( ! hasBlockSupport( settings, FONT_FAMILY_SUPPORT_KEY ) ) {
-		return settings;
-	}
-
-	const existingGetEditWrapperProps = settings.getEditWrapperProps;
-	settings.getEditWrapperProps = ( attributes ) => {
-		let props = {};
-		if ( existingGetEditWrapperProps ) {
-			props = existingGetEditWrapperProps( attributes );
-		}
-		return addSaveProps( props, settings, attributes );
-	};
-
-	return settings;
+function useBlockProps( { name, fontFamily } ) {
+	return addSaveProps( {}, name, { fontFamily } );
 }
 
+export default {
+	useBlockProps,
+	attributeKeys: [ 'fontFamily' ],
+	hasSupport( name ) {
+		return hasBlockSupport( name, FONT_FAMILY_SUPPORT_KEY );
+	},
+};
+
 /**
  * Resets the font family block support attribute. This can be used when
  * disabling the font family support controls for a block via a progressive
@@ -122,9 +109,3 @@ addFilter(
 	'core/fontFamily/addSaveProps',
 	addSaveProps
 );
-
-addFilter(
-	'blocks.registerBlockType',
-	'core/fontFamily/addEditProps',
-	addEditProps
-);