@wordpress/block-library 8.25.0 → 8.26.0

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

@@ -7,10 +7,6 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
 import { createBlock, cloneBlock } from '@wordpress/blocks';
 
 export default function useIndentListItem( clientId ) {
-	const canIndent = useSelect(
-		( select ) => select( blockEditorStore ).getBlockIndex( clientId ) > 0,
-		[ clientId ]
-	);
 	const { replaceBlocks, selectionChange, multiSelect } =
 		useDispatch( blockEditorStore );
 	const {
@@ -21,55 +17,49 @@ export default function useIndentListItem( clientId ) {
 		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 );
+	return 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();
-			// 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 blocks.
-			replaceBlocks(
-				[ previousSiblingId, ...clientIds ],
-				[ newListItem ]
+		// We get the selection start/end here, because when
+		// we replace blocks, the selection is updated too.
+		const selectionStart = getSelectionStart();
+		const selectionEnd = getSelectionEnd();
+		// 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 blocks.
+		replaceBlocks( [ 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
 			);
-			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 ] ),
-	];
+		}
+	}, [ clientId ] );
 }

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

@@ -20,7 +20,7 @@ export default function useMerge( clientId, onMerge ) {
 	} = useSelect( blockEditorStore );
 	const { mergeBlocks, moveBlocksToPosition } =
 		useDispatch( blockEditorStore );
-	const [ , outdentListItem ] = useOutdentListItem( clientId );
+	const outdentListItem = useOutdentListItem();
 
 	function getTrailingId( id ) {
 		const order = getBlockOrder( id );

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

@@ -6,24 +6,8 @@ import { useSelect, useDispatch, useRegistry } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { cloneBlock } from '@wordpress/blocks';
 
-export default function useOutdentListItem( clientId ) {
+export default function useOutdentListItem() {
 	const registry = useRegistry();
-	const { canOutdent } = useSelect(
-		( innerSelect ) => {
-			const { getBlockRootClientId, getBlockName } =
-				innerSelect( blockEditorStore );
-			const grandParentId = getBlockRootClientId(
-				getBlockRootClientId( clientId )
-			);
-			const grandParentName = getBlockName( grandParentId );
-			const isListItem = grandParentName === 'core/list-item';
-
-			return {
-				canOutdent: isListItem,
-			};
-		},
-		[ clientId ]
-	);
 	const {
 		moveBlocksToPosition,
 		removeBlock,
@@ -48,69 +32,66 @@ export default function useOutdentListItem( clientId ) {
 		return parentListItemId;
 	}
 
-	return [
-		canOutdent,
-		useCallback( ( clientIds = getSelectedBlockClientIds() ) => {
-			if ( ! Array.isArray( clientIds ) ) {
-				clientIds = [ clientIds ];
-			}
-
-			if ( ! clientIds.length ) return;
+	return useCallback( ( clientIds = getSelectedBlockClientIds() ) => {
+		if ( ! Array.isArray( clientIds ) ) {
+			clientIds = [ clientIds ];
+		}
 
-			const firstClientId = clientIds[ 0 ];
+		if ( ! clientIds.length ) return;
 
-			// Can't outdent if it's not a list item.
-			if ( getBlockName( firstClientId ) !== 'core/list-item' ) return;
+		const firstClientId = clientIds[ 0 ];
 
-			const parentListItemId = getParentListItemId( firstClientId );
+		// Can't outdent if it's not a list item.
+		if ( getBlockName( firstClientId ) !== 'core/list-item' ) return;
 
-			// Can't outdent if it's at the top level.
-			if ( ! parentListItemId ) return;
+		const parentListItemId = getParentListItemId( firstClientId );
 
-			const parentListId = getBlockRootClientId( firstClientId );
-			const lastClientId = clientIds[ clientIds.length - 1 ];
-			const order = getBlockOrder( parentListId );
-			const followingListItems = order.slice(
-				getBlockIndex( lastClientId ) + 1
-			);
+		// Can't outdent if it's at the top level.
+		if ( ! parentListItemId ) return;
 
-			registry.batch( () => {
-				if ( followingListItems.length ) {
-					let nestedListId = getBlockOrder( firstClientId )[ 0 ];
+		const parentListId = getBlockRootClientId( firstClientId );
+		const lastClientId = clientIds[ clientIds.length - 1 ];
+		const order = getBlockOrder( parentListId );
+		const followingListItems = order.slice(
+			getBlockIndex( lastClientId ) + 1
+		);
 
-					if ( ! nestedListId ) {
-						const nestedListBlock = cloneBlock(
-							getBlock( parentListId ),
-							{},
-							[]
-						);
-						nestedListId = nestedListBlock.clientId;
-						insertBlock( nestedListBlock, 0, firstClientId, false );
-						// Immediately update the block list settings, otherwise
-						// blocks can't be moved here due to canInsert checks.
-						updateBlockListSettings(
-							nestedListId,
-							getBlockListSettings( parentListId )
-						);
-					}
+		registry.batch( () => {
+			if ( followingListItems.length ) {
+				let nestedListId = getBlockOrder( firstClientId )[ 0 ];
 
-					moveBlocksToPosition(
-						followingListItems,
-						parentListId,
-						nestedListId
+				if ( ! nestedListId ) {
+					const nestedListBlock = cloneBlock(
+						getBlock( parentListId ),
+						{},
+						[]
+					);
+					nestedListId = nestedListBlock.clientId;
+					insertBlock( nestedListBlock, 0, firstClientId, false );
+					// Immediately update the block list settings, otherwise
+					// blocks can't be moved here due to canInsert checks.
+					updateBlockListSettings(
+						nestedListId,
+						getBlockListSettings( parentListId )
 					);
 				}
+
 				moveBlocksToPosition(
-					clientIds,
+					followingListItems,
 					parentListId,
-					getBlockRootClientId( parentListItemId ),
-					getBlockIndex( parentListItemId ) + 1
+					nestedListId
 				);
-				if ( ! getBlockOrder( parentListId ).length ) {
-					const shouldSelectParent = false;
-					removeBlock( parentListId, shouldSelectParent );
-				}
-			} );
-		}, [] ),
-	];
+			}
+			moveBlocksToPosition(
+				clientIds,
+				parentListId,
+				getBlockRootClientId( parentListItemId ),
+				getBlockIndex( parentListItemId ) + 1
+			);
+			if ( ! getBlockOrder( parentListId ).length ) {
+				const shouldSelectParent = false;
+				removeBlock( parentListId, shouldSelectParent );
+			}
+		} );
+	}, [] );
 }

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

@@ -12,9 +12,9 @@ import { useSelect } from '@wordpress/data';
 import useIndentListItem from './use-indent-list-item';
 
 export default function useSpace( clientId ) {
-	const { getSelectionStart, getSelectionEnd } =
+	const { getSelectionStart, getSelectionEnd, getBlockIndex } =
 		useSelect( blockEditorStore );
-	const [ canIndent, indentListItem ] = useIndentListItem( clientId );
+	const indentListItem = useIndentListItem( clientId );
 
 	return useRefEffect(
 		( element ) => {
@@ -23,7 +23,6 @@ export default function useSpace( clientId ) {
 
 				if (
 					event.defaultPrevented ||
-					! canIndent ||
 					keyCode !== SPACE ||
 					// Only override when no modifiers are pressed.
 					shiftKey ||
@@ -34,6 +33,10 @@ export default function useSpace( clientId ) {
 					return;
 				}
 
+				if ( getBlockIndex( clientId ) === 0 ) {
+					return;
+				}
+
 				const selectionStart = getSelectionStart();
 				const selectionEnd = getSelectionEnd();
 				if (
@@ -50,6 +53,6 @@ export default function useSpace( clientId ) {
 				element.removeEventListener( 'keydown', onKeyDown );
 			};
 		},
-		[ canIndent, indentListItem ]
+		[ clientId, indentListItem ]
 	);
 }

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

@@ -170,7 +170,7 @@ class MediaContainer extends Component {
 			mediaWidth,
 			shouldStack,
 		} = this.props;
-		const { isUploadFailed, retryMessage } = params;
+		const { isUploadFailed, isUploadPaused, retryMessage } = params;
 		const focalPointValues = ! focalPoint
 			? IMAGE_DEFAULT_FOCAL_POINT
 			: focalPoint;
@@ -203,6 +203,7 @@ class MediaContainer extends Component {
 							focalPoint={ imageFill && focalPointValues }
 							isSelected={ isMediaSelected }
 							isUploadFailed={ isUploadFailed }
+							isUploadPaused={ isUploadPaused }
 							isUploadInProgress={ isUploadInProgress }
 							onSelectMediaUploadOption={
 								this.onSelectMediaUploadOption
@@ -340,6 +341,7 @@ class MediaContainer extends Component {
 								{ getMediaOptions() }
 
 								<MediaUploadProgress
+									enablePausedUploads
 									coverUrl={ coverUrl }
 									mediaId={ mediaId }
 									onUpdateMediaProgress={

package/src/navigation/constants.js

@@ -37,3 +37,5 @@ export const SELECT_NAVIGATION_MENUS_ARGS = [
 	'wp_navigation',
 	PRELOADED_NAVIGATION_MENUS_QUERY,
 ];
+
+export const NAVIGATION_MOBILE_COLLAPSE = '600px';

package/src/navigation/edit/index.js

@@ -42,7 +42,7 @@ import {
 import { __, sprintf } from '@wordpress/i18n';
 import { speak } from '@wordpress/a11y';
 import { close, Icon } from '@wordpress/icons';
-import { useInstanceId } from '@wordpress/compose';
+import { useInstanceId, useMediaQuery } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -71,6 +71,7 @@ import MenuInspectorControls from './menu-inspector-controls';
 import DeletedNavigationWarning from './deleted-navigation-warning';
 import AccessibleDescription from './accessible-description';
 import AccessibleMenuDescription from './accessible-menu-description';
+import { NAVIGATION_MOBILE_COLLAPSE } from '../constants';
 import { unlock } from '../../lock-unlock';
 
 function Navigation( {
@@ -297,6 +298,14 @@ function Navigation( {
 		[ clientId ]
 	);
 	const isResponsive = 'never' !== overlayMenu;
+	const isMobileBreakPoint = useMediaQuery(
+		`(max-width: ${ NAVIGATION_MOBILE_COLLAPSE })`
+	);
+
+	const isCollapsed =
+		( 'mobile' === overlayMenu && isMobileBreakPoint ) ||
+		'always' === overlayMenu;
+
 	const blockProps = useBlockProps( {
 		ref: navRef,
 		className: classnames(
@@ -310,6 +319,7 @@ function Navigation( {
 				'is-vertical': orientation === 'vertical',
 				'no-wrap': flexWrap === 'nowrap',
 				'is-responsive': isResponsive,
+				'is-collapsed': isCollapsed,
 				'has-text-color': !! textColor.color || !! textColor?.class,
 				[ getColorClassName( 'color', textColor?.slug ) ]:
 					!! textColor?.slug,

package/src/navigation/editor.scss

@@ -429,7 +429,7 @@ $color-control-label-height: 20px;
 // These needs extra specificity in the editor.
 .wp-block-navigation__responsive-container:not(.is-menu-open) {
 	.components-button.wp-block-navigation__responsive-container-close {
-		@include break-small {
+		.is-collapsed & {
 			display: none;
 		}
 	}

package/src/navigation/style.scss

@@ -611,18 +611,19 @@ button.wp-block-navigation-item__content {
 		}
 	}
 
-	@include break-small() {
-		&:not(.hidden-by-default) {
-			&:not(.is-menu-open) {
-				display: block;
-				width: 100%;
-				position: relative;
-				z-index: auto;
-				background-color: inherit;
-
-				.wp-block-navigation__responsive-container-close {
-					display: none;
-				}
+	// When the menu is collapsed, the menu button is visible.
+	// We are using the > selector combined with the :not(is-collapsed) selector
+	// as a way to target the class being added to the parent nav element.
+	:not(.is-collapsed) > & {
+		&:not(.is-menu-open) {
+			display: block;
+			width: 100%;
+			position: relative;
+			z-index: auto;
+			background-color: inherit;
+
+			.wp-block-navigation__responsive-container-close {
+				display: none;
 			}
 		}
 
@@ -686,10 +687,11 @@ button.wp-block-navigation-item__content {
 		font-size: inherit;
 	}
 
-	&:not(.always-shown) {
-		@include break-small {
-			display: none;
-		}
+	// When the menu is collapsed, the menu button is visible.
+	// We are using the > selector combined with the :not(is-collapsed) selector
+	// as a way to target the class being added to the parent nav element.
+	:not(.is-collapsed) > & {
+		display: none;
 	}
 }
 

package/src/navigation/view.js

@@ -3,6 +3,11 @@
  */
 import { store, getContext, getElement } from '@wordpress/interactivity';
 
+/**
+ * Internal dependencies
+ */
+import { NAVIGATION_MOBILE_COLLAPSE } from './constants';
+
 const focusableSelectors = [
 	'a[href]',
 	'input:not([disabled]):not([type="hidden"]):not([aria-hidden])',
@@ -180,10 +185,31 @@ const { state, actions } = store( 'core/navigation', {
 		focusFirstElement() {
 			const { ref } = getElement();
 			if ( state.isMenuOpen ) {
-				ref.querySelector(
-					'.wp-block-navigation-item > *:first-child'
-				).focus();
+				const focusableElements =
+					ref.querySelectorAll( focusableSelectors );
+				focusableElements?.[ 0 ]?.focus();
+			}
+		},
+		initNav() {
+			const context = getContext();
+			const mediaQuery = window.matchMedia(
+				`(max-width: ${ NAVIGATION_MOBILE_COLLAPSE })`
+			);
+
+			// Run once to set the initial state.
+			context.isCollapsed = mediaQuery.matches;
+
+			function handleCollapse( event ) {
+				context.isCollapsed = event.matches;
 			}
+
+			// Run on resize to update the state.
+			mediaQuery.addEventListener( 'change', handleCollapse );
+
+			// Remove the listener when the component is unmounted.
+			return () => {
+				mediaQuery.removeEventListener( 'change', handleCollapse );
+			};
 		},
 	},
 } );

package/src/paragraph/test/__snapshots__/edit.native.js.snap

@@ -38,3 +38,15 @@ exports[`Paragraph block should render without crashing and match snapshot 1`] =
   />
 </View>
 `;
+
+exports[`Paragraph block should set a font size value 1`] = `
+"<!-- wp:paragraph {"style":{"typography":{"fontSize":"30px"}}} -->
+<p style="font-size:30px">A quick brown fox jumps over the lazy dog.</p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`Paragraph block should set a line height value 1`] = `
+"<!-- wp:paragraph {"style":{"typography":{"lineHeight":1.8}}} -->
+<p style="line-height:1.8">A quick brown fox jumps over the lazy dog.</p>
+<!-- /wp:paragraph -->"
+`;

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

@@ -4,6 +4,7 @@
 import {
 	act,
 	addBlock,
+	dismissModal,
 	getBlock,
 	typeInRichText,
 	fireEvent,
@@ -15,6 +16,7 @@ import {
 	within,
 	withFakeTimers,
 	waitForElementToBeRemoved,
+	waitForModalVisible,
 } from 'test/helpers';
 import Clipboard from '@react-native-clipboard/clipboard';
 import TextInputState from 'react-native/Libraries/Components/TextInput/TextInputState';
@@ -687,6 +689,118 @@ describe( 'Paragraph block', () => {
 	` );
 	} );
 
+	it( 'should show the expected font sizes values', async () => {
+		// Arrange
+		const screen = await initializeEditor( { withGlobalStyles: true } );
+		await addBlock( screen, 'Paragraph' );
+
+		// Act
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		typeInRichText(
+			paragraphTextInput,
+			'A quick brown fox jumps over the lazy dog.'
+		);
+		// Open Block Settings.
+		fireEvent.press( screen.getByLabelText( 'Open Settings' ) );
+
+		// Wait for Block Settings to be visible.
+		const blockSettingsModal = screen.getByTestId( 'block-settings-modal' );
+		await waitForModalVisible( blockSettingsModal );
+
+		// Open Font size settings
+		fireEvent.press( screen.getByLabelText( 'Font Size, Custom' ) );
+		await waitFor( () => screen.getByLabelText( 'Selected: Default' ) );
+
+		// Assert
+		const modalContent = within( blockSettingsModal );
+		expect( modalContent.getByLabelText( 'Small' ) ).toBeVisible();
+		expect( modalContent.getByText( '14px' ) ).toBeVisible();
+		expect( modalContent.getByLabelText( 'Medium' ) ).toBeVisible();
+		expect( modalContent.getByText( '17px' ) ).toBeVisible();
+		expect( modalContent.getByLabelText( 'Large' ) ).toBeVisible();
+		expect( modalContent.getByText( '30px' ) ).toBeVisible();
+		expect( modalContent.getByLabelText( 'Extra Large' ) ).toBeVisible();
+		expect( modalContent.getByText( '40px' ) ).toBeVisible();
+		expect(
+			modalContent.getByLabelText( 'Extra Extra Large' )
+		).toBeVisible();
+		expect( modalContent.getByText( '52px' ) ).toBeVisible();
+	} );
+
+	it( 'should set a font size value', async () => {
+		// Arrange
+		const screen = await initializeEditor( { withGlobalStyles: true } );
+		await addBlock( screen, 'Paragraph' );
+
+		// Act
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		typeInRichText(
+			paragraphTextInput,
+			'A quick brown fox jumps over the lazy dog.'
+		);
+		// Open Block Settings.
+		fireEvent.press( screen.getByLabelText( 'Open Settings' ) );
+
+		// Wait for Block Settings to be visible.
+		const blockSettingsModal = screen.getByTestId( 'block-settings-modal' );
+		await waitForModalVisible( blockSettingsModal );
+
+		// Open Font size settings
+		fireEvent.press( screen.getByLabelText( 'Font Size, Custom' ) );
+
+		// Tap one font size
+		fireEvent.press( screen.getByLabelText( 'Large' ) );
+
+		// Dismiss the Block Settings modal.
+		await dismissModal( blockSettingsModal );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'should set a line height value', async () => {
+		// Arrange
+		const screen = await initializeEditor( { withGlobalStyles: true } );
+		await addBlock( screen, 'Paragraph' );
+
+		// Act
+		const paragraphBlock = getBlock( screen, 'Paragraph' );
+		fireEvent.press( paragraphBlock );
+		const paragraphTextInput =
+			within( paragraphBlock ).getByPlaceholderText( 'Start writing…' );
+		typeInRichText(
+			paragraphTextInput,
+			'A quick brown fox jumps over the lazy dog.'
+		);
+		// Open Block Settings.
+		fireEvent.press( screen.getByLabelText( 'Open Settings' ) );
+
+		// Wait for Block Settings to be visible.
+		const blockSettingsModal = screen.getByTestId( 'block-settings-modal' );
+		await waitForModalVisible( blockSettingsModal );
+
+		const lineHeightControl = screen.getByLabelText( /Line Height/ );
+		fireEvent.press(
+			within( lineHeightControl ).getByText( '1.5', { hidden: true } )
+		);
+		const lineHeightTextInput = within(
+			lineHeightControl
+		).getByDisplayValue( '1.5', { hidden: true } );
+		fireEvent.changeText( lineHeightTextInput, '1.8' );
+
+		// Dismiss the Block Settings modal.
+		await dismissModal( blockSettingsModal );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
 	it( 'should focus on the previous Paragraph block when backspacing in an empty Paragraph block', async () => {
 		// Arrange
 		const screen = await initializeEditor();