@wordpress/block-library 8.33.0 → 8.35.0

package/src/query/edit/inspector-controls/author-control.js

@@ -52,14 +52,18 @@ function AuthorControl( { value, onChange } ) {
 
 	const getIdByValue = ( entitiesMappedByName, authorValue ) => {
 		const id = authorValue?.id || entitiesMappedByName[ authorValue ]?.id;
-		if ( id ) return id;
+		if ( id ) {
+			return id;
+		}
 	};
 	const onAuthorChange = ( newValue ) => {
 		const ids = Array.from(
 			newValue.reduce( ( accumulator, author ) => {
 				// Verify that new values point to existing entities.
 				const id = getIdByValue( authorsInfo.mapByName, author );
-				if ( id ) accumulator.add( id );
+				if ( id ) {
+					accumulator.add( id );
+				}
 				return accumulator;
 			}, new Set() )
 		);

package/src/query/edit/inspector-controls/create-new-post-link.js

@@ -8,7 +8,9 @@ import { addQueryArgs } from '@wordpress/url';
 const CreateNewPostLink = ( {
 	attributes: { query: { postType } = {} } = {},
 } ) => {
-	if ( ! postType ) return null;
+	if ( ! postType ) {
+		return null;
+	}
 	const newPostUrl = addQueryArgs( 'post-new.php', {
 		post_type: postType,
 	} );

package/src/query/edit/inspector-controls/enhanced-pagination-control.js

@@ -15,9 +15,15 @@ export default function EnhancedPaginationControl( {
 	clientId,
 } ) {
 	const { hasUnsupportedBlocks } = useUnsupportedBlocks( clientId );
+	const fullPageClientSideNavigation =
+		window.__experimentalFullPageClientSideNavigation;
 
 	let help = __( 'Browsing between pages requires a full page reload.' );
-	if ( enhancedPagination ) {
+	if ( fullPageClientSideNavigation ) {
+		help = __(
+			'Experimental full-page client-side navigation setting enabled.'
+		);
+	} else if ( enhancedPagination ) {
 		help = __(
 			"Browsing between pages won't require a full page reload, unless non-compatible blocks are detected."
 		);
@@ -32,8 +38,12 @@ export default function EnhancedPaginationControl( {
 			<ToggleControl
 				label={ __( 'Force page reload' ) }
 				help={ help }
-				checked={ ! enhancedPagination }
-				disabled={ hasUnsupportedBlocks }
+				checked={
+					! enhancedPagination && ! fullPageClientSideNavigation
+				}
+				disabled={
+					hasUnsupportedBlocks || fullPageClientSideNavigation
+				}
 				onChange={ ( value ) => {
 					setAttributes( {
 						enhancedPagination: ! value,

package/src/query/edit/inspector-controls/parent-control.js

@@ -55,7 +55,9 @@ function ParentControl( { parents, postType, onChange } ) {
 	);
 	const currentParents = useSelect(
 		( select ) => {
-			if ( ! parents?.length ) return EMPTY_ARRAY;
+			if ( ! parents?.length ) {
+				return EMPTY_ARRAY;
+			}
 			const { getEntityRecords } = select( coreStore );
 			return getEntityRecords( 'postType', postType, {
 				...BASE_QUERY,
@@ -71,7 +73,9 @@ function ParentControl( { parents, postType, onChange } ) {
 		if ( ! parents?.length ) {
 			setValue( EMPTY_ARRAY );
 		}
-		if ( ! currentParents?.length ) return;
+		if ( ! currentParents?.length ) {
+			return;
+		}
 		const currentParentsInfo = getEntitiesInfo(
 			mapToIHasNameAndId( currentParents, 'title.rendered' )
 		);
@@ -91,27 +95,35 @@ function ParentControl( { parents, postType, onChange } ) {
 	}, [ parents, currentParents ] );
 
 	const entitiesInfo = useMemo( () => {
-		if ( ! searchResults?.length ) return EMPTY_ARRAY;
+		if ( ! searchResults?.length ) {
+			return EMPTY_ARRAY;
+		}
 		return getEntitiesInfo(
 			mapToIHasNameAndId( searchResults, 'title.rendered' )
 		);
 	}, [ searchResults ] );
 	// Update suggestions only when the query has resolved.
 	useEffect( () => {
-		if ( ! searchHasResolved ) return;
+		if ( ! searchHasResolved ) {
+			return;
+		}
 		setSuggestions( entitiesInfo.names );
 	}, [ entitiesInfo.names, searchHasResolved ] );
 
 	const getIdByValue = ( entitiesMappedByName, entity ) => {
 		const id = entity?.id || entitiesMappedByName?.[ entity ]?.id;
-		if ( id ) return id;
+		if ( id ) {
+			return id;
+		}
 	};
 	const onParentChange = ( newValue ) => {
 		const ids = Array.from(
 			newValue.reduce( ( accumulator, entity ) => {
 				// Verify that new values point to existing entities.
 				const id = getIdByValue( entitiesInfo.mapByName, entity );
-				if ( id ) accumulator.add( id );
+				if ( id ) {
+					accumulator.add( id );
+				}
 				return accumulator;
 			}, new Set() )
 		);

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

@@ -124,7 +124,9 @@ function TaxonomyItem( { taxonomy, termIds, onChange } ) {
 	// and to sanitize the provided `termIds`, by setting only the ones that exist.
 	const existingTerms = useSelect(
 		( select ) => {
-			if ( ! termIds?.length ) return EMPTY_ARRAY;
+			if ( ! termIds?.length ) {
+				return EMPTY_ARRAY;
+			}
 			const { getEntityRecords } = select( coreStore );
 			return getEntityRecords( 'taxonomy', taxonomy.slug, {
 				...BASE_QUERY,
@@ -140,7 +142,9 @@ function TaxonomyItem( { taxonomy, termIds, onChange } ) {
 		if ( ! termIds?.length ) {
 			setValue( EMPTY_ARRAY );
 		}
-		if ( ! existingTerms?.length ) return;
+		if ( ! existingTerms?.length ) {
+			return;
+		}
 		// Returns only the existing entity ids. This prevents the component
 		// from crashing in the editor, when non existing ids are provided.
 		const sanitizedValue = termIds.reduce( ( accumulator, id ) => {
@@ -157,7 +161,9 @@ function TaxonomyItem( { taxonomy, termIds, onChange } ) {
 	}, [ termIds, existingTerms ] );
 	// Update suggestions only when the query has resolved.
 	useEffect( () => {
-		if ( ! searchHasResolved ) return;
+		if ( ! searchHasResolved ) {
+			return;
+		}
 		setSuggestions( searchResults.map( ( result ) => result.name ) );
 	}, [ searchResults, searchHasResolved ] );
 	const onTermsChange = ( newTermValues ) => {

package/src/query/index.php

@@ -51,8 +51,8 @@ function render_block_core_query( $attributes, $content, $block ) {
 			// Add the necessary directives.
 			$p->set_attribute( 'data-wp-interactive', 'core/query' );
 			$p->set_attribute( 'data-wp-router-region', 'query-' . $attributes['queryId'] );
-			$p->set_attribute( 'data-wp-init', 'callbacks.setQueryRef' );
 			$p->set_attribute( 'data-wp-context', '{}' );
+			$p->set_attribute( 'data-wp-key', $attributes['queryId'] );
 			$content = $p->get_updated_html();
 		}
 	}

package/src/query/utils.js

@@ -108,7 +108,9 @@ export const usePostTypes = () => {
 		return filteredPostTypes;
 	}, [] );
 	const postTypesTaxonomiesMap = useMemo( () => {
-		if ( ! postTypes?.length ) return;
+		if ( ! postTypes?.length ) {
+			return;
+		}
 		return postTypes.reduce( ( accumulator, type ) => {
 			accumulator[ type.slug ] = type.taxonomies;
 			return accumulator;

package/src/query-title/edit.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -39,7 +39,7 @@ export default function QueryTitleEdit( {
 
 	const TagName = `h${ level }`;
 	const blockProps = useBlockProps( {
-		className: classnames( 'wp-block-query-title__placeholder', {
+		className: clsx( 'wp-block-query-title__placeholder', {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 	} );

package/src/query-title/variations.js

@@ -38,7 +38,9 @@ const variations = [
  *  Block by providing its attributes.
  */
 variations.forEach( ( variation ) => {
-	if ( variation.isActive ) return;
+	if ( variation.isActive ) {
+		return;
+	}
 	variation.isActive = ( blockAttributes, variationAttributes ) =>
 		blockAttributes.type === variationAttributes.type;
 } );

package/src/quote/deprecated.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -115,7 +115,7 @@ const v4 = {
 	isEligible: ( { align } ) => TEXT_ALIGN_OPTIONS.includes( align ),
 	save( { attributes } ) {
 		const { align, citation } = attributes;
-		const className = classnames( {
+		const className = clsx( {
 			[ `has-text-align-${ align }` ]: align,
 		} );
 		return (
@@ -170,7 +170,7 @@ const v3 = {
 	save( { attributes } ) {
 		const { align, value, citation } = attributes;
 
-		const className = classnames( {
+		const className = clsx( {
 			[ `has-text-align-${ align }` ]: align,
 		} );
 

package/src/quote/edit.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -80,7 +80,7 @@ export default function QuoteEdit( {
 	useMigrateOnLoad( attributes, clientId );
 
 	const blockProps = useBlockProps( {
-		className: classNames( className, {
+		className: clsx( className, {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 		...( ! isWebPlatform && { style } ),

package/src/quote/save.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classNames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -11,7 +11,7 @@ import { InnerBlocks, RichText, useBlockProps } from '@wordpress/block-editor';
 export default function save( { attributes } ) {
 	const { textAlign, citation } = attributes;
 
-	const className = classNames( {
+	const className = clsx( {
 		[ `has-text-align-${ textAlign }` ]: textAlign,
 	} );
 

package/src/rss/edit.js

@@ -14,12 +14,11 @@ import {
 	RangeControl,
 	ToggleControl,
 	ToolbarGroup,
-	__experimentalHStack as HStack,
 	__experimentalInputControl as InputControl,
 } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import { grid, list, edit, rss } from '@wordpress/icons';
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 import { prependHTTP } from '@wordpress/url';
 import ServerSideRender from '@wordpress/server-side-render';
 
@@ -59,32 +58,40 @@ export default function RSSEdit( { attributes, setAttributes } ) {
 
 	const blockProps = useBlockProps();
 
+	const label = __( 'RSS URL' );
+
 	if ( isEditing ) {
 		return (
 			<div { ...blockProps }>
-				<Placeholder icon={ rss } label="RSS">
+				<Placeholder
+					icon={ rss }
+					label={ label }
+					instructions={ __(
+						'Display entries from any RSS or Atom feed.'
+					) }
+				>
 					<form
 						onSubmit={ onSubmitURL }
 						className="wp-block-rss__placeholder-form"
 					>
-						<HStack wrap>
-							<InputControl
-								__next40pxDefaultSize
-								placeholder={ __( 'Enter URL here…' ) }
-								value={ feedURL }
-								onChange={ ( value ) =>
-									setAttributes( { feedURL: value } )
-								}
-								className="wp-block-rss__placeholder-input"
-							/>
-							<Button
-								__next40pxDefaultSize
-								variant="primary"
-								type="submit"
-							>
-								{ __( 'Use URL' ) }
-							</Button>
-						</HStack>
+						<InputControl
+							__next40pxDefaultSize
+							label={ label }
+							hideLabelFromVision
+							placeholder={ __( 'Enter URL here…' ) }
+							value={ feedURL }
+							onChange={ ( value ) =>
+								setAttributes( { feedURL: value } )
+							}
+							className="wp-block-rss__placeholder-input"
+						/>
+						<Button
+							__next40pxDefaultSize
+							variant="primary"
+							type="submit"
+						>
+							{ __( 'Apply' ) }
+						</Button>
 					</form>
 				</Placeholder>
 			</div>
@@ -99,13 +106,13 @@ export default function RSSEdit( { attributes, setAttributes } ) {
 		},
 		{
 			icon: list,
-			title: __( 'List view' ),
+			title: _x( 'List view', 'RSS block display setting' ),
 			onClick: () => setAttributes( { blockLayout: 'list' } ),
 			isActive: blockLayout === 'list',
 		},
 		{
 			icon: grid,
-			title: __( 'Grid view' ),
+			title: _x( 'Grid view', 'RSS block display setting' ),
 			onClick: () => setAttributes( { blockLayout: 'grid' } ),
 			isActive: blockLayout === 'grid',
 		},

package/src/rss/editor.scss

@@ -2,20 +2,6 @@
 	display: inline;
 }
 
-.wp-block-rss__placeholder-form {
-	> * {
-		margin-bottom: $grid-unit-10;
-	}
-
-	@include break-medium() {
-		> * {
-			margin-bottom: 0;
-		}
-	}
-
-	.wp-block-rss__placeholder-input {
-		flex: 1;
-		min-width: 80%;
-	}
+.wp-block-rss__placeholder-form .wp-block-rss__placeholder-input {
+	flex: 1 1 auto;
 }
-

package/src/search/edit.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -168,7 +168,7 @@ export default function SearchEdit( {
 	}, [ hasOnlyButton, isSelected, setAttributes, width ] );
 
 	const getBlockClassNames = () => {
-		return classnames(
+		return clsx(
 			className,
 			isButtonPositionInside
 				? 'wp-block-search__button-inside'
@@ -267,7 +267,7 @@ export default function SearchEdit( {
 
 	const renderTextField = () => {
 		// If the input is inside the wrapper, the wrapper gets the border color styles/classes, not the input control.
-		const textFieldClasses = classnames(
+		const textFieldClasses = clsx(
 			'wp-block-search__input',
 			isButtonPositionInside ? undefined : borderProps.className,
 			typographyProps.className
@@ -303,7 +303,7 @@ export default function SearchEdit( {
 
 	const renderButton = () => {
 		// If the button is inside the wrapper, the wrapper gets the border color styles/classes, not the button.
-		const buttonClasses = classnames(
+		const buttonClasses = clsx(
 			'wp-block-search__button',
 			colorProps.className,
 			typographyProps.className,
@@ -536,7 +536,7 @@ export default function SearchEdit( {
 		},
 	} );
 
-	const labelClassnames = classnames(
+	const labelClassnames = clsx(
 		'wp-block-search__label',
 		typographyProps.className
 	);
@@ -562,7 +562,7 @@ export default function SearchEdit( {
 				size={ {
 					width: `${ width }${ widthUnit }`,
 				} }
-				className={ classnames(
+				className={ clsx(
 					'wp-block-search__inside-wrapper',
 					isButtonPositionInside ? borderProps.className : undefined
 				) }

package/src/search/edit.native.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { View, AccessibilityInfo } from 'react-native';
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -133,7 +133,7 @@ export default function SearchEdit( {
 	};
 
 	const getBlockClassNames = () => {
-		return classnames(
+		return clsx(
 			className,
 			'button-inside' === buttonPosition
 				? 'wp-block-search__button-inside'

package/src/separator/deprecated.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -27,7 +27,7 @@ const v1 = {
 		// using color, not backgroundColor
 		const colorClass = getColorClassName( 'color', color );
 
-		const className = classnames( {
+		const className = clsx( {
 			'has-text-color has-background': color || customColor,
 			[ backgroundClass ]: backgroundClass,
 			[ colorClass ]: colorClass,

package/src/separator/edit.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -30,7 +30,7 @@ export default function SeparatorEdit( { attributes, setAttributes } ) {
 	// using color, not backgroundColor.
 	const colorClass = getColorClassName( 'color', backgroundColor );
 
-	const className = classnames(
+	const className = clsx(
 		{
 			'has-text-color': backgroundColor || currentColor,
 			[ colorClass ]: colorClass,

package/src/separator/save.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -23,7 +23,7 @@ export default function separatorSave( { attributes } ) {
 	// using color, not backgroundColor.
 	const colorClass = getColorClassName( 'color', backgroundColor );
 
-	const className = classnames(
+	const className = clsx(
 		{
 			'has-text-color': backgroundColor || customColor,
 			[ colorClass ]: colorClass,

package/src/shortcode/edit.js

@@ -4,29 +4,25 @@
 import { __ } from '@wordpress/i18n';
 import { PlainText, useBlockProps } from '@wordpress/block-editor';
 import { useInstanceId } from '@wordpress/compose';
-import { Icon, shortcode } from '@wordpress/icons';
+import { Placeholder } from '@wordpress/components';
+import { shortcode } from '@wordpress/icons';
 
 export default function ShortcodeEdit( { attributes, setAttributes } ) {
 	const instanceId = useInstanceId( ShortcodeEdit );
 	const inputId = `blocks-shortcode-input-${ instanceId }`;
 
 	return (
-		<div { ...useBlockProps( { className: 'components-placeholder' } ) }>
-			<label
-				htmlFor={ inputId }
-				className="components-placeholder__label"
-			>
-				<Icon icon={ shortcode } />
-				{ __( 'Shortcode' ) }
-			</label>
-			<PlainText
-				className="blocks-shortcode__textarea"
-				id={ inputId }
-				value={ attributes.text }
-				aria-label={ __( 'Shortcode text' ) }
-				placeholder={ __( 'Write shortcode here…' ) }
-				onChange={ ( text ) => setAttributes( { text } ) }
-			/>
+		<div { ...useBlockProps() }>
+			<Placeholder icon={ shortcode } label={ __( 'Shortcode' ) }>
+				<PlainText
+					className="blocks-shortcode__textarea"
+					id={ inputId }
+					value={ attributes.text }
+					aria-label={ __( 'Shortcode text' ) }
+					placeholder={ __( 'Write shortcode here…' ) }
+					onChange={ ( text ) => setAttributes( { text } ) }
+				/>
+			</Placeholder>
 		</div>
 	);
 }

package/src/shortcode/editor.scss

@@ -1,9 +1,3 @@
-[data-type="core/shortcode"] {
-	&.components-placeholder {
-		min-height: 0;
-	}
-}
-
 // The editing view for the Shortcode block is equivalent to block UI.
 // Therefore we increase specificity to avoid theme styles bleeding in.
 .blocks-shortcode__textarea {

package/src/site-logo/edit.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -73,7 +73,7 @@ const SiteLogo = ( {
 	const [ { naturalWidth, naturalHeight }, setNaturalSize ] = useState( {} );
 	const [ isEditingImage, setIsEditingImage ] = useState( false );
 	const { toggleSelection } = useDispatch( blockEditorStore );
-	const classes = classnames( 'custom-logo-link' );
+	const classes = clsx( 'custom-logo-link' );
 	const { imageEditing, maxWidth, title } = useSelect( ( select ) => {
 		const settings = select( blockEditorStore ).getSettings();
 		const siteEntities = select( coreStore ).getEntityRecord(
@@ -562,7 +562,7 @@ export default function LogoEdit( {
 		);
 	}
 	const placeholder = ( content ) => {
-		const placeholderClassName = classnames(
+		const placeholderClassName = clsx(
 			'block-editor-media-placeholder',
 			className
 		);
@@ -581,7 +581,7 @@ export default function LogoEdit( {
 		);
 	};
 
-	const classes = classnames( className, {
+	const classes = clsx( className, {
 		'is-default-size': ! width,
 		'is-transient': temporaryURL,
 	} );

package/src/site-logo/editor.scss

@@ -88,6 +88,7 @@
 		// Style the upload button.
 		.components-button.components-button {
 			padding: 0;
+			margin: auto;
 			display: flex;
 			justify-content: center;
 			align-items: center;

package/src/site-logo/index.php

@@ -74,6 +74,7 @@ function register_block_core_site_logo_setting() {
 				'name' => 'site_logo',
 			),
 			'type'         => 'integer',
+			'label'        => __( 'Logo' ),
 			'description'  => __( 'Site logo.' ),
 		)
 	);
@@ -93,6 +94,7 @@ function register_block_core_site_icon_setting() {
 		array(
 			'show_in_rest' => true,
 			'type'         => 'integer',
+			'label'        => __( 'Icon' ),
 			'description'  => __( 'Site icon.' ),
 		)
 	);

package/src/site-tagline/edit.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -51,7 +51,7 @@ export default function SiteTaglineEdit( {
 	}
 
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: clsx( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 			'wp-block-site-tagline__placeholder': ! canUserEdit && ! tagline,
 		} ),