fix (default block): save api fetch can be called multiple to infinit…

…e times (#3355)

Co-authored-by: [email protected] <>

src/plugins/save-block/custom-block-styles-editor.js

@@ -22,7 +22,7 @@ import { __, sprintf } from '@wordpress/i18n'
 import { getBlockFromExample, createBlocksFromInnerBlocksTemplate } from '@wordpress/blocks'
 
 // Saving can be triggered multiple times by the editor, throttle to the first trigger only.
-let isSaving = false
+let isPerformingSave = false
 
 // Gets the first block that has a block name.
 const findBlock = ( blockName, blocks ) => {
@@ -38,87 +38,89 @@ const findBlock = ( blockName, blocks ) => {
 	return foundBlock
 }
 
-// Listen to editor updates when editing a 'stackable_temp_post'
-subscribe( () => {
-	const postType = select( 'core/editor' )?.getCurrentPostType()
-	if ( postType && postType === 'stackable_temp_post' ) {
-		// The isSavingPost can trigger true multiple times, throttle it
-		// manually so we only do our saving once.
-		const isCurrentlySaving = select( 'core/editor' )?.isSavingPost()
-		if ( isCurrentlySaving && ! isSaving ) {
-			isSaving = true
-		} else {
-			isSaving = false
-		}
+const performSave = () => {
+	const {
+		stk_block_name: blockName,
+		stk_block_title: blockTitle,
+		stk_style_slug: styleSlug,
+	} = select( 'core/editor' ).getEditedPostAttribute( 'meta' )
+
+	// The user can have multiple blocks, just pick the first one that we're really editing.
+	const blocks = select( 'core/block-editor' ).getBlocks()
+	const blockToSave = findBlock( blockName, blocks )
+
+	// If there is no block, error.
+	if ( ! blockToSave ) {
+		setTimeout( () => { // We need to delay this for this to show up.
+			dispatch( 'core/notices' ).createNotice(
+				'success',
+				sprintf( __( 'Error saving block, please make sure you only have a %s block', i18n ), blockTitle ),
+				{
+					type: 'snackbar',
+					isDismissible: true,
+					id: 'stk-block-style-saved', // This is the "save post" notice id, override the "Please wait" message.
+				}
+			)
+		}, 100 )
+		return
+	}
 
-		if ( ! isSaving ) {
-			return
-		}
+	const clientId = blockToSave.clientId
+	const {
+		getBlockSave,
+		getBlockAttributes,
+		getBlockInnerBlocks,
+	} = saveBlockStyleFuncs( select )
 
-		const {
-			stk_block_name: blockName,
-			stk_block_title: blockTitle,
-			stk_style_slug: styleSlug,
-		} = select( 'core/editor' ).getEditedPostAttribute( 'meta' )
+	const attributes = getBlockAttributes( clientId )
+	const innerBlocks = getBlockInnerBlocks( clientId )
+	const blockSave = getBlockSave( clientId )
 
-		// The user can have multiple blocks, just pick the first one that we're really editing.
-		const blocks = select( 'core/block-editor' ).getBlocks()
-		const blockToSave = findBlock( blockName, blocks )
+	const {
+		updateBlockStyle,
+	} = dispatch( 'stackable/block-styles' )
+
+	// The style name is the post title (if default).
+	const postTitle = select( 'core/editor' ).getPostEdits().title || select( 'core/editor' ).getCurrentPost().title
+	const styleName = styleSlug === 'default' ? __( 'Default', i18n ) : postTitle
+
+	// Save the block style.
+	return updateBlockStyle( blockName, attributes, innerBlocks, blockSave, styleName, styleSlug )
+		.then( () => {
+			setTimeout( () => {
+				const message = styleSlug === 'default'
+					? sprintf( __( 'Default %s Block saved', i18n ), blockTitle )
+					: sprintf( __( '%s Block style saved', i18n ), blockTitle )
 
-		// If there is no block, error.
-		if ( ! blockToSave ) {
-			setTimeout( () => { // We need to delay this for this to show up.
 				dispatch( 'core/notices' ).createNotice(
 					'success',
-					sprintf( __( 'Error saving block, please make sure you only have a %s block', i18n ), blockTitle ),
+					message,
 					{
 						type: 'snackbar',
 						isDismissible: true,
-						id: 'SAVE_POST_NOTICE_ID', // This is the "save post" notice id, override the "Please wait" message.
+						id: 'stk-block-style-save-done', // This is the "save post" notice id, override the "Please wait" message.
 					}
 				)
 			}, 100 )
-			return
-		}
-
-		const clientId = blockToSave.clientId
-		const {
-			getBlockSave,
-			getBlockAttributes,
-			getBlockInnerBlocks,
-		} = saveBlockStyleFuncs( select )
-
-		const attributes = getBlockAttributes( clientId )
-		const innerBlocks = getBlockInnerBlocks( clientId )
-		const blockSave = getBlockSave( clientId )
-
-		const {
-			updateBlockStyle,
-		} = dispatch( 'stackable/block-styles' )
-
-		// The style name is the post title (if default).
-		const postTitle = select( 'core/editor' ).getPostEdits().title || select( 'core/editor' ).getCurrentPost().title
-		const styleName = styleSlug === 'default' ? __( 'Default', i18n ) : postTitle
+		} )
+}
 
-		// Save the block style.
-		updateBlockStyle( blockName, attributes, innerBlocks, blockSave, styleName, styleSlug )
-			.then( () => {
+// Listen to editor updates when editing a 'stackable_temp_post'
+subscribe( () => {
+	const postType = select( 'core/editor' )?.getCurrentPostType()
+	if ( postType && postType === 'stackable_temp_post' ) {
+		// The isSavingPost can trigger true multiple times, throttle it
+		// manually so we only do our saving once.
+		const isCurrentlySaving = select( 'core/editor' )?.isSavingPost()
+		if ( isCurrentlySaving && isPerformingSave === false ) {
+			isPerformingSave = true
+			// Prevent this happening again and again.
+			performSave()?.finally( () => {
 				setTimeout( () => {
-					const message = styleSlug === 'default'
-						? sprintf( __( 'Default %s Block saved', i18n ), blockTitle )
-						: sprintf( __( '%s Block style saved', i18n ), blockTitle )
-
-					dispatch( 'core/notices' ).createNotice(
-						'success',
-						message,
-						{
-							type: 'snackbar',
-							isDismissible: true,
-							id: 'SAVE_POST_NOTICE_ID', // This is the "save post" notice id, override the "Please wait" message.
-						}
-					)
-				}, 100 )
+					isPerformingSave = false
+				}, 1000 ) // A long delay since this can re-trigger
 			} )
+		}
 	}
 } )