[Block Library - Site Logo]: Add permissions handling (#32919)

* [Block Library - Site Logo]: Add permissions handling

* Add only logo id to rest index

* add link to logo in rest index

* use context 'view' only

* fallback to logo id from rest index

Author: ntsekouras

lib/init.php

@@ -188,6 +188,33 @@ function register_site_icon_url( $response ) {
 
 add_filter( 'rest_index', 'register_site_icon_url' );
 
+/**
+ * Exposes the site logo to the Gutenberg editor through the WordPress REST
+ * API. This is used for fetching this information when user has no rights
+ * to update settings.
+ *
+ * @since 10.9
+ *
+ * @param WP_REST_Response $response Response data served by the WordPress REST index endpoint.
+ * @return WP_REST_Response
+ */
+function register_site_logo_to_rest_index( $response ) {
+	$site_logo_id                = get_theme_mod( 'custom_logo' );
+	$response->data['site_logo'] = $site_logo_id;
+	if ( $site_logo_id ) {
+		$response->add_link(
+			'https://api.w.org/featuredmedia',
+			rest_url( 'wp/v2/media/' . $site_logo_id ),
+			array(
+				'embeddable' => true,
+			)
+		);
+	}
+	return $response;
+}
+
+add_filter( 'rest_index', 'register_site_logo_to_rest_index' );
+
 add_theme_support( 'widgets-block-editor' );
 
 /**

packages/block-library/src/site-logo/edit.js

@@ -17,6 +17,7 @@ import {
 	ResizableBox,
 	Spinner,
 	ToggleControl,
+	Icon,
 } from '@wordpress/components';
 import { useViewportMatch } from '@wordpress/compose';
 import {
@@ -73,7 +74,7 @@ const SiteLogo = ( {
 			title: siteEntities.title,
 			...pick( getSettings(), [ 'imageSizes', 'maxWidth' ] ),
 		};
-	} );
+	}, [] );
 
 	function onResizeStart() {
 		toggleSelection( false );
@@ -255,27 +256,38 @@ export default function LogoEdit( {
 	const [ logoUrl, setLogoUrl ] = useState();
 	const [ error, setError ] = useState();
 	const ref = useRef();
-	const { mediaItemData, siteLogo, url } = useSelect( ( select ) => {
-		const siteSettings = select( coreStore ).getEditedEntityRecord(
-			'root',
-			'site'
-		);
-		const mediaItem = siteSettings.site_logo
-			? select( coreStore ).getEntityRecord(
+
+	const { siteLogoId, canUserEdit, url, mediaItemData } = useSelect(
+		( select ) => {
+			const { canUser, getEntityRecord, getEditedEntityRecord } = select(
+				coreStore
+			);
+			const siteSettings = getEditedEntityRecord( 'root', 'site' );
+			const siteData = getEntityRecord( 'root', '__unstableBase' );
+			const _siteLogo = siteSettings?.site_logo;
+			const _readOnlyLogo = siteData?.site_logo;
+			const _canUserEdit = canUser( 'update', 'settings' );
+			const _siteLogoId = _siteLogo || _readOnlyLogo;
+			const mediaItem =
+				_siteLogoId &&
+				select( coreStore ).getEntityRecord(
 					'root',
 					'media',
-					siteSettings.site_logo
-			  )
-			: null;
-		return {
-			mediaItemData: mediaItem && {
-				url: mediaItem.source_url,
-				alt: mediaItem.alt_text,
-			},
-			siteLogo: siteSettings.site_logo,
-			url: siteSettings.url,
-		};
-	}, [] );
+					_siteLogoId,
+					{ context: 'view' }
+				);
+			return {
+				siteLogoId: _siteLogoId,
+				canUserEdit: _canUserEdit,
+				url: siteData?.url,
+				mediaItemData: mediaItem && {
+					url: mediaItem.source_url,
+					alt: mediaItem.alt_text,
+				},
+			};
+		},
+		[]
+	);
 
 	const { editEntityRecord } = useDispatch( coreStore );
 	const setLogo = ( newValue ) =>
@@ -290,7 +302,6 @@ export default function LogoEdit( {
 			setLogoUrl( mediaItemData.url );
 		}
 	}
-
 	const onSelectLogo = ( media ) => {
 		if ( ! media ) {
 			return;
@@ -311,7 +322,7 @@ export default function LogoEdit( {
 		setError( message[ 2 ] ? message[ 2 ] : null );
 	};
 
-	const controls = logoUrl && (
+	const controls = canUserEdit && logoUrl && (
 		<BlockControls group="other">
 			<MediaReplaceFlow
 				mediaURL={ logoUrl }
@@ -325,10 +336,10 @@ export default function LogoEdit( {
 
 	const label = __( 'Site Logo' );
 	let logoImage;
-	if ( siteLogo === undefined ) {
+	const isLoading = siteLogoId === undefined || ( siteLogoId && ! logoUrl );
+	if ( isLoading ) {
 		logoImage = <Spinner />;
 	}
-
 	if ( !! logoUrl ) {
 		logoImage = (
 			<SiteLogo
@@ -343,45 +354,46 @@ export default function LogoEdit( {
 			/>
 		);
 	}
-
-	const mediaPlaceholder = (
-		<MediaPlaceholder
-			icon={ <BlockIcon icon={ icon } /> }
-			labels={ {
-				title: label,
-				instructions: __(
-					'Upload an image, or pick one from your media library, to be your site logo'
-				),
-			} }
-			onSelect={ onSelectLogo }
-			accept={ ACCEPT_MEDIA_STRING }
-			allowedTypes={ ALLOWED_MEDIA_TYPES }
-			mediaPreview={ logoImage }
-			notices={
-				error && (
-					<Notice status="error" isDismissible={ false }>
-						{ error }
-					</Notice>
-				)
-			}
-			onError={ onUploadError }
-		/>
-	);
-
 	const classes = classnames( className, {
 		'is-default-size': ! width,
 	} );
-
 	const blockProps = useBlockProps( {
 		ref,
 		className: classes,
 	} );
-
 	return (
 		<div { ...blockProps }>
 			{ controls }
-			{ logoUrl && logoImage }
-			{ ! logoUrl && mediaPlaceholder }
+			{ !! logoUrl && logoImage }
+			{ ! logoUrl && ! canUserEdit && (
+				<div className="site-logo_placeholder">
+					<Icon icon={ icon } />
+					<p> { __( 'Site Logo' ) }</p>
+				</div>
+			) }
+			{ ! logoUrl && canUserEdit && (
+				<MediaPlaceholder
+					icon={ <BlockIcon icon={ icon } /> }
+					labels={ {
+						title: label,
+						instructions: __(
+							'Upload an image, or pick one from your media library, to be your site logo'
+						),
+					} }
+					onSelect={ onSelectLogo }
+					accept={ ACCEPT_MEDIA_STRING }
+					allowedTypes={ ALLOWED_MEDIA_TYPES }
+					mediaPreview={ logoImage }
+					notices={
+						error && (
+							<Notice status="error" isDismissible={ false }>
+								{ error }
+							</Notice>
+						)
+					}
+					onError={ onUploadError }
+				/>
+			) }
 		</div>
 	);
 }

packages/block-library/src/site-logo/editor.scss

@@ -80,3 +80,23 @@
 		}
 	}
 }
+.editor-styles-wrapper {
+	.site-logo_placeholder {
+		display: flex;
+		flex-direction: row;
+		align-items: flex-start;
+		border-radius: $radius-block-ui;
+		background-color: $white;
+		box-shadow: inset 0 0 0 $border-width $gray-900;
+		padding: $grid-unit-15;
+		svg {
+			margin-right: $grid-unit-15;
+		}
+		p {
+			font-family: $default-font;
+			font-size: $default-font-size;
+			margin: 0;
+			line-height: initial;
+		}
+	}
+}