@wordpress/block-library 8.32.0 → 8.34.0

package/src/paragraph/block.json

@@ -7,7 +7,6 @@
 	"description": "Start with the basic building block of all narrative.",
 	"keywords": [ "text" ],
 	"textdomain": "default",
-	"usesContext": [ "postId" ],
 	"attributes": {
 		"align": {
 			"type": "string"

package/src/post-excerpt/edit.js

@@ -89,7 +89,9 @@ export default function PostExcerptEditor( {
 	 * excerpt has been produced from the content.
 	 */
 	const strippedRenderedExcerpt = useMemo( () => {
-		if ( ! renderedExcerpt ) return '';
+		if ( ! renderedExcerpt ) {
+			return '';
+		}
 		const document = new window.DOMParser().parseFromString(
 			renderedExcerpt,
 			'text/html'

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

@@ -10,7 +10,11 @@ import {
 	__experimentalUseCustomUnits as useCustomUnits,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
-import { InspectorControls, useSettings } from '@wordpress/block-editor';
+import {
+	useSettings,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
 
 const SCALE_OPTIONS = (
 	<>
@@ -51,12 +55,25 @@ const DimensionControls = ( {
 	clientId,
 	attributes: { aspectRatio, width, height, scale, sizeSlug },
 	setAttributes,
-	imageSizeOptions = [],
+	media,
 } ) => {
 	const [ availableUnits ] = useSettings( 'spacing.units' );
 	const units = useCustomUnits( {
 		availableUnits: availableUnits || [ 'px', '%', 'vw', 'em', 'rem' ],
 	} );
+	const imageSizes = useSelect(
+		( select ) => select( blockEditorStore ).getSettings().imageSizes,
+		[]
+	);
+	const imageSizeOptions = imageSizes
+		.filter( ( { slug } ) => {
+			return media?.media_details?.sizes?.[ slug ]?.source_url;
+		} )
+		.map( ( { name, slug } ) => ( {
+			value: slug,
+			label: name,
+		} ) );
+
 	const onDimensionChange = ( dimension, nextValue ) => {
 		const parsedValue = parseFloat( nextValue );
 		/**
@@ -64,7 +81,9 @@ const DimensionControls = ( {
 		 * we don't want to set the attribute, as it would
 		 * end up having the unit as value without any number.
 		 */
-		if ( isNaN( parsedValue ) && nextValue ) return;
+		if ( isNaN( parsedValue ) && nextValue ) {
+			return;
+		}
 		setAttributes( {
 			[ dimension ]: parsedValue < 0 ? '0' : nextValue,
 		} );
@@ -75,7 +94,7 @@ const DimensionControls = ( {
 		height || ( aspectRatio && aspectRatio !== 'auto' );
 
 	return (
-		<InspectorControls group="dimensions">
+		<>
 			<ToolsPanelItem
 				hasValue={ () => !! aspectRatio }
 				label={ __( 'Aspect ratio' ) }
@@ -230,7 +249,7 @@ const DimensionControls = ( {
 					/>
 				</ToolsPanelItem>
 			) }
-		</InspectorControls>
+		</>
 	);
 };
 

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

@@ -6,6 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
+import { isBlobURL } from '@wordpress/blob';
 import { useEntityProp, store as coreStore } from '@wordpress/core-data';
 import { useSelect, useDispatch } from '@wordpress/data';
 import {
@@ -14,6 +15,7 @@ import {
 	PanelBody,
 	Placeholder,
 	Button,
+	Spinner,
 	TextControl,
 } from '@wordpress/components';
 import {
@@ -22,12 +24,11 @@ import {
 	MediaPlaceholder,
 	MediaReplaceFlow,
 	useBlockProps,
-	store as blockEditorStore,
 	__experimentalUseBorderProps as useBorderProps,
 	__experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles,
 	useBlockEditingMode,
 } from '@wordpress/block-editor';
-import { useMemo } from '@wordpress/element';
+import { useMemo, useEffect, useState } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { upload } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
@@ -70,6 +71,7 @@ export default function PostFeaturedImageEdit( {
 		linkTarget,
 		useFirstImageFromPost,
 	} = attributes;
+	const [ temporaryURL, setTemporaryURL ] = useState();
 
 	const [ storedFeaturedImage, setFeaturedImage ] = useEntityProp(
 		'postType',
@@ -129,21 +131,11 @@ export default function PostFeaturedImageEdit( {
 
 	const mediaUrl = getMediaSourceUrlBySizeSlug( media, sizeSlug );
 
-	const imageSizes = useSelect(
-		( select ) => select( blockEditorStore ).getSettings().imageSizes,
-		[]
-	);
-	const imageSizeOptions = imageSizes
-		.filter( ( { slug } ) => {
-			return media?.media_details?.sizes?.[ slug ]?.source_url;
-		} )
-		.map( ( { name, slug } ) => ( {
-			value: slug,
-			label: name,
-		} ) );
-
 	const blockProps = useBlockProps( {
 		style: { width, height, aspectRatio },
+		className: classnames( {
+			'is-transient': temporaryURL,
+		} ),
 	} );
 	const borderProps = useBorderProps( attributes );
 	const shadowProps = getShadowClassesAndStyles( attributes );
@@ -173,26 +165,42 @@ export default function PostFeaturedImageEdit( {
 		if ( value?.id ) {
 			setFeaturedImage( value.id );
 		}
+
+		if ( value?.url && isBlobURL( value.url ) ) {
+			setTemporaryURL( value.url );
+		}
 	};
 
+	// Reset temporary url when media is available.
+	useEffect( () => {
+		if ( mediaUrl && temporaryURL ) {
+			setTemporaryURL();
+		}
+	}, [ mediaUrl, temporaryURL ] );
+
 	const { createErrorNotice } = useDispatch( noticesStore );
 	const onUploadError = ( message ) => {
 		createErrorNotice( message, { type: 'snackbar' } );
+		setTemporaryURL();
 	};
 
 	const controls = blockEditingMode === 'default' && (
 		<>
-			<OverlayControls
-				attributes={ attributes }
-				setAttributes={ setAttributes }
-				clientId={ clientId }
-			/>
-			<DimensionControls
-				clientId={ clientId }
-				attributes={ attributes }
-				setAttributes={ setAttributes }
-				imageSizeOptions={ imageSizeOptions }
-			/>
+			<InspectorControls group="color">
+				<OverlayControls
+					attributes={ attributes }
+					setAttributes={ setAttributes }
+					clientId={ clientId }
+				/>
+			</InspectorControls>
+			<InspectorControls group="dimensions">
+				<DimensionControls
+					clientId={ clientId }
+					attributes={ attributes }
+					setAttributes={ setAttributes }
+					media={ media }
+				/>
+			</InspectorControls>
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
 					<ToggleControl
@@ -241,7 +249,7 @@ export default function PostFeaturedImageEdit( {
 	/**
 	 * A Post Featured Image block should not have image replacement
 	 * or upload options in the following cases:
-	 * - Is placed in a Query Loop. This is a consious decision to
+	 * - Is placed in a Query Loop. This is a conscious decision to
 	 * prevent content editing of different posts in Query Loop, and
 	 * this could change in the future.
 	 * - Is in a context where it does not have a postId (for example
@@ -289,7 +297,7 @@ export default function PostFeaturedImageEdit( {
 	 * - It has no image assigned yet
 	 * Then display the placeholder with the image upload option.
 	 */
-	if ( ! featuredImage ) {
+	if ( ! featuredImage && ! temporaryURL ) {
 		image = (
 			<MediaPlaceholder
 				onSelect={ onSelectImage }
@@ -315,24 +323,28 @@ export default function PostFeaturedImageEdit( {
 		);
 	} else {
 		// We have a Featured image so show a Placeholder if is loading.
-		image = ! media ? (
-			placeholder()
-		) : (
-			<img
-				className={ borderProps.className }
-				src={ mediaUrl }
-				alt={
-					media.alt_text
-						? sprintf(
-								// translators: %s: The image's alt text.
-								__( 'Featured image: %s' ),
-								media.alt_text
-						  )
-						: __( 'Featured image' )
-				}
-				style={ imageStyles }
-			/>
-		);
+		image =
+			! media && ! temporaryURL ? (
+				placeholder()
+			) : (
+				<>
+					<img
+						className={ borderProps.className }
+						src={ temporaryURL || mediaUrl }
+						alt={
+							media && media?.alt_text
+								? sprintf(
+										// translators: %s: The image's alt text.
+										__( 'Featured image: %s' ),
+										media.alt_text
+								  )
+								: __( 'Featured image' )
+						}
+						style={ imageStyles }
+					/>
+					{ temporaryURL && <Spinner /> }
+				</>
+			);
 	}
 
 	/**
@@ -343,7 +355,7 @@ export default function PostFeaturedImageEdit( {
 	 */
 	return (
 		<>
-			{ controls }
+			{ ! temporaryURL && controls }
 			{ !! media && ! isDescendentOfQueryLoop && (
 				<BlockControls group="other">
 					<MediaReplaceFlow

package/src/post-featured-image/editor.scss

@@ -21,6 +21,7 @@
 
 		// Style the upload button.
 		.components-button {
+			margin: auto;
 			padding: 0;
 			display: flex;
 			justify-content: center;
@@ -115,6 +116,23 @@
 			pointer-events: auto;
 		}
 	}
+
+	// When image being uploaded.
+	&.is-transient {
+		position: relative;
+
+		img {
+			opacity: 0.3;
+		}
+
+		// Show spinner while image is being uploaded.
+		.components-spinner {
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%, -50%);
+		}
+	}
 }
 
 div[data-type="core/post-featured-image"] {

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

@@ -6,10 +6,9 @@ import {
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import {
-	InspectorControls,
 	withColors,
 	__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
-	__experimentalUseGradient,
+	__experimentalUseGradient as useGradient,
 	__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,
 } from '@wordpress/block-editor';
 import { compose } from '@wordpress/compose';
@@ -23,7 +22,7 @@ const Overlay = ( {
 	setOverlayColor,
 } ) => {
 	const { dimRatio } = attributes;
-	const { gradientValue, setGradient } = __experimentalUseGradient();
+	const { gradientValue, setGradient } = useGradient();
 	const colorGradientSettings = useMultipleOriginColorsAndGradients();
 
 	if ( ! colorGradientSettings.hasColorsOrGradients ) {
@@ -31,7 +30,7 @@ const Overlay = ( {
 	}
 
 	return (
-		<InspectorControls group="color">
+		<>
 			<ColorGradientSettingsDropdown
 				__experimentalIsRenderedInSidebar
 				settings={ [
@@ -79,7 +78,7 @@ const Overlay = ( {
 					__next40pxDefaultSize
 				/>
 			</ToolsPanelItem>
-		</InspectorControls>
+		</>
 	);
 };
 

package/src/post-navigation-link/variations.js

@@ -34,7 +34,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/post-template/edit.js

@@ -27,9 +27,9 @@ const TEMPLATE = [
 	[ 'core/post-excerpt' ],
 ];
 
-function PostTemplateInnerBlocks() {
+function PostTemplateInnerBlocks( { classList } ) {
 	const innerBlocksProps = useInnerBlocksProps(
-		{ className: 'wp-block-post' },
+		{ className: classnames( 'wp-block-post', classList ) },
 		{ template: TEMPLATE, __unstableDisableLayoutClassNames: true }
 	);
 	return <li { ...innerBlocksProps } />;
@@ -38,13 +38,14 @@ function PostTemplateInnerBlocks() {
 function PostTemplateBlockPreview( {
 	blocks,
 	blockContextId,
+	classList,
 	isHidden,
 	setActiveBlockContextId,
 } ) {
 	const blockPreviewProps = useBlockPreview( {
 		blocks,
 		props: {
-			className: 'wp-block-post',
+			className: classnames( 'wp-block-post', classList ),
 		},
 	} );
 
@@ -213,6 +214,7 @@ export default function PostTemplateEdit( {
 			posts?.map( ( post ) => ( {
 				postType: post.type,
 				postId: post.id,
+				classList: post.class_list ?? '',
 			} ) ),
 		[ posts ]
 	);
@@ -280,11 +282,14 @@ export default function PostTemplateEdit( {
 							{ blockContext.postId ===
 							( activeBlockContextId ||
 								blockContexts[ 0 ]?.postId ) ? (
-								<PostTemplateInnerBlocks />
+								<PostTemplateInnerBlocks
+									classList={ blockContext.classList }
+								/>
 							) : null }
 							<MemoizedPostTemplateBlockPreview
 								blocks={ blocks }
 								blockContextId={ blockContext.postId }
+								classList={ blockContext.classList }
 								setActiveBlockContextId={
 									setActiveBlockContextId
 								}

package/src/post-terms/edit.js

@@ -49,7 +49,9 @@ export default function PostTermsEdit( {
 
 	const selectedTerm = useSelect(
 		( select ) => {
-			if ( ! term ) return {};
+			if ( ! term ) {
+				return {};
+			}
 			const { getTaxonomy } = select( coreStore );
 			const taxonomy = getTaxonomy( term );
 			return taxonomy?.visibility?.publicly_queryable ? taxonomy : {};

package/src/post-title/edit.js

@@ -18,12 +18,8 @@ import {
 import { ToggleControl, TextControl, PanelBody } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
-import { useEntityProp } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
-import { useCanEditEntity } from '../utils/hooks';
+import { useEntityProp, store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
 
 export default function PostTitleEdit( {
 	attributes: { level, textAlign, isLink, rel, linkTarget },
@@ -31,18 +27,28 @@ export default function PostTitleEdit( {
 	context: { postType, postId, queryId },
 	insertBlocksAfter,
 } ) {
-	const TagName = 'h' + level;
+	const TagName = level === 0 ? 'p' : `h${ level }`;
 	const isDescendentOfQueryLoop = Number.isFinite( queryId );
-	/**
-	 * Hack: useCanEditEntity may trigger an OPTIONS request to the REST API via the canUser resolver.
-	 * However, when the Post Title is a descendant of a Query Loop block, the title cannot be edited.
-	 * In order to avoid these unnecessary requests, we call the hook without
-	 * the proper data, resulting in returning early without making them.
-	 */
-	const userCanEdit = useCanEditEntity(
-		'postType',
-		! isDescendentOfQueryLoop && postType,
-		postId
+	const userCanEdit = useSelect(
+		( select ) => {
+			/**
+			 * useCanEditEntity may trigger an OPTIONS request to the REST API
+			 * via the canUser resolver. However, when the Post Title is a
+			 * descendant of a Query Loop block, the title cannot be edited. In
+			 * order to avoid these unnecessary requests, we call the hook
+			 * without the proper data, resulting in returning early without
+			 * making them.
+			 */
+			if ( isDescendentOfQueryLoop ) {
+				return false;
+			}
+			return select( coreStore ).canUserEditEntityRecord(
+				'postType',
+				postType,
+				postId
+			);
+		},
+		[ isDescendentOfQueryLoop, postType, postId ]
 	);
 	const [ rawTitle = '', setTitle, fullTitle ] = useEntityProp(
 		'postType',

package/src/post-title/index.php

@@ -33,7 +33,7 @@ function render_block_core_post_title( $attributes, $content, $block ) {
 
 	$tag_name = 'h2';
 	if ( isset( $attributes['level'] ) ) {
-		$tag_name = 'h' . $attributes['level'];
+		$tag_name = 0 === $attributes['level'] ? 'p' : 'h' . (int) $attributes['level'];
 	}
 
 	if ( isset( $attributes['isLink'] ) && $attributes['isLink'] ) {

package/src/private-apis.js

@@ -0,0 +1,13 @@
+/**
+ * Internal dependencies
+ */
+import { default as BlockKeyboardShortcuts } from './block-keyboard-shortcuts';
+import { lock } from './lock-unlock';
+
+/**
+ * @private
+ */
+export const privateApis = {};
+lock( privateApis, {
+	BlockKeyboardShortcuts,
+} );

package/src/pullquote/style.scss

@@ -1,5 +1,4 @@
 .wp-block-pullquote {
-	padding: 4em 0;
 	text-align: center; // Default text-alignment where the `textAlign` attribute value isn't specified.
 	overflow-wrap: break-word; // Break long strings of text without spaces so they don't overflow the block.
 	box-sizing: border-box;
@@ -36,9 +35,10 @@
 	}
 }
 
-// Lowest specificity to avoid overriding layout styles.
+// Lowest specificity to avoid overriding layout and global styles.
 :where(.wp-block-pullquote) {
 	margin: 0 0 1em 0;
+	padding: 4em 0;
 }
 
 // Ensure that we are reasonably specific to override theme defaults.

package/src/query/edit/enhanced-pagination-modal.js

@@ -27,7 +27,11 @@ export default function EnhancedPaginationModal( {
 		useUnsupportedBlocks( clientId );
 
 	useEffect( () => {
-		if ( enhancedPagination && hasUnsupportedBlocks ) {
+		if (
+			enhancedPagination &&
+			hasUnsupportedBlocks &&
+			! window.__experimentalFullPageClientSideNavigation
+		) {
 			setAttributes( { enhancedPagination: false } );
 			setOpen( true );
 		}
@@ -43,7 +47,7 @@ export default function EnhancedPaginationModal( {
 	if ( hasBlocksFromPlugins ) {
 		notice =
 			__(
-				'Currently, avoiding full page reloads is not possible when blocks from plugins are present inside the Query block.'
+				'Currently, avoiding full page reloads is not possible when non-interactive or non-client Navigation compatible blocks from plugins are present inside the Query block.'
 			) +
 			' ' +
 			notice;

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() )
 		);