fix: prevent asset conflicts between React and Grid.js versions

Add coexistence checks to all enqueue methods to prevent loading
both React and Grid.js assets simultaneously.

Changes:
- ReactAdmin.php: Only enqueue React assets when ?react=1
- Init.php: Skip Grid.js when React active on admin pages
- Form.php, Coupon.php, Access.php: Restore classic assets when ?react=0
- Customer.php, Product.php, License.php: Add coexistence checks

Now the toggle between Classic and React versions works correctly.

Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
dwindown
2026-04-18 17:02:14 +07:00
parent bd9cdac02e
commit e8fbfb14c1
74973 changed files with 6658406 additions and 71 deletions

View File

@@ -0,0 +1,92 @@
import { createElement } from "react";
/**
* External dependencies
*/
import classnames from 'classnames';
/**
* WordPress dependencies
*/
import { useResizeObserver } from '@wordpress/compose';
import { SVG, Path } from '@wordpress/primitives';
import { useEffect } from '@wordpress/element';
import { speak } from '@wordpress/a11y';
/**
* Internal dependencies
*/
import Icon from '../icon';
const PlaceholderIllustration = createElement(SVG, {
className: "components-placeholder__illustration",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 60 60",
preserveAspectRatio: "none"
}, createElement(Path, {
vectorEffect: "non-scaling-stroke",
d: "M60 60 0 0"
}));
/**
* Renders a placeholder. Normally used by blocks to render their empty state.
*
* ```jsx
* import { Placeholder } from '@wordpress/components';
* import { more } from '@wordpress/icons';
*
* const MyPlaceholder = () => <Placeholder icon={ more } label="Placeholder" />;
* ```
*/
export function Placeholder(props) {
const {
icon,
children,
label,
instructions,
className,
notices,
preview,
isColumnLayout,
withIllustration,
...additionalProps
} = props;
const [resizeListener, {
width
}] = useResizeObserver();
// Since `useResizeObserver` will report a width of `null` until after the
// first render, avoid applying any modifier classes until width is known.
let modifierClassNames;
if (typeof width === 'number') {
modifierClassNames = {
'is-large': width >= 480,
'is-medium': width >= 160 && width < 480,
'is-small': width < 160
};
}
const classes = classnames('components-placeholder', className, modifierClassNames, withIllustration ? 'has-illustration' : null);
const fieldsetClasses = classnames('components-placeholder__fieldset', {
'is-column-layout': isColumnLayout
});
useEffect(() => {
if (instructions) {
speak(instructions);
}
}, [instructions]);
return createElement("div", {
...additionalProps,
className: classes
}, withIllustration ? PlaceholderIllustration : null, resizeListener, notices, preview && createElement("div", {
className: "components-placeholder__preview"
}, preview), createElement("div", {
className: "components-placeholder__label"
}, createElement(Icon, {
icon: icon
}), label), !!instructions && createElement("div", {
className: "components-placeholder__instructions"
}, instructions), createElement("div", {
className: fieldsetClasses
}, children));
}
export default Placeholder;
//# sourceMappingURL=index.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,2 @@
export {};
//# sourceMappingURL=types.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":[],"sources":["@wordpress/components/src/placeholder/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ReactNode } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { IconType } from '../icon';\n\nexport type PlaceholderProps = {\n\t/**\n\t * The children elements.\n\t */\n\tchildren?: ReactNode;\n\t/**\n\t * Class to set on the container div.\n\t */\n\tclassName?: string;\n\t/**\n\t * If provided, renders an icon next to the label.\n\t */\n\ticon?: IconType;\n\t/**\n\t * Instructions of the placeholder.\n\t */\n\tinstructions?: string;\n\t/**\n\t * Changes placeholder children layout from flex-row to flex-column.\n\t */\n\tisColumnLayout?: boolean;\n\t/**\n\t * Title of the placeholder.\n\t */\n\tlabel?: string;\n\t/**\n\t * A rendered notices list\n\t */\n\tnotices?: ReactNode;\n\t/**\n\t * Preview to be rendered in the placeholder.\n\t */\n\tpreview?: ReactNode;\n\t/**\n\t * Outputs a placeholder illustration.\n\t */\n\twithIllustration?: boolean;\n};\n"],"mappings":""}