fix: only apply template on first insert so unlocked changes persist on referesh

Author: Arukuen

src/block/blockquote/edit.js

@@ -103,7 +103,7 @@ const Edit = props => {
 
 				<ContainerDiv className={ contentClassNames }>
 					<InnerBlocks
-						template={ TEMPLATE }
+						template={ hasInnerBlocks ? undefined : TEMPLATE }
 						templateLock="all"
 					/>
 				</ContainerDiv>

src/block/expand/edit.js

@@ -38,6 +38,7 @@ import { InnerBlocks } from '@wordpress/block-editor'
 import { __ } from '@wordpress/i18n'
 import { addFilter } from '@wordpress/hooks'
 import { memo } from '@wordpress/element'
+import { useSelect } from '@wordpress/data'
 
 const TEMPLATE = [
 	[ 'stackable/text', {
@@ -70,6 +71,12 @@ const Edit = props => {
 	} = props
 
 	const blockAlignmentClass = getAlignmentClasses( props.attributes )
+	const { hasInnerBlocks } = useSelect( select => {
+		const { getBlockOrder } = select( 'core/block-editor' )
+		return {
+			hasInnerBlocks: getBlockOrder( props.clientId ).length > 0,
+		}
+	}, [ props.clientId ] )
 
 	const blockClassNames = classnames( [
 		className,
@@ -110,7 +117,7 @@ const Edit = props => {
 			>
 				<div className={ contentClassNames }>
 					<InnerBlocks
-						template={ TEMPLATE }
+						template={ hasInnerBlocks ? undefined : TEMPLATE }
 						templateLock="all"
 						orientation="horizontal"
 					/>

src/block/price/edit.js

@@ -36,6 +36,7 @@ import { InnerBlocks } from '@wordpress/block-editor'
 import { __ } from '@wordpress/i18n'
 import { addFilter } from '@wordpress/hooks'
 import { memo } from '@wordpress/element'
+import { useSelect } from '@wordpress/data'
 
 export const defaultIcon = '<svg data-prefix="fas" data-icon="play" class="svg-inline--fa fa-play fa-w-14" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" aria-hidden="true"><path fill="currentColor" d="M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z"></path></svg>'
 
@@ -59,6 +60,12 @@ const Edit = props => {
 
 	const rowClass = getRowClasses( attributes )
 	const blockAlignmentClass = getAlignmentClasses( attributes )
+	const { hasInnerBlocks } = useSelect( select => {
+		const { getBlockOrder } = select( 'core/block-editor' )
+		return {
+			hasInnerBlocks: getBlockOrder( props.clientId ).length > 0,
+		}
+	}, [ props.clientId ] )
 
 	const blockClassNames = classnames( [
 		className,
@@ -92,7 +99,7 @@ const Edit = props => {
 				className={ blockClassNames }
 			>
 				<InnerBlocks
-					template={ TEMPLATE }
+					template={ hasInnerBlocks ? undefined : TEMPLATE }
 					templateLock="all"
 				/>
 			</BlockDiv>

src/block/video-popup/edit.js

@@ -53,6 +53,7 @@ import { addFilter } from '@wordpress/hooks'
 import { memo } from '@wordpress/element'
 import { DateTimePicker } from '@wordpress/components'
 import { getSettings as getDateSettings } from '@wordpress/date'
+import { useSelect } from '@wordpress/data'
 
 export const defaultIcon = '<svg data-prefix="fas" data-icon="play" class="svg-inline--fa fa-play fa-w-14" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" aria-hidden="true"><path fill="currentColor" d="M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z"></path></svg>'
 
@@ -80,6 +81,12 @@ const Edit = props => {
 
 	const rowClass = getRowClasses( attributes )
 	const blockAlignmentClass = getAlignmentClasses( attributes )
+	const { hasInnerBlocks } = useSelect( select => {
+		const { getBlockOrder } = select( 'core/block-editor' )
+		return {
+			hasInnerBlocks: getBlockOrder( props.clientId ).length > 0,
+		}
+	}, [ props.clientId ] )
 
 	const blockClassNames = classnames( [
 		className,
@@ -128,7 +135,7 @@ const Edit = props => {
 			>
 				<div className={ contentClassNames }>
 					<InnerBlocks
-						template={ TEMPLATE }
+						template={ hasInnerBlocks ? undefined : TEMPLATE }
 						templateLock="all"
 					/>
 				</div>