[Block Library - Site Title, Site Tagline] - Readonly view when user …

…has no the right permissions (#32817)

* [Block Library - Site Title, Site Tagline] - Readonly view when user has no the right permissions

* fix multi-entity-save tests

* Fallback value during init of RichText until title is loaded

packages/block-library/src/editor.scss

@@ -36,6 +36,8 @@
 @import "./separator/editor.scss";
 @import "./shortcode/editor.scss";
 @import "./site-logo/editor.scss";
+@import "./site-tagline/editor.scss";
+@import "./site-title/editor.scss";
 @import "./social-link/editor.scss";
 @import "./social-links/editor.scss";
 @import "./spacer/editor.scss";

packages/block-library/src/site-tagline/block.json

@@ -26,5 +26,6 @@
 			"__experimentalFontFamily": true,
 			"__experimentalTextTransform": true
 		}
-	}
+	},
+	"editorStyle": "wp-block-site-tagline-editor"
 }

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

@@ -6,7 +6,8 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useEntityProp } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { useEntityProp, store as coreStore } from '@wordpress/core-data';
 import {
 	AlignmentControl,
 	useBlockProps,
@@ -22,11 +23,36 @@ export default function SiteTaglineEdit( { attributes, setAttributes } ) {
 		'site',
 		'description'
 	);
+	const { canUserEdit, readOnlySiteTagLine } = useSelect( ( select ) => {
+		const { canUser, getEntityRecord } = select( coreStore );
+		const siteData = getEntityRecord( 'root', '__unstableBase' );
+		return {
+			canUserEdit: canUser( 'update', 'settings' ),
+			readOnlySiteTagLine: siteData?.description,
+		};
+	}, [] );
 	const blockProps = useBlockProps( {
 		className: classnames( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
+			'wp-block-site-tagline__placeholder':
+				! canUserEdit && ! readOnlySiteTagLine,
 		} ),
 	} );
+	const siteTaglineContent = canUserEdit ? (
+		<RichText
+			allowedFormats={ [] }
+			onChange={ setSiteTagline }
+			aria-label={ __( 'Site tagline text' ) }
+			placeholder={ __( 'Write site tagline…' ) }
+			tagName="p"
+			value={ siteTagline }
+			{ ...blockProps }
+		/>
+	) : (
+		<p { ...blockProps }>
+			{ readOnlySiteTagLine || __( 'Site Tagline placeholder' ) }
+		</p>
+	);
 	return (
 		<>
 			<BlockControls group="block">
@@ -37,16 +63,7 @@ export default function SiteTaglineEdit( { attributes, setAttributes } ) {
 					value={ textAlign }
 				/>
 			</BlockControls>
-
-			<RichText
-				allowedFormats={ [] }
-				onChange={ setSiteTagline }
-				aria-label={ __( 'Site tagline text' ) }
-				placeholder={ __( 'Write site tagline…' ) }
-				tagName="p"
-				value={ siteTagline }
-				{ ...blockProps }
-			/>
+			{ siteTaglineContent }
 		</>
 	);
 }

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

@@ -0,0 +1,4 @@
+.wp-block-site-tagline__placeholder {
+	padding: 1em 0;
+	border: 1px dashed;
+}

packages/block-library/src/site-tagline/index.php

@@ -13,13 +13,17 @@
  * @return string The render.
  */
 function render_block_core_site_tagline( $attributes ) {
+	$site_tagline = get_bloginfo( 'description' );
+	if ( ! $site_tagline ) {
+		return;
+	}
 	$align_class_name   = empty( $attributes['textAlign'] ) ? '' : "has-text-align-{$attributes['textAlign']}";
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $align_class_name ) );
 
 	return sprintf(
 		'<p %1$s>%2$s</p>',
 		$wrapper_attributes,
-		get_bloginfo( 'description' )
+		$site_tagline
 	);
 }
 

packages/block-library/src/site-title/block.json

@@ -34,5 +34,6 @@
 			"__experimentalFontStyle": true,
 			"__experimentalFontWeight": true
 		}
-	}
+	},
+	"editorStyle": "wp-block-site-title-editor"
 }

packages/block-library/src/site-title/edit/index.js

