@wordpress/block-library 7.16.0 → 7.18.0

package/src/page-list/edit.js

@@ -52,50 +52,64 @@ export default function PageListEdit( { context, clientId } ) {
 		style: { ...context.style?.color },
 	} );
 
-	return (
-		<>
-			{ allowConvertToLinks && (
-				<BlockControls group="other">
-					<ToolbarButton title={ __( 'Edit' ) } onClick={ openModal }>
-						{ __( 'Edit' ) }
-					</ToolbarButton>
-				</BlockControls>
-			) }
-			{ allowConvertToLinks && isOpen && (
-				<ConvertToLinksModal
-					onClose={ closeModal }
-					clientId={ clientId }
-				/>
-			) }
-			{ ! hasResolvedPages && (
+	const getBlockContent = () => {
+		if ( ! hasResolvedPages ) {
+			return (
 				<div { ...blockProps }>
 					<Spinner />
 				</div>
-			) }
+			);
+		}
 
-			{ hasResolvedPages && totalPages === null && (
+		if ( totalPages === null ) {
+			return (
 				<div { ...blockProps }>
 					<Notice status={ 'warning' } isDismissible={ false }>
 						{ __( 'Page List: Cannot retrieve Pages.' ) }
 					</Notice>
 				</div>
-			) }
+			);
+		}
 
-			{ totalPages === 0 && (
+		if ( totalPages === 0 ) {
+			return (
 				<div { ...blockProps }>
 					<Notice status={ 'info' } isDismissible={ false }>
 						{ __( 'Page List: Cannot retrieve Pages.' ) }
 					</Notice>
 				</div>
-			) }
-			{ totalPages > 0 && (
+			);
+		}
+
+		if ( totalPages > 0 ) {
+			return (
 				<ul { ...blockProps }>
 					<PageItems
 						context={ context }
 						pagesByParentId={ pagesByParentId }
 					/>
 				</ul>
+			);
+		}
+	};
+
+	return (
+		<>
+			{ allowConvertToLinks && (
+				<BlockControls group="other">
+					<ToolbarButton title={ __( 'Edit' ) } onClick={ openModal }>
+						{ __( 'Edit' ) }
+					</ToolbarButton>
+				</BlockControls>
 			) }
+			{ allowConvertToLinks && isOpen && (
+				<ConvertToLinksModal
+					onClose={ closeModal }
+					clientId={ clientId }
+				/>
+			) }
+
+			{ getBlockContent() }
 		</>
 	);
 }

package/src/page-list/index.php

@@ -119,7 +119,14 @@ function block_core_page_list_build_css_font_sizes( $context ) {
 		$font_sizes['css_classes'][] = sprintf( 'has-%s-font-size', $context['fontSize'] );
 	} elseif ( $has_custom_font_size ) {
 		// Add the custom font size inline style.
-		$font_sizes['inline_styles'] = sprintf( 'font-size: %s;', $context['style']['typography']['fontSize'] );
+		$font_sizes['inline_styles'] = sprintf(
+			'font-size: %s;',
+			wp_get_typography_font_size_value(
+				array(
+					'size' => $context['style']['typography']['fontSize'],
+				)
+			)
+		);
 	}
 
 	return $font_sizes;
@@ -299,11 +306,6 @@ function render_block_core_page_list( $attributes, $content, $block ) {
 
 	$nested_pages = block_core_page_list_nest_pages( $top_level_pages, $pages_with_children );
 
-	// Limit the number of items to be visually displayed.
-	if ( ! empty( $attributes['__unstableMaxPages'] ) ) {
-		$nested_pages = array_slice( $nested_pages, 0, $attributes['__unstableMaxPages'] );
-	}
-
 	$is_navigation_child = array_key_exists( 'showSubmenuIcon', $block->context );
 
 	$open_submenus_on_click = array_key_exists( 'openSubmenusOnClick', $block->context ) ? $block->context['openSubmenusOnClick'] : false;

package/src/paragraph/edit.js

@@ -6,7 +6,6 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useState } from '@wordpress/element';
 import { __, _x, isRTL } from '@wordpress/i18n';
 import {
 	ToolbarButton,
@@ -21,7 +20,6 @@ import {
 	useBlockProps,
 	useSetting,
 } from '@wordpress/block-editor';
-import { useMergeRefs } from '@wordpress/compose';
 import { createBlock } from '@wordpress/blocks';
 import { formatLtr } from '@wordpress/icons';
 
@@ -29,7 +27,6 @@ import { formatLtr } from '@wordpress/icons';
  * Internal dependencies
  */
 import { useOnEnter } from './use-enter';
-import DropZone from './drop-zone';
 
 const name = 'core/paragraph';
 
@@ -62,12 +59,8 @@ function ParagraphBlock( {
 } ) {
 	const { align, content, direction, dropCap, placeholder } = attributes;
 	const isDropCapFeatureEnabled = useSetting( 'typography.dropCap' );
-	const [ paragraphElement, setParagraphElement ] = useState( null );
 	const blockProps = useBlockProps( {
-		ref: useMergeRefs( [
-			useOnEnter( { clientId, content } ),
-			setParagraphElement,
-		] ),
+		ref: useOnEnter( { clientId, content } ),
 		className: classnames( {
 			'has-drop-cap': hasDropCapDisabled( align ) ? false : dropCap,
 			[ `has-text-align-${ align }` ]: align,
@@ -130,12 +123,6 @@ function ParagraphBlock( {
 					</ToolsPanelItem>
 				</InspectorControls>
 			) }
-			{ ! content && (
-				<DropZone
-					clientId={ clientId }
-					paragraphElement={ paragraphElement }
-				/>
-			) }
 			<RichText
 				identifier="content"
 				tagName="p"

package/src/paragraph/editor.scss

@@ -17,23 +17,3 @@
 		}
 	}
 }
-
-.components-popover.wp-block-paragraph__drop-zone {
-	.components-popover__content {
-		border: none;
-		outline: none;
-		box-shadow: none;
-	}
-
-	.wp-block-paragraph__drop-zone-backdrop {
-		position: absolute;
-	}
-
-	.wp-block-paragraph__drop-zone-foreground {
-		position: absolute;
-		inset: 0;
-		pointer-events: none;
-		background-color: var(--wp-admin-theme-color);
-		border-radius: 2px;
-	}
-}

package/src/pattern/edit.js

@@ -26,10 +26,17 @@ const PatternEdit = ( { attributes, clientId } ) => {
 	// It will continue to pull from the pattern file unless changes are made to its respective template part.
 	useEffect( () => {
 		if ( selectedPattern?.blocks ) {
-			__unstableMarkNextChangeAsNotPersistent();
-			replaceBlocks( clientId, selectedPattern.blocks );
+			// We batch updates to block list settings to avoid triggering cascading renders
+			// for each container block included in a tree and optimize initial render.
+			// Since the above uses microtasks, we need to use a microtask here as well,
+			// because nested pattern blocks cannot be inserted if the parent block supports
+			// inner blocks but doesn't have blockSettings in the state.
+			window.queueMicrotask( () => {
+				__unstableMarkNextChangeAsNotPersistent();
+				replaceBlocks( clientId, selectedPattern.blocks );
+			} );
 		}
-	}, [ selectedPattern?.blocks ] );
+	}, [ clientId, selectedPattern?.blocks ] );
 
 	const props = useBlockProps();
 

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

@@ -22,6 +22,10 @@
 				"text": true
 			}
 		},
+		"spacing": {
+			"margin": true,
+			"padding": true
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,

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

@@ -22,6 +22,10 @@
 				"text": true
 			}
 		},
+		"spacing": {
+			"margin": true,
+			"padding": true
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,

package/src/post-comments-form/form.js

@@ -13,18 +13,17 @@ import {
 	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
 import { Button } from '@wordpress/components';
-import { useDisabled, useInstanceId } from '@wordpress/compose';
+import { useInstanceId } from '@wordpress/compose';
 import { useEntityProp, store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 
 const CommentsFormPlaceholder = () => {
-	const disabledFormRef = useDisabled();
 	const instanceId = useInstanceId( CommentsFormPlaceholder );
 
 	return (
 		<div className="comment-respond">
 			<h3 className="comment-reply-title">{ __( 'Leave a Reply' ) }</h3>
-			<form noValidate className="comment-form" ref={ disabledFormRef }>
+			<form noValidate className="comment-form" inert="true">
 				<p>
 					<label htmlFor={ `comment-${ instanceId }` }>
 						{ __( 'Comment' ) }

package/src/post-comments-form/style.scss

@@ -1,4 +1,7 @@
 .wp-block-post-comments-form {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+
 	&[style*="font-weight"] :where(.comment-reply-title) {
 		font-weight: inherit;
 	}

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

@@ -23,6 +23,10 @@
 				"link": true
 			}
 		},
+		"spacing": {
+			"margin": true,
+			"padding": true
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,

package/src/post-content/edit.js

@@ -84,8 +84,8 @@ function Content( props ) {
 	);
 }
 
-function Placeholder() {
-	const blockProps = useBlockProps();
+function Placeholder( { layoutClassNames } ) {
+	const blockProps = useBlockProps( { className: layoutClassNames } );
 	return (
 		<div { ...blockProps }>
 			<p>
@@ -118,7 +118,11 @@ function RecursionError() {
 	);
 }
 
-export default function PostContentEdit( { context, attributes } ) {
+export default function PostContentEdit( {
+	context,
+	attributes,
+	__unstableLayoutClassNames: layoutClassNames,
+} ) {
 	const { postId: contextPostId, postType: contextPostType } = context;
 	const { layout = {} } = attributes;
 	const hasAlreadyRendered = useHasRecursion( contextPostId );
@@ -132,7 +136,7 @@ export default function PostContentEdit( { context, attributes } ) {
 			{ contextPostId && contextPostType ? (
 				<Content context={ context } layout={ layout } />
 			) : (
-				<Placeholder />
+				<Placeholder layoutClassNames={ layoutClassNames } />
 			) }
 		</RecursionProvider>
 	);

package/src/pullquote/deprecated.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { get, includes } from 'lodash';
+import { get } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -140,7 +140,7 @@ const v4 = {
 			className,
 		} = attributes;
 
-		const isSolidColorStyle = includes( className, SOLID_COLOR_CLASS );
+		const isSolidColorStyle = className?.includes( SOLID_COLOR_CLASS );
 
 		let figureClasses, figureStyles;
 
@@ -206,7 +206,7 @@ const v4 = {
 		customTextColor,
 		...attributes
 	} ) {
-		const isSolidColorStyle = includes( className, SOLID_COLOR_CLASS );
+		const isSolidColorStyle = className?.includes( SOLID_COLOR_CLASS );
 		let style;
 
 		if ( customMainColor ) {
@@ -270,7 +270,7 @@ const v3 = {
 			figureStyle,
 		} = attributes;
 
-		const isSolidColorStyle = includes( className, SOLID_COLOR_CLASS );
+		const isSolidColorStyle = className?.includes( SOLID_COLOR_CLASS );
 
 		let figureClasses, figureStyles;
 
@@ -345,7 +345,7 @@ const v3 = {
 		customTextColor,
 		...attributes
 	} ) {
-		const isSolidColorStyle = includes( className, SOLID_COLOR_CLASS );
+		const isSolidColorStyle = className?.includes( SOLID_COLOR_CLASS );
 		let style;
 
 		if ( customMainColor ) {
@@ -416,7 +416,7 @@ const v2 = {
 			citation,
 			className,
 		} = attributes;
-		const isSolidColorStyle = includes( className, SOLID_COLOR_CLASS );
+		const isSolidColorStyle = className?.includes( SOLID_COLOR_CLASS );
 
 		let figureClass, figureStyles;
 		// Is solid color style
@@ -484,7 +484,7 @@ const v2 = {
 		customTextColor,
 		...attributes
 	} ) {
-		const isSolidColorStyle = includes( className, SOLID_COLOR_CLASS );
+		const isSolidColorStyle = className?.includes( SOLID_COLOR_CLASS );
 		let style = {};
 
 		if ( customMainColor ) {

package/src/query/edit/inspector-controls/index.js

@@ -22,13 +22,14 @@ import { useEffect, useState, useCallback } from '@wordpress/element';
 import OrderControl from './order-control';
 import AuthorControl from './author-control';
 import ParentControl from './parent-control';
-import { TaxonomyControls, useTaxonomiesInfo } from './taxonomy-controls';
+import { TaxonomyControls } from './taxonomy-controls';
 import StickyControl from './sticky-control';
 import {
 	usePostTypes,
 	useIsPostTypeHierarchical,
 	useAllowedControls,
 	isControlAllowed,
+	useTaxonomies,
 } from '../../utils';
 
 export default function QueryInspectorControls( {
@@ -50,7 +51,7 @@ export default function QueryInspectorControls( {
 	const allowedControls = useAllowedControls( attributes );
 	const [ showSticky, setShowSticky ] = useState( postType === 'post' );
 	const { postTypesTaxonomiesMap, postTypesSelectOptions } = usePostTypes();
-	const taxonomiesInfo = useTaxonomiesInfo( postType );
+	const taxonomies = useTaxonomies( postType );
 	const isPostTypeHierarchical = useIsPostTypeHierarchical( postType );
 	useEffect( () => {
 		setShowSticky( postType === 'post' );
@@ -192,7 +193,7 @@ export default function QueryInspectorControls( {
 							setQuerySearch( '' );
 						} }
 					>
-						{ !! taxonomiesInfo?.length &&
+						{ !! taxonomies?.length &&
 							isControlAllowed( allowedControls, 'taxQuery' ) && (
 								<ToolsPanelItem
 									label={ __( 'Taxonomies' ) }

package/src/query/edit/inspector-controls/taxonomy-controls.js

@@ -8,14 +8,18 @@ import { store as coreStore } from '@wordpress/core-data';
 /**
  * Internal dependencies
  */
-import { getEntitiesInfo, useTaxonomies } from '../../utils';
+import { useTaxonomies } from '../../utils';
 import { MAX_FETCHED_TERMS } from '../../constants';
 
 // Helper function to get the term id based on user input in terms `FormTokenField`.
-const getTermIdByTermValue = ( termsMappedByName, termValue ) => {
+const getTermIdByTermValue = ( terms, termValue ) => {
 	// First we check for exact match by `term.id` or case sensitive `term.name` match.
-	const termId = termValue?.id || termsMappedByName[ termValue ]?.id;
-	if ( termId ) return termId;
+	const termId =
+		termValue?.id || terms.find( ( term ) => term.name === termValue )?.id;
+	if ( termId ) {
+		return termId;
+	}
+
 	/**
 	 * Here we make an extra check for entered terms in a non case sensitive way,
 	 * to match user expectations, due to `FormTokenField` behaviour that shows
@@ -26,101 +30,92 @@ const getTermIdByTermValue = ( termsMappedByName, termValue ) => {
 	 * In this edge case we always apply the first match from the terms list.
 	 */
 	const termValueLower = termValue.toLocaleLowerCase();
-	for ( const term in termsMappedByName ) {
-		if ( term.toLocaleLowerCase() === termValueLower ) {
-			return termsMappedByName[ term ].id;
-		}
-	}
+	return terms.find(
+		( term ) => term.name.toLocaleLowerCase() === termValueLower
+	)?.id;
 };
 
-export const useTaxonomiesInfo = ( postType ) => {
-	const taxonomies = useTaxonomies( postType );
-	const taxonomiesInfo = useSelect(
+const useTaxonomyTerms = ( slug ) => {
+	return useSelect(
 		( select ) => {
-			const { getEntityRecords } = select( coreStore );
-			const termsQuery = { context: 'view', per_page: MAX_FETCHED_TERMS };
-			const _taxonomiesInfo = taxonomies?.map( ( { slug, name } ) => {
-				const _terms = getEntityRecords( 'taxonomy', slug, termsQuery );
-				return {
-					slug,
-					name,
-					terms: getEntitiesInfo( _terms ),
-				};
-			} );
-			return _taxonomiesInfo;
+			const terms = select( coreStore ).getEntityRecords(
+				'taxonomy',
+				slug,
+				{ context: 'view', per_page: MAX_FETCHED_TERMS }
+			);
+			return { terms };
 		},
-		[ taxonomies ]
+		[ slug ]
 	);
-	return taxonomiesInfo;
 };
 
 export function TaxonomyControls( { onChange, query } ) {
-	const taxonomiesInfo = useTaxonomiesInfo( query.postType );
-	const onTermsChange = ( taxonomySlug ) => ( newTermValues ) => {
-		const taxonomyInfo = taxonomiesInfo.find(
-			( { slug } ) => slug === taxonomySlug
-		);
-		if ( ! taxonomyInfo ) return;
-		const termIds = Array.from(
-			newTermValues.reduce( ( accumulator, termValue ) => {
-				const termId = getTermIdByTermValue(
-					taxonomyInfo.terms.mapByName,
-					termValue
+	const { postType, taxQuery } = query;
+
+	const taxonomies = useTaxonomies( postType );
+	if ( ! taxonomies || taxonomies.length === 0 ) {
+		return null;
+	}
+
+	return (
+		<>
+			{ taxonomies.map( ( taxonomy ) => {
+				const value = taxQuery?.[ taxonomy.slug ] || [];
+				const handleChange = ( newTermIds ) =>
+					onChange( {
+						taxQuery: {
+							...taxQuery,
+							[ taxonomy.slug ]: newTermIds,
+						},
+					} );
+
+				return (
+					<TaxonomyItem
+						key={ taxonomy.slug }
+						taxonomy={ taxonomy }
+						value={ value }
+						onChange={ handleChange }
+					/>
 				);
-				if ( termId ) accumulator.add( termId );
-				return accumulator;
-			}, new Set() )
-		);
-		const newTaxQuery = {
-			...query.taxQuery,
-			[ taxonomySlug ]: termIds,
-		};
-		onChange( { taxQuery: newTaxQuery } );
+			} ) }
+		</>
+	);
+}
+function TaxonomyItem( { taxonomy, value, onChange } ) {
+	const { terms } = useTaxonomyTerms( taxonomy.slug );
+	if ( ! terms?.length ) {
+		return null;
+	}
+
+	const onTermsChange = ( newTermValues ) => {
+		const termIds = new Set();
+		for ( const termValue of newTermValues ) {
+			const termId = getTermIdByTermValue( terms, termValue );
+			if ( termId ) {
+				termIds.add( termId );
+			}
+		}
+
+		onChange( Array.from( termIds ) );
 	};
-	// Returns only the existing term ids in proper format to be
+
+	// Selects only the existing term ids in proper format to be
 	// used in `FormTokenField`. This prevents the component from
 	// crashing in the editor, when non existing term ids were provided.
-	const getExistingTaxQueryValue = ( taxonomySlug ) => {
-		const taxonomyInfo = taxonomiesInfo.find(
-			( { slug } ) => slug === taxonomySlug
-		);
-		if ( ! taxonomyInfo ) return [];
-		return ( query.taxQuery?.[ taxonomySlug ] || [] ).reduce(
-			( accumulator, termId ) => {
-				const term = taxonomyInfo.terms.mapById[ termId ];
-				if ( term ) {
-					accumulator.push( {
-						id: termId,
-						value: term.name,
-					} );
-				}
-				return accumulator;
-			},
-			[]
-		);
-	};
+	const taxQueryValue = value
+		.map( ( termId ) => terms.find( ( t ) => t.id === termId ) )
+		.filter( Boolean )
+		.map( ( term ) => ( { id: term.id, value: term.name } ) );
+
 	return (
-		<>
-			{ !! taxonomiesInfo?.length &&
-				taxonomiesInfo.map( ( { slug, name, terms } ) => {
-					if ( ! terms?.names?.length ) {
-						return null;
-					}
-					return (
-						<div
-							key={ slug }
-							className="block-library-query-inspector__taxonomy-control"
-						>
-							<FormTokenField
-								label={ name }
-								value={ getExistingTaxQueryValue( slug ) }
-								suggestions={ terms.names }
-								onChange={ onTermsChange( slug ) }
-								__experimentalShowHowTo={ false }
-							/>
-						</div>
-					);
-				} ) }
-		</>
+		<div className="block-library-query-inspector__taxonomy-control">
+			<FormTokenField
+				label={ taxonomy.name }
+				value={ taxQueryValue }
+				suggestions={ terms.map( ( t ) => t.name ) }
+				onChange={ onTermsChange }
+				__experimentalShowHowTo={ false }
+			/>
+		</div>
 	);
 }

package/src/rss/index.php

@@ -20,7 +20,7 @@ function render_block_core_rss( $attributes ) {
 	$rss = fetch_feed( $attributes['feedURL'] );
 
 	if ( is_wp_error( $rss ) ) {
-		return '<div class="components-placeholder"><div class="notice notice-error"><strong>' . __( 'RSS Error:' ) . '</strong> ' . $rss->get_error_message() . '</div></div>';
+		return '<div class="components-placeholder"><div class="notice notice-error"><strong>' . __( 'RSS Error:' ) . '</strong> ' . esc_html( $rss->get_error_message() ) . '</div></div>';
 	}
 
 	if ( ! $rss->get_item_quantity() ) {
@@ -48,8 +48,8 @@ function render_block_core_rss( $attributes ) {
 			if ( $date ) {
 				$date = sprintf(
 					'<time datetime="%1$s" class="wp-block-rss__item-publish-date">%2$s</time> ',
-					date_i18n( get_option( 'c' ), $date ),
-					date_i18n( get_option( 'date_format' ), $date )
+					esc_attr( date_i18n( get_option( 'c' ), $date ) ),
+					esc_attr( date_i18n( get_option( 'date_format' ), $date ) )
 				);
 			}
 		}

package/src/search/edit.js

@@ -16,6 +16,7 @@ import {
 	getTypographyClassesAndStyles as useTypographyProps,
 	store as blockEditorStore,
 	__experimentalGetElementClassName,
+	useSetting,
 } from '@wordpress/block-editor';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useEffect } from '@wordpress/element';
@@ -113,7 +114,11 @@ export default function SearchEdit( {
 	}
 
 	const colorProps = useColorProps( attributes );
-	const typographyProps = useTypographyProps( attributes );
+	const fluidTypographyEnabled = useSetting( 'typography.fluid' );
+	const typographyProps = useTypographyProps(
+		attributes,
+		fluidTypographyEnabled
+	);
 	const unitControlInstanceId = useInstanceId( UnitControl );
 	const unitControlInputId = `wp-block-search__width-${ unitControlInstanceId }`;
 	const isButtonPositionInside = 'button-inside' === buttonPosition;
@@ -358,7 +363,7 @@ export default function SearchEdit( {
 									widthUnit: newUnit,
 								} );
 							} }
-							style={ { maxWidth: 80 } }
+							__unstableInputWidth={ '80px' }
 							value={ `${ width }${ widthUnit }` }
 							units={ units }
 						/>