@wordpress/block-library 8.3.6 → 8.5.0

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/paragraph/edit.js

@@ -110,6 +110,7 @@ function ParagraphBlock( {
 						panelId={ clientId }
 					>
 						<ToggleControl
+							__nextHasNoMarginBottom
 							label={ __( 'Drop cap' ) }
 							checked={ !! dropCap }
 							onChange={ () =>

package/src/post-author/block.json

@@ -35,6 +35,7 @@
 	},
 	"usesContext": [ "postType", "postId", "queryId" ],
 	"supports": {
+		"anchor": true,
 		"html": false,
 		"spacing": {
 			"margin": true,

package/src/post-author/edit.js

@@ -120,6 +120,7 @@ function PostAuthorEdit( {
 							/>
 						) ) }
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Show avatar' ) }
 						checked={ showAvatar }
 						onChange={ () =>
@@ -140,6 +141,7 @@ function PostAuthorEdit( {
 						/>
 					) }
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Show bio' ) }
 						checked={ showBio }
 						onChange={ () =>
@@ -147,12 +149,14 @@ function PostAuthorEdit( {
 						}
 					/>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Link author name to author page' ) }
 						checked={ isLink }
 						onChange={ () => setAttributes( { isLink: ! isLink } ) }
 					/>
 					{ isLink && (
 						<ToggleControl
+							__nextHasNoMarginBottom
 							label={ __( 'Open in new tab' ) }
 							onChange={ ( value ) =>
 								setAttributes( {

package/src/post-author-biography/block.json

@@ -13,6 +13,7 @@
 	},
 	"usesContext": [ "postType", "postId" ],
 	"supports": {
+		"anchor": true,
 		"spacing": {
 			"margin": true,
 			"padding": true

package/src/post-author-name/block.json

@@ -21,6 +21,7 @@
 	},
 	"usesContext": [ "postType", "postId" ],
 	"supports": {
+		"anchor": true,
 		"html": false,
 		"spacing": {
 			"margin": true,

package/src/post-author-name/edit.js

@@ -71,12 +71,14 @@ function PostAuthorNameEdit( {
 			<InspectorControls>
 				<PanelBody title={ __( 'Link settings' ) }>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Link to author archive' ) }
 						onChange={ () => setAttributes( { isLink: ! isLink } ) }
 						checked={ isLink }
 					/>
 					{ isLink && (
 						<ToggleControl
+							__nextHasNoMarginBottom
 							label={ __( 'Open in new tab' ) }
 							onChange={ ( value ) =>
 								setAttributes( {

package/src/post-comments-count/block.json

@@ -14,6 +14,7 @@
 	},
 	"usesContext": [ "postId" ],
 	"supports": {
+		"anchor": true,
 		"html": false,
 		"color": {
 			"gradients": true,

package/src/post-comments-form/block.json

@@ -13,6 +13,7 @@
 	},
 	"usesContext": [ "postId", "postType" ],
 	"supports": {
+		"anchor": true,
 		"html": false,
 		"color": {
 			"gradients": true,

package/src/post-comments-link/block.json

@@ -14,6 +14,7 @@
 		}
 	},
 	"supports": {
+		"anchor": true,
 		"html": false,
 		"color": {
 			"link": true,

package/src/post-content/block.json

@@ -8,6 +8,7 @@
 	"textdomain": "default",
 	"usesContext": [ "postId", "postType", "queryId" ],
 	"supports": {
+		"anchor": true,
 		"align": [ "wide", "full" ],
 		"html": false,
 		"__experimentalLayout": true,

package/src/post-date/block.json

@@ -24,6 +24,7 @@
 	},
 	"usesContext": [ "postId", "postType", "queryId" ],
 	"supports": {
+		"anchor": true,
 		"html": false,
 		"color": {
 			"gradients": true,

package/src/post-date/edit.js

@@ -150,6 +150,7 @@ export default function PostDateEdit( {
 						}
 					/>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={
 							postType?.labels.singular_name
 								? sprintf(
@@ -163,6 +164,7 @@ export default function PostDateEdit( {
 						checked={ isLink }
 					/>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Display last modified date' ) }
 						onChange={ ( value ) =>
 							setAttributes( {

package/src/post-excerpt/block.json

@@ -16,10 +16,15 @@
 		"showMoreOnNewLine": {
 			"type": "boolean",
 			"default": true
+		},
+		"excerptLength": {
+			"type": "number",
+			"default": 55
 		}
 	},
 	"usesContext": [ "postId", "postType", "queryId" ],
 	"supports": {
+		"anchor": true,
 		"html": false,
 		"color": {
 			"gradients": true,

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 (
@@ -139,6 +194,7 @@ export default function PostExcerptEditor( {
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Show link on new line' ) }
 						checked={ showMoreOnNewLine }
 						onChange={ ( newShowMoreOnNewLine ) =>
@@ -147,6 +203,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/editor.scss

@@ -1,5 +1,5 @@
 .wp-block-post-excerpt {
 	.wp-block-post-excerpt__excerpt.is-inline {
-		display: inline-block;
+		display: inline;
 	}
 }

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"
 		},
@@ -53,6 +56,7 @@
 	"usesContext": [ "postId", "postType", "queryId" ],
 	"supports": {
 		"align": [ "left", "right", "center", "wide", "full" ],
+		"anchor": true,
 		"color": {
 			"__experimentalDuotone": "img, .wp-block-post-featured-image__placeholder, .components-placeholder__illustration, .components-placeholder::before",
 			"text": false,