@@ -6,7 +6,8 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useEntityProp } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { useEntityProp, store as coreStore } from '@wordpress/core-data';
 import { __ } from '@wordpress/i18n';
 import {
 	RichText,
@@ -28,12 +29,48 @@ export default function SiteTitleEdit( {
 } ) {
 	const { level, textAlign } = attributes;
 	const [ title, setTitle ] = useEntityProp( 'root', 'site', 'title' );
+	const { canUserEdit, readOnlyTitle } = useSelect( ( select ) => {
+		const { canUser, getEntityRecord } = select( coreStore );
+		const siteData = getEntityRecord( 'root', '__unstableBase' );
+		return {
+			canUserEdit: canUser( 'update', 'settings' ),
+			readOnlyTitle: siteData?.name,
+		};
+	}, [] );
 	const TagName = level === 0 ? 'p' : `h${ level }`;
 	const blockProps = useBlockProps( {
 		className: classnames( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
+			'wp-block-site-title__placeholder':
+				! canUserEdit && ! readOnlyTitle,
 		} ),
 	} );
+	const siteTitleContent = canUserEdit ? (
+		<TagName { ...blockProps }>
+			<RichText
+				tagName="a"
+				style={ { display: 'inline-block' } }
+				aria-label={ __( 'Site title text' ) }
+				placeholder={ __( 'Write site title…' ) }
+				value={ title || readOnlyTitle }
+				onChange={ setTitle }
+				allowedFormats={ [] }
+				disableLineBreaks
+				__unstableOnSplitAtEnd={ () =>
+					insertBlocksAfter( createBlock( getDefaultBlockName() ) )
+				}
+			/>
+		</TagName>
+	) : (
+		<TagName { ...blockProps }>
+			<a
+				href="#site-title-pseudo-link"
+				onClick={ ( event ) => event.preventDefault() }
+			>
+				{ readOnlyTitle || __( 'Site Title placeholder' ) }
+			</a>
+		</TagName>
+	);
 	return (
 		<>
 			<BlockControls group="block">
@@ -50,23 +87,7 @@ export default function SiteTitleEdit( {
 					} }
 				/>
 			</BlockControls>
-			<TagName { ...blockProps }>
-				<RichText
-					tagName="a"
-					style={ { display: 'inline-block' } }
-					aria-label={ __( 'Site title text' ) }
-					placeholder={ __( 'Write site title…' ) }
-					value={ title }
-					onChange={ setTitle }
-					allowedFormats={ [] }
-					disableLineBreaks
-					__unstableOnSplitAtEnd={ () =>
-						insertBlocksAfter(
-							createBlock( getDefaultBlockName() )
-						)
-					}
-				/>
-			</TagName>
+			{ siteTitleContent }
 		</>
 	);
 }

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

@@ -0,0 +1,4 @@
+.wp-block-site-title__placeholder {
+	padding: 1em 0;
+	border: 1px dashed;
+}

packages/block-library/src/site-title/index.php

@@ -13,14 +13,19 @@
  * @return string The render.
  */
 function render_block_core_site_title( $attributes ) {
+	$site_title = get_bloginfo( 'name' );
+	if ( ! $site_title ) {
+		return;
+	}
+
 	$tag_name         = 'h1';
 	$align_class_name = empty( $attributes['textAlign'] ) ? '' : "has-text-align-{$attributes['textAlign']}";
 
 	if ( isset( $attributes['level'] ) ) {
 		$tag_name = 0 === $attributes['level'] ? 'p' : 'h' . $attributes['level'];
 	}
 
-	$link               = sprintf( '<a href="%1$s" rel="home">%2$s</a>', get_bloginfo( 'url' ), get_bloginfo( 'name' ) );
+	$link               = sprintf( '<a href="%1$s" rel="home">%2$s</a>', get_bloginfo( 'url' ), $site_title );
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $align_class_name ) );
 
 	return sprintf(

packages/e2e-tests/specs/experiments/multi-entity-saving.test.js

@@ -178,12 +178,21 @@ describe( 'Multi-entity save flow', () => {
 			await insertBlock( 'Site Title' );
 			// Ensure title is retrieved before typing.
 			await page.waitForXPath( '//a[contains(text(), "gutenberg")]' );
+			const editableSiteTitleSelector =
+				'.wp-block-site-title a[contenteditable="true"]';
+			await page.waitForSelector( editableSiteTitleSelector );
+			await page.focus( editableSiteTitleSelector );
 			await page.keyboard.type( '...' );
+
 			await insertBlock( 'Site Tagline' );
 			// Ensure tagline is retrieved before typing.
 			await page.waitForXPath(
 				'//p[contains(text(), "Just another WordPress site")]'
 			);
+			const editableSiteTagLineSelector =
+				'.wp-block-site-tagline[contenteditable="true"]';
+			await page.waitForSelector( editableSiteTagLineSelector );
+			await page.focus( editableSiteTagLineSelector );
 			await page.keyboard.type( '...' );
 
 			await clickButton( 'Publish' );