diff --git a/packages/block-library/src/pattern/edit.js b/packages/block-library/src/pattern/edit.js index c22536a59eb03f..c4e5c8efc2d4cb 100644 --- a/packages/block-library/src/pattern/edit.js +++ b/packages/block-library/src/pattern/edit.js @@ -9,8 +9,9 @@ import { useBlockProps, useInnerBlocksProps, } from '@wordpress/block-editor'; +import { Placeholder, Spinner } from '@wordpress/components'; -const PatternEdit = ( { attributes, clientId } ) => { +function PatternFullEdit( { attributes, clientId } ) { const { slug, syncStatus } = attributes; const { selectedPattern, innerBlocks } = useSelect( ( select ) => { @@ -69,15 +70,68 @@ const PatternEdit = ( { attributes, clientId } ) => { className: slug?.replace( '/', '-' ), } ); + return
; +} + +function PatternPartialEdit( { attributes: { slug }, clientId } ) { + const { designPattern } = useSelect( + ( select ) => { + return { + designPattern: + select( blockEditorStore ).__experimentalGetParsedPattern( + slug + ), + /*innerBlocks: + select( blockEditorStore ).getBlock( clientId ) + ?.innerBlocks,*/ + }; + }, + [ slug ] + ); + + const blockProps = useBlockProps( { + className: slug?.replace( '/', '-' ), + } ); + if ( ! designPattern?.blocks?.length ) { + return ( +
+ + + +
+ ); + } + + return ( + + ); +} + +function PatternInnerBlocks( { clientId, blockProps, template } ) { const innerBlocksProps = useInnerBlocksProps( blockProps, { - templateLock: syncStatus === 'partial' ? 'contentOnly' : false, + templateLock: 'contentOnly', } ); - if ( syncStatus !== 'partial' ) { - return
; - } + const { replaceInnerBlocks } = useDispatch( blockEditorStore ); + + useEffect( () => { + const blocks = template.map( ( block ) => cloneBlock( block ) ); + replaceInnerBlocks( clientId, blocks ); + }, [ clientId, replaceInnerBlocks, template ] ); return
; -}; +} -export default PatternEdit; +export default function PatternEdit( props ) { + const { syncStatus } = props.attributes; + + return syncStatus === 'partial' ? ( + + ) : ( + + ); +} diff --git a/packages/block-library/src/pattern/index.js b/packages/block-library/src/pattern/index.js index 27e74510eb5972..a7445c8b6e857d 100644 --- a/packages/block-library/src/pattern/index.js +++ b/packages/block-library/src/pattern/index.js @@ -5,12 +5,13 @@ import initBlock from '../utils/init-block'; import metadata from './block.json'; import PatternEditV1 from './v1/edit'; import PatternEditV2 from './edit'; +import save from './save'; const { name } = metadata; export { metadata, name }; export const settings = window?.__experimentalEnablePatternEnhancements - ? { edit: PatternEditV2 } + ? { edit: PatternEditV2, save } : { edit: PatternEditV1 }; export const init = () => initBlock( { name, metadata, settings } ); diff --git a/packages/block-library/src/pattern/save.js b/packages/block-library/src/pattern/save.js new file mode 100644 index 00000000000000..5e49e3651d076c --- /dev/null +++ b/packages/block-library/src/pattern/save.js @@ -0,0 +1,12 @@ +/** + * WordPress dependencies + */ +import { InnerBlocks } from '@wordpress/block-editor'; + +export default function save( { attributes: { syncStatus } } ) { + if ( syncStatus !== 'partial' ) { + return null; + } + + return ; +}