Query Block: Make nested post blocks uneditable (#32505)

WordPress · Jun 8, 2021 · 2d12d52 · 2d12d52
1 parent 0b6ca99
commit 2d12d52
Show file tree

Hide file tree

Showing 7 changed files with 162 additions and 28 deletions.
diff --git a/packages/block-library/src/post-author/edit.js b/packages/block-library/src/post-author/edit.js
@@ -19,9 +19,21 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
 
-function PostAuthorEdit( { isSelected, context, attributes, setAttributes } ) {
+/**
+ * Internal dependencies
+ */
+import { useIsEditablePostBlock } from '../utils/hooks';
+
+function PostAuthorEdit( {
+	clientId,
+	isSelected,
+	context,
+	attributes,
+	setAttributes,
+} ) {
 	const { postType, postId } = context;
 
+	const isEditable = useIsEditablePostBlock( clientId );
 	const { authorId, authorDetails, authors } = useSelect(
 		( select ) => {
 			const { getEditedEntityRecord, getUser, getUsers } = select(
@@ -66,7 +78,7 @@ function PostAuthorEdit( { isSelected, context, attributes, setAttributes } ) {
 		<>
 			<InspectorControls>
 				<PanelBody title={ __( 'Author Settings' ) }>
-					{ !! authors?.length && (
+					{ isEditable && !! authors?.length && (
 						<SelectControl
 							label={ __( 'Author' ) }
 							value={ authorId }

diff --git a/packages/block-library/src/post-content/edit.js b/packages/block-library/src/post-content/edit.js
@@ -3,6 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
+import { useMemo, RawHTML } from '@wordpress/element';
 import {
 	useBlockProps,
 	__experimentalUseInnerBlocksProps as useInnerBlocksProps,
@@ -11,10 +12,29 @@ import {
 	store as blockEditorStore,
 	Warning,
 } from '@wordpress/block-editor';
-import { useEntityBlockEditor } from '@wordpress/core-data';
-import { useMemo } from '@wordpress/element';
+import { useEntityProp, useEntityBlockEditor } from '@wordpress/core-data';
 
-function Content( { layout, postType, postId } ) {
+/**
+ * Internal dependencies
+ */
+import { useIsEditablePostBlock } from '../utils/hooks';
+
+function ReadOnlyContent( { postType, postId } ) {
+	const [ , , content ] = useEntityProp(
+		'postType',
+		postType,
+		'content',
+		postId
+	);
+	const blockProps = useBlockProps();
+	return (
+		<div { ...blockProps }>
+			<RawHTML key="html">{ content?.rendered }</RawHTML>
+		</div>
+	);
+}
+
+function EditableContent( { layout, postType, postId } ) {
 	const themeSupportsLayout = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
 		return getSettings()?.supportsLayout;
@@ -53,6 +73,16 @@ function Content( { layout, postType, postId } ) {
 	return <div { ...props } />;
 }
 
+function Content( props ) {
+	const { clientId, postType, postId } = props;
+	const isEditable = useIsEditablePostBlock( clientId );
+	return isEditable ? (
+		<EditableContent { ...props } />
+	) : (
+		<ReadOnlyContent postType={ postType } postId={ postId } />
+	);
+}
+
 function Placeholder() {
 	const blockProps = useBlockProps();
 	return (
@@ -76,6 +106,7 @@ function RecursionError() {
 }
 
 export default function PostContentEdit( {
+	clientId,
 	context: { postId: contextPostId, postType: contextPostType },
 	attributes,
 } ) {
@@ -95,6 +126,7 @@ export default function PostContentEdit( {
 					postType={ contextPostType }
 					postId={ contextPostId }
 					layout={ layout }
+					clientId={ clientId }
 				/>
 			) : (
 				<Placeholder />

diff --git a/packages/block-library/src/post-date/edit.js b/packages/block-library/src/post-date/edit.js
@@ -26,10 +26,21 @@ import {
 import { __, sprintf } from '@wordpress/i18n';
 import { edit } from '@wordpress/icons';
 
-export default function PostDateEdit( { attributes, context, setAttributes } ) {
+/**
+ * Internal dependencies
+ */
+import { useIsEditablePostBlock } from '../utils/hooks';
+
+export default function PostDateEdit( {
+	clientId,
+	attributes,
+	context,
+	setAttributes,
+} ) {
 	const { textAlign, format, isLink } = attributes;
 	const { postId, postType } = context;
 
+	const isEditable = useIsEditablePostBlock( clientId );
 	const [ siteFormat ] = useEntityProp( 'root', 'site', 'date_format' );
 	const [ date, setDate ] = useEntityProp(
 		'postType',
@@ -98,7 +109,7 @@ export default function PostDateEdit( { attributes, context, setAttributes } ) {
 					} }
 				/>
 
-				{ date && (
+				{ date && isEditable && (
 					<ToolbarButton
 						icon={ edit }
 						title={ __( 'Change Date' ) }

diff --git a/packages/block-library/src/post-excerpt/edit.js b/packages/block-library/src/post-excerpt/edit.js
@@ -19,6 +19,11 @@ import {
 import { PanelBody, RangeControl, ToggleControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
+import { useIsEditablePostBlock } from '../utils/hooks';
+
 function usePostContentExcerpt( wordCount, postId, postType ) {
 	// Don't destrcuture items from content here, it can be undefined.
 	const [ , , content ] = useEntityProp(
@@ -41,11 +46,13 @@ function usePostContentExcerpt( wordCount, postId, postType ) {
 }
 
 export default function PostExcerptEditor( {
+	clientId,
 	attributes: { textAlign, wordCount, moreText, showMoreOnNewLine },
 	setAttributes,
 	isSelected,
 	context: { postId, postType },
 } ) {
+	const isEditable = useIsEditablePostBlock( clientId );
 	const [ excerpt, setExcerpt ] = useEntityProp(
 		'postType',
 		postType,
@@ -84,6 +91,23 @@ export default function PostExcerptEditor( {
 			}
 		/>
 	);
+	const excerptContent = isEditable ? (
+		<RichText
+			className={
+				! showMoreOnNewLine &&
+				'wp-block-post-excerpt__excerpt is-inline'
+			}
+			aria-label={ __( 'Post excerpt text' ) }
+			value={
+				excerpt ||
+				postContentExcerpt ||
+				( isSelected ? '' : __( 'No post excerpt found' ) )
+			}
+			onChange={ setExcerpt }
+		/>
+	) : (
+		excerpt || postContentExcerpt || __( 'No post excerpt found' )
+	);
 	return (
 		<>
 			<BlockControls>
@@ -119,19 +143,7 @@ export default function PostExcerptEditor( {
 				</PanelBody>
 			</InspectorControls>
 			<div { ...blockProps }>
-				<RichText
-					className={
-						! showMoreOnNewLine &&
-						'wp-block-post-excerpt__excerpt is-inline'
-					}
-					aria-label={ __( 'Post excerpt text' ) }
-					value={
-						excerpt ||
-						postContentExcerpt ||
-						( isSelected ? '' : __( 'No post excerpt found' ) )
-					}
-					onChange={ setExcerpt }
-				/>
+				{ excerptContent }
 				{ ! showMoreOnNewLine && ' ' }
 				{ showMoreOnNewLine ? (
 					<p className="wp-block-post-excerpt__more-text">

diff --git a/packages/block-library/src/post-featured-image/edit.js b/packages/block-library/src/post-featured-image/edit.js
@@ -20,6 +20,11 @@ import {
 import { __, sprintf } from '@wordpress/i18n';
 import { postFeaturedImage } from '@wordpress/icons';
 
+/**
+ * Internal dependencies
+ */
+import { useIsEditablePostBlock } from '../utils/hooks';
+
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
 const placeholderChip = (
 	<div className="post-featured-image_placeholder">
@@ -29,12 +34,14 @@ const placeholderChip = (
 );
 
 function PostFeaturedImageDisplay( {
+	clientId,
 	attributes: { isLink },
 	setAttributes,
 	context: { postId, postType },
 	noticeUI,
 	noticeOperations,
 } ) {
+	const isEditable = useIsEditablePostBlock( clientId );
 	const [ featuredImage, setFeaturedImage ] = useEntityProp(
 		'postType',
 		postType,
@@ -46,6 +53,7 @@ function PostFeaturedImageDisplay( {
 			featuredImage && select( coreStore ).getMedia( featuredImage ),
 		[ featuredImage ]
 	);
+	const blockProps = useBlockProps();
 	const onSelectImage = ( value ) => {
 		if ( value?.id ) {
 			setFeaturedImage( value.id );
@@ -56,6 +64,9 @@ function PostFeaturedImageDisplay( {
 		noticeOperations.createErrorNotice( message );
 	}
 	let image;
+	if ( ! featuredImage && ! isEditable ) {
+		return <div { ...blockProps }>{ placeholderChip }</div>;
+	}
 	if ( ! featuredImage ) {
 		image = (
 			<MediaPlaceholder
@@ -100,8 +111,8 @@ function PostFeaturedImageDisplay( {
 					/>
 				</PanelBody>
 			</InspectorControls>
-			<BlockControls group="other">
-				{ !! media && (
+			{ !! media && isEditable && (
+				<BlockControls group="other">
 					<MediaReplaceFlow
 						mediaId={ featuredImage }
 						mediaURL={ media.source_url }
@@ -110,9 +121,9 @@ function PostFeaturedImageDisplay( {
 						onSelect={ onSelectImage }
 						onError={ onUploadError }
 					/>
-				) }
-			</BlockControls>
-			<figure { ...useBlockProps() }>{ image }</figure>
+				</BlockControls>
+			) }
+			<figure { ...blockProps }>{ image }</figure>
 		</>
 	);
 }

diff --git a/packages/block-library/src/post-title/edit.js b/packages/block-library/src/post-title/edit.js
@@ -22,14 +22,16 @@ import { store as coreStore } from '@wordpress/core-data';
  * Internal dependencies
  */
 import HeadingLevelDropdown from '../heading/heading-level-dropdown';
+import { useIsEditablePostBlock } from '../utils/hooks';
 
 export default function PostTitleEdit( {
+	clientId,
 	attributes: { level, textAlign, isLink, rel, linkTarget },
 	setAttributes,
 	context: { postType, postId },
 } ) {
 	const TagName = 0 === level ? 'p' : 'h' + level;
-
+	const isEditable = useIsEditablePostBlock( clientId );
 	const post = useSelect(
 		( select ) =>
 			select( coreStore ).getEditedEntityRecord(
@@ -60,7 +62,7 @@ export default function PostTitleEdit( {
 	);
 
 	if ( postType && postId ) {
-		titleElement = (
+		titleElement = isEditable ? (
 			<PlainText
 				tagName={ TagName }
 				placeholder={ __( 'No Title' ) }
@@ -73,11 +75,13 @@ export default function PostTitleEdit( {
 				__experimentalVersion={ 2 }
 				{ ...( isLink ? {} : blockProps ) }
 			/>
+		) : (
+			<TagName { ...( isLink ? {} : blockProps ) }>{ title }</TagName>
 		);
 	}
 
 	if ( isLink ) {
-		titleElement = (
+		titleElement = isEditable ? (
 			<TagName { ...blockProps }>
 				<PlainText
 					tagName="a"
@@ -94,6 +98,17 @@ export default function PostTitleEdit( {
 					__experimentalVersion={ 2 }
 				/>
 			</TagName>
+		) : (
+			<TagName { ...blockProps }>
+				<a
+					href={ link }
+					target={ linkTarget }
+					rel={ rel }
+					onClick={ ( event ) => event.preventDefault() }
+				>
+					{ title }
+				</a>
+			</TagName>
 		);
 	}
 

diff --git a/packages/block-library/src/utils/hooks.js b/packages/block-library/src/utils/hooks.js
@@ -0,0 +1,41 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import queryMetaData from '../query/block.json';
+const { name: queryBlockName } = queryMetaData;
+
+/**
+ * Hook that determines if a Post block is editable or not.
+ * The returned value is used to determine if the specific
+ * Post block will be rendered in `readonly` mode or not.
+ *
+ * For now this is checking if a Post block is nested in
+ * a Query block. If it is, the block should not be editable.
+ *
+ * @param {string} clientId The ID of the block to be checked.
+ * @return {boolean} Whether the block can be edited or not.
+ */
+export function useIsEditablePostBlock( clientId ) {
+	return useSelect(
+		( select ) => {
+			const { getBlockParents, getBlockName } = select(
+				blockEditorStore
+			);
+			const blockParents = getBlockParents( clientId );
+			const hasQueryParent = blockParents.some(
+				( parentClientId ) =>
+					getBlockName( parentClientId ) === queryBlockName
+			);
+			return ! hasQueryParent;
+		},
+		[ clientId ]
+	);
+}
+
+export default { useIsEditablePostBlock };