@wordpress/block-library 8.3.3 → 8.4.0

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"
 		},

package/src/post-featured-image/dimension-controls.js

@@ -49,7 +49,7 @@ const scaleHelp = {
 
 const DimensionControls = ( {
 	clientId,
-	attributes: { width, height, scale, sizeSlug },
+	attributes: { aspectRatio, width, height, scale, sizeSlug },
 	setAttributes,
 	imageSizeOptions = [],
 } ) => {
@@ -72,6 +72,68 @@ const DimensionControls = ( {
 	const scaleLabel = _x( 'Scale', 'Image scaling options' );
 	return (
 		<InspectorControls group="dimensions">
+			<ToolsPanelItem
+				hasValue={ () => !! aspectRatio }
+				label={ __( 'Aspect ratio' ) }
+				onDeselect={ () => setAttributes( { aspectRatio: undefined } ) }
+				resetAllFilter={ () => ( {
+					aspectRatio: undefined,
+				} ) }
+				isShownByDefault={ true }
+				panelId={ clientId }
+			>
+				<SelectControl
+					__nextHasNoMarginBottom
+					label={ __( 'Aspect ratio' ) }
+					value={ aspectRatio }
+					options={ [
+						// These should use the same values as AspectRatioDropdown in @wordpress/block-editor
+						{
+							label: __( 'Original' ),
+							value: 'auto',
+						},
+						{
+							label: __( 'Square' ),
+							value: '1',
+						},
+						{
+							label: __( '16:10' ),
+							value: '16/10',
+						},
+						{
+							label: __( '16:9' ),
+							value: '16/9',
+						},
+						{
+							label: __( '4:3' ),
+							value: '4/3',
+						},
+						{
+							label: __( '3:2' ),
+							value: '3/2',
+						},
+						{
+							label: __( '10:16' ),
+							value: '10/16',
+						},
+						{
+							label: __( '9:16' ),
+							value: '9/16',
+						},
+						{
+							label: __( '3:4' ),
+							value: '3/4',
+						},
+						{
+							label: __( '2:3' ),
+							value: '2/3',
+						},
+					] }
+					onChange={ ( nextAspectRatio ) =>
+						setAttributes( { aspectRatio: nextAspectRatio } )
+					}
+				/>
+			</ToolsPanelItem>
 			<ToolsPanelItem
 				className="single-column"
 				hasValue={ () => !! height }
@@ -116,7 +178,7 @@ const DimensionControls = ( {
 					units={ units }
 				/>
 			</ToolsPanelItem>
-			{ !! height && (
+			{ ( height || aspectRatio ) && (
 				<ToolsPanelItem
 					hasValue={ () => !! scale && scale !== DEFAULT_SCALE }
 					label={ scaleLabel }

package/src/post-featured-image/edit.js

@@ -50,8 +50,16 @@ export default function PostFeaturedImageEdit( {
 	context: { postId, postType: postTypeSlug, queryId },
 } ) {
 	const isDescendentOfQueryLoop = Number.isFinite( queryId );
-	const { isLink, height, width, scale, sizeSlug, rel, linkTarget } =
-		attributes;
+	const {
+		isLink,
+		aspectRatio,
+		height,
+		width,
+		scale,
+		sizeSlug,
+		rel,
+		linkTarget,
+	} = attributes;
 	const [ featuredImage, setFeaturedImage ] = useEntityProp(
 		'postType',
 		postTypeSlug,
@@ -89,7 +97,7 @@ export default function PostFeaturedImageEdit( {
 		} ) );
 
 	const blockProps = useBlockProps( {
-		style: { width, height },
+		style: { width, height, aspectRatio },
 	} );
 	const borderProps = useBorderProps( attributes );
 
@@ -101,7 +109,10 @@ export default function PostFeaturedImageEdit( {
 					borderProps.className
 				) }
 				withIllustration={ true }
-				style={ borderProps.style }
+				style={ {
+					...blockProps.style,
+					...borderProps.style,
+				} }
 			>
 				{ content }
 			</Placeholder>
@@ -218,8 +229,9 @@ export default function PostFeaturedImageEdit( {
 	const label = __( 'Add a featured image' );
 	const imageStyles = {
 		...borderProps.style,
-		height,
-		objectFit: height && scale,
+		height: ( !! aspectRatio && '100%' ) || height,
+		width: !! aspectRatio && '100%',
+		objectFit: !! ( height || aspectRatio ) && scale,
 	};
 
 	/**

package/src/post-featured-image/index.php

@@ -42,11 +42,20 @@ function render_block_core_post_featured_image( $attributes, $content, $block )
 		}
 	}
 
-	if ( ! empty( $attributes['height'] ) ) {
-		$extra_styles = "height:{$attributes['height']};";
-		if ( ! empty( $attributes['scale'] ) ) {
-			$extra_styles .= "object-fit:{$attributes['scale']};";
-		}
+	$extra_styles = '';
+
+	// Aspect ratio with a height set needs to override the default width/height.
+	if ( ! empty( $attributes['aspectRatio'] ) ) {
+		$extra_styles .= 'width:100%;height:100%;';
+	} elseif ( ! empty( $attributes['height'] ) ) {
+		$extra_styles .= "height:{$attributes['height']};";
+	}
+
+	if ( ! empty( $attributes['scale'] ) ) {
+		$extra_styles .= "object-fit:{$attributes['scale']};";
+	}
+
+	if ( ! empty( $extra_styles ) ) {
 		$attr['style'] = empty( $attr['style'] ) ? $extra_styles : $attr['style'] . $extra_styles;
 	}
 
@@ -71,12 +80,19 @@ function render_block_core_post_featured_image( $attributes, $content, $block )
 		$featured_image = $featured_image . $overlay_markup;
 	}
 
-	$width  = ! empty( $attributes['width'] ) ? esc_attr( safecss_filter_attr( 'width:' . $attributes['width'] ) ) . ';' : '';
-	$height = ! empty( $attributes['height'] ) ? esc_attr( safecss_filter_attr( 'height:' . $attributes['height'] ) ) . ';' : '';
-	if ( ! $height && ! $width ) {
+	$aspect_ratio = ! empty( $attributes['aspectRatio'] )
+		? esc_attr( safecss_filter_attr( 'aspect-ratio:' . $attributes['aspectRatio'] ) ) . ';'
+		: '';
+	$width        = ! empty( $attributes['width'] )
+		? esc_attr( safecss_filter_attr( 'width:' . $attributes['width'] ) ) . ';'
+		: '';
+	$height       = ! empty( $attributes['height'] )
+		? esc_attr( safecss_filter_attr( 'height:' . $attributes['height'] ) ) . ';'
+		: '';
+	if ( ! $height && ! $width && ! $aspect_ratio ) {
 		$wrapper_attributes = get_block_wrapper_attributes();
 	} else {
-		$wrapper_attributes = get_block_wrapper_attributes( array( 'style' => $width . $height ) );
+		$wrapper_attributes = get_block_wrapper_attributes( array( 'style' => $aspect_ratio . $width . $height ) );
 	}
 	return "<figure {$wrapper_attributes}>{$featured_image}</figure>";
 }