@wordpress/block-library 8.3.2 → 8.4.0

package/src/navigation/edit/unsaved-inner-blocks.js

@@ -39,7 +39,6 @@ const ALLOWED_BLOCKS = [
 export default function UnsavedInnerBlocks( {
 	blocks,
 	createNavigationMenu,
-
 	hasSelection,
 } ) {
 	const originalBlocks = useRef();
@@ -91,37 +90,34 @@ export default function UnsavedInnerBlocks( {
 		}
 	);
 
-	const { isSaving, draftNavigationMenus, hasResolvedDraftNavigationMenus } =
-		useSelect(
-			( select ) => {
-				if ( isDisabled ) {
-					return EMPTY_OBJECT;
-				}
-
-				const {
-					getEntityRecords,
-					hasFinishedResolution,
-					isSavingEntityRecord,
-				} = select( coreStore );
-
-				return {
-					isSaving: isSavingEntityRecord(
-						'postType',
-						'wp_navigation'
-					),
-					draftNavigationMenus: getEntityRecords(
-						...DRAFT_MENU_PARAMS
-					),
-					hasResolvedDraftNavigationMenus: hasFinishedResolution(
-						'getEntityRecords',
-						DRAFT_MENU_PARAMS
-					),
-				};
-			},
-			[ isDisabled ]
-		);
-
-	const { hasResolvedNavigationMenus, navigationMenus } = useNavigationMenu();
+	const { isSaving, hasResolvedDraftNavigationMenus } = useSelect(
+		( select ) => {
+			if ( isDisabled ) {
+				return EMPTY_OBJECT;
+			}
+
+			const {
+				getEntityRecords,
+				hasFinishedResolution,
+				isSavingEntityRecord,
+			} = select( coreStore );
+
+			return {
+				isSaving: isSavingEntityRecord( 'postType', 'wp_navigation' ),
+				draftNavigationMenus: getEntityRecords(
+					// This is needed so that hasResolvedDraftNavigationMenus gives the correct status.
+					...DRAFT_MENU_PARAMS
+				),
+				hasResolvedDraftNavigationMenus: hasFinishedResolution(
+					'getEntityRecords',
+					DRAFT_MENU_PARAMS
+				),
+			};
+		},
+		[ isDisabled ]
+	);
+
+	const { hasResolvedNavigationMenus } = useNavigationMenu();
 
 	// Automatically save the uncontrolled blocks.
 	useEffect( () => {
@@ -154,11 +150,8 @@ export default function UnsavedInnerBlocks( {
 		isSaving,
 		hasResolvedDraftNavigationMenus,
 		hasResolvedNavigationMenus,
-		draftNavigationMenus,
-		navigationMenus,
+		innerBlocksAreDirty,
 		hasSelection,
-		createNavigationMenu,
-		blocks,
 	] );
 
 	const Wrapper = isSaving ? Disabled : 'div';

package/src/navigation/edit/use-create-navigation-menu.js

@@ -21,7 +21,7 @@ export default function useCreateNavigationMenu( clientId ) {
 	const [ value, setValue ] = useState( null );
 	const [ error, setError ] = useState( null );
 
-	const { saveEntityRecord } = useDispatch( coreStore );
+	const { saveEntityRecord, editEntityRecord } = useDispatch( coreStore );
 	const generateDefaultTitle = useGenerateDefaultNavigationTitle( clientId );
 
 	// This callback uses data from the two placeholder steps and only creates
@@ -68,6 +68,18 @@ export default function useCreateNavigationMenu( clientId ) {
 				.then( ( response ) => {
 					setValue( response );
 					setStatus( CREATE_NAVIGATION_MENU_SUCCESS );
+
+					// Set the status to publish so that the Navigation block
+					// shows up in the multi entity save flow.
+					if ( postStatus !== 'publish' ) {
+						editEntityRecord(
+							'postType',
+							'wp_navigation',
+							response.id,
+							{ status: 'publish' }
+						);
+					}
+
 					return response;
 				} )
 				.catch( ( err ) => {

package/src/navigation/index.php

@@ -373,12 +373,14 @@ function block_core_navigation_get_most_recently_published_navigation() {
 
 	// Default to the most recently created menu.
 	$parsed_args = array(
-		'post_type'      => 'wp_navigation',
-		'no_found_rows'  => true,
-		'order'          => 'DESC',
-		'orderby'        => 'date',
-		'post_status'    => 'publish',
-		'posts_per_page' => 1, // get only the most recent.
+		'post_type'              => 'wp_navigation',
+		'no_found_rows'          => true,
+		'update_post_meta_cache' => false,
+		'update_post_term_cache' => false,
+		'order'                  => 'DESC',
+		'orderby'                => 'date',
+		'post_status'            => 'publish',
+		'posts_per_page'         => 1, // get only the most recent.
 	);
 
 	$navigation_post = new WP_Query( $parsed_args );

package/src/navigation/use-navigation-menu.js

@@ -24,7 +24,7 @@ export default function useNavigationMenu( ref ) {
 				navigationMenus,
 				isResolvingNavigationMenus,
 				hasResolvedNavigationMenus,
-			} = selectNavigationMenus( select, ref );
+			} = selectNavigationMenus( select );
 
 			const {
 				navigationMenu,

package/src/navigation-link/edit.js

@@ -261,6 +261,9 @@ export default function NavigationLinkEdit( {
 	useEffect( () => {
 		// If block has inner blocks, transform to Submenu.
 		if ( hasChildren ) {
+			// This side-effect should not create an undo level as those should
+			// only be created via user interactions.
+			__unstableMarkNextChangeAsNotPersistent();
 			transformToSubmenu();
 		}
 	}, [ hasChildren ] );

package/src/navigation-link/link-ui.js

@@ -198,6 +198,7 @@ export function LinkUI( props ) {
 				suggestionsQuery={ getSuggestionsQuery( type, kind ) }
 				onChange={ props.onChange }
 				onRemove={ props.onRemove }
+				onCancel={ props.onCancel }
 				renderControlBottom={
 					! url
 						? () => (

package/src/navigation-submenu/edit.js

@@ -358,6 +358,9 @@ export default function NavigationSubmenuEdit( {
 	useEffect( () => {
 		// If block becomes empty, transform to Navigation Link.
 		if ( ! hasChildren && prevHasChildren ) {
+			// This side-effect should not create an undo level as those should
+			// only be created via user interactions.
+			__unstableMarkNextChangeAsNotPersistent();
 			transformToLink();
 		}
 	}, [ hasChildren, prevHasChildren ] );

package/src/page-list/edit.js

@@ -182,11 +182,6 @@ export default function PageListEdit( {
 		pages?.length > 0 &&
 		pages?.length <= MAX_PAGE_COUNT;
 
-	const convertToNavigationLinks = useConvertToNavigationLinks( {
-		clientId,
-		pages,
-	} );
-
 	const pagesByParentId = useMemo( () => {
 		if ( pages === null ) {
 			return new Map();
@@ -213,6 +208,12 @@ export default function PageListEdit( {
 		}, new Map() );
 	}, [ pages ] );
 
+	const convertToNavigationLinks = useConvertToNavigationLinks( {
+		clientId,
+		pages,
+		parentPageID,
+	} );
+
 	const blockProps = useBlockProps( {
 		className: classnames( 'wp-block-page-list', {
 			'has-text-color': !! context.textColor,

package/src/page-list/index.php

@@ -150,7 +150,8 @@ function block_core_page_list_render_nested_page_list( $open_submenus_on_click,
 	if ( empty( $nested_pages ) ) {
 		return;
 	}
-	$markup = '';
+	$front_page_id = (int) get_option( 'page_on_front' );
+	$markup        = '';
 	foreach ( (array) $nested_pages as $page ) {
 		$css_class       = $page['is_active'] ? ' current-menu-item' : '';
 		$aria_current    = $page['is_active'] ? ' aria-current="page"' : '';
@@ -181,7 +182,6 @@ function block_core_page_list_render_nested_page_list( $open_submenus_on_click,
 			}
 		}
 
-		$front_page_id = (int) get_option( 'page_on_front' );
 		if ( (int) $page['page_id'] === $front_page_id ) {
 			$css_class .= ' menu-item-home';
 		}
@@ -282,14 +282,14 @@ function render_block_core_page_list( $attributes, $content, $block ) {
 			$pages_with_children[ $page->post_parent ][ $page->ID ] = array(
 				'page_id'   => $page->ID,
 				'title'     => $page->post_title,
-				'link'      => get_permalink( $page->ID ),
+				'link'      => get_permalink( $page ),
 				'is_active' => $is_active,
 			);
 		} else {
 			$top_level_pages[ $page->ID ] = array(
 				'page_id'   => $page->ID,
 				'title'     => $page->post_title,
-				'link'      => get_permalink( $page->ID ),
+				'link'      => get_permalink( $page ),
 				'is_active' => $is_active,
 			);
 

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

@@ -383,5 +383,139 @@ describe( 'page list convert to links', () => {
 				},
 			] );
 		} );
+
+		it( 'Can use a different parent page', () => {
+			const pages = [
+				{
+					title: {
+						raw: 'Sample Page',
+						rendered: 'Sample Page',
+					},
+					id: 2,
+					parent: 0,
+					link: 'http://wordpress.local/sample-page/',
+					type: 'page',
+				},
+				{
+					title: {
+						raw: 'About',
+						rendered: 'About',
+					},
+					id: 34,
+					parent: 0,
+					link: 'http://wordpress.local/about/',
+					type: 'page',
+				},
+				{
+					title: {
+						raw: 'Contact Page',
+						rendered: 'Contact Page',
+					},
+					id: 37,
+					parent: 0,
+					link: 'http://wordpress.local/contact-page/',
+					type: 'page',
+				},
+				{
+					title: {
+						raw: 'Test',
+						rendered: 'Test',
+					},
+					id: 229,
+					parent: 0,
+					link: 'http://wordpress.local/test/',
+					type: 'page',
+				},
+				{
+					title: {
+						raw: 'About Sub 1',
+						rendered: 'About Sub 1',
+					},
+					id: 738,
+					parent: 34,
+					link: 'http://wordpress.local/about/about-sub-1/',
+					type: 'page',
+				},
+				{
+					title: {
+						raw: 'About Sub 2',
+						rendered: 'About Sub 2',
+					},
+					id: 740,
+					parent: 34,
+					link: 'http://wordpress.local/about/about-sub-2/',
+					type: 'page',
+				},
+				{
+					title: {
+						raw: 'Test Sub',
+						rendered: 'Test Sub',
+					},
+					id: 742,
+					parent: 229,
+					link: 'http://wordpress.local/test/test-sub/',
+					type: 'page',
+				},
+				{
+					title: {
+						raw: 'Test Sub Sub',
+						rendered: 'Test Sub Sub',
+					},
+					id: 744,
+					parent: 742,
+					link: 'http://wordpress.local/test/test-sub/test-sub-sub/',
+					type: 'page',
+				},
+			];
+
+			const convertLinksWithParentOneLevel = convertToNavigationLinks(
+				pages,
+				34
+			);
+
+			expect( convertLinksWithParentOneLevel ).toEqual( [
+				{
+					attributes: {
+						id: 738,
+						kind: 'post-type',
+						label: 'About Sub 1',
+						type: 'page',
+						url: 'http://wordpress.local/about/about-sub-1/',
+					},
+					innerBlocks: [],
+					name: 'core/navigation-link',
+				},
+				{
+					attributes: {
+						id: 740,
+						kind: 'post-type',
+						label: 'About Sub 2',
+						type: 'page',
+						url: 'http://wordpress.local/about/about-sub-2/',
+					},
+					innerBlocks: [],
+					name: 'core/navigation-link',
+				},
+			] );
+
+			const convertLinksWithParentTwoLevels = convertToNavigationLinks(
+				pages,
+				742
+			);
+
+			expect( convertLinksWithParentTwoLevels ).toEqual( [
+				{
+					attributes: {
+						id: 744,
+						kind: 'post-type',
+						label: 'Test Sub Sub',
+						type: 'page',
+						url: 'http://wordpress.local/test/test-sub/test-sub-sub/',
+					},
+					innerBlocks: [],
+					name: 'core/navigation-link',
+				},
+			] );
+		} );
 	} );
 } );

package/src/page-list/use-convert-to-navigation-links.js

@@ -5,7 +5,14 @@ import { createBlock } from '@wordpress/blocks';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 
-export function convertToNavigationLinks( pages = [] ) {
+/**
+ * Converts an array of pages into a nested array of navigation link blocks.
+ *
+ * @param {Array} pages An array of pages.
+ *
+ * @return {Array} A nested array of navigation link blocks.
+ */
+function createNavigationLinks( pages = [] ) {
 	const linkMap = {};
 	const navigationLinks = [];
 	pages.forEach( ( { id, title, link: url, type, parent } ) => {
@@ -30,11 +37,61 @@ export function convertToNavigationLinks( pages = [] ) {
 				// Use a placeholder if the child appears before parent in list.
 				linkMap[ parent ] = { innerBlocks: [] };
 			}
+			// Although these variables are not referenced, they are needed to store the innerBlocks in memory.
 			const parentLinkInnerBlocks = linkMap[ parent ].innerBlocks;
 			parentLinkInnerBlocks.push( linkMap[ id ] );
 		}
 	} );
 
+	return navigationLinks;
+}
+
+/**
+ * Finds a navigation link block by id, recursively.
+ * It might be possible to make this a more generic helper function.
+ *
+ * @param {Array}  navigationLinks An array of navigation link blocks.
+ * @param {number} id              The id of the navigation link to find.
+ *
+ * @return {Object|null} The navigation link block with the given id.
+ */
+function findNavigationLinkById( navigationLinks, id ) {
+	for ( const navigationLink of navigationLinks ) {
+		// Is this the link we're looking for?
+		if ( navigationLink.attributes.id === id ) {
+			return navigationLink;
+		}
+
+		// If not does it have innerBlocks?
+		if ( navigationLink.innerBlocks && navigationLink.innerBlocks.length ) {
+			const foundNavigationLink = findNavigationLinkById(
+				navigationLink.innerBlocks,
+				id
+			);
+
+			if ( foundNavigationLink ) {
+				return foundNavigationLink;
+			}
+		}
+	}
+
+	return null;
+}
+
+export function convertToNavigationLinks( pages = [], parentPageID = null ) {
+	let navigationLinks = createNavigationLinks( pages );
+
+	// If a parent page ID is provided, only return the children of that page.
+	if ( parentPageID ) {
+		const parentPage = findNavigationLinkById(
+			navigationLinks,
+			parentPageID
+		);
+		if ( parentPage && parentPage.innerBlocks ) {
+			navigationLinks = parentPage.innerBlocks;
+		}
+	}
+
 	// Transform all links with innerBlocks into Submenus. This can't be done
 	// sooner because page objects have no information on their children.
 	const transformSubmenus = ( listOfLinks ) => {
@@ -53,11 +110,14 @@ export function convertToNavigationLinks( pages = [] ) {
 	};
 
 	transformSubmenus( navigationLinks );
-
 	return navigationLinks;
 }
 
-export function useConvertToNavigationLinks( { clientId, pages } ) {
+export function useConvertToNavigationLinks( {
+	clientId,
+	pages,
+	parentPageID,
+} ) {
 	const { replaceBlock, selectBlock } = useDispatch( blockEditorStore );
 
 	const { parentNavBlockClientId } = useSelect(
@@ -79,7 +139,7 @@ export function useConvertToNavigationLinks( { clientId, pages } ) {
 	);
 
 	return () => {
-		const navigationLinks = convertToNavigationLinks( pages );
+		const navigationLinks = convertToNavigationLinks( pages, parentPageID );
 
 		// Replace the Page List block with the Navigation Links.
 		replaceBlock( clientId, navigationLinks );

package/src/post-excerpt/block.json

@@ -16,6 +16,10 @@
 		"showMoreOnNewLine": {
 			"type": "boolean",
 			"default": true
+		},
+		"excerptLength": {
+			"type": "number",
+			"default": 55
 		}
 	},
 	"usesContext": [ "postId", "postType", "queryId" ],

package/src/post-excerpt/edit.js

@@ -16,8 +16,8 @@ import {
 	Warning,
 	useBlockProps,
 } from '@wordpress/block-editor';
-import { PanelBody, ToggleControl } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { PanelBody, ToggleControl, RangeControl } from '@wordpress/components';
+import { __, _x } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -25,7 +25,7 @@ import { __ } from '@wordpress/i18n';
 import { useCanEditEntity } from '../utils/hooks';
 
 export default function PostExcerptEditor( {
-	attributes: { textAlign, moreText, showMoreOnNewLine },
+	attributes: { textAlign, moreText, showMoreOnNewLine, excerptLength },
 	setAttributes,
 	isSelected,
 	context: { postId, postType, queryId },
@@ -33,6 +33,7 @@ export default function PostExcerptEditor( {
 	const isDescendentOfQueryLoop = Number.isFinite( queryId );
 	const userCanEdit = useCanEditEntity( 'postType', postType, postId );
 	const isEditable = userCanEdit && ! isDescendentOfQueryLoop;
+
 	const [
 		rawExcerpt,
 		setExcerpt,
@@ -43,6 +44,14 @@ export default function PostExcerptEditor( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 	} );
+
+	/**
+	 * translators: If your word count is based on single characters (e.g. East Asian characters),
+	 * enter 'characters_excluding_spaces' or 'characters_including_spaces'. Otherwise, enter 'words'.
+	 * Do not translate into your own language.
+	 */
+	const wordCountType = _x( 'words', 'Word count type. Do not translate!' );
+
 	/**
 	 * When excerpt is editable, strip the html tags from
 	 * rendered excerpt. This will be used if the entity's
@@ -109,21 +118,67 @@ export default function PostExcerptEditor( {
 	const excerptClassName = classnames( 'wp-block-post-excerpt__excerpt', {
 		'is-inline': ! showMoreOnNewLine,
 	} );
+
+	/**
+	 * The excerpt length setting needs to be applied to both
+	 * the raw and the rendered excerpt depending on which is being used.
+	 */
+	const rawOrRenderedExcerpt = !! renderedExcerpt
+		? strippedRenderedExcerpt
+		: rawExcerpt;
+
+	let trimmedExcerpt = '';
+	if ( wordCountType === 'words' ) {
+		trimmedExcerpt = rawOrRenderedExcerpt
+			.trim()
+			.split( ' ', excerptLength )
+			.join( ' ' );
+	} else if ( wordCountType === 'characters_excluding_spaces' ) {
+		/*
+		 * 1. Split the excerpt at the character limit,
+		 * then join the substrings back into one string.
+		 * 2. Count the number of spaces in the excerpt
+		 * by comparing the lengths of the string with and without spaces.
+		 * 3. Add the number to the length of the visible excerpt,
+		 * so that the spaces are excluded from the word count.
+		 */
+		const excerptWithSpaces = rawOrRenderedExcerpt
+			.trim()
+			.split( '', excerptLength )
+			.join( '' );
+
+		const numberOfSpaces =
+			excerptWithSpaces.length -
+			excerptWithSpaces.replaceAll( ' ', '' ).length;
+
+		trimmedExcerpt = rawOrRenderedExcerpt
+			.trim()
+			.split( '', excerptLength + numberOfSpaces )
+			.join( '' );
+	} else if ( wordCountType === 'characters_including_spaces' ) {
+		trimmedExcerpt = rawOrRenderedExcerpt.trim().split( '', excerptLength );
+	}
+
+	trimmedExcerpt = trimmedExcerpt + '...';
+
 	const excerptContent = isEditable ? (
 		<RichText
 			className={ excerptClassName }
 			aria-label={ __( 'Post excerpt text' ) }
 			value={
-				rawExcerpt ||
-				strippedRenderedExcerpt ||
-				( isSelected ? '' : __( 'No post excerpt found' ) )
+				isSelected
+					? rawOrRenderedExcerpt
+					: ( trimmedExcerpt !== '...' ? trimmedExcerpt : '' ) ||
+					  __( 'No post excerpt found' )
 			}
 			onChange={ setExcerpt }
 			tagName="p"
 		/>
 	) : (
 		<p className={ excerptClassName }>
-			{ strippedRenderedExcerpt || __( 'No post excerpt found' ) }
+			{ trimmedExcerpt !== '...'
+				? trimmedExcerpt
+				: __( 'No post excerpt found' ) }
 		</p>
 	);
 	return (
@@ -147,6 +202,16 @@ export default function PostExcerptEditor( {
 							} )
 						}
 					/>
+					<RangeControl
+						label={ __( 'Max number of words' ) }
+						value={ excerptLength }
+						onChange={ ( value ) => {
+							setAttributes( { excerptLength: value } );
+							setExcerpt();
+						} }
+						min="10"
+						max="100"
+					/>
 				</PanelBody>
 			</InspectorControls>
 			<div { ...blockProps }>

package/src/post-excerpt/index.php

@@ -18,12 +18,18 @@ function render_block_core_post_excerpt( $attributes, $content, $block ) {
 		return '';
 	}
 
-	$excerpt = get_the_excerpt();
-
-	if ( empty( $excerpt ) ) {
-		return '';
+	/*
+	* The purpose of the excerpt length setting is to limit the length of both
+	* automatically generated and user-created excerpts.
+	* Because the excerpt_length filter only applies to auto generated excerpts,
+	* wp_trim_words is used instead.
+	*/
+	$excerpt_length = $attributes['excerptLength'];
+	if ( isset( $excerpt_length ) ) {
+		$excerpt = wp_trim_words( get_the_excerpt(), $excerpt_length );
+	} else {
+		$excerpt = get_the_excerpt();
 	}
-
 	$more_text           = ! empty( $attributes['moreText'] ) ? '<a class="wp-block-post-excerpt__more-link" href="' . esc_url( get_the_permalink( $block->context['postId'] ) ) . '">' . wp_kses_post( $attributes['moreText'] ) . '</a>' : '';
 	$filter_excerpt_more = function( $more ) use ( $more_text ) {
 		return empty( $more_text ) ? $more : '';
@@ -70,3 +76,21 @@ function register_block_core_post_excerpt() {
 	);
 }
 add_action( 'init', 'register_block_core_post_excerpt' );
+
+/**
+ * If themes or plugins filter the excerpt_length, we need to
+ * override the filter in the editor, otherwise
+ * the excerpt length block setting has no effect.
+ * Returns 100 because 100 is the max length in the setting.
+ */
+if ( is_admin() ||
+	defined( 'REST_REQUEST' ) ||
+	'REST_REQUEST' ) {
+	add_filter(
+		'excerpt_length',
+		function() {
+			return 100;
+		},
+		PHP_INT_MAX
+	);
+}

package/src/post-featured-image/block.json

@@ -11,6 +11,9 @@
 			"type": "boolean",
 			"default": false
 		},
+		"aspectRatio": {
+			"type": "string"
+		},
 		"width": {
 			"type": "string"
 		},