@wordpress/block-editor 8.2.0 → 8.3.0

package/src/components/use-on-block-drop/index.js

@@ -78,7 +78,7 @@ export function onBlockDrop(
 			blocks,
 		} = parseDropEvent( event );
 
-		// If the user is inserting a block
+		// If the user is inserting a block.
 		if ( dropType === 'inserter' ) {
 			clearSelectedBlock();
 			const blocksToInsert = blocks.map( ( block ) =>
@@ -93,7 +93,7 @@ export function onBlockDrop(
 			);
 		}
 
-		// If the user is moving a block
+		// If the user is moving a block.
 		if ( dropType === 'block' ) {
 			const sourceBlockIndex = getBlockIndex( sourceClientIds[ 0 ] );
 

package/src/components/writing-flow/use-tab-nav.js

@@ -118,13 +118,16 @@ export default function useTabNav() {
 				return;
 			}
 
-			// Allow tabbing between form elements rendered in a block,
+			// Allow tabbing from the block wrapper to a form element,
+			// and between form elements rendered in a block,
 			// such as inside a placeholder. Form elements are generally
 			// meant to be UI rather than part of the content. Ideally
 			// these are not rendered in the content and perhaps in the
 			// future they can be rendered in an iframe or shadow DOM.
 			if (
-				isFormElement( event.target ) &&
+				( isFormElement( event.target ) ||
+					event.target.getAttribute( 'data-block' ) ===
+						getSelectedBlockClientId() ) &&
 				isFormElement( focus.tabbable[ direction ]( event.target ) )
 			) {
 				return;
@@ -183,7 +186,7 @@ export default function useTabNav() {
 			const isShift = event.shiftKey;
 			const direction = isShift ? 'findPrevious' : 'findNext';
 			const target = focus.tabbable[ direction ]( event.target );
-			// only do something when the next tabbable is a focus capture div (before/after)
+			// Only do something when the next tabbable is a focus capture div (before/after)
 			if (
 				target === focusCaptureBeforeRef.current ||
 				target === focusCaptureAfterRef.current

package/src/hooks/align.js

@@ -86,7 +86,7 @@ export function getValidAlignments(
  * @return {Object} Filtered block settings.
  */
 export function addAttribute( settings ) {
-	// allow blocks to specify their own attribute definition with default values if needed.
+	// Allow blocks to specify their own attribute definition with default values if needed.
 	if ( has( settings.attributes, [ 'align', 'type' ] ) ) {
 		return settings;
 	}

package/src/hooks/anchor.js

@@ -34,7 +34,7 @@ const ANCHOR_REGEX = /[\s#]/g;
  * @return {Object} Filtered block settings.
  */
 export function addAttribute( settings ) {
-	// allow blocks to specify their own attribute definition with default values if needed.
+	// Allow blocks to specify their own attribute definition with default values if needed.
 	if ( has( settings.attributes, [ 'anchor', 'type' ] ) ) {
 		return settings;
 	}

package/src/hooks/border.js

@@ -37,8 +37,6 @@ export const BORDER_SUPPORT_KEY = '__experimentalBorder';
 
 export function BorderPanel( props ) {
 	const { clientId } = props;
-	const isDisabled = useIsBorderDisabled( props );
-	const isSupported = hasBorderSupport( props.name );
 
 	const isColorSupported =
 		useSetting( 'border.color' ) && hasBorderSupport( props.name, 'color' );
@@ -53,7 +51,14 @@ export function BorderPanel( props ) {
 	const isWidthSupported =
 		useSetting( 'border.width' ) && hasBorderSupport( props.name, 'width' );
 
-	if ( isDisabled || ! isSupported ) {
+	const isDisabled = [
+		! isColorSupported,
+		! isRadiusSupported,
+		! isStyleSupported,
+		! isWidthSupported,
+	].every( Boolean );
+
+	if ( isDisabled ) {
 		return null;
 	}
 
@@ -179,22 +184,6 @@ export function shouldSkipSerialization( blockType ) {
 	return support?.__experimentalSkipSerialization;
 }
 
-/**
- * Determines if all border support features have been disabled.
- *
- * @return {boolean} If border support is completely disabled.
- */
-const useIsBorderDisabled = () => {
-	const configs = [
-		! useSetting( 'border.color' ),
-		! useSetting( 'border.radius' ),
-		! useSetting( 'border.style' ),
-		! useSetting( 'border.width' ),
-	];
-
-	return configs.every( Boolean );
-};
-
 /**
  * Returns a new style object where the specified border attribute has been
  * removed.

package/src/hooks/color.js

@@ -209,7 +209,7 @@ function addAttributes( settings ) {
 		return settings;
 	}
 
-	// allow blocks to specify their own attribute definition with default values if needed.
+	// Allow blocks to specify their own attribute definition with default values if needed.
 	if ( ! settings.attributes.backgroundColor ) {
 		Object.assign( settings.attributes, {
 			backgroundColor: {
@@ -269,7 +269,7 @@ export function addSaveProps( props, blockType, attributes ) {
 		textClass,
 		gradientClass,
 		{
-			// Don't apply the background class if there's a custom gradient
+			// Don't apply the background class if there's a custom gradient.
 			[ backgroundClass ]:
 				( ! hasGradient || ! style?.color?.gradient ) &&
 				!! backgroundClass,

package/src/hooks/duotone.js

@@ -12,7 +12,7 @@ import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
 import { SVG } from '@wordpress/components';
 import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
 import { addFilter } from '@wordpress/hooks';
-import { useContext, createPortal } from '@wordpress/element';
+import { useMemo, useContext, createPortal } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -140,12 +140,36 @@ ${ selector } {
 	);
 }
 
+function useMultiOriginPresets( { presetSetting, defaultSetting } ) {
+	const disableDefault = ! useSetting( defaultSetting );
+	const userPresets =
+		useSetting( `${ presetSetting }.custom` ) || EMPTY_ARRAY;
+	const themePresets =
+		useSetting( `${ presetSetting }.theme` ) || EMPTY_ARRAY;
+	const defaultPresets =
+		useSetting( `${ presetSetting }.default` ) || EMPTY_ARRAY;
+	return useMemo(
+		() => [
+			...userPresets,
+			...themePresets,
+			...( disableDefault ? EMPTY_ARRAY : defaultPresets ),
+		],
+		[ disableDefault, userPresets, themePresets, defaultPresets ]
+	);
+}
+
 function DuotonePanel( { attributes, setAttributes } ) {
 	const style = attributes?.style;
 	const duotone = style?.color?.duotone;
 
-	const duotonePalette = useSetting( 'color.duotone' ) || EMPTY_ARRAY;
-	const colorPalette = useSetting( 'color.palette' ) || EMPTY_ARRAY;
+	const duotonePalette = useMultiOriginPresets( {
+		presetSetting: 'color.duotone',
+		defaultSetting: 'color.defaultDuotone',
+	} );
+	const colorPalette = useMultiOriginPresets( {
+		presetSetting: 'color.palette',
+		defaultSetting: 'color.defaultPalette',
+	} );
 	const disableCustomColors = ! useSetting( 'color.custom' );
 	const disableCustomDuotone =
 		! useSetting( 'color.customDuotone' ) ||

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

@@ -20,11 +20,11 @@ import { hasBlockSupport, getBlockDefaultClassName } from '@wordpress/blocks';
  * @return {Object} Filtered props applied to save element.
  */
 export function addGeneratedClassName( extraProps, blockType ) {
-	// Adding the generated className
+	// Adding the generated className.
 	if ( hasBlockSupport( blockType, 'className', true ) ) {
 		if ( typeof extraProps.className === 'string' ) {
 			// We have some extra classes and want to add the default classname
-			// We use uniq to prevent duplicate classnames
+			// We use uniq to prevent duplicate classnames.
 
 			extraProps.className = uniq( [
 				getBlockDefaultClassName( blockType.name ),
@@ -34,7 +34,7 @@ export function addGeneratedClassName( extraProps, blockType ) {
 				.trim();
 		} else {
 			// There is no string in the className variable,
-			// so we just dump the default name in there
+			// so we just dump the default name in there.
 			extraProps.className = getBlockDefaultClassName( blockType.name );
 		}
 	}

package/src/hooks/lock.js

@@ -16,7 +16,7 @@ import { addFilter } from '@wordpress/hooks';
  * @return {Object} Filtered block settings.
  */
 export function addAttribute( settings ) {
-	// allow blocks to specify their own attribute definition with default values if needed.
+	// Allow blocks to specify their own attribute definition with default values if needed.
 	if ( has( settings.attributes, [ 'lock', 'type' ] ) ) {
 		return settings;
 	}

package/src/hooks/style.js

@@ -122,8 +122,11 @@ function compileElementsStyles( selector, elements = {} ) {
 	return map( elements, ( styles, element ) => {
 		const elementStyles = getInlineStyles( styles );
 		if ( ! isEmpty( elementStyles ) ) {
+			// The .editor-styles-wrapper selector is required on elements styles. As it is
+			// added to all other editor styles, not providing it causes reset and global
+			// styles to override element styles because of higher specificity.
 			return [
-				`.${ selector } ${ ELEMENTS[ element ] }{`,
+				`.editor-styles-wrapper .${ selector } ${ ELEMENTS[ element ] }{`,
 				...map(
 					elementStyles,
 					( value, property ) =>
@@ -148,7 +151,7 @@ function addAttribute( settings ) {
 		return settings;
 	}
 
-	// allow blocks to specify their own attribute definition with default values if needed.
+	// Allow blocks to specify their own attribute definition with default values if needed.
 	if ( ! settings.attributes.style ) {
 		Object.assign( settings.attributes, {
 			style: {

package/src/hooks/test/align.js

@@ -167,7 +167,7 @@ describe( 'align', () => {
 					isSelected
 				/>
 			);
-			// when there's only one child, `rendered` in the tree is an object not an array.
+			// When there's only one child, `rendered` in the tree is an object not an array.
 			expect( wrapper.toTree().rendered ).toBeInstanceOf( Object );
 		} );
 

package/src/store/actions.js

@@ -675,7 +675,7 @@ export const mergeBlocks = ( firstBlockClientId, secondBlockClientId ) => ( {
 	const blockA = select.getBlock( clientIdA );
 	const blockAType = getBlockType( blockA.name );
 
-	// Only focus the previous block if it's not mergeable
+	// Only focus the previous block if it's not mergeable.
 	if ( blockAType && ! blockAType.merge ) {
 		dispatch.selectBlock( blockA.clientId );
 		return;
@@ -744,18 +744,18 @@ export const mergeBlocks = ( firstBlockClientId, secondBlockClientId ) => ( {
 	}
 
 	// We can only merge blocks with similar types
-	// thus, we transform the block to merge first
+	// thus, we transform the block to merge first.
 	const blocksWithTheSameType =
 		blockA.name === blockB.name
 			? [ cloneB ]
 			: switchToBlockType( cloneB, blockA.name );
 
-	// If the block types can not match, do nothing
+	// If the block types can not match, do nothing.
 	if ( ! blocksWithTheSameType || ! blocksWithTheSameType.length ) {
 		return;
 	}
 
-	// Calling the merge to update the attributes and remove the block to be merged
+	// Calling the merge to update the attributes and remove the block to be merged.
 	const updatedAttributes = blockAType.merge(
 		cloneA.attributes,
 		blocksWithTheSameType[ 0 ].attributes

package/src/store/defaults.js

@@ -134,7 +134,7 @@ export const SETTINGS_DEFAULTS = {
 		{ slug: 'full', name: __( 'Full Size' ) },
 	],
 
-	// Allow plugin to disable Image Editor if need be
+	// Allow plugin to disable Image Editor if need be.
 	imageEditing: true,
 
 	// This is current max width of the block inner area
@@ -158,7 +158,6 @@ export const SETTINGS_DEFAULTS = {
 	__experimentalSpotlightEntityBlocks: [],
 	__experimentalGenerateAnchors: false,
 	__unstableGalleryWithImageBlocks: false,
-
 	// gradients setting is not used anymore now defaults are passed from theme.json on the server and core has its own defaults.
 	// The setting is only kept for backward compatibility purposes.
 	gradients: [

package/src/store/reducer.js

@@ -216,7 +216,7 @@ function updateParentInnerBlocksInTree(
 				controlledParents.add( current );
 				break;
 			} else {
-				// else continue traversing up through parents.
+				// Else continue traversing up through parents.
 				uncontrolledParents.add( current );
 				current = state.parents[ current ];
 			}
@@ -611,7 +611,7 @@ const withBlockReset = ( reducer ) => ( state, action ) => {
 		const subTree = buildBlockTree( newState, action.blocks );
 		newState.tree = {
 			...subTree,
-			// Root
+			// Root.
 			'': {
 				innerBlocks: action.blocks.map(
 					( subBlock ) => subTree[ subBlock.clientId ]
@@ -712,7 +712,7 @@ const withSaveReusableBlock = ( reducer ) => ( state, action ) => {
 	if ( state && action.type === 'SAVE_REUSABLE_BLOCK_SUCCESS' ) {
 		const { id, updatedId } = action;
 
-		// If a temporary reusable block is saved, we swap the temporary id with the final one
+		// If a temporary reusable block is saved, we swap the temporary id with the final one.
 		if ( id === updatedId ) {
 			return state;
 		}
@@ -769,10 +769,10 @@ const withResetControlledBlocks = ( reducer ) => ( state, action ) => {
  */
 export const blocks = flow(
 	combineReducers,
-	withSaveReusableBlock, // needs to be before withBlockCache
-	withBlockTree, // needs to be before withInnerBlocksRemoveCascade
+	withSaveReusableBlock, // Needs to be before withBlockCache.
+	withBlockTree, // Needs to be before withInnerBlocksRemoveCascade.
 	withInnerBlocksRemoveCascade,
-	withReplaceInnerBlocks, // needs to be after withInnerBlocksRemoveCascade
+	withReplaceInnerBlocks, // Needs to be after withInnerBlocksRemoveCascade.
 	withBlockReset,
 	withPersistentBlockChange,
 	withIgnoredBlockChange,
@@ -788,7 +788,7 @@ export const blocks = flow(
 				};
 
 			case 'UPDATE_BLOCK':
-				// Ignore updates if block isn't known
+				// Ignore updates if block isn't known.
 				if ( ! state[ action.clientId ] ) {
 					return state;
 				}
@@ -947,7 +947,7 @@ export const blocks = flow(
 				} = action;
 				const { index = state[ toRootClientId ].length } = action;
 
-				// Moving inside the same parent block
+				// Moving inside the same parent block.
 				if ( fromRootClientId === toRootClientId ) {
 					const subState = state[ toRootClientId ];
 					const fromIndex = subState.indexOf( clientIds[ 0 ] );
@@ -962,7 +962,7 @@ export const blocks = flow(
 					};
 				}
 
-				// Moving from a parent block to another
+				// Moving from a parent block to another.
 				return {
 					...state,
 					[ fromRootClientId ]: without(
@@ -1068,10 +1068,10 @@ export const blocks = flow(
 
 			case 'REMOVE_BLOCKS_AUGMENTED_WITH_CHILDREN':
 				return flow( [
-					// Remove inner block ordering for removed blocks
+					// Remove inner block ordering for removed blocks.
 					( nextState ) => omit( nextState, action.removedClientIds ),
 
-					// Remove deleted blocks from other blocks' orderings
+					// Remove deleted blocks from other blocks' orderings.
 					( nextState ) =>
 						mapValues( nextState, ( subState ) =>
 							without( subState, ...action.removedClientIds )

package/src/store/selectors.js

@@ -44,7 +44,7 @@ import { symbol } from '@wordpress/icons';
  *                                 text value. See `wp.richText.create`.
  */
 
-// Module constants
+// Module constants.
 const MILLISECONDS_PER_HOUR = 3600 * 1000;
 const MILLISECONDS_PER_DAY = 24 * 3600 * 1000;
 const MILLISECONDS_PER_WEEK = 7 * 24 * 3600 * 1000;
@@ -1359,7 +1359,7 @@ export function canRemoveBlock( state, clientId, rootClientId = null ) {
 		return ! parentIsLocked;
 	}
 
-	// when remove is true, it means we cannot remove it.
+	// When remove is true, it means we cannot remove it.
 	return ! lock?.remove;
 }
 
@@ -1400,7 +1400,7 @@ export function canMoveBlock( state, clientId, rootClientId = null ) {
 		return ! parentIsLocked;
 	}
 
-	// when move is true, it means we cannot move it.
+	// When move is true, it means we cannot move it.
 	return ! lock?.move;
 }
 
@@ -1554,7 +1554,7 @@ const buildBlockTypeItem = ( state, { buildScope = 'inserter' } ) => (
 		keywords: blockType.keywords,
 		variations: inserterVariations,
 		example: blockType.example,
-		utility: 1, // deprecated
+		utility: 1, // Deprecated.
 	};
 };
 
@@ -1654,7 +1654,7 @@ export const getInserterItems = createSelector(
 				category: 'reusable',
 				keywords: [],
 				isDisabled: false,
-				utility: 1, // deprecated
+				utility: 1, // Deprecated.
 				frecency,
 			};
 		};
@@ -1675,7 +1675,7 @@ export const getInserterItems = createSelector(
 
 		const items = blockTypeInserterItems.reduce( ( accumulator, item ) => {
 			const { variations = [] } = item;
-			// Exclude any block type item that is to be replaced by a default variation
+			// Exclude any block type item that is to be replaced by a default variation.
 			if ( ! variations.some( ( { isDefault } ) => isDefault ) ) {
 				accumulator.push( item );
 			}

package/src/store/test/actions.js

@@ -151,7 +151,7 @@ describe( 'actions', () => {
 			const end = 'end';
 			const select = {
 				getBlockRootClientId() {
-					return 'parent'; // for all client IDs
+					return 'parent'; // For all client IDs.
 				},
 				getSelectedBlockCount() {
 					return 0;

package/src/store/test/reducer.js

@@ -630,7 +630,7 @@ describe( 'state', () => {
 					controlledInnerBlocks: {},
 				} );
 
-				// the block object of the parent should be updated
+				// The block object of the parent should be updated.
 				expect( state.tree.chicken ).not.toBe(
 					existingState.tree.chicken
 				);

package/src/store/test/selectors.js

@@ -3074,7 +3074,7 @@ describe( 'selectors', () => {
 		} );
 
 		it( 'should return empty object if settings for the blocks don’t exist', () => {
-			// Does not include target Block clientIds
+			// Does not include target Block clientIds.
 			const state = {
 				blockListSettings: {
 					'test-2-dummy-clientId': {

package/src/utils/parse-css-unit-to-px.js

@@ -86,7 +86,7 @@ function parseUnitFunction( cssUnit ) {
 			cssUnit = cssUnit.replace( matches[ 0 ], functionUnitValue );
 		}
 
-		// if the unit hasn't been modified or we have a single value break free.
+		// If the unit hasn't been modified or we have a single value break free.
 		if ( cssUnit === currentCssUnit || parseFloat( cssUnit ) ) {
 			break;
 		}
@@ -123,7 +123,7 @@ function evalMathExpression( cssUnit ) {
 		const parsedUnit = parseUnit( getPxFromCssUnit( unit ) );
 		if ( ! parseFloat( parsedUnit.value ) ) {
 			errorFound = true;
-			// end early since we are dealing with a null value.
+			// End early since we are dealing with a null value.
 			break;
 		}
 		cssUnit = cssUnit.replace( unit, parsedUnit.value );
@@ -171,7 +171,7 @@ function convertParsedUnitToPx( parsedUnit, options ) {
 				? setOptions.fontSize
 				: setOptions.width ) * ONE_PERCENT,
 		ch: 8, // The advance measure (width) of the glyph "0" of the element's font. Approximate
-		ex: 7.15625, // x-height of the element's font. Approximate
+		ex: 7.15625, // X-height of the element's font. Approximate.
 		lh: setOptions.lineHeight,
 	};
 

package/src/utils/pasting.js

@@ -0,0 +1,77 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlobURL } from '@wordpress/blob';
+import { getFilesFromDataTransfer } from '@wordpress/dom';
+
+export function getPasteEventData( { clipboardData } ) {
+	let plainText = '';
+	let html = '';
+
+	// IE11 only supports `Text` as an argument for `getData` and will
+	// otherwise throw an invalid argument error, so we try the standard
+	// arguments first, then fallback to `Text` if they fail.
+	try {
+		plainText = clipboardData.getData( 'text/plain' );
+		html = clipboardData.getData( 'text/html' );
+	} catch ( error1 ) {
+		try {
+			html = clipboardData.getData( 'Text' );
+		} catch ( error2 ) {
+			// Some browsers like UC Browser paste plain text by default and
+			// don't support clipboardData at all, so allow default
+			// behaviour.
+			return;
+		}
+	}
+
+	const files = getFilesFromDataTransfer(
+		clipboardData
+	).filter( ( { type } ) => /^image\/(?:jpe?g|png|gif|webp)$/.test( type ) );
+
+	if (
+		files.length &&
+		! shouldDismissPastedFiles( files, html, plainText )
+	) {
+		html = files
+			.map( ( file ) => `<img src="${ createBlobURL( file ) }">` )
+			.join( '' );
+		plainText = '';
+	}
+
+	return { html, plainText };
+}
+
+/**
+ * Given a collection of DataTransfer files and HTML and plain text strings,
+ * determine whether the files are to be dismissed in favor of the HTML.
+ *
+ * Certain office-type programs, like Microsoft Word or Apple Numbers,
+ * will, upon copy, generate a screenshot of the content being copied and
+ * attach it to the clipboard alongside the actual rich text that the user
+ * sought to copy. In those cases, we should let Gutenberg handle the rich text
+ * content and not the screenshot, since this allows Gutenberg to insert
+ * meaningful blocks, like paragraphs, lists or even tables.
+ *
+ * @param {File[]} files File objects obtained from a paste event
+ * @param {string} html  HTML content obtained from a paste event
+ * @return {boolean}     True if the files should be dismissed
+ */
+export function shouldDismissPastedFiles( files, html /*, plainText */ ) {
+	// The question is only relevant when there is actual HTML content and when
+	// there is exactly one image file.
+	if (
+		html &&
+		files?.length === 1 &&
+		files[ 0 ].type.indexOf( 'image/' ) === 0
+	) {
+		// A single <img> tag found in the HTML source suggests that the
+		// content being pasted revolves around an image. Sometimes there are
+		// other elements found, like <figure>, but we assume that the user's
+		// intention is to paste the actual image file.
+		const IMAGE_TAG = /<\s*img\b/gi;
+		return html.match( IMAGE_TAG )?.length !== 1;
+	}
+
+	return false;
+}

package/src/utils/test/parse-css-unit-to-px.js

@@ -9,7 +9,7 @@ import {
 jest.useRealTimers();
 
 describe( 'getPxFromCssUnit', () => {
-	// Absolute units
+	// Absolute units.
 	describe( 'absolute unites should return px values', () => {
 		const testData = [
 			[ '25px', '25px' ],
@@ -19,7 +19,7 @@ describe( 'getPxFromCssUnit', () => {
 			[ '1in', '96px' ],
 			[ '12pt', '16px' ],
 			[ '1pc', '16px' ],
-			[ '40Q', '38px' ], // 40 Q should be 1 cm
+			[ '40Q', '38px' ], // 40 Q should be 1 cm.
 		];
 
 		test.each( testData )(
@@ -87,7 +87,7 @@ describe( 'getPxFromCssUnit', () => {
 		);
 	} );
 
-	// Function units
+	// Function units.
 
 	describe( 'function unites should return px values', () => {
 		const settings = {
@@ -120,7 +120,7 @@ describe( 'getPxFromCssUnit', () => {
 			[ 123.456, '123px' ],
 			[ 'abc', null ],
 			[ 'console.log("howdy"); + 10px', null ],
-			[ 'calc(12vw * 10px', null ], // missing closing bracket
+			[ 'calc(12vw * 10px', null ], // Missing closing bracket.
 		];
 
 		test.each( testData )(
@@ -159,7 +159,7 @@ describe( 'getPxFromCssUnit', () => {
 
 		const startM = Date.now();
 		i = 0;
-		// the memoized Version should be at 10X better then the non default one.
+		// The memoized Version should be at 10X better then the non default one.
 		while ( i < intervals * 10 ) {
 			memoizedGetPxFromCssUnit( 'max(25px, 35px)', { width: 201 } );
 			i++;