@wordpress/block-editor 14.11.0 → 14.12.0

package/src/components/spacing-sizes-control/utils.js

@@ -184,64 +184,6 @@ export function getSliderValueFromPreset( presetValue, spacingSizes ) {
 	return sliderValue !== -1 ? sliderValue : NaN;
 }
 
-/**
- * Gets an items with the most occurrence within an array
- * https://stackoverflow.com/a/20762713
- *
- * @param {Array<any>} arr Array of items to check.
- * @return {any} The item with the most occurrences.
- */
-function mode( arr ) {
-	return arr
-		.sort(
-			( a, b ) =>
-				arr.filter( ( v ) => v === a ).length -
-				arr.filter( ( v ) => v === b ).length
-		)
-		.pop();
-}
-
-/**
- * Gets the 'all' input value from values data.
- *
- * @param {Object} values Box spacing values
- *
- * @return {string} The most common value from all sides of box.
- */
-export function getAllRawValue( values = {} ) {
-	return mode( Object.values( values ) );
-}
-
-/**
- * Checks to determine if values are mixed.
- *
- * @param {Object} values Box values.
- * @param {Array}  sides  Sides that values relate to.
- *
- * @return {boolean} Whether values are mixed.
- */
-export function isValuesMixed( values = {}, sides = ALL_SIDES ) {
-	return (
-		( Object.values( values ).length >= 1 &&
-			Object.values( values ).length < sides.length ) ||
-		new Set( Object.values( values ) ).size > 1
-	);
-}
-
-/**
- * Checks to determine if values are defined.
- *
- * @param {Object} values Box values.
- *
- * @return {boolean} Whether values are defined.
- */
-export function isValuesDefined( values ) {
-	if ( values === undefined || values === null ) {
-		return false;
-	}
-	return Object.values( values ).filter( ( value ) => !! value ).length > 0;
-}
-
 /**
  * Determines whether a particular axis has support. If no axis is
  * specified, this function checks if either axis is supported.
@@ -275,54 +217,6 @@ export function hasAxisSupport( sides, axis ) {
 	return hasHorizontalSupport || hasVerticalSupport;
 }
 
-/**
- * Determines which menu options should be included in the SidePicker.
- *
- * @param {Array} sides Supported sides.
- *
- * @return {Object} Menu options with each option containing label & icon.
- */
-export function getSupportedMenuItems( sides ) {
-	if ( ! sides || ! sides.length ) {
-		return {};
-	}
-
-	const menuItems = {};
-
-	// Determine the primary "side" menu options.
-	const hasHorizontalSupport = hasAxisSupport( sides, 'horizontal' );
-	const hasVerticalSupport = hasAxisSupport( sides, 'vertical' );
-
-	if ( hasHorizontalSupport && hasVerticalSupport ) {
-		menuItems.axial = { label: LABELS.axial, icon: ICONS.axial };
-	} else if ( hasHorizontalSupport ) {
-		menuItems.axial = { label: LABELS.horizontal, icon: ICONS.horizontal };
-	} else if ( hasVerticalSupport ) {
-		menuItems.axial = { label: LABELS.vertical, icon: ICONS.vertical };
-	}
-
-	// Track whether we have any individual sides so we can omit the custom
-	// option if required.
-	let numberOfIndividualSides = 0;
-
-	ALL_SIDES.forEach( ( side ) => {
-		if ( sides.includes( side ) ) {
-			numberOfIndividualSides += 1;
-			menuItems[ side ] = {
-				label: LABELS[ side ],
-				icon: ICONS[ side ],
-			};
-		}
-	} );
-
-	// Add custom item if there are enough sides to warrant a separated view.
-	if ( numberOfIndividualSides > 1 ) {
-		menuItems.custom = { label: LABELS.custom, icon: ICONS.custom };
-	}
-
-	return menuItems;
-}
-
 /**
  * Checks if the supported sides are balanced for each axis.
  * - Horizontal - both left and right sides are supported.

package/src/hooks/contrast-checker.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useState, useEffect } from '@wordpress/element';
+import { useLayoutEffect, useReducer } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -9,52 +9,86 @@ import { useState, useEffect } from '@wordpress/element';
 import ContrastChecker from '../components/contrast-checker';
 import { useBlockElement } from '../components/block-list/use-block-props/use-block-refs';
 
-function getComputedStyle( node ) {
-	return node.ownerDocument.defaultView.getComputedStyle( node );
+function getComputedValue( node, property ) {
+	return node.ownerDocument.defaultView
+		.getComputedStyle( node )
+		.getPropertyValue( property );
+}
+
+function getBlockElementColors( blockEl ) {
+	if ( ! blockEl ) {
+		return {};
+	}
+
+	const firstLinkElement = blockEl.querySelector( 'a' );
+	const linkColor = !! firstLinkElement?.innerText
+		? getComputedValue( firstLinkElement, 'color' )
+		: undefined;
+
+	const textColor = getComputedValue( blockEl, 'color' );
+
+	let backgroundColorNode = blockEl;
+	let backgroundColor = getComputedValue(
+		backgroundColorNode,
+		'background-color'
+	);
+	while (
+		backgroundColor === 'rgba(0, 0, 0, 0)' &&
+		backgroundColorNode.parentNode &&
+		backgroundColorNode.parentNode.nodeType ===
+			backgroundColorNode.parentNode.ELEMENT_NODE
+	) {
+		backgroundColorNode = backgroundColorNode.parentNode;
+		backgroundColor = getComputedValue(
+			backgroundColorNode,
+			'background-color'
+		);
+	}
+
+	return {
+		textColor,
+		backgroundColor,
+		linkColor,
+	};
+}
+
+function reducer( prevColors, newColors ) {
+	const hasChanged = Object.keys( newColors ).some(
+		( key ) => prevColors[ key ] !== newColors[ key ]
+	);
+
+	// Do not re-render if the colors have not changed.
+	return hasChanged ? newColors : prevColors;
 }
 
 export default function BlockColorContrastChecker( { clientId } ) {
-	const [ detectedBackgroundColor, setDetectedBackgroundColor ] = useState();
-	const [ detectedColor, setDetectedColor ] = useState();
-	const [ detectedLinkColor, setDetectedLinkColor ] = useState();
 	const blockEl = useBlockElement( clientId );
+	const [ colors, setColors ] = useReducer( reducer, {} );
 
 	// There are so many things that can change the color of a block
 	// So we perform this check on every render.
-	useEffect( () => {
+	useLayoutEffect( () => {
 		if ( ! blockEl ) {
 			return;
 		}
-		setDetectedColor( getComputedStyle( blockEl ).color );
-
-		const firstLinkElement = blockEl.querySelector( 'a' );
-		if ( firstLinkElement && !! firstLinkElement.innerText ) {
-			setDetectedLinkColor( getComputedStyle( firstLinkElement ).color );
-		}
 
-		let backgroundColorNode = blockEl;
-		let backgroundColor =
-			getComputedStyle( backgroundColorNode ).backgroundColor;
-		while (
-			backgroundColor === 'rgba(0, 0, 0, 0)' &&
-			backgroundColorNode.parentNode &&
-			backgroundColorNode.parentNode.nodeType ===
-				backgroundColorNode.parentNode.ELEMENT_NODE
-		) {
-			backgroundColorNode = backgroundColorNode.parentNode;
-			backgroundColor =
-				getComputedStyle( backgroundColorNode ).backgroundColor;
+		function updateColors() {
+			setColors( getBlockElementColors( blockEl ) );
 		}
 
-		setDetectedBackgroundColor( backgroundColor );
-	}, [ blockEl ] );
+		// Combine `useLayoutEffect` and two rAF calls to ensure that values are read
+		// after the current paint but before the next paint.
+		window.requestAnimationFrame( () =>
+			window.requestAnimationFrame( updateColors )
+		);
+	} );
 
 	return (
 		<ContrastChecker
-			backgroundColor={ detectedBackgroundColor }
-			textColor={ detectedColor }
+			backgroundColor={ colors.backgroundColor }
+			textColor={ colors.textColor }
+			linkColor={ colors.linkColor }
 			enableAlphaChecker
-			linkColor={ detectedLinkColor }
 		/>
 	);
 }

package/src/hooks/custom-class-name.js

@@ -123,7 +123,8 @@ export function addTransforms( result, source, index, results ) {
 	// if source N does not exists we do nothing.
 	if ( source[ index ] ) {
 		const originClassName = source[ index ]?.attributes.className;
-		if ( originClassName ) {
+		// Avoid overriding classes if the transformed block already includes them.
+		if ( originClassName && result.attributes.className === undefined ) {
 			return {
 				...result,
 				attributes: {

package/src/store/selectors.js

@@ -1626,15 +1626,23 @@ const isBlockVisibleInTheInserter = (
 		Array.isArray( blockType.parent ) ? blockType.parent : []
 	).concat( Array.isArray( blockType.ancestor ) ? blockType.ancestor : [] );
 	if ( parents.length > 0 ) {
-		const rootBlockName = getBlockName( state, rootClientId );
 		// This is an exception to the rule that says that all blocks are visible in the inserter.
 		// Blocks that require a given parent or ancestor are only visible if we're within that parent.
-		return (
-			parents.includes( 'core/post-content' ) ||
-			parents.includes( rootBlockName ) ||
-			getBlockParentsByBlockName( state, rootClientId, parents ).length >
-				0
-		);
+		if ( parents.includes( 'core/post-content' ) ) {
+			return true;
+		}
+
+		let current = rootClientId;
+		let hasParent = false;
+		do {
+			if ( parents.includes( getBlockName( state, current ) ) ) {
+				hasParent = true;
+				break;
+			}
+			current = state.blocks.parents.get( current );
+		} while ( current );
+
+		return hasParent;
 	}
 
 	return true;