@wordpress/block-editor 8.1.2-next.f435e9e01b.0 → 8.2.1-next.a55ed9455a.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/index.js

@@ -37,6 +37,7 @@ export function useWritingFlow() {
 			useRefEffect(
 				( node ) => {
 					node.tabIndex = -1;
+					node.contentEditable = hasMultiSelection;
 
 					if ( ! hasMultiSelection ) {
 						return;

package/src/components/writing-flow/use-multi-selection.js

@@ -15,21 +15,6 @@ import { useSelect } from '@wordpress/data';
 import { store as blockEditorStore } from '../../store';
 import { __unstableUseBlockRef as useBlockRef } from '../block-list/use-block-props/use-block-refs';
 
-export function toggleRichText( container, toggle ) {
-	Array.from(
-		container.querySelectorAll(
-			// Exclude the Post Title from multi-select disable.
-			'.rich-text:not( .editor-post-title__input )'
-		)
-	).forEach( ( node ) => {
-		if ( toggle ) {
-			node.setAttribute( 'contenteditable', true );
-		} else {
-			node.removeAttribute( 'contenteditable' );
-		}
-	} );
-}
-
 /**
  * Returns for the deepest node at the start or end of a container node. Ignores
  * any text nodes that only contain HTML formatting whitespace.
@@ -62,6 +47,7 @@ function selector( select ) {
 		getMultiSelectedBlockClientIds,
 		hasMultiSelection,
 		getSelectedBlockClientId,
+		getSelectedBlocksInitialCaretPosition,
 	} = select( blockEditorStore );
 
 	return {
@@ -69,11 +55,13 @@ function selector( select ) {
 		multiSelectedBlockClientIds: getMultiSelectedBlockClientIds(),
 		hasMultiSelection: hasMultiSelection(),
 		selectedBlockClientId: getSelectedBlockClientId(),
+		initialPosition: getSelectedBlocksInitialCaretPosition(),
 	};
 }
 
 export default function useMultiSelection() {
 	const {
+		initialPosition,
 		isMultiSelecting,
 		multiSelectedBlockClientIds,
 		hasMultiSelection,
@@ -93,6 +81,13 @@ export default function useMultiSelection() {
 			const { ownerDocument } = node;
 			const { defaultView } = ownerDocument;
 
+			// Allow initialPosition to bypass focus behavior. This is useful
+			// for the list view or other areas where we don't want to transfer
+			// focus to the editor canvas.
+			if ( initialPosition === undefined || initialPosition === null ) {
+				return;
+			}
+
 			if ( ! hasMultiSelection || isMultiSelecting ) {
 				if ( ! selectedBlockClientId || isMultiSelecting ) {
 					return;
@@ -131,6 +126,12 @@ export default function useMultiSelection() {
 				return;
 			}
 
+			// Allow cross contentEditable selection by temporarily making
+			// all content editable. We can't rely on using the store and
+			// React because re-rending happens too slowly. We need to be
+			// able to select across instances immediately.
+			node.contentEditable = true;
+
 			// For some browsers, like Safari, it is important that focus happens
 			// BEFORE selection.
 			node.focus();
@@ -144,11 +145,6 @@ export default function useMultiSelection() {
 			const startNode = getDeepestNode( startRef.current, 'start' );
 			const endNode = getDeepestNode( endRef.current, 'end' );
 
-			// While rich text will be disabled with a delay when there is a multi
-			// selection, we must do it immediately because it's not possible to set
-			// selection across editable hosts.
-			toggleRichText( node, false );
-
 			range.setStartBefore( startNode );
 			range.setEndAfter( endNode );
 
@@ -160,6 +156,7 @@ export default function useMultiSelection() {
 			isMultiSelecting,
 			multiSelectedBlockClientIds,
 			selectedBlockClientId,
+			initialPosition,
 		]
 	);
 }

package/src/components/writing-flow/use-select-all.js

@@ -31,11 +31,15 @@ export default function useSelectAll() {
 				return;
 			}
 
-			if ( ! isEntirelySelected( event.target ) ) {
+			const selectedClientIds = getSelectedBlockClientIds();
+
+			if (
+				selectedClientIds.length < 2 &&
+				! isEntirelySelected( event.target )
+			) {
 				return;
 			}
 
-			const selectedClientIds = getSelectedBlockClientIds();
 			const [ firstSelectedClientId ] = selectedClientIds;
 			const rootClientId = getBlockRootClientId( firstSelectedClientId );
 			let blockClientIds = getBlockOrder( rootClientId );

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/custom-class-name.js

@@ -112,6 +112,45 @@ export function addSaveProps( extraProps, blockType, attributes ) {
 	return extraProps;
 }
 
+export function addTransforms( result, source, index, results ) {
+	if ( ! hasBlockSupport( result.name, 'customClassName', true ) ) {
+		return result;
+	}
+
+	// If the condition verifies we are probably in the presence of a wrapping transform
+	// e.g: nesting paragraphs in a group or columns and in that case the class should not be kept.
+	if ( results.length === 1 && result.innerBlocks.length === source.length ) {
+		return result;
+	}
+
+	// If we are transforming one block to multiple blocks or multiple blocks to one block,
+	// we ignore the class during the transform.
+	if (
+		( results.length === 1 && source.length > 1 ) ||
+		( results.length > 1 && source.length === 1 )
+	) {
+		return result;
+	}
+
+	// If we are in presence of transform between one or more block in the source
+	// that have one or more blocks in the result
+	// we apply the class on source N to the result N,
+	// if source N does not exists we do nothing.
+	if ( source[ index ] ) {
+		const originClassName = source[ index ]?.attributes.className;
+		if ( originClassName ) {
+			return {
+				...result,
+				attributes: {
+					...result.attributes,
+					className: originClassName,
+				},
+			};
+		}
+	}
+	return result;
+}
+
 addFilter(
 	'blocks.registerBlockType',
 	'core/custom-class-name/attribute',
@@ -127,3 +166,9 @@ addFilter(
 	'core/custom-class-name/save-props',
 	addSaveProps
 );
+
+addFilter(
+	'blocks.switchToBlockType.transformedBlock',
+	'core/color/addTransforms',
+	addTransforms
+);

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/line-height.js

@@ -38,6 +38,8 @@ export function LineHeightEdit( props ) {
 	};
 	return (
 		<LineHeightControl
+			__unstableInputWidth="100%"
+			__nextHasNoMarginBottom={ true }
 			value={ style?.typography?.lineHeight }
 			onChange={ onChange }
 		/>

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

@@ -27,6 +27,7 @@ import {
 	__EXPERIMENTAL_ELEMENTS as ELEMENTS,
 } from '@wordpress/blocks';
 import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
+import { getCSSRules } from '@wordpress/style-engine';
 
 /**
  * Internal dependencies
@@ -85,21 +86,35 @@ export function getInlineStyles( styles = {} ) {
 			// option and backwards compatibility for border radius support.
 			const styleValue = get( styles, path );
 
-			if ( !! subPaths && ! isString( styleValue ) ) {
-				Object.entries( subPaths ).forEach( ( entry ) => {
-					const [ name, subPath ] = entry;
-					const value = get( styleValue, [ subPath ] );
-
-					if ( value ) {
-						output[ name ] = compileStyleValue( value );
-					}
-				} );
-			} else if ( ! ignoredStyles.includes( path.join( '.' ) ) ) {
-				output[ propKey ] = compileStyleValue( get( styles, path ) );
+			if ( ! STYLE_PROPERTY[ propKey ].useEngine ) {
+				if ( !! subPaths && ! isString( styleValue ) ) {
+					Object.entries( subPaths ).forEach( ( entry ) => {
+						const [ name, subPath ] = entry;
+						const value = get( styleValue, [ subPath ] );
+
+						if ( value ) {
+							output[ name ] = compileStyleValue( value );
+						}
+					} );
+				} else if ( ! ignoredStyles.includes( path.join( '.' ) ) ) {
+					output[ propKey ] = compileStyleValue(
+						get( styles, path )
+					);
+				}
 			}
 		}
 	} );
 
+	// The goal is to move everything to server side generated engine styles
+	// This is temporary as we absorb more and more styles into the engine.
+	const extraRules = getCSSRules( styles, { selector: 'self' } );
+	extraRules.forEach( ( rule ) => {
+		if ( rule.selector !== 'self' ) {
+			throw "This style can't be added as inline style";
+		}
+		output[ rule.key ] = rule.value;
+	} );
+
 	return output;
 }
 
@@ -107,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 ) =>
@@ -133,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/hooks/typography.scss

@@ -6,10 +6,6 @@
 		margin-bottom: 0;
 	}
 
-	.block-editor-line-height-control input {
-		max-width: 100%;
-	}
-
 	.single-column {
 		grid-column: span 1;
 	}

package/src/layouts/flow.js

@@ -115,31 +115,36 @@ export default {
 		let output =
 			!! contentSize || !! wideSize
 				? `
-					${ appendSelectors( selector, '> *' ) } {
+					${ appendSelectors(
+						selector,
+						'> :where(:not(.alignleft):not(.alignright))'
+					) } {
 						max-width: ${ contentSize ?? wideSize };
 						margin-left: auto !important;
 						margin-right: auto !important;
 					}
 
-					${ appendSelectors( selector, '> [data-align="wide"]' ) }  {
+					${ appendSelectors( selector, '> .alignwide' ) }  {
 						max-width: ${ wideSize ?? contentSize };
 					}
 
-					${ appendSelectors( selector, '> [data-align="full"]' ) } {
+					${ appendSelectors( selector, '> .alignfull' ) } {
 						max-width: none;
 					}
 				`
 				: '';
 
 		output += `
-			${ appendSelectors( selector, '> [data-align="left"]' ) } {
+			${ appendSelectors( selector, '> .alignleft' ) } {
 				float: left;
 				margin-right: 2em;
+				margin-left: 0;
 			}
 
-			${ appendSelectors( selector, '> [data-align="right"]' ) } {
+			${ appendSelectors( selector, '> .alignright' ) } {
 				float: right;
 				margin-left: 2em;
+				margin-right: 0;
 			}
 
 		`;

package/src/store/actions.js

@@ -259,10 +259,15 @@ export function stopMultiSelect() {
 /**
  * Action that changes block multi-selection.
  *
- * @param {string} start First block of the multi selection.
- * @param {string} end   Last block of the multiselection.
+ * @param {string}      start                         First block of the multi selection.
+ * @param {string}      end                           Last block of the multiselection.
+ * @param {number|null} __experimentalInitialPosition Optional initial position. Pass as null to skip focus within editor canvas.
  */
-export const multiSelect = ( start, end ) => ( { select, dispatch } ) => {
+export const multiSelect = (
+	start,
+	end,
+	__experimentalInitialPosition = 0
+) => ( { select, dispatch } ) => {
 	const startBlockRootClientId = select.getBlockRootClientId( start );
 	const endBlockRootClientId = select.getBlockRootClientId( end );
 
@@ -271,7 +276,12 @@ export const multiSelect = ( start, end ) => ( { select, dispatch } ) => {
 		return;
 	}
 
-	dispatch( { type: 'MULTI_SELECT', start, end } );
+	dispatch( {
+		type: 'MULTI_SELECT',
+		start,
+		end,
+		initialPosition: __experimentalInitialPosition,
+	} );
 
 	const blockCount = select.getSelectedBlockCount();
 
@@ -665,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;
@@ -734,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
@@ -996,11 +1006,11 @@ export function selectionChange(
  * @param {?Object} attributes   Optional attributes of the block to assign.
  * @param {?string} rootClientId Optional root client ID of block list on which
  *                               to append.
- * @param {?number} index        Optional index where to insert the default block
- *
- * @return {Object} Action object
+ * @param {?number} index        Optional index where to insert the default block.
  */
-export function insertDefaultBlock( attributes, rootClientId, index ) {
+export const insertDefaultBlock = ( attributes, rootClientId, index ) => ( {
+	dispatch,
+} ) => {
 	// Abort if there is no default block type (if it has been unregistered).
 	const defaultBlockName = getDefaultBlockName();
 	if ( ! defaultBlockName ) {
@@ -1009,8 +1019,8 @@ export function insertDefaultBlock( attributes, rootClientId, index ) {
 
 	const block = createBlock( defaultBlockName, attributes );
 
-	return insertBlock( block, index, rootClientId );
-}
+	return dispatch.insertBlock( block, index, rootClientId );
+};
 
 /**
  * Action that changes the nested settings of a given block.

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
@@ -156,8 +156,8 @@ export const SETTINGS_DEFAULTS = {
 	__experimentalBlockPatterns: [],
 	__experimentalBlockPatternCategories: [],
 	__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/index.js

@@ -22,7 +22,6 @@ export const storeConfig = {
 	reducer,
 	selectors,
 	actions,
-	__experimentalUseThunks: true,
 };
 
 /**