diff --git a/packages/block-library/src/post-author/edit.js b/packages/block-library/src/post-author/edit.js index 6110b36338230..4c5e0d4f4bcf3 100644 --- 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 } ) { <> - { !! authors?.length && ( + { isEditable && !! authors?.length && ( + { content?.rendered } + + ); +} + +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
; } +function Content( props ) { + const { clientId, postType, postId } = props; + const isEditable = useIsEditablePostBlock( clientId ); + return isEditable ? ( + + ) : ( + + ); +} + 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 } /> ) : ( diff --git a/packages/block-library/src/post-date/edit.js b/packages/block-library/src/post-date/edit.js index 5e38d307404da..e9d42961a098c 100644 --- 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 && ( ); + const excerptContent = isEditable ? ( + + ) : ( + excerpt || postContentExcerpt || __( 'No post excerpt found' ) + ); return ( <> @@ -119,19 +143,7 @@ export default function PostExcerptEditor( {
- + { excerptContent } { ! showMoreOnNewLine && ' ' } { showMoreOnNewLine ? (

diff --git a/packages/block-library/src/post-featured-image/edit.js b/packages/block-library/src/post-featured-image/edit.js index 3acbef2776273..59c5fdac00ca8 100644 --- 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 = (

@@ -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
{ placeholderChip }
; + } if ( ! featuredImage ) { image = ( - - { !! media && ( + { !! media && isEditable && ( + - ) } - -
{ image }
+ + ) } +
{ image }
); } diff --git a/packages/block-library/src/post-title/edit.js b/packages/block-library/src/post-title/edit.js index 2bd3e69d00b6f..d7682fc15ef28 100644 --- 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 ? ( + ) : ( + <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 new file mode 100644 index 0000000000000..c2ad1ee8999e6 --- /dev/null +++ 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 };