Use rendered title and excerpt

WordPress · Jun 15, 2021 · 7428d7e · 7428d7e
1 parent 3099a5e
commit 7428d7e
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 69 deletions.
diff --git a/packages/block-library/src/post-excerpt/edit.js b/packages/block-library/src/post-excerpt/edit.js
@@ -7,7 +7,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { useEntityProp } from '@wordpress/core-data';
-import { useMemo } from '@wordpress/element';
+import { useMemo, RawHTML } from '@wordpress/element';
 import {
 	AlignmentToolbar,
 	BlockControls,
@@ -60,9 +60,9 @@ export default function PostExcerptEditor( {
 	);
 	const isEditable = userCanEdit && ! isDescendentOfQueryLoop;
 	const [
-		excerpt,
+		rawExcerpt,
 		setExcerpt,
-		{ protected: isProtected } = {},
+		{ rendered: renderedExcerpt, protected: isProtected } = {},
 	] = useEntityProp( 'postType', postType, 'excerpt', postId );
 	const postContentExcerpt = usePostContentExcerpt(
 		wordCount,
@@ -114,14 +114,18 @@ export default function PostExcerptEditor( {
 			}
 			aria-label={ __( 'Post excerpt text' ) }
 			value={
-				excerpt ||
+				rawExcerpt ||
 				postContentExcerpt ||
 				( isSelected ? '' : __( 'No post excerpt found' ) )
 			}
 			onChange={ setExcerpt }
 		/>
 	) : (
-		excerpt || postContentExcerpt || __( 'No post excerpt found' )
+		( renderedExcerpt && (
+			<RawHTML key="html">{ renderedExcerpt }</RawHTML>
+		) ) ||
+		postContentExcerpt ||
+		__( 'No post excerpt found' )
 	);
 	return (
 		<>
@@ -135,7 +139,7 @@ export default function PostExcerptEditor( {
 			</BlockControls>
 			<InspectorControls>
 				<PanelBody title={ __( 'Post Excerpt Settings' ) }>
-					{ ! excerpt && (
+					{ ! renderedExcerpt && (
 						<RangeControl
 							label={ __( 'Max words' ) }
 							value={ wordCount }

diff --git a/packages/block-library/src/post-title/edit.js b/packages/block-library/src/post-title/edit.js
@@ -6,22 +6,23 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	AlignmentControl,
 	BlockControls,
 	InspectorControls,
 	useBlockProps,
 	PlainText,
 } from '@wordpress/block-editor';
+import { RawHTML } from '@wordpress/element';
 import { ToggleControl, TextControl, PanelBody } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { store as coreStore } from '@wordpress/core-data';
+import { useEntityProp } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
  */
 import HeadingLevelDropdown from '../heading/heading-level-dropdown';
+import { useCanEditEntity } from '../utils/hooks';
 
 export default function PostTitleEdit( {
 	attributes: { level, textAlign, isLink, rel, linkTarget },
@@ -30,84 +31,78 @@ export default function PostTitleEdit( {
 } ) {
 	const TagName = 0 === level ? 'p' : 'h' + level;
 	const isDescendentOfQueryLoop = !! queryId;
-	const post = useSelect(
-		( select ) =>
-			select( coreStore ).getEditedEntityRecord(
-				'postType',
-				postType,
-				postId
-			),
-		[ postType, postId ]
+	const userCanEdit = useCanEditEntity(
+		'root',
+		'postType',
+		postType,
+		postId
 	);
-	const { editEntityRecord } = useDispatch( coreStore );
-
+	const [ rawTitle = '', setTitle, fullTitle ] = useEntityProp(
+		'postType',
+		postType,
+		'title',
+		postId
+	);
+	const [ link ] = useEntityProp( 'postType', postType, 'link', postId );
 	const blockProps = useBlockProps( {
 		className: classnames( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 	} );
 
-	if ( ! post ) {
-		return null;
-	}
-
-	const { title = '', link } = post;
-
 	let titleElement = (
 		<TagName { ...( isLink ? {} : blockProps ) }>
 			{ __( 'An example title' ) }
 		</TagName>
 	);
 
 	if ( postType && postId ) {
-		titleElement = ! isDescendentOfQueryLoop ? (
-			<PlainText
-				tagName={ TagName }
-				placeholder={ __( 'No Title' ) }
-				value={ title }
-				onChange={ ( value ) =>
-					editEntityRecord( 'postType', postType, postId, {
-						title: value,
-					} )
-				}
-				__experimentalVersion={ 2 }
-				{ ...( isLink ? {} : blockProps ) }
-			/>
-		) : (
-			<TagName { ...( isLink ? {} : blockProps ) }>{ title }</TagName>
-		);
-	}
-
-	if ( isLink ) {
-		titleElement = ! isDescendentOfQueryLoop ? (
-			<TagName { ...blockProps }>
+		titleElement =
+			userCanEdit && ! isDescendentOfQueryLoop ? (
 				<PlainText
-					tagName="a"
-					href={ link }
-					target={ linkTarget }
-					rel={ rel }
-					placeholder={ title.length === 0 ? __( 'No Title' ) : null }
-					value={ title }
-					onChange={ ( value ) =>
-						editEntityRecord( 'postType', postType, postId, {
-							title: value,
-						} )
-					}
+					tagName={ TagName }
+					placeholder={ __( 'No Title' ) }
+					value={ rawTitle }
+					onChange={ setTitle }
 					__experimentalVersion={ 2 }
+					{ ...( isLink ? {} : blockProps ) }
 				/>
-			</TagName>
-		) : (
-			<TagName { ...blockProps }>
-				<a
-					href={ link }
-					target={ linkTarget }
-					rel={ rel }
-					onClick={ ( event ) => event.preventDefault() }
-				>
-					{ title }
-				</a>
-			</TagName>
-		);
+			) : (
+				<TagName { ...( isLink ? {} : blockProps ) }>
+					<RawHTML key="html">{ fullTitle.rendered }</RawHTML>
+				</TagName>
+			);
+	}
+
+	if ( isLink ) {
+		titleElement =
+			userCanEdit && ! isDescendentOfQueryLoop ? (
+				<TagName { ...blockProps }>
+					<PlainText
+						tagName="a"
+						href={ link }
+						target={ linkTarget }
+						rel={ rel }
+						placeholder={
+							! rawTitle.length ? __( 'No Title' ) : null
+						}
+						value={ rawTitle }
+						onChange={ setTitle }
+						__experimentalVersion={ 2 }
+					/>
+				</TagName>
+			) : (
+				<TagName { ...blockProps }>
+					<a
+						href={ link }
+						target={ linkTarget }
+						rel={ rel }
+						onClick={ ( event ) => event.preventDefault() }
+					>
+						<RawHTML key="html">{ fullTitle.rendered }</RawHTML>
+					</a>
+				</TagName>
+			);
 	}
 
 	return (