@wordpress/block-editor 14.10.1 → 14.12.0

package/src/components/url-popover/image-url-input-ui.js

@@ -265,14 +265,14 @@ const ImageURLInputUI = ( {
 				<div className="block-editor-url-popover__expand-on-click">
 					<Icon icon={ fullscreen } />
 					<div className="text">
-						<p>{ __( 'Expand on click' ) }</p>
+						<p>{ __( 'Enlarge on click' ) }</p>
 						<p className="description">
 							{ __( 'Scales the image with a lightbox effect' ) }
 						</p>
 					</div>
 					<Button
 						icon={ linkOff }
-						label={ __( 'Disable expand on click' ) }
+						label={ __( 'Disable enlarge on click' ) }
 						onClick={ () => {
 							onSetLightbox?.( false );
 						} }
@@ -372,7 +372,7 @@ const ImageURLInputUI = ( {
 											stopEditLink();
 										} }
 									>
-										{ __( 'Expand on click' ) }
+										{ __( 'Enlarge on click' ) }
 									</MenuItem>
 								) }
 							</NavigableMenu>

package/src/components/use-block-commands/index.js

@@ -89,7 +89,7 @@ const getTransformCommands = () =>
 			}
 		}
 
-		// Simple block tranformation based on the `Block Transforms` API.
+		// Simple block transformation based on the `Block Transforms` API.
 		function onBlockTransform( name ) {
 			const newBlocks = switchToBlockType( blocks, name );
 			replaceBlocks( clientIds, newBlocks );

package/src/components/use-moving-animation/index.js

@@ -96,7 +96,7 @@ function useMovingAnimation( { triggerAnimationOnChange, clientId } ) {
 		// motion, if the user is typing (insertion by Enter), or if the block
 		// count exceeds the threshold (insertion caused all the blocks that
 		// follow to animate).
-		// To do: consider enableing the _moving_ animation even for large
+		// To do: consider enabling the _moving_ animation even for large
 		// posts, while only disabling the _insertion_ animation?
 		const disableAnimation =
 			window.matchMedia( '(prefers-reduced-motion: reduce)' ).matches ||

package/src/components/use-settings/README.md

@@ -5,7 +5,7 @@
 It does the lookup of the settings in the following order:
 
 1. Third parties can provide the settings for the block using the filter `blockEditor.useSetting.before`.
-2. If no third parties have provided this setting, then it looks up in the block instance hierachy starting from the current block and working its way upwards to its ancestors.
+2. If no third parties have provided this setting, then it looks up in the block instance hierarchy starting from the current block and working its way upwards to its ancestors.
 3. If that doesn't prove to be successful in getting a value, then it falls back to the settings from the block editor store.
 4. If none of the above steps prove to be successful, then it's likely to be a deprecated setting and the deprecated setting is used instead.
 

package/src/components/warning/content.scss

@@ -18,7 +18,7 @@
 		margin: 0;
 	}
 
-	// Required extra-specifity to override paragraph block styles.
+	// Required extra-specificity to override paragraph block styles.
 	p.block-editor-warning__message.block-editor-warning__message {
 		min-height: auto;
 	}

package/src/components/writing-flow/test/index.js

@@ -50,7 +50,7 @@ describe( 'isNavigationCandidate', () => {
 		} );
 	} );
 
-	it( 'should return false if vertically navigating inputs with vertial support like number', () => {
+	it( 'should return false if vertically navigating inputs with vertical support like number', () => {
 		[ UP, DOWN ].forEach( ( keyCode ) => {
 			const result = isNavigationCandidate(
 				elements.inputNumber,

package/src/hooks/color.scss

@@ -1,12 +1,5 @@
 .color-block-support-panel {
 	.block-editor-contrast-checker {
-		/**
-		 * Contrast checkers are forced to the bottom of the panel so all
-		 * injected color controls can appear as a single item group without
-		 * the contrast checkers suddenly appearing between items.
-		 */
-		/* stylelint-disable-next-line property-disallowed-list -- This should be removed when https://github.com/WordPress/gutenberg/issues/58936 is fixed. */
-		order: 9999;
 		grid-column: span 2;
 		margin-top: $grid-unit-20;
 

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/actions.js

@@ -1266,7 +1266,7 @@ export const mergeBlocks =
 			offset !== undefined &&
 			// We cannot restore text selection if the RichText identifier
 			// is not a defined block attribute key. This can be the case if the
-			// fallback intance ID is used to store selection (and no RichText
+			// fallback instance ID is used to store selection (and no RichText
 			// identifier is set), or when the identifier is wrong.
 			!! attributeDefinition;
 

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;
@@ -1958,7 +1966,7 @@ const canIncludeBlockTypeInInserter = ( state, blockType, rootClientId ) => {
 };
 
 /**
- * Return a function to be used to tranform a block variation to an inserter item
+ * Return a function to be used to transform a block variation to an inserter item
  *
  * @param {Object} state Global State
  * @param {Object} item  Denormalized inserter item
@@ -2021,7 +2029,7 @@ const calculateFrecency = ( time, count ) => {
 /**
  * Returns a function that accepts a block type and builds an item to be shown
  * in a specific context. It's used for building items for Inserter and available
- * block Transfroms list.
+ * block Transforms list.
  *
  * @param {Object} state              Editor state.
  * @param {Object} options            Options object for handling the building of a block type.
@@ -2522,7 +2530,7 @@ export const __experimentalGetAllowedPatterns = createRegistrySelector(
  * or blocks transformations.
  *
  * @param {Object}          state        Editor state.
- * @param {string|string[]} blockNames   Block's name or array of block names to find matching pattens.
+ * @param {string|string[]} blockNames   Block's name or array of block names to find matching patterns.
  * @param {?string}         rootClientId Optional target root client ID.
  *
  * @return {Array} The list of matched block patterns based on declared `blockTypes` and block name.
@@ -2941,7 +2949,7 @@ export const __unstableGetVisibleBlocks = createSelector(
 );
 
 export function __unstableHasActiveBlockOverlayActive( state, clientId ) {
-	// Prevent overlay on blocks with a non-default editing mode. If the mdoe is
+	// Prevent overlay on blocks with a non-default editing mode. If the mode is
 	// 'disabled' then the overlay is redundant since the block can't be
 	// selected. If the mode is 'contentOnly' then the overlay is redundant
 	// since there will be no controls to interact with once selected.
@@ -3065,7 +3073,7 @@ export const getBlockEditingMode = createRegistrySelector(
 				return state.derivedNavModeBlockEditingModes.get( clientId );
 			}
 
-			// In normal mode, consider that an explicitely set editing mode takes over.
+			// In normal mode, consider that an explicitly set editing mode takes over.
 			const blockEditingMode = state.blockEditingModes.get( clientId );
 			if ( blockEditingMode ) {
 				return blockEditingMode;

package/src/store/test/private-selectors.js

@@ -237,7 +237,7 @@ describe( 'private selectors', () => {
 			).toBe( false );
 		} );
 
-		it( 'should return false when top level block is disabled via inheritence and there are non-disabled editing modes within it', () => {
+		it( 'should return false when top level block is disabled via inheritance and there are non-disabled editing modes within it', () => {
 			const state = {
 				...baseState,
 				blockEditingModes: new Map( [

package/src/store/test/selectors.js

@@ -3534,7 +3534,7 @@ describe( 'selectors', () => {
 		beforeAll( () => {
 			registerBlockType( 'core/with-tranforms-a', {
 				category: 'text',
-				title: 'Tranforms a',
+				title: 'Transforms a',
 				edit: () => {},
 				save: () => {},
 				transforms: {
@@ -3563,7 +3563,7 @@ describe( 'selectors', () => {
 			} );
 			registerBlockType( 'core/with-tranforms-b', {
 				category: 'text',
-				title: 'Tranforms b',
+				title: 'Transforms b',
 				edit: () => {},
 				save: () => {},
 				transforms: {
@@ -3578,7 +3578,7 @@ describe( 'selectors', () => {
 			} );
 			registerBlockType( 'core/with-tranforms-c', {
 				category: 'text',
-				title: 'Tranforms c',
+				title: 'Transforms c',
 				edit: () => {},
 				save: () => {},
 				transforms: {

package/src/style.scss

@@ -40,6 +40,7 @@
 @import "./components/justify-content-control/style.scss";
 @import "./components/link-control/style.scss";
 @import "./components/list-view/style.scss";
+@import "./components/media-placeholder/style.scss";
 @import "./components/media-replace-flow/style.scss";
 @import "./components/multi-selection-inspector/style.scss";
 @import "./components/responsive-block-control/style.scss";

package/src/utils/test/sorting.js

@@ -37,7 +37,7 @@ describe( 'orderBy', () => {
 		expect( orderBy( input, 'x' ) ).toEqual( expected );
 	} );
 
-	it( 'should maintain original order of equal items in descencing order', () => {
+	it( 'should maintain original order of equal items in descending order', () => {
 		const a = { x: 1, a: 1 };
 		const b = { x: 1, b: 2 };
 		const c = { x: 0 };

package/src/utils/transform-styles/index.js

@@ -160,7 +160,7 @@ function transformStyle(
 /**
  * @typedef {Object} EditorStyle
  * @property {string}    css              the CSS block(s), as a single string.
- * @property {?string}   baseURL          the base URL to be used as the reference when rewritting urls.
+ * @property {?string}   baseURL          the base URL to be used as the reference when rewriting urls.
  * @property {?string[]} ignoredSelectors the selectors not to wrap.
  */
 

package/src/utils/use-notify-copy.js

@@ -17,47 +17,55 @@ export function useNotifyCopy() {
 	const { getBlockType } = useSelect( blocksStore );
 	const { createSuccessNotice } = useDispatch( noticesStore );
 
-	return useCallback( ( eventType, selectedBlockClientIds ) => {
-		let notice = '';
-		if ( selectedBlockClientIds.length === 1 ) {
-			const clientId = selectedBlockClientIds[ 0 ];
-			const title = getBlockType( getBlockName( clientId ) )?.title;
-			notice =
-				eventType === 'copy'
-					? sprintf(
-							// Translators: Name of the block being copied, e.g. "Paragraph".
-							__( 'Copied "%s" to clipboard.' ),
-							title
-					  )
-					: sprintf(
-							// Translators: Name of the block being cut, e.g. "Paragraph".
-							__( 'Moved "%s" to clipboard.' ),
-							title
-					  );
-		} else {
-			notice =
-				eventType === 'copy'
-					? sprintf(
-							// Translators: %d: Number of blocks being copied.
-							_n(
-								'Copied %d block to clipboard.',
-								'Copied %d blocks to clipboard.',
-								selectedBlockClientIds.length
-							),
-							selectedBlockClientIds.length
-					  )
-					: sprintf(
-							// Translators: %d: Number of blocks being cut.
-							_n(
-								'Moved %d block to clipboard.',
-								'Moved %d blocks to clipboard.',
-								selectedBlockClientIds.length
-							),
-							selectedBlockClientIds.length
-					  );
-		}
-		createSuccessNotice( notice, {
-			type: 'snackbar',
-		} );
-	}, [] );
+	return useCallback(
+		( eventType, selectedBlockClientIds ) => {
+			let notice = '';
+
+			if ( eventType === 'copyStyles' ) {
+				notice = __( 'Styles copied to clipboard.' );
+			} else if ( selectedBlockClientIds.length === 1 ) {
+				const clientId = selectedBlockClientIds[ 0 ];
+				const title = getBlockType( getBlockName( clientId ) )?.title;
+
+				if ( eventType === 'copy' ) {
+					notice = sprintf(
+						// Translators: Name of the block being copied, e.g. "Paragraph".
+						__( 'Copied "%s" to clipboard.' ),
+						title
+					);
+				} else {
+					notice = sprintf(
+						// Translators: Name of the block being cut, e.g. "Paragraph".
+						__( 'Moved "%s" to clipboard.' ),
+						title
+					);
+				}
+			} else if ( eventType === 'copy' ) {
+				notice = sprintf(
+					// Translators: %d: Number of blocks being copied.
+					_n(
+						'Copied %d block to clipboard.',
+						'Copied %d blocks to clipboard.',
+						selectedBlockClientIds.length
+					),
+					selectedBlockClientIds.length
+				);
+			} else {
+				notice = sprintf(
+					// Translators: %d: Number of blocks being moved.
+					_n(
+						'Moved %d block to clipboard.',
+						'Moved %d blocks to clipboard.',
+						selectedBlockClientIds.length
+					),
+					selectedBlockClientIds.length
+				);
+			}
+
+			createSuccessNotice( notice, {
+				type: 'snackbar',
+			} );
+		},
+		[ createSuccessNotice, getBlockName, getBlockType ]
+	);
 }

package/tsconfig.json

@@ -27,6 +27,7 @@
 		{ "path": "../style-engine" },
 		{ "path": "../token-list" },
 		{ "path": "../url" },
+		{ "path": "../upload-media" },
 		{ "path": "../warning" },
 		{ "path": "../wordcount" }
 	],