@wordpress/block-library 7.5.0 → 7.8.0

package/src/list-item/hooks/use-enter.js

@@ -15,19 +15,15 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
 /**
  * Internal dependencies
  */
-import useIndentListItem from './use-indent-list-item';
+import useOutdentListItem from './use-outdent-list-item';
 
 export default function useEnter( props ) {
 	const { replaceBlocks } = useDispatch( blockEditorStore );
-	const {
-		getBlock,
-		getBlockRootClientId,
-		getBlockParents,
-		getBlockIndex,
-	} = useSelect( blockEditorStore );
+	const { getBlock, getBlockRootClientId, getBlockIndex } =
+		useSelect( blockEditorStore );
 	const propsRef = useRef( props );
 	propsRef.current = props;
-	const [ canIndent, indentListItem ] = useIndentListItem(
+	const [ canOutdent, outdentListItem ] = useOutdentListItem(
 		propsRef.current.clientId
 	);
 	return useRefEffect(
@@ -41,17 +37,13 @@ export default function useEnter( props ) {
 					return;
 				}
 				event.preventDefault();
-				if ( canIndent ) {
-					indentListItem();
+				if ( canOutdent ) {
+					outdentListItem();
 					return;
 				}
 				// Here we are in top level list so we need to split.
 				const blockRootClientId = getBlockRootClientId( clientId );
-				const blockParents = getBlockParents( clientId );
-				const topParentListBlockClientId = blockParents[ 0 ];
-				const topParentListBlock = getBlock(
-					topParentListBlockClientId
-				);
+				const topParentListBlock = getBlock( blockRootClientId );
 				const blockIndex = getBlockIndex( clientId );
 				const head = cloneBlock( {
 					...topParentListBlock,
@@ -89,6 +81,6 @@ export default function useEnter( props ) {
 				element.removeEventListener( 'keydown', onKeyDown );
 			};
 		},
-		[ canIndent ]
+		[ canOutdent ]
 	);
 }

package/src/list-item/hooks/use-indent-list-item.js

@@ -1,89 +1,75 @@
-/**
- * External dependencies
- */
-import { first } from 'lodash';
-
 /**
  * WordPress dependencies
  */
 import { useCallback } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import { createListItem } from '../utils';
+import { createBlock, cloneBlock } from '@wordpress/blocks';
 
 export default function useIndentListItem( clientId ) {
-	const { canIndent } = useSelect(
-		( innerSelect ) => {
-			const { getBlockIndex } = innerSelect( blockEditorStore );
-			return {
-				canIndent: getBlockIndex( clientId ) > 0,
-			};
-		},
+	const canIndent = useSelect(
+		( select ) => select( blockEditorStore ).getBlockIndex( clientId ) > 0,
 		[ clientId ]
 	);
-	const { replaceBlocks, selectionChange } = useDispatch( blockEditorStore );
+	const { replaceBlocks, selectionChange, multiSelect } =
+		useDispatch( blockEditorStore );
 	const {
-		getBlockRootClientId,
 		getBlock,
-		getBlockOrder,
+		getPreviousBlockClientId,
 		getSelectionStart,
 		getSelectionEnd,
-		getBlockIndex,
+		hasMultiSelection,
+		getMultiSelectedBlockClientIds,
 	} = useSelect( blockEditorStore );
-
 	return [
 		canIndent,
 		useCallback( () => {
+			const _hasMultiSelection = hasMultiSelection();
+			const clientIds = _hasMultiSelection
+				? getMultiSelectedBlockClientIds()
+				: [ clientId ];
+			const clonedBlocks = clientIds.map( ( _clientId ) =>
+				cloneBlock( getBlock( _clientId ) )
+			);
+			const previousSiblingId = getPreviousBlockClientId( clientId );
+			const newListItem = cloneBlock( getBlock( previousSiblingId ) );
+			// If the sibling has no innerBlocks, create a new `list` block.
+			if ( ! newListItem.innerBlocks?.length ) {
+				newListItem.innerBlocks = [ createBlock( 'core/list' ) ];
+			}
+			// A list item usually has one `list`, but it's possible to have
+			// more. So we need to preserve the previous `list` blocks and
+			// merge the new blocks to the last `list`.
+			newListItem.innerBlocks[
+				newListItem.innerBlocks.length - 1
+			].innerBlocks.push( ...clonedBlocks );
+
+			// We get the selection start/end here, because when
+			// we replace blocks, the selection is updated too.
 			const selectionStart = getSelectionStart();
 			const selectionEnd = getSelectionEnd();
-
-			const parentId = getBlockRootClientId( clientId );
-			const previousSiblingId = getBlockOrder( parentId )[
-				getBlockIndex( clientId ) - 1
-			];
-			const previousSibling = getBlock( previousSiblingId );
-			const previousSiblingChildren =
-				first( previousSibling.innerBlocks )?.innerBlocks || [];
-			const previousSiblingListAttributes =
-				first( previousSibling.innerBlocks )?.attributes || {};
-			const block = getBlock( clientId );
-
-			const childListAttributes = first( block.innerBlocks )?.attributes;
-			const childItemBlocks =
-				first( block.innerBlocks )?.innerBlocks || [];
-
-			const newBlock = createListItem(
-				block.attributes,
-				childListAttributes,
-				childItemBlocks
-			);
-			// Replace the previous sibling of the block being indented and the indented block,
+			// Replace the previous sibling of the block being indented and the indented blocks,
 			// with a new block whose attributes are equal to the ones of the previous sibling and
-			// whose descendants are the children of the previous sibling, followed by the indented block.
+			// whose descendants are the children of the previous sibling, followed by the indented blocks.
 			replaceBlocks(
-				[ previousSiblingId, clientId ],
-				[
-					createListItem(
-						previousSibling.attributes,
-						previousSiblingListAttributes,
-						[ ...previousSiblingChildren, newBlock ]
-					),
-				]
-			);
-
-			// Restore the selection state.
-			selectionChange(
-				newBlock.clientId,
-				selectionEnd.attributeKey,
-				selectionEnd.clientId === selectionStart.clientId
-					? selectionStart.offset
-					: selectionEnd.offset,
-				selectionEnd.offset
+				[ previousSiblingId, ...clientIds ],
+				[ newListItem ]
 			);
+			if ( ! _hasMultiSelection ) {
+				selectionChange(
+					clonedBlocks[ 0 ].clientId,
+					selectionEnd.attributeKey,
+					selectionEnd.clientId === selectionStart.clientId
+						? selectionStart.offset
+						: selectionEnd.offset,
+					selectionEnd.offset
+				);
+			} else {
+				multiSelect(
+					clonedBlocks[ 0 ].clientId,
+					clonedBlocks[ clonedBlocks.length - 1 ].clientId
+				);
+			}
 		}, [ clientId ] ),
 	];
 }

package/src/list-item/hooks/use-outdent-list-item.js

@@ -42,9 +42,8 @@ export default function useOutdentListItem( clientId ) {
 			const listParentId = getBlockRootClientId( clientId );
 			const listAttributes = getBlockAttributes( listParentId );
 			const listItemParentId = getBlockRootClientId( listParentId );
-			const listItemParentAttributes = getBlockAttributes(
-				listItemParentId
-			);
+			const listItemParentAttributes =
+				getBlockAttributes( listItemParentId );
 
 			const index = getBlockIndex( clientId );
 			const siblingBlocks = getBlock( listParentId ).innerBlocks;

package/src/list-item/hooks/use-space.js

@@ -0,0 +1,47 @@
+/**
+ * WordPress dependencies
+ */
+import { useRefEffect } from '@wordpress/compose';
+import { SPACE } from '@wordpress/keycodes';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import useIndentListItem from './use-indent-list-item';
+
+export default function useSpace( clientId ) {
+	const { getSelectionStart, getSelectionEnd } =
+		useSelect( blockEditorStore );
+	const [ canIndent, indentListItem ] = useIndentListItem( clientId );
+
+	return useRefEffect(
+		( element ) => {
+			function onKeyDown( event ) {
+				if (
+					event.defaultPrevented ||
+					event.keyCode !== SPACE ||
+					! canIndent
+				) {
+					return;
+				}
+				const selectionStart = getSelectionStart();
+				const selectionEnd = getSelectionEnd();
+				if (
+					selectionStart.offset === 0 &&
+					selectionEnd.offset === 0
+				) {
+					event.preventDefault();
+					indentListItem();
+				}
+			}
+
+			element.addEventListener( 'keydown', onKeyDown );
+			return () => {
+				element.removeEventListener( 'keydown', onKeyDown );
+			};
+		},
+		[ canIndent, indentListItem ]
+	);
+}

package/src/list-item/hooks/use-split.js

@@ -0,0 +1,33 @@
+/**
+ * WordPress dependencies
+ */
+import { useCallback, useRef } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { cloneBlock, createBlock } from '@wordpress/blocks';
+
+export default function useSplit( clientId ) {
+	// We can not rely on the isAfterOriginal parameter of the callback,
+	// because if the value after the split is empty isAfterOriginal is false
+	// while the value is in fact after the original. So to avoid that issue we use
+	// a flag where the first execution of the callback is false (it is the before value)
+	// and the second execution is true, it is the after value.
+	const isAfter = useRef( false );
+	const { getBlock } = useSelect( blockEditorStore );
+	return useCallback(
+		( value ) => {
+			const block = getBlock( clientId );
+			if ( isAfter.current ) {
+				return cloneBlock( block, {
+					content: value,
+				} );
+			}
+			isAfter.current = true;
+			return createBlock( block.name, {
+				...block.attributes,
+				content: value,
+			} );
+		},
+		[ clientId, getBlock ]
+	);
+}

package/src/list-item/utils.js

@@ -7,7 +7,7 @@ export function createListItem( listItemAttributes, listAttributes, children ) {
 	return createBlock(
 		'core/list-item',
 		listItemAttributes,
-		! children || ! children.length
+		! children?.length
 			? []
 			: [ createBlock( 'core/list', listAttributes, children ) ]
 	);

package/src/media-text/deprecated.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { noop, isEmpty, omit } from 'lodash';
+import { isEmpty, omit } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -15,6 +15,7 @@ import { InnerBlocks, getColorClassName } from '@wordpress/block-editor';
 import { imageFillStyles } from './media-container';
 
 const DEFAULT_MEDIA_WIDTH = 50;
+const noop = () => {};
 
 const migrateCustomColors = ( attributes ) => {
 	if ( ! attributes.customBackgroundColor ) {
@@ -173,7 +174,8 @@ export default [
 				'has-background': backgroundClass || customBackgroundColor,
 				[ backgroundClass ]: backgroundClass,
 				'is-stacked-on-mobile': isStackedOnMobile,
-				[ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
+				[ `is-vertically-aligned-${ verticalAlignment }` ]:
+					verticalAlignment,
 				'is-image-fill': imageFill,
 			} );
 			const backgroundStyles = imageFill
@@ -268,7 +270,8 @@ export default [
 				'has-media-on-the-right': 'right' === mediaPosition,
 				[ backgroundClass ]: backgroundClass,
 				'is-stacked-on-mobile': isStackedOnMobile,
-				[ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
+				[ `is-vertically-aligned-${ verticalAlignment }` ]:
+					verticalAlignment,
 				'is-image-fill': imageFill,
 			} );
 			const backgroundStyles = imageFill

package/src/media-text/edit.native.js

@@ -275,6 +275,8 @@ class MediaTextEdit extends Component {
 		const widthString = `${ temporaryMediaWidth }%`;
 		const innerBlockWidth = shouldStack ? 100 : 100 - temporaryMediaWidth;
 		const innerBlockWidthString = `${ innerBlockWidth }%`;
+		const hasMedia =
+			mediaType === MEDIA_TYPE_IMAGE || mediaType === MEDIA_TYPE_VIDEO;
 
 		const innerBlockContainerStyle = [
 			{ width: innerBlockWidthString },
@@ -344,7 +346,7 @@ class MediaTextEdit extends Component {
 			<>
 				{ mediaType === MEDIA_TYPE_IMAGE && this.getControls() }
 				<BlockControls>
-					{ ( isMediaSelected || mediaType === MEDIA_TYPE_VIDEO ) && (
+					{ hasMedia && (
 						<ToolbarGroup>
 							<Button
 								label={ __( 'Edit media' ) }
@@ -393,11 +395,8 @@ class MediaTextEdit extends Component {
 export default compose(
 	withColors( 'backgroundColor' ),
 	withSelect( ( select, { clientId } ) => {
-		const {
-			getSelectedBlockClientId,
-			getBlockParents,
-			getSettings,
-		} = select( blockEditorStore );
+		const { getSelectedBlockClientId, getBlockParents, getSettings } =
+			select( blockEditorStore );
 
 		const parents = getBlockParents( clientId, true );
 

package/src/media-text/media-container.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { noop } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -30,6 +29,7 @@ import icon from './media-container-icon';
  * Constants
  */
 const ALLOWED_MEDIA_TYPES = [ 'image', 'video' ];
+const noop = () => {};
 
 export function imageFillStyles( url, focalPoint ) {
 	return url

package/src/media-text/media-container.native.js

@@ -50,16 +50,13 @@ class MediaContainer extends Component {
 	constructor() {
 		super( ...arguments );
 		this.updateMediaProgress = this.updateMediaProgress.bind( this );
-		this.finishMediaUploadWithSuccess = this.finishMediaUploadWithSuccess.bind(
-			this
-		);
-		this.finishMediaUploadWithFailure = this.finishMediaUploadWithFailure.bind(
-			this
-		);
+		this.finishMediaUploadWithSuccess =
+			this.finishMediaUploadWithSuccess.bind( this );
+		this.finishMediaUploadWithFailure =
+			this.finishMediaUploadWithFailure.bind( this );
 		this.mediaUploadStateReset = this.mediaUploadStateReset.bind( this );
-		this.onSelectMediaUploadOption = this.onSelectMediaUploadOption.bind(
-			this
-		);
+		this.onSelectMediaUploadOption =
+			this.onSelectMediaUploadOption.bind( this );
 		this.onMediaPressed = this.onMediaPressed.bind( this );
 
 		this.state = {
@@ -191,7 +188,6 @@ class MediaContainer extends Component {
 				<TouchableWithoutFeedback
 					accessible={ ! isSelected }
 					onPress={ this.onMediaPressed }
-					onLongPress={ openMediaOptions }
 					disabled={ ! isSelected }
 				>
 					<View
@@ -222,7 +218,7 @@ class MediaContainer extends Component {
 		);
 	}
 
-	renderVideo( params, openMediaOptions ) {
+	renderVideo( params ) {
 		const {
 			aligmentStyles,
 			mediaUrl,
@@ -251,7 +247,6 @@ class MediaContainer extends Component {
 				<TouchableWithoutFeedback
 					accessible={ ! isSelected }
 					onPress={ this.onMediaPressed }
-					onLongPress={ openMediaOptions }
 					disabled={ ! isSelected }
 				>
 					<View style={ [ styles.videoContainer, aligmentStyles ] }>
@@ -305,7 +300,7 @@ class MediaContainer extends Component {
 				mediaElement = this.renderImage( params, openMediaOptions );
 				break;
 			case MEDIA_TYPE_VIDEO:
-				mediaElement = this.renderVideo( params, openMediaOptions );
+				mediaElement = this.renderVideo( params );
 				break;
 		}
 		return mediaElement;

package/src/media-text/save.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { noop, isEmpty } from 'lodash';
+import { isEmpty } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -16,6 +16,7 @@ import { imageFillStyles } from './media-container';
 import { DEFAULT_MEDIA_SIZE_SLUG } from './constants';
 
 const DEFAULT_MEDIA_WIDTH = 50;
+const noop = () => {};
 
 export default function save( { attributes } ) {
 	const {

package/src/media-text/transforms.js

@@ -28,6 +28,61 @@ const transforms = {
 					anchor,
 				} ),
 		},
+		{
+			type: 'block',
+			blocks: [ 'core/cover' ],
+			transform: (
+				{
+					align,
+					alt,
+					anchor,
+					backgroundType,
+					customGradient,
+					customOverlayColor,
+					gradient,
+					id,
+					overlayColor,
+					url,
+				},
+				innerBlocks
+			) => {
+				let additionalAttributes = {};
+
+				if ( customGradient ) {
+					additionalAttributes = {
+						style: {
+							color: {
+								gradient: customGradient,
+							},
+						},
+					};
+				} else if ( customOverlayColor ) {
+					additionalAttributes = {
+						style: {
+							color: {
+								background: customOverlayColor,
+							},
+						},
+					};
+				}
+
+				return createBlock(
+					'core/media-text',
+					{
+						align,
+						anchor,
+						backgroundColor: overlayColor,
+						gradient,
+						mediaAlt: alt,
+						mediaId: id,
+						mediaType: backgroundType,
+						mediaUrl: url,
+						...additionalAttributes,
+					},
+					innerBlocks
+				);
+			},
+		},
 	],
 	to: [
 		{
@@ -59,6 +114,105 @@ const transforms = {
 				} );
 			},
 		},
+		{
+			type: 'block',
+			blocks: [ 'core/cover' ],
+			transform: (
+				{
+					align,
+					anchor,
+					backgroundColor,
+					focalPoint,
+					gradient,
+					mediaAlt,
+					mediaId,
+					mediaType,
+					mediaUrl,
+					style,
+					textColor,
+				},
+				innerBlocks
+			) => {
+				const additionalAttributes = {};
+
+				if ( style?.color?.gradient ) {
+					additionalAttributes.customGradient = style.color.gradient;
+				} else if ( style?.color?.background ) {
+					additionalAttributes.customOverlayColor =
+						style.color.background;
+				}
+
+				const coverAttributes = {
+					align,
+					alt: mediaAlt,
+					anchor,
+					backgroundType: mediaType,
+					dimRatio: !! mediaUrl ? 50 : 100,
+					focalPoint,
+					gradient,
+					id: mediaId,
+					overlayColor: backgroundColor,
+					url: mediaUrl,
+					...additionalAttributes,
+				};
+				const customTextColor = style?.color?.text;
+
+				// Attempt to maintain any text color selection.
+				// Cover block's do not opt into color block support so we
+				// cannot directly copy the color attributes across.
+				if ( ! textColor && ! customTextColor ) {
+					return createBlock(
+						'core/cover',
+						coverAttributes,
+						innerBlocks
+					);
+				}
+
+				const coloredInnerBlocks = innerBlocks.map( ( innerBlock ) => {
+					const {
+						attributes: { style: innerStyle },
+					} = innerBlock;
+
+					// Only apply the media and text color if the inner block
+					// doesn't set its own color block support selection.
+					if (
+						innerBlock.attributes.textColor ||
+						innerStyle?.color?.text
+					) {
+						return innerBlock;
+					}
+
+					const newAttributes = { textColor };
+
+					// Only add or extend inner block's style object if we have
+					// a custom text color from the media & text block.
+					if ( customTextColor ) {
+						newAttributes.style = {
+							...innerStyle,
+							color: {
+								...innerStyle?.color,
+								text: customTextColor,
+							},
+						};
+					}
+
+					return createBlock(
+						innerBlock.name,
+						{
+							...innerBlock.attributes,
+							...newAttributes,
+						},
+						innerBlock.innerBlocks
+					);
+				} );
+
+				return createBlock(
+					'core/cover',
+					coverAttributes,
+					coloredInnerBlocks
+				);
+			},
+		},
 	],
 };
 

package/src/missing/edit.native.js

@@ -298,9 +298,8 @@ export default compose( [
 			canEnableUnsupportedBlockEditor:
 				getSettings( 'capabilities' )
 					.canEnableUnsupportedBlockEditor === true,
-			isEditableInUnsupportedBlockEditor: ! UBE_INCOMPATIBLE_BLOCKS.includes(
-				attributes.originalName
-			),
+			isEditableInUnsupportedBlockEditor:
+				! UBE_INCOMPATIBLE_BLOCKS.includes( attributes.originalName ),
 		};
 	} ),
 	withDispatch( ( dispatch, ownProps ) => {

package/src/missing/test/edit-integration.native.js

@@ -48,9 +48,8 @@ describe( 'Unsupported block', () => {
 			getByA11yLabel( /Unsupported Block\. Row 1/ )
 		);
 
-		const translatedTableTitle = within( missingBlock ).getByText(
-			'Tabla'
-		);
+		const translatedTableTitle =
+			within( missingBlock ).getByText( 'Tabla' );
 
 		expect( translatedTableTitle ).toBeDefined();
 	} );

package/src/missing/test/edit.native.js

@@ -74,9 +74,8 @@ describe( 'Missing block', () => {
 
 			it( 'renders edit action if UBE is available', () => {
 				const testInstance = getTestComponentWithContent();
-				const bottomSheet = testInstance.UNSAFE_getByType(
-					BottomSheet
-				);
+				const bottomSheet =
+					testInstance.UNSAFE_getByType( BottomSheet );
 				const bottomSheetCells = bottomSheet.props.children[ 1 ];
 				expect( bottomSheetCells ).toBeTruthy();
 				expect( bottomSheetCells.props.children.length ).toBe( 2 );
@@ -91,9 +90,8 @@ describe( 'Missing block', () => {
 				} );
 
 				const testInstance = getTestComponentWithContent();
-				const bottomSheet = testInstance.UNSAFE_getByType(
-					BottomSheet
-				);
+				const bottomSheet =
+					testInstance.UNSAFE_getByType( BottomSheet );
 				expect( bottomSheet.props.children[ 1 ] ).toBeFalsy();
 			} );
 
@@ -101,9 +99,8 @@ describe( 'Missing block', () => {
 				const testInstance = getTestComponentWithContent( {
 					originalName: 'core/block',
 				} );
-				const bottomSheet = testInstance.UNSAFE_getByType(
-					BottomSheet
-				);
+				const bottomSheet =
+					testInstance.UNSAFE_getByType( BottomSheet );
 				expect( bottomSheet.props.children[ 1 ] ).toBeFalsy();
 			} );
 		} );