@wordpress/block-library 8.24.1 → 8.25.1-next.79a6196f.0

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

@@ -17,13 +17,11 @@ import useOutdentListItem from './use-outdent-list-item';
 
 export default function useEnter( props, preventDefault ) {
 	const { replaceBlocks, selectionChange } = useDispatch( blockEditorStore );
-	const { getBlock, getBlockRootClientId, getBlockIndex } =
+	const { getBlock, getBlockRootClientId, getBlockIndex, getBlockName } =
 		useSelect( blockEditorStore );
 	const propsRef = useRef( props );
 	propsRef.current = props;
-	const [ canOutdent, outdentListItem ] = useOutdentListItem(
-		propsRef.current.clientId
-	);
+	const outdentListItem = useOutdentListItem();
 
 	return {
 		onEnter() {
@@ -32,7 +30,13 @@ export default function useEnter( props, preventDefault ) {
 				return;
 			}
 			preventDefault.current = true;
-			if ( canOutdent ) {
+			if (
+				getBlockName(
+					getBlockRootClientId(
+						getBlockRootClientId( propsRef.current.clientId )
+					)
+				) === 'core/list-item'
+			) {
 				outdentListItem();
 				return;
 			}

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

@@ -24,7 +24,6 @@ import {
 	getColorClassName,
 	Warning,
 	__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
-	__experimentalUseBlockOverlayActive as useBlockOverlayActive,
 	__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,
 	useBlockEditingMode,
 } from '@wordpress/block-editor';
@@ -43,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
@@ -72,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( {
@@ -290,8 +290,22 @@ function Navigation( {
 
 	const textDecoration = attributes.style?.typography?.textDecoration;
 
-	const hasBlockOverlay = useBlockOverlayActive( clientId );
+	const hasBlockOverlay = useSelect(
+		( select ) =>
+			select( blockEditorStore ).__unstableHasActiveBlockOverlayActive(
+				clientId
+			),
+		[ 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(
@@ -305,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/index.php

@@ -75,7 +75,7 @@ if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
 	function block_core_navigation_get_inner_blocks_from_unstable_location( $attributes ) {
 		$menu_items = block_core_navigation_get_menu_items_at_location( $attributes['__unstableLocation'] );
 		if ( empty( $menu_items ) ) {
-			return '';
+			return new WP_Block_List( array(), $attributes );
 		}
 
 		$menu_items_by_parent_id = block_core_navigation_sort_menu_items_by_parent_id( $menu_items );

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/navigation-link/test/__snapshots__/hooks.js.snap

@@ -30,7 +30,7 @@ exports[`hooks enhanceNavigationLinkVariations enhances variations with icon and
         xmlns="http://www.w3.org/2000/svg"
       >
         <Path
-          d="M18 4H6c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm.5 14c0 .3-.2.5-.5.5H6c-.3 0-.5-.2-.5-.5V6c0-.3.2-.5.5-.5h12c.3 0 .5.2.5.5v12zM7 11h2V9H7v2zm0 4h2v-2H7v2zm3-4h7V9h-7v2zm0 4h7v-2h-7v2z"
+          d="M18 5.5H6a.5.5 0 0 0-.5.5v12a.5.5 0 0 0 .5.5h12a.5.5 0 0 0 .5-.5V6a.5.5 0 0 0-.5-.5ZM6 4h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Zm1 5h1.5v1.5H7V9Zm1.5 4.5H7V15h1.5v-1.5ZM10 9h7v1.5h-7V9Zm7 4.5h-7V15h7v-1.5Z"
         />
       </SVG>,
       "isActive": [Function],
@@ -47,7 +47,10 @@ exports[`hooks enhanceNavigationLinkVariations enhances variations with icon and
         xmlns="http://www.w3.org/2000/svg"
       >
         <Path
-          d="M7 5.5h10a.5.5 0 01.5.5v12a.5.5 0 01-.5.5H7a.5.5 0 01-.5-.5V6a.5.5 0 01.5-.5zM17 4H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V6a2 2 0 00-2-2zm-1 3.75H8v1.5h8v-1.5zM8 11h8v1.5H8V11zm6 3.25H8v1.5h6v-1.5z"
+          d="M15.5 7.5h-7V9h7V7.5Zm-7 3.5h7v1.5h-7V11Zm7 3.5h-7V16h7v-1.5Z"
+        />
+        <Path
+          d="M17 4H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2ZM7 5.5h10a.5.5 0 0 1 .5.5v12a.5.5 0 0 1-.5.5H7a.5.5 0 0 1-.5-.5V6a.5.5 0 0 1 .5-.5Z"
         />
       </SVG>,
       "isActive": [Function],
@@ -83,7 +86,7 @@ exports[`hooks enhanceNavigationLinkVariations enhances variations with icon and
         xmlns="http://www.w3.org/2000/svg"
       >
         <Path
-          d="M20.1 11.2l-6.7-6.7c-.1-.1-.3-.2-.5-.2H5c-.4-.1-.8.3-.8.7v7.8c0 .2.1.4.2.5l6.7 6.7c.2.2.5.4.7.5s.6.2.9.2c.3 0 .6-.1.9-.2.3-.1.5-.3.8-.5l5.6-5.6c.4-.4.7-1 .7-1.6.1-.6-.2-1.2-.6-1.6zM19 13.4L13.4 19c-.1.1-.2.1-.3.2-.2.1-.4.1-.6 0-.1 0-.2-.1-.3-.2l-6.5-6.5V5.8h6.8l6.5 6.5c.2.2.2.4.2.6 0 .1 0 .3-.2.5zM9 8c-.6 0-1 .4-1 1s.4 1 1 1 1-.4 1-1-.4-1-1-1z"
+          d="M4.75 4a.75.75 0 0 0-.75.75v7.826c0 .2.08.39.22.53l6.72 6.716a2.313 2.313 0 0 0 3.276-.001l5.61-5.611-.531-.53.532.528a2.315 2.315 0 0 0 0-3.264L13.104 4.22a.75.75 0 0 0-.53-.22H4.75ZM19 12.576a.815.815 0 0 1-.236.574l-5.61 5.611a.814.814 0 0 1-1.153 0L5.5 12.264V5.5h6.763l6.5 6.502a.816.816 0 0 1 .237.574ZM8.75 9.75a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
         />
       </SVG>,
       "isActive": [Function],

package/src/page-list/convert-to-links-modal.js

@@ -5,7 +5,7 @@ import { Button, Modal } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 export const convertDescription = __(
-	'This page list is synced with the published pages on your site. Detach the page list to add, delete, or reorder pages yourself.'
+	"This navigation menu displays your website's pages. Editing it will enable you to add, delete, or reorder pages. However, new pages will no longer be added automatically."
 );
 
 export function ConvertToLinksModal( { onClick, onClose, disabled } ) {
@@ -30,7 +30,7 @@ export function ConvertToLinksModal( { onClick, onClose, disabled } ) {
 					disabled={ disabled }
 					onClick={ onClick }
 				>
-					{ __( 'Detach' ) }
+					{ __( 'Edit' ) }
 				</Button>
 			</div>
 		</Modal>

package/src/paragraph/block.json

@@ -13,10 +13,9 @@
 			"type": "string"
 		},
 		"content": {
-			"type": "string",
-			"source": "html",
+			"type": "rich-text",
+			"source": "rich-text",
 			"selector": "p",
-			"default": "",
 			"__experimentalRole": "content"
 		},
 		"dropCap": {
@@ -42,7 +41,6 @@
 				"text": true
 			}
 		},
-		"__experimentalConnections": true,
 		"spacing": {
 			"margin": true,
 			"padding": true,