Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Product template not updating in the UI when it is changed (#48288) 

* Fix Product template not updating in the UI when it is changed

* Add changelog file
This commit is contained in:
Maikel Perez 2024-06-07 16:00:15 -04:00 committed by GitHub
parent 442adcc395
commit 3d0b9993be
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 65 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/js/product-editor/changelog/fix-48237 Normal file
View File

@ -0,0 +1,4 @@
Significance: patch
Type: fix
Fix Product template not updating in the UI when it is changed

92
packages/js/product-editor/src/components/block-editor/block-editor.tsx
View File

@ -242,50 +242,72 @@ export function BlockEditor( {
( postType !== 'product_variation' && ! productTemplate ) ||
productId === -1;
useLayoutEffect( () => {
if ( isEditorLoading ) {
return;
}
const productFormTemplate = useMemo(
function pickAndParseTheProductFormTemplate() {
if (
! isProductEditorTemplateSystemEnabled ||
! selectedProductFormId
) {
return undefined;
}
// PFT: pick and parse the product form template, if it exists.
const productFormPost = productForms.find(
( form ) => form.id === selectedProductFormId
);
const productFormPost = productForms.find(
( form ) => form.id === selectedProductFormId
);
let productFormTemplate;
if ( isProductEditorTemplateSystemEnabled && productFormPost ) {
productFormTemplate = parse( productFormPost.content.raw );
}
if ( productFormPost ) {
return parse( productFormPost.content.raw );
}
const blockInstances = synchronizeBlocksWithTemplate(
[],
layoutTemplate.blockTemplates
);
return undefined;
},
[
isProductEditorTemplateSystemEnabled,
productForms,
selectedProductFormId,
]
);
/*
* If the product form template is not available, use the block instances.
* ToDo: Remove this fallback once the product form template is stable/available.
*/
const editorTemplate = productFormTemplate ?? blockInstances;
useLayoutEffect(
function setupEditor() {
if ( isEditorLoading ) {
return;
}
onChange( editorTemplate, {} );
const blockInstances = synchronizeBlocksWithTemplate(
[],
layoutTemplate.blockTemplates
);
dispatch( 'core/editor' ).updateEditorSettings( {
...settings,
/*
* If the product form template is not available, use the block instances.
* ToDo: Remove this fallback once the product form template is stable/available.
*/
const editorTemplate = productFormTemplate ?? blockInstances;
onChange( editorTemplate, {} );
dispatch( 'core/editor' ).updateEditorSettings( {
...settings,
productTemplate,
} as Partial< ProductEditorSettings > );
// We don't need to include onChange in the dependencies, since we get new
// instances of it on every render, which would cause an infinite loop.
// eslint-disable-next-line react-hooks/exhaustive-deps
},
[
isEditorLoading,
layoutTemplate,
settings,
productTemplate,
} as Partial< ProductEditorSettings > );
productFormTemplate,
]
);
useEffect( () => {
setIsEditorLoading( isEditorLoading );
// 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
}, [ isEditorLoading, productId, productForms, selectedProductFormId ] );
}, [ isEditorLoading ] );
// Check if the Modal editor is open from the store.
const isModalEditorOpen = useSelect( ( selectCore ) => {

4
plugins/woocommerce/changelog/fix-48237 Normal file
View File

@ -0,0 +1,4 @@
Significance: patch
Type: fix
Fix edit variable product test