@wordpress/block-library 6.0.15 → 6.0.18

package/src/post-author/edit.js

@@ -25,7 +25,7 @@ function PostAuthorEdit( {
 	attributes,
 	setAttributes,
 } ) {
-	const isDescendentOfQueryLoop = !! queryId;
+	const isDescendentOfQueryLoop = Number.isFinite( queryId );
 	const { authorId, authorDetails, authors } = useSelect(
 		( select ) => {
 			const { getEditedEntityRecord, getUser, getUsers } = select(

package/src/post-comments/style.scss

@@ -29,7 +29,6 @@
 
 	.comment-author {
 		line-height: 1.5;
-		margin-left: -3.25em;
 
 		.avatar {
 			border-radius: 1.5em;

package/src/post-content/edit.js

@@ -66,7 +66,7 @@ function EditableContent( { layout, context = {} } ) {
 
 function Content( props ) {
 	const { context: { queryId, postType, postId } = {} } = props;
-	const isDescendentOfQueryLoop = !! queryId;
+	const isDescendentOfQueryLoop = Number.isFinite( queryId );
 	const userCanEdit = useCanEditEntity( 'postType', postType, postId );
 	const isEditable = userCanEdit && ! isDescendentOfQueryLoop;
 

package/src/post-content/index.php

@@ -36,11 +36,16 @@ function render_block_core_post_content( $attributes, $content, $block ) {
 
 	$seen_ids[ $post_id ] = true;
 
+	// Check is needed for backward compatibility with third-party plugins
+	// that might rely on the `in_the_loop` check; calling `the_post` sets it to true.
 	if ( ! in_the_loop() && have_posts() ) {
 		the_post();
 	}
 
-	$content = get_the_content( null, false, $post_id );
+	// When inside the main loop, we want to use queried object
+	// so that `the_preview` for the current post can apply.
+	// We force this behavior by omitting the third argument (post ID) from the `get_the_content`.
+	$content = get_the_content( null, false );
 	/** This filter is documented in wp-includes/post-template.php */
 	$content = apply_filters( 'the_content', str_replace( ']]>', ']]>', $content ) );
 	unset( $seen_ids[ $post_id ] );

package/src/post-date/edit.js

@@ -33,7 +33,7 @@ export default function PostDateEdit( {
 	context: { postId, postType, queryId },
 	setAttributes,
 } ) {
-	const isDescendentOfQueryLoop = !! queryId;
+	const isDescendentOfQueryLoop = Number.isFinite( queryId );
 	const [ siteFormat ] = useEntityProp( 'root', 'site', 'date_format' );
 	const [ date, setDate ] = useEntityProp(
 		'postType',

package/src/post-excerpt/edit.js

@@ -30,7 +30,7 @@ export default function PostExcerptEditor( {
 	isSelected,
 	context: { postId, postType, queryId },
 } ) {
-	const isDescendentOfQueryLoop = !! queryId;
+	const isDescendentOfQueryLoop = Number.isFinite( queryId );
 	const userCanEdit = useCanEditEntity( 'postType', postType, postId );
 	const isEditable = userCanEdit && ! isDescendentOfQueryLoop;
 	const [

package/src/post-excerpt/index.php

@@ -18,7 +18,7 @@ function render_block_core_post_excerpt( $attributes, $content, $block ) {
 		return '';
 	}
 
-	$excerpt = get_the_excerpt( $block->context['postId'] );
+	$excerpt = get_the_excerpt();
 
 	if ( empty( $excerpt ) ) {
 		return '';

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

@@ -50,7 +50,7 @@ function PostFeaturedImageDisplay( {
 	setAttributes,
 	context: { postId, postType, queryId },
 } ) {
-	const isDescendentOfQueryLoop = !! queryId;
+	const isDescendentOfQueryLoop = Number.isFinite( queryId );
 	const { isLink, height, width, scale } = attributes;
 	const [ featuredImage, setFeaturedImage ] = useEntityProp(
 		'postType',

package/src/post-template/edit.js

@@ -6,12 +6,12 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useState, useMemo } from '@wordpress/element';
+import { memo, useMemo, useState } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import {
 	BlockContextProvider,
-	BlockPreview,
+	__experimentalUseBlockPreview as useBlockPreview,
 	useBlockProps,
 	useInnerBlocksProps,
 	store as blockEditorStore,
@@ -30,6 +30,39 @@ function PostTemplateInnerBlocks() {
 	return <li { ...innerBlocksProps } />;
 }
 
+function PostTemplateBlockPreview( {
+	blocks,
+	blockContextId,
+	isHidden,
+	setActiveBlockContextId,
+} ) {
+	const blockPreviewProps = useBlockPreview( {
+		blocks,
+	} );
+
+	const handleOnClick = () => {
+		setActiveBlockContextId( blockContextId );
+	};
+
+	const style = {
+		display: isHidden ? 'none' : undefined,
+	};
+
+	return (
+		<li
+			{ ...blockPreviewProps }
+			tabIndex={ 0 }
+			// eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role
+			role="button"
+			onClick={ handleOnClick }
+			onKeyPress={ handleOnClick }
+			style={ style }
+		/>
+	);
+}
+
+const MemoizedPostTemplateBlockPreview = memo( PostTemplateBlockPreview );
+
 export default function PostTemplateEdit( {
 	clientId,
 	context: {
@@ -53,7 +86,7 @@ export default function PostTemplateEdit( {
 	},
 } ) {
 	const [ { page } ] = queryContext;
-	const [ activeBlockContext, setActiveBlockContext ] = useState();
+	const [ activeBlockContextId, setActiveBlockContextId ] = useState();
 
 	const { posts, blocks } = useSelect(
 		( select ) => {
@@ -115,7 +148,6 @@ export default function PostTemplateEdit( {
 			templateSlug,
 		]
 	);
-
 	const blockContexts = useMemo(
 		() =>
 			posts?.map( ( post ) => ( {
@@ -144,6 +176,10 @@ export default function PostTemplateEdit( {
 		return <p { ...blockProps }> { __( 'No results found.' ) }</p>;
 	}
 
+	// To avoid flicker when switching active block contexts, a preview is rendered
+	// for each block context, but the preview for the active block context is hidden.
+	// This ensures that when it is displayed again, the cached rendering of the
+	// block preview is used, instead of having to re-render the preview from scratch.
 	return (
 		<ul { ...blockProps }>
 			{ blockContexts &&
@@ -152,20 +188,21 @@ export default function PostTemplateEdit( {
 						key={ blockContext.postId }
 						value={ blockContext }
 					>
-						{ blockContext ===
-						( activeBlockContext || blockContexts[ 0 ] ) ? (
+						{ blockContext.postId ===
+						( activeBlockContextId ||
+							blockContexts[ 0 ]?.postId ) ? (
 							<PostTemplateInnerBlocks />
-						) : (
-							<li>
-								<BlockPreview
-									blocks={ blocks }
-									__experimentalLive
-									__experimentalOnClick={ () =>
-										setActiveBlockContext( blockContext )
-									}
-								/>
-							</li>
-						) }
+						) : null }
+						<MemoizedPostTemplateBlockPreview
+							blocks={ blocks }
+							blockContextId={ blockContext.postId }
+							setActiveBlockContextId={ setActiveBlockContextId }
+							isHidden={
+								blockContext.postId ===
+								( activeBlockContextId ||
+									blockContexts[ 0 ]?.postId )
+							}
+						/>
 					</BlockContextProvider>
 				) ) }
 		</ul>

package/src/post-title/edit.js

@@ -30,7 +30,7 @@ export default function PostTitleEdit( {
 	context: { postType, postId, queryId },
 } ) {
 	const TagName = 0 === level ? 'p' : 'h' + level;
-	const isDescendentOfQueryLoop = !! queryId;
+	const isDescendentOfQueryLoop = Number.isFinite( queryId );
 	const userCanEdit = useCanEditEntity( 'postType', postType, postId );
 	const [ rawTitle = '', setTitle, fullTitle ] = useEntityProp(
 		'postType',

package/src/post-title/index.php

@@ -20,7 +20,7 @@ function render_block_core_post_title( $attributes, $content, $block ) {
 	}
 
 	$post_ID = $block->context['postId'];
-	$title   = get_the_title( $post_ID );
+	$title   = get_the_title();
 
 	if ( ! $title ) {
 		return '';

package/src/site-logo/block.json

@@ -6,9 +6,6 @@
 	"description": "Display a graphic to represent this site. Update the block, and the changes apply everywhere it’s used. This is different than the site icon, which is the smaller image visible in your dashboard, browser tabs, etc used to help others recognize this site.",
 	"textdomain": "default",
 	"attributes": {
-		"align": {
-			"type": "string"
-		},
 		"width": {
 			"type": "number"
 		},
@@ -19,12 +16,16 @@
 		"linkTarget": {
 			"type": "string",
 			"default": "_self"
+		},
+		"shouldSyncIcon": {
+			"type": "boolean"
 		}
 	},
 	"example": {
 		"viewportWidth": 500,
 		"attributes": {
-			"width": 350
+			"width": 350,
+			"className": "block-editor-block-types-list__site-logo-example"
 		}
 	},
 	"supports": {

package/src/site-logo/edit.js

@@ -8,7 +8,12 @@ import { includes, pick } from 'lodash';
  * WordPress dependencies
  */
 import { isBlobURL } from '@wordpress/blob';
-import { useEffect, useState, useRef } from '@wordpress/element';
+import {
+	createInterpolateElement,
+	useEffect,
+	useState,
+	useRef,
+} from '@wordpress/element';
 import { __, isRTL } from '@wordpress/i18n';
 import {
 	MenuItem,
@@ -53,7 +58,7 @@ const ACCEPT_MEDIA_STRING = 'image/*';
 
 const SiteLogo = ( {
 	alt,
-	attributes: { align, width, height, isLink, linkTarget },
+	attributes: { align, width, height, isLink, linkTarget, shouldSyncIcon },
 	containerRef,
 	isSelected,
 	setAttributes,
@@ -61,6 +66,9 @@ const SiteLogo = ( {
 	logoUrl,
 	siteUrl,
 	logoId,
+	iconId,
+	setIcon,
+	canUserEdit,
 } ) => {
 	const clientWidth = useClientWidth( containerRef, [ align ] );
 	const isLargeViewport = useViewportMatch( 'medium' );
@@ -84,6 +92,15 @@ const SiteLogo = ( {
 		};
 	}, [] );
 
+	useEffect( () => {
+		// Turn the `Use as site icon` toggle off if it is on but the logo and icon have
+		// fallen out of sync. This can happen if the toggle is saved in the `on` position,
+		// but changes are later made to the site icon in the Customizer.
+		if ( shouldSyncIcon && logoId !== iconId ) {
+			setAttributes( { shouldSyncIcon: false } );
+		}
+	}, [] );
+
 	useEffect( () => {
 		if ( ! isSelected ) {
 			setIsEditingImage( false );
@@ -142,7 +159,11 @@ const SiteLogo = ( {
 		return <div style={ { width, height } }>{ imgWrapper }</div>;
 	}
 
-	const currentWidth = width || imageWidthWithinContainer;
+	// Set the default width to a responsible size.
+	// Note that this width is also set in the attached frontend CSS file.
+	const defaultWidth = 120;
+
+	const currentWidth = width || defaultWidth;
 	const ratio = naturalWidth / naturalHeight;
 	const currentHeight = currentWidth / ratio;
 	const minWidth = naturalWidth < naturalHeight ? MIN_SIZE : MIN_SIZE * ratio;
@@ -160,10 +181,6 @@ const SiteLogo = ( {
 	// becomes available.
 	const maxWidthBuffer = maxWidth * 2.5;
 
-	// Set the default width to a responsible size.
-	// Note that this width is also set in the attached CSS file.
-	const defaultWidth = 120;
-
 	let showRightHandle = false;
 	let showLeftHandle = false;
 
@@ -250,6 +267,25 @@ const SiteLogo = ( {
 			</ResizableBox>
 		);
 
+	const syncSiteIconHelpText = createInterpolateElement(
+		__(
+			'Site Icons are what you see in browser tabs, bookmark bars, and within the WordPress mobile apps. To use a custom icon that is different from your site logo, use the <a>Site Icon settings</a>.'
+		),
+		{
+			a: (
+				// eslint-disable-next-line jsx-a11y/anchor-has-content
+				<a
+					href={
+						siteUrl +
+						'/wp-admin/customize.php?autofocus[section]=title_tagline'
+					}
+					target="_blank"
+					rel="noopener noreferrer"
+				/>
+			),
+		}
+	);
+
 	return (
 		<>
 			<InspectorControls>
@@ -286,6 +322,19 @@ const SiteLogo = ( {
 							/>
 						</>
 					) }
+					{ canUserEdit && (
+						<>
+							<ToggleControl
+								label={ __( 'Use as site icon' ) }
+								onChange={ ( value ) => {
+									setAttributes( { shouldSyncIcon: value } );
+									setIcon( value ? logoId : undefined );
+								} }
+								checked={ !! shouldSyncIcon }
+								help={ syncSiteIconHelpText }
+							/>
+						</>
+					) }
 				</PanelBody>
 			</InspectorControls>
 			<BlockControls group="block">
@@ -308,7 +357,7 @@ export default function LogoEdit( {
 	setAttributes,
 	isSelected,
 } ) {
-	const { width } = attributes;
+	const { className: styleClass, width, shouldSyncIcon } = attributes;
 	const [ logoUrl, setLogoUrl ] = useState();
 	const ref = useRef();
 
@@ -316,6 +365,7 @@ export default function LogoEdit( {
 		siteLogoId,
 		canUserEdit,
 		url,
+		siteIconId,
 		mediaItemData,
 		isRequestingMediaItem,
 	} = useSelect( ( select ) => {
@@ -328,6 +378,7 @@ export default function LogoEdit( {
 		const _readOnlyLogo = siteData?.site_logo;
 		const _canUserEdit = canUser( 'update', 'settings' );
 		const _siteLogoId = _canUserEdit ? _siteLogo : _readOnlyLogo;
+		const _siteIconId = siteSettings?.site_icon;
 		const mediaItem =
 			_siteLogoId &&
 			select( coreStore ).getMedia( _siteLogoId, {
@@ -339,6 +390,7 @@ export default function LogoEdit( {
 				_siteLogoId,
 				{ context: 'view' },
 			] );
+
 		return {
 			siteLogoId: _siteLogoId,
 			canUserEdit: _canUserEdit,
@@ -349,14 +401,59 @@ export default function LogoEdit( {
 				alt: mediaItem.alt_text,
 			},
 			isRequestingMediaItem: _isRequestingMediaItem,
+			siteIconId: _siteIconId,
 		};
 	}, [] );
 
+	const { getGlobalBlockCount } = useSelect( blockEditorStore );
 	const { editEntityRecord } = useDispatch( coreStore );
-	const setLogo = ( newValue ) =>
+
+	useEffect( () => {
+		// Cleanup function to discard unsaved changes to the icon and logo when
+		// the block is removed.
+		return () => {
+			// Do nothing if the block is being rendered in the styles preview or the
+			// block inserter.
+			if (
+				styleClass?.includes(
+					'block-editor-block-types-list__site-logo-example'
+				) ||
+				styleClass?.includes(
+					'block-editor-block-styles__block-preview-container'
+				)
+			) {
+				return;
+			}
+
+			const logoBlockCount = getGlobalBlockCount( 'core/site-logo' );
+
+			// Only discard unsaved changes if we are removing the last Site Logo block
+			// on the page.
+			if ( logoBlockCount === 0 ) {
+				editEntityRecord( 'root', 'site', undefined, {
+					site_logo: undefined,
+					site_icon: undefined,
+				} );
+			}
+		};
+	}, [] );
+
+	const setLogo = ( newValue, shouldForceSync = false ) => {
+		// `shouldForceSync` is used to force syncing when the attribute
+		// may not have updated yet.
+		if ( shouldSyncIcon || shouldForceSync ) {
+			setIcon( newValue );
+		}
+
 		editEntityRecord( 'root', 'site', undefined, {
 			site_logo: newValue,
 		} );
+	};
+
+	const setIcon = ( newValue ) =>
+		editEntityRecord( 'root', 'site', undefined, {
+			site_icon: newValue,
+		} );
 
 	let alt = null;
 	if ( mediaItemData ) {
@@ -365,7 +462,24 @@ export default function LogoEdit( {
 			setLogoUrl( mediaItemData.url );
 		}
 	}
-	const onSelectLogo = ( media ) => {
+
+	const onInitialSelectLogo = ( media ) => {
+		// Initialize the syncSiteIcon toggle. If we currently have no Site logo and no
+		// site icon, automatically sync the logo to the icon.
+		if ( shouldSyncIcon === undefined ) {
+			const shouldForceSync = ! siteIconId;
+			setAttributes( { shouldSyncIcon: shouldForceSync } );
+
+			// Because we cannot rely on the `shouldSyncIcon` attribute to have updated by
+			// the time `setLogo` is called, pass an argument to force the syncing.
+			onSelectLogo( media, shouldForceSync );
+			return;
+		}
+
+		onSelectLogo( media );
+	};
+
+	const onSelectLogo = ( media, shouldForceSync = false ) => {
 		if ( ! media ) {
 			return;
 		}
@@ -377,12 +491,13 @@ export default function LogoEdit( {
 			return;
 		}
 
-		setLogo( media.id );
+		setLogo( media.id, shouldForceSync );
 	};
 
 	const onRemoveLogo = () => {
 		setLogo( null );
 		setLogoUrl( undefined );
+		setAttributes( { width: undefined } );
 	};
 
 	const { createErrorNotice } = useDispatch( noticesStore );
@@ -422,6 +537,9 @@ export default function LogoEdit( {
 				setLogo={ setLogo }
 				logoId={ mediaItemData?.id || siteLogoId }
 				siteUrl={ url }
+				setIcon={ setIcon }
+				iconId={ siteIconId }
+				canUserEdit={ canUserEdit }
 			/>
 		);
 	}
@@ -480,7 +598,7 @@ export default function LogoEdit( {
 			) }
 			{ ! logoUrl && canUserEdit && (
 				<MediaPlaceholder
-					onSelect={ onSelectLogo }
+					onSelect={ onInitialSelectLogo }
 					accept={ ACCEPT_MEDIA_STRING }
 					allowedTypes={ ALLOWED_MEDIA_TYPES }
 					onError={ onUploadError }

package/src/site-logo/editor.scss

@@ -1,7 +1,7 @@
 .wp-block[data-align="center"] > .wp-block-site-logo {
+	display: table;
 	margin-left: auto;
 	margin-right: auto;
-	text-align: center;
 }
 
 .wp-block-site-logo {
@@ -10,20 +10,6 @@
 		pointer-events: none;
 	}
 
-	&:not(.is-default-size) {
-		display: table;
-	}
-
-	// Provide a sane starting point for the size.
-	&.is-default-size {
-		width: 120px;
-
-		img {
-			height: auto;
-			width: 100%;
-		}
-	}
-
 	.custom-logo-link {
 		cursor: inherit;
 

package/src/site-logo/index.php

@@ -48,10 +48,6 @@ function render_block_core_site_logo( $attributes ) {
 		$classnames[] = $attributes['className'];
 	}
 
-	if ( ! empty( $attributes['align'] ) && in_array( $attributes['align'], array( 'center', 'left', 'right' ), true ) ) {
-		$classnames[] = "align{$attributes['align']}";
-	}
-
 	if ( empty( $attributes['width'] ) ) {
 		$classnames[] = 'is-default-size';
 	}
@@ -80,6 +76,23 @@ function register_block_core_site_logo_setting() {
 
 add_action( 'rest_api_init', 'register_block_core_site_logo_setting', 10 );
 
+/**
+ * Register a core site setting for a site icon
+ */
+function register_block_core_site_icon_setting() {
+	register_setting(
+		'general',
+		'site_icon',
+		array(
+			'show_in_rest' => true,
+			'type'         => 'integer',
+			'description'  => __( 'Site icon.' ),
+		)
+	);
+}
+
+add_action( 'rest_api_init', 'register_block_core_site_icon_setting', 10 );
+
 /**
  * Registers the `core/site-logo` block on the server.
  */

package/src/site-logo/style.scss

@@ -18,7 +18,9 @@
 	}
 
 	&.aligncenter {
-		display: table;
+		margin-left: auto;
+		margin-right: auto;
+		text-align: center;
 	}
 
 	// Style variations

package/src/template-part/edit/index.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import { isEmpty } from 'lodash';
+
 /**
  * WordPress dependencies
  */
@@ -99,7 +104,7 @@ export default function TemplatePartEdit( {
 			return {
 				innerBlocks: getBlocks( clientId ),
 				isResolved: hasResolvedEntity,
-				isMissing: hasResolvedEntity && ! entityRecord,
+				isMissing: hasResolvedEntity && isEmpty( entityRecord ),
 				defaultWrapper: defaultWrapperElement || 'div',
 				area: _area,
 				enableSelection: _enableSelection,

package/src/template-part/index.js

@@ -50,3 +50,31 @@ addFilter(
 	'core/template-part',
 	enhanceTemplatePartVariations
 );
+
+// Prevent adding template parts inside post templates.
+const DISALLOWED_PARENTS = [ 'core/post-template', 'core/post-content' ];
+addFilter(
+	'blockEditor.__unstableCanInsertBlockType',
+	'removeTemplatePartsFromPostTemplates',
+	(
+		can,
+		blockType,
+		rootClientId,
+		{ getBlock, getBlockParentsByBlockName }
+	) => {
+		if ( blockType.name !== 'core/template-part' ) {
+			return can;
+		}
+
+		for ( const disallowedParentType of DISALLOWED_PARENTS ) {
+			const hasDisallowedParent =
+				getBlock( rootClientId )?.name === disallowedParentType ||
+				getBlockParentsByBlockName( rootClientId, disallowedParentType )
+					.length;
+			if ( hasDisallowedParent ) {
+				return false;
+			}
+		}
+		return true;
+	}
+);