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,141 @@
import { createElement } from "react";
/**
* External dependencies
*/
import classnames from 'classnames';
/**
* WordPress dependencies
*/
import { speak } from '@wordpress/a11y';
import { useEffect, forwardRef, renderToString } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import warning from '@wordpress/warning';
/**
* Internal dependencies
*/
import Button from '../button';
const NOTICE_TIMEOUT = 10000;
/**
* Custom hook which announces the message with the given politeness, if a
* valid message is provided.
*
* @param message Message to announce.
* @param politeness Politeness to announce.
*/
function useSpokenMessage(message, politeness) {
const spokenMessage = typeof message === 'string' ? message : renderToString(message);
useEffect(() => {
if (spokenMessage) {
speak(spokenMessage, politeness);
}
}, [spokenMessage, politeness]);
}
function UnforwardedSnackbar({
className,
children,
spokenMessage = children,
politeness = 'polite',
actions = [],
onRemove,
icon = null,
explicitDismiss = false,
// onDismiss is a callback executed when the snackbar is dismissed.
// It is distinct from onRemove, which _looks_ like a callback but is
// actually the function to call to remove the snackbar from the UI.
onDismiss,
listRef
}, ref) {
function dismissMe(event) {
if (event && event.preventDefault) {
event.preventDefault();
}
// Prevent focus loss by moving it to the list element.
listRef?.current?.focus();
onDismiss?.();
onRemove?.();
}
function onActionClick(event, onClick) {
event.stopPropagation();
onRemove?.();
if (onClick) {
onClick(event);
}
}
useSpokenMessage(spokenMessage, politeness);
// Only set up the timeout dismiss if we're not explicitly dismissing.
useEffect(() => {
const timeoutHandle = setTimeout(() => {
if (!explicitDismiss) {
onDismiss?.();
onRemove?.();
}
}, NOTICE_TIMEOUT);
return () => clearTimeout(timeoutHandle);
}, [onDismiss, onRemove, explicitDismiss]);
const classes = classnames(className, 'components-snackbar', {
'components-snackbar-explicit-dismiss': !!explicitDismiss
});
if (actions && actions.length > 1) {
// We need to inform developers that snackbar only accepts 1 action.
typeof SCRIPT_DEBUG !== "undefined" && SCRIPT_DEBUG === true ? warning('Snackbar can only have 1 action, use Notice if your message require many messages') : void 0;
// return first element only while keeping it inside an array
actions = [actions[0]];
}
const snackbarContentClassnames = classnames('components-snackbar__content', {
'components-snackbar__content-with-icon': !!icon
});
return createElement("div", {
ref: ref,
className: classes,
onClick: !explicitDismiss ? dismissMe : undefined,
tabIndex: 0,
role: !explicitDismiss ? 'button' : '',
onKeyPress: !explicitDismiss ? dismissMe : undefined,
"aria-label": !explicitDismiss ? __('Dismiss this notice') : ''
}, createElement("div", {
className: snackbarContentClassnames
}, icon && createElement("div", {
className: "components-snackbar__icon"
}, icon), children, actions.map(({
label,
onClick,
url
}, index) => {
return createElement(Button, {
key: index,
href: url,
variant: "tertiary",
onClick: event => onActionClick(event, onClick),
className: "components-snackbar__action"
}, label);
}), explicitDismiss && createElement("span", {
role: "button",
"aria-label": "Dismiss this notice",
tabIndex: 0,
className: "components-snackbar__dismiss-button",
onClick: dismissMe,
onKeyPress: dismissMe
}, "\u2715")));
}
/**
* A Snackbar displays a succinct message that is cleared out after a small delay.
*
* It can also offer the user options, like viewing a published post.
* But these options should also be available elsewhere in the UI.
*
* ```jsx
* const MySnackbarNotice = () => (
* <Snackbar>Post published successfully.</Snackbar>
* );
* ```
*/
export const Snackbar = forwardRef(UnforwardedSnackbar);
export default Snackbar;
//# sourceMappingURL=index.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,99 @@
import { createElement } from "react";
/**
* External dependencies
*/
import classnames from 'classnames';
/**
* WordPress dependencies
*/
import { useReducedMotion } from '@wordpress/compose';
import { useRef } from '@wordpress/element';
/**
* Internal dependencies
*/
import Snackbar from '.';
import { __unstableMotion as motion, __unstableAnimatePresence as AnimatePresence } from '../animation';
const SNACKBAR_VARIANTS = {
init: {
height: 0,
opacity: 0
},
open: {
height: 'auto',
opacity: 1,
transition: {
height: {
type: 'tween',
duration: 0.3,
ease: [0, 0, 0.2, 1]
},
opacity: {
type: 'tween',
duration: 0.25,
delay: 0.05,
ease: [0, 0, 0.2, 1]
}
}
},
exit: {
opacity: 0,
transition: {
type: 'tween',
duration: 0.1,
ease: [0, 0, 0.2, 1]
}
}
};
/**
* Renders a list of notices.
*
* ```jsx
* const MySnackbarListNotice = () => (
* <SnackbarList
* notices={ notices }
* onRemove={ removeNotice }
* />
* );
* ```
*/
export function SnackbarList({
notices,
className,
children,
onRemove
}) {
const listRef = useRef(null);
const isReducedMotion = useReducedMotion();
className = classnames('components-snackbar-list', className);
const removeNotice = notice => () => onRemove?.(notice.id);
return createElement("div", {
className: className,
tabIndex: -1,
ref: listRef
}, children, createElement(AnimatePresence, null, notices.map(notice => {
const {
content,
...restNotice
} = notice;
return createElement(motion.div, {
layout: !isReducedMotion // See https://www.framer.com/docs/animation/#layout-animations
,
initial: 'init',
animate: 'open',
exit: 'exit',
key: notice.id,
variants: isReducedMotion ? undefined : SNACKBAR_VARIANTS
}, createElement("div", {
className: "components-snackbar-list__notice-container"
}, createElement(Snackbar, {
...restNotice,
onRemove: removeNotice(notice),
listRef: listRef
}, notice.content)));
})));
}
export default SnackbarList;
//# sourceMappingURL=list.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/snackbar/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { MutableRefObject, ReactNode } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { NoticeProps, NoticeChildren } from '../notice/types';\n\ntype SnackbarOnlyProps = {\n\t/**\n\t * The icon to render in the snackbar.\n\t *\n\t * @default null\n\t */\n\ticon?: ReactNode;\n\t/**\n\t * Whether to require user action to dismiss the snackbar.\n\t * By default, this is dismissed on a timeout, without user interaction.\n\t *\n\t * @default false\n\t */\n\texplicitDismiss?: boolean;\n\t/**\n\t * A ref to the list that contains the snackbar.\n\t */\n\tlistRef?: MutableRefObject< HTMLDivElement | null >;\n};\n\nexport type SnackbarProps = Omit< NoticeProps, '__unstableHTML' > &\n\tSnackbarOnlyProps;\n\nexport type SnackbarListProps = {\n\tnotices: Array<\n\t\tOmit< SnackbarProps, 'children' > & {\n\t\t\tid: string;\n\t\t\tcontent: string;\n\t\t}\n\t>;\n\tonRemove: ( id: string ) => void;\n\tchildren?: NoticeChildren | Array< NoticeChildren >;\n};\n"],"mappings":""}