From 3838975b2499935e0e0a20aec7c6e5836d5dce61 Mon Sep 17 00:00:00 2001 From: Matt Sherman Date: Tue, 16 Jan 2024 13:04:48 -0500 Subject: [PATCH] [Product Editor] Fix blank editor when clicking Add New while already in editor (#43702) --- .../fix-product-editor-blank-form-on-add-new | 5 +++++ .../src/components/block-editor/block-editor.tsx | 11 ++++++++++- 2 files changed, 15 insertions(+), 1 deletion(-) create mode 100644 packages/js/product-editor/changelog/fix-product-editor-blank-form-on-add-new diff --git a/packages/js/product-editor/changelog/fix-product-editor-blank-form-on-add-new b/packages/js/product-editor/changelog/fix-product-editor-blank-form-on-add-new new file mode 100644 index 00000000000..3a85c019f3a --- /dev/null +++ b/packages/js/product-editor/changelog/fix-product-editor-blank-form-on-add-new @@ -0,0 +1,5 @@ +Significance: patch +Type: fix +Comment: No changelog because this fixes a regression that was introduced in the same release. + + diff --git a/packages/js/product-editor/src/components/block-editor/block-editor.tsx b/packages/js/product-editor/src/components/block-editor/block-editor.tsx index 8008423cec4..cbc908b708f 100644 --- a/packages/js/product-editor/src/components/block-editor/block-editor.tsx +++ b/packages/js/product-editor/src/components/block-editor/block-editor.tsx @@ -158,7 +158,16 @@ export function BlockEditor( { ...settings, productTemplate, } as Partial< ProductEditorSettings > ); - }, [ settings, postType, productTemplate, productType, layoutTemplate ] ); + + // We don't need to include onChange or updateEditorSettings in the dependencies, + // since we get new instances of them on every render, which would cause an infinite loop. + // + // We include productId in the dependencies to make sure that the effect is run when the + // product is changed, since we need to synchronize the blocks with the template and update + // the blocks by calling onChange. + // + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [ layoutTemplate, settings, productTemplate, productId ] ); // Check if the Modal editor is open from the store. const isModalEditorOpen = useSelect( ( select ) => {