@wordpress/block-library 6.0.16 → 6.0.19

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 );
@@ -149,9 +166,10 @@ const SiteLogo = ( {
 	const currentWidth = width || defaultWidth;
 	const ratio = naturalWidth / naturalHeight;
 	const currentHeight = currentWidth / ratio;
-	const minWidth = naturalWidth < naturalHeight ? MIN_SIZE : MIN_SIZE * ratio;
+	const minWidth =
+		naturalWidth < naturalHeight ? MIN_SIZE : Math.ceil( MIN_SIZE * ratio );
 	const minHeight =
-		naturalHeight < naturalWidth ? MIN_SIZE : MIN_SIZE / ratio;
+		naturalHeight < naturalWidth ? MIN_SIZE : Math.ceil( MIN_SIZE / ratio );
 
 	// With the current implementation of ResizableBox, an image needs an
 	// explicit pixel value for the max-width. In absence of being able to
@@ -250,6 +268,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 +323,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 +358,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 +366,7 @@ export default function LogoEdit( {
 		siteLogoId,
 		canUserEdit,
 		url,
+		siteIconId,
 		mediaItemData,
 		isRequestingMediaItem,
 	} = useSelect( ( select ) => {
@@ -328,6 +379,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 +391,7 @@ export default function LogoEdit( {
 				_siteLogoId,
 				{ context: 'view' },
 			] );
+
 		return {
 			siteLogoId: _siteLogoId,
 			canUserEdit: _canUserEdit,
@@ -349,14 +402,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 +463,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,7 +492,7 @@ export default function LogoEdit( {
 			return;
 		}
 
-		setLogo( media.id );
+		setLogo( media.id, shouldForceSync );
 	};
 
 	const onRemoveLogo = () => {
@@ -423,6 +538,9 @@ export default function LogoEdit( {
 				setLogo={ setLogo }
 				logoId={ mediaItemData?.id || siteLogoId }
 				siteUrl={ url }
+				setIcon={ setIcon }
+				iconId={ siteIconId }
+				canUserEdit={ canUserEdit }
 			/>
 		);
 	}
@@ -481,7 +599,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/index.php

@@ -76,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/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;
+	}
+);