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

Product Editor: Fix crash and issues with variations (that will cause problems with React 18) (#49248) 

* Only request layout template when have an id

* Add setAttributes to useEffect dependency array

* Add ErrorBoundary around Tab inner blocks

* Style Tab ErrorBoundary

* Fix CSS specificity for .woocommerce-attribute-list-item styles

* Remove test CSS

* Add specific error boundary message

* Use variable for error boundary margin

* Changelog

* Tweak error message

* Changelog

* Tweak console error log message
This commit is contained in:
Matt Sherman 2024-07-09 10:44:41 -04:00 committed by GitHub
parent fbf464be51
commit ff9656840d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 40 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/js/block-templates/changelog/fix-create-variations-crash-react-18 Normal file
View File

@ -0,0 +1,4 @@
Significance: patch
Type: fix
Only attempt to fetch layout template in useLayoutTemplate when layout template id is provided.

4
packages/js/block-templates/src/hooks/use-layout-template/use-layout-template.ts
View File

@ -49,11 +49,11 @@ export const useLayoutTemplate = ( layoutTemplateId: string | null ) => {
// To prevent this, we pass `__invalid-template-id` as the ID when there is no layout template ID.
// A request will still be triggered, but it will return no results.
layoutTemplateId || '__invalid-template-id',
// Only perform the query if we have a layout template ID; otherwise, just return null.
// Only perform the query if the layout template entity is registered and we have a layout template ID; otherwise, just return null.
// Note: Until we are using @woocommerce/core-data 6.24.0 (Gutenberg 17.2),
// the REST API requests will still be triggered even when the query is disabled due to a regression.
// See: https://github.com/WordPress/gutenberg/pull/56108
{ enabled: isEntityRegistered }
{ enabled: isEntityRegistered && !! layoutTemplateId }
);
return { layoutTemplate, isResolving };

4
packages/js/product-editor/changelog/fix-create-variations-crash-react-18 Normal file
View File

@ -0,0 +1,4 @@
Significance: patch
Type: fix
Addressed issues causing variations tab to crash when generating variations with React 18.

29
packages/js/product-editor/src/blocks/generic/tab/edit.tsx
View File

@ -1,11 +1,13 @@
/**
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import { InnerBlocks } from '@wordpress/block-editor';
import classnames from 'classnames';
import { createElement, useEffect, useState } from '@wordpress/element';
import type { BlockAttributes } from '@wordpress/blocks';
import { useWooBlockProps } from '@woocommerce/block-templates';
import { __experimentalErrorBoundary as ErrorBoundary } from '@woocommerce/components';
/**
* Internal dependencies
@ -47,7 +49,7 @@ export function TabBlockEdit( {
const timeoutId = setTimeout( setCanRenderChildren, 300, true );
return () => clearTimeout( timeoutId );
}, [ context.selectedTab, id ] );
}, [ context.selectedTab, id, setAttributes ] );
return (
<div { ...blockProps }>
@ -60,11 +62,26 @@ export function TabBlockEdit( {
role="tabpanel"
className={ classes }
>
{ canRenderChildren && (
/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
/* @ts-ignore Content only template locking does exist for this property. */
<InnerBlocks templateLock="contentOnly" />
) }
<ErrorBoundary
errorMessage={ __(
'An unexpected error occurred in this tab. Make sure any unsaved changes are saved and then try reloading the page to see if the error recurs.',
'woocommerce'
) }
onError={ ( error, errorInfo ) => {
// eslint-disable-next-line no-console
console.error(
`Error caught in tab '${ id }'`,
error,
errorInfo
);
} }
>
{ canRenderChildren && (
/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
/* @ts-ignore Content only template locking does exist for this property. */
<InnerBlocks templateLock="contentOnly" />
) }
</ErrorBoundary>
</div>
</div>
);

4
packages/js/product-editor/src/blocks/generic/tab/editor.scss
View File

@ -2,6 +2,10 @@
&:not(.is-selected) {
display: none;
}
.woocommerce-error-boundary {
margin-top: $gap-largest;
}
}
// Remove the Gutenberg selected outline.

4
packages/js/product-editor/src/components/attribute-list-item/attribute-list-item.scss
View File

@ -7,7 +7,7 @@
}
}
.woocommerce-attribute-list-item {
.woocommerce-list-item.woocommerce-attribute-list-item {
display: grid;
background: none;
border: none;
@ -15,7 +15,9 @@
grid-template-columns: 1fr 2fr 16 * $grid-unit;
min-height: 9 * $grid-unit;
padding: $grid-unit + $grid-unit-05 0;
}
.woocommerce-attribute-list-item {
&:not(:last-child) {
border-bottom: 1px solid $gray-200;
}