diff --git a/packages/block-library/src/template-part/edit/inner-blocks.js b/packages/block-library/src/template-part/edit/inner-blocks.js index 7c79ec53f6bc1..b0d8794fb8f23 100644 --- a/packages/block-library/src/template-part/edit/inner-blocks.js +++ b/packages/block-library/src/template-part/edit/inner-blocks.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { useEntityBlockEditor } from '@wordpress/core-data'; +import { useEntityBlockEditor, store as coreStore } from '@wordpress/core-data'; import { InnerBlocks, useInnerBlocksProps, @@ -10,6 +10,8 @@ import { useBlockEditingMode, } from '@wordpress/block-editor'; import { useSelect } from '@wordpress/data'; +import { useMemo } from '@wordpress/element'; +import { parse } from '@wordpress/blocks'; function useRenderAppender( hasInnerBlocks ) { const blockEditingMode = useBlockEditingMode(); @@ -36,7 +38,62 @@ function useLayout( layout ) { } } -export default function TemplatePartInnerBlocks( { +function NonEditableTemplatePartPreview( { + postId: id, + layout, + tagName: TagName, + blockProps, +} ) { + useBlockEditingMode( 'disabled' ); + + const { content, editedBlocks } = useSelect( + ( select ) => { + if ( ! id ) { + return {}; + } + const { getEditedEntityRecord } = select( coreStore ); + const editedRecord = getEditedEntityRecord( + 'postType', + 'wp_template_part', + id, + { context: 'view' } + ); + return { + editedBlocks: editedRecord.blocks, + content: editedRecord.content, + }; + }, + [ id ] + ); + + const blocks = useMemo( () => { + if ( ! id ) { + return undefined; + } + + if ( editedBlocks ) { + return editedBlocks; + } + + if ( ! content || typeof content !== 'string' ) { + return []; + } + + return parse( content ); + }, [ id, editedBlocks, content ] ); + + const innerBlocksProps = useInnerBlocksProps( blockProps, { + value: blocks, + onInput: () => {}, + onChange: () => {}, + renderAppender: false, + layout: useLayout( layout ), + } ); + + return ; +} + +function EditableTemplatePartInnerBlocks( { postId: id, hasInnerBlocks, layout, @@ -59,3 +116,42 @@ export default function TemplatePartInnerBlocks( { return ; } + +export default function TemplatePartInnerBlocks( { + postId: id, + hasInnerBlocks, + layout, + tagName: TagName, + blockProps, +} ) { + const { canViewTemplatePart, canEditTemplatePart } = useSelect( + ( select ) => { + return { + canViewTemplatePart: + select( coreStore ).canUser( 'read', 'templates' ) ?? false, + canEditTemplatePart: + select( coreStore ).canUser( 'create', 'templates' ) ?? + false, + }; + }, + [] + ); + + if ( ! canViewTemplatePart ) { + return null; + } + + const TemplatePartInnerBlocksComponent = canEditTemplatePart + ? EditableTemplatePartInnerBlocks + : NonEditableTemplatePartPreview; + + return ( + + ); +}