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,107 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = require("react");
var _classnames = _interopRequireDefault(require("classnames"));
var _element = require("@wordpress/element");
var _toolbarButton = _interopRequireDefault(require("../toolbar-button"));
var _toolbarGroupContainer = _interopRequireDefault(require("./toolbar-group-container"));
var _toolbarGroupCollapsed = _interopRequireDefault(require("./toolbar-group-collapsed"));
var _toolbarContext = _interopRequireDefault(require("../toolbar-context"));
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function isNestedArray(arr) {
return Array.isArray(arr) && Array.isArray(arr[0]);
}
/**
* Renders a collapsible group of controls
*
* The `controls` prop accepts an array of sets. A set is an array of controls.
* Controls have the following shape:
*
* ```
* {
* icon: string,
* title: string,
* subscript: string,
* onClick: Function,
* isActive: boolean,
* isDisabled: boolean
* }
* ```
*
* For convenience it is also possible to pass only an array of controls. It is
* then assumed this is the only set.
*
* Either `controls` or `children` is required, otherwise this components
* renders nothing.
*
* @param props Component props.
* @param [props.controls] The controls to render in this toolbar.
* @param [props.children] Any other things to render inside the toolbar besides the controls.
* @param [props.className] Class to set on the container div.
* @param [props.isCollapsed] Turns ToolbarGroup into a dropdown menu.
* @param [props.title] ARIA label for dropdown menu if is collapsed.
*/
function ToolbarGroup({
controls = [],
children,
className,
isCollapsed,
title,
...props
}) {
// It'll contain state if `ToolbarGroup` is being used within
// `<Toolbar label="label" />`
const accessibleToolbarState = (0, _element.useContext)(_toolbarContext.default);
if ((!controls || !controls.length) && !children) {
return null;
}
const finalClassName = (0, _classnames.default)(
// Unfortunately, there's legacy code referencing to `.components-toolbar`
// So we can't get rid of it
accessibleToolbarState ? 'components-toolbar-group' : 'components-toolbar', className);
// Normalize controls to nested array of objects (sets of controls)
let controlSets;
if (isNestedArray(controls)) {
controlSets = controls;
} else {
controlSets = [controls];
}
if (isCollapsed) {
return (0, _react.createElement)(_toolbarGroupCollapsed.default, {
label: title,
controls: controlSets,
className: finalClassName,
children: children,
...props
});
}
return (0, _react.createElement)(_toolbarGroupContainer.default, {
className: finalClassName,
...props
}, controlSets?.flatMap((controlSet, indexOfSet) => controlSet.map((control, indexOfControl) => (0, _react.createElement)(_toolbarButton.default, {
key: [indexOfSet, indexOfControl].join(),
containerClassName: indexOfSet > 0 && indexOfControl === 0 ? 'has-left-divider' : undefined,
...control
}))), children);
}
var _default = ToolbarGroup;
exports.default = _default;
//# sourceMappingURL=index.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,46 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = require("react");
var _element = require("@wordpress/element");
var _dropdownMenu = _interopRequireDefault(require("../../dropdown-menu"));
var _toolbarContext = _interopRequireDefault(require("../toolbar-context"));
var _toolbarItem = _interopRequireDefault(require("../toolbar-item"));
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function ToolbarGroupCollapsed({
controls = [],
toggleProps,
...props
}) {
// It'll contain state if `ToolbarGroup` is being used within
// `<Toolbar label="label" />`
const accessibleToolbarState = (0, _element.useContext)(_toolbarContext.default);
const renderDropdownMenu = internalToggleProps => (0, _react.createElement)(_dropdownMenu.default, {
controls: controls,
toggleProps: {
...internalToggleProps,
'data-toolbar-item': true
},
...props
});
if (accessibleToolbarState) {
return (0, _react.createElement)(_toolbarItem.default, {
...toggleProps
}, renderDropdownMenu);
}
return renderDropdownMenu(toggleProps);
}
var _default = ToolbarGroupCollapsed;
exports.default = _default;
//# sourceMappingURL=toolbar-group-collapsed.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_element","require","_dropdownMenu","_interopRequireDefault","_toolbarContext","_toolbarItem","ToolbarGroupCollapsed","controls","toggleProps","props","accessibleToolbarState","useContext","ToolbarContext","renderDropdownMenu","internalToggleProps","_react","createElement","default","_default","exports"],"sources":["@wordpress/components/src/toolbar/toolbar-group/toolbar-group-collapsed.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport DropdownMenu from '../../dropdown-menu';\nimport ToolbarContext from '../toolbar-context';\nimport ToolbarItem from '../toolbar-item';\nimport type { ToolbarGroupCollapsedProps } from './types';\nimport type { DropdownMenuProps } from '../../dropdown-menu/types';\n\nfunction ToolbarGroupCollapsed( {\n\tcontrols = [],\n\ttoggleProps,\n\t...props\n}: ToolbarGroupCollapsedProps ) {\n\t// It'll contain state if `ToolbarGroup` is being used within\n\t// `<Toolbar label=\"label\" />`\n\tconst accessibleToolbarState = useContext( ToolbarContext );\n\n\tconst renderDropdownMenu = (\n\t\tinternalToggleProps?: DropdownMenuProps[ 'toggleProps' ]\n\t) => (\n\t\t<DropdownMenu\n\t\t\tcontrols={ controls }\n\t\t\ttoggleProps={ {\n\t\t\t\t...internalToggleProps,\n\t\t\t\t'data-toolbar-item': true,\n\t\t\t} }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n\n\tif ( accessibleToolbarState ) {\n\t\treturn (\n\t\t\t<ToolbarItem { ...toggleProps }>{ renderDropdownMenu }</ToolbarItem>\n\t\t);\n\t}\n\n\treturn renderDropdownMenu( toggleProps );\n}\n\nexport default ToolbarGroupCollapsed;\n"],"mappings":";;;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAKA,IAAAC,aAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,eAAA,GAAAD,sBAAA,CAAAF,OAAA;AACA,IAAAI,YAAA,GAAAF,sBAAA,CAAAF,OAAA;AAVA;AACA;AACA;;AAGA;AACA;AACA;;AAOA,SAASK,qBAAqBA,CAAE;EAC/BC,QAAQ,GAAG,EAAE;EACbC,WAAW;EACX,GAAGC;AACwB,CAAC,EAAG;EAC/B;EACA;EACA,MAAMC,sBAAsB,GAAG,IAAAC,mBAAU,EAAEC,uBAAe,CAAC;EAE3D,MAAMC,kBAAkB,GACvBC,mBAAwD,IAExD,IAAAC,MAAA,CAAAC,aAAA,EAACd,aAAA,CAAAe,OAAY;IACZV,QAAQ,EAAGA,QAAU;IACrBC,WAAW,EAAG;MACb,GAAGM,mBAAmB;MACtB,mBAAmB,EAAE;IACtB,CAAG;IAAA,GACEL;EAAK,CACV,CACD;EAED,IAAKC,sBAAsB,EAAG;IAC7B,OACC,IAAAK,MAAA,CAAAC,aAAA,EAACX,YAAA,CAAAY,OAAW;MAAA,GAAMT;IAAW,GAAKK,kBAAiC,CAAC;EAEtE;EAEA,OAAOA,kBAAkB,CAAEL,WAAY,CAAC;AACzC;AAAC,IAAAU,QAAA,GAEcZ,qBAAqB;AAAAa,OAAA,CAAAF,OAAA,GAAAC,QAAA"}

View File

@@ -0,0 +1,40 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = require("react");
var _reactNative = require("react-native");
var _compose = require("@wordpress/compose");
var _dropdownMenu = _interopRequireDefault(require("../../dropdown-menu"));
var _style = _interopRequireDefault(require("./style.scss"));
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function ToolbarGroupCollapsed({
controls = [],
getStylesFromColorScheme,
passedStyle,
...props
}) {
return (0, _react.createElement)(_reactNative.View, {
style: [getStylesFromColorScheme(_style.default.container, _style.default.containerDark), passedStyle]
}, (0, _react.createElement)(_dropdownMenu.default, {
controls: controls,
...props
}));
}
var _default = (0, _compose.withPreferredColorScheme)(ToolbarGroupCollapsed);
exports.default = _default;
//# sourceMappingURL=toolbar-group-collapsed.native.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_reactNative","require","_compose","_dropdownMenu","_interopRequireDefault","_style","ToolbarGroupCollapsed","controls","getStylesFromColorScheme","passedStyle","props","_react","createElement","View","style","styles","container","containerDark","default","_default","withPreferredColorScheme","exports"],"sources":["@wordpress/components/src/toolbar/toolbar-group/toolbar-group-collapsed.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { View } from 'react-native';\n/**\n * WordPress dependencies\n */\nimport { withPreferredColorScheme } from '@wordpress/compose';\n/**\n * Internal dependencies\n */\nimport DropdownMenu from '../../dropdown-menu';\nimport styles from './style.scss';\n\nfunction ToolbarGroupCollapsed( {\n\tcontrols = [],\n\tgetStylesFromColorScheme,\n\tpassedStyle,\n\t...props\n} ) {\n\treturn (\n\t\t<View\n\t\t\tstyle={ [\n\t\t\t\tgetStylesFromColorScheme(\n\t\t\t\t\tstyles.container,\n\t\t\t\t\tstyles.containerDark\n\t\t\t\t),\n\t\t\t\tpassedStyle,\n\t\t\t] }\n\t\t>\n\t\t\t<DropdownMenu controls={ controls } { ...props } />\n\t\t</View>\n\t);\n}\n\nexport default withPreferredColorScheme( ToolbarGroupCollapsed );\n"],"mappings":";;;;;;;;AAGA,IAAAA,YAAA,GAAAC,OAAA;AAIA,IAAAC,QAAA,GAAAD,OAAA;AAIA,IAAAE,aAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,MAAA,GAAAD,sBAAA,CAAAH,OAAA;AAZA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAIA,SAASK,qBAAqBA,CAAE;EAC/BC,QAAQ,GAAG,EAAE;EACbC,wBAAwB;EACxBC,WAAW;EACX,GAAGC;AACJ,CAAC,EAAG;EACH,OACC,IAAAC,MAAA,CAAAC,aAAA,EAACZ,YAAA,CAAAa,IAAI;IACJC,KAAK,EAAG,CACPN,wBAAwB,CACvBO,cAAM,CAACC,SAAS,EAChBD,cAAM,CAACE,aACR,CAAC,EACDR,WAAW;EACT,GAEH,IAAAE,MAAA,CAAAC,aAAA,EAACT,aAAA,CAAAe,OAAY;IAACX,QAAQ,EAAGA,QAAU;IAAA,GAAMG;EAAK,CAAI,CAC7C,CAAC;AAET;AAAC,IAAAS,QAAA,GAEc,IAAAC,iCAAwB,EAAEd,qBAAsB,CAAC;AAAAe,OAAA,CAAAH,OAAA,GAAAC,QAAA"}

View File

@@ -0,0 +1,22 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = require("react");
/**
* Internal dependencies
*/
const ToolbarGroupContainer = ({
className,
children,
...props
}) => (0, _react.createElement)("div", {
className: className,
...props
}, children);
var _default = ToolbarGroupContainer;
exports.default = _default;
//# sourceMappingURL=toolbar-group-container.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["ToolbarGroupContainer","className","children","props","_react","createElement","_default","exports","default"],"sources":["@wordpress/components/src/toolbar/toolbar-group/toolbar-group-container.tsx"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../context';\nimport type { ToolbarGroupContainerProps } from './types';\n\nconst ToolbarGroupContainer = ( {\n\tclassName,\n\tchildren,\n\t...props\n}: WordPressComponentProps< ToolbarGroupContainerProps, 'div', false > ) => (\n\t<div className={ className } { ...props }>\n\t\t{ children }\n\t</div>\n);\nexport default ToolbarGroupContainer;\n"],"mappings":";;;;;;;AAAA;AACA;AACA;;AAIA,MAAMA,qBAAqB,GAAGA,CAAE;EAC/BC,SAAS;EACTC,QAAQ;EACR,GAAGC;AACiE,CAAC,KACrE,IAAAC,MAAA,CAAAC,aAAA;EAAKJ,SAAS,EAAGA,SAAW;EAAA,GAAME;AAAK,GACpCD,QACE,CACL;AAAC,IAAAI,QAAA,GACaN,qBAAqB;AAAAO,OAAA,CAAAC,OAAA,GAAAF,QAAA"}

View File

@@ -0,0 +1,37 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = require("react");
var _reactNative = require("react-native");
var _compose = require("@wordpress/compose");
var _style = _interopRequireDefault(require("./style.scss"));
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const ToolbarGroupContainer = ({
passedStyle,
children
}) => {
const groupStyles = [(0, _compose.usePreferredColorSchemeStyle)(_style.default.container, _style.default.containerDark), {
borderLeftWidth: _reactNative.StyleSheet.hairlineWidth
}, passedStyle];
return (0, _react.createElement)(_reactNative.View, {
style: groupStyles
}, children);
};
var _default = ToolbarGroupContainer;
exports.default = _default;
//# sourceMappingURL=toolbar-group-container.native.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_reactNative","require","_compose","_style","_interopRequireDefault","ToolbarGroupContainer","passedStyle","children","groupStyles","usePreferredColorSchemeStyle","styles","container","containerDark","borderLeftWidth","StyleSheet","hairlineWidth","_react","createElement","View","style","_default","exports","default"],"sources":["@wordpress/components/src/toolbar/toolbar-group/toolbar-group-container.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { StyleSheet, View } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\n\nconst ToolbarGroupContainer = ( { passedStyle, children } ) => {\n\tconst groupStyles = [\n\t\tusePreferredColorSchemeStyle( styles.container, styles.containerDark ),\n\t\t{ borderLeftWidth: StyleSheet.hairlineWidth },\n\t\tpassedStyle,\n\t];\n\n\treturn <View style={ groupStyles }>{ children }</View>;\n};\n\nexport default ToolbarGroupContainer;\n"],"mappings":";;;;;;;;AAGA,IAAAA,YAAA,GAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,MAAA,GAAAC,sBAAA,CAAAH,OAAA;AAbA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAGA,MAAMI,qBAAqB,GAAGA,CAAE;EAAEC,WAAW;EAAEC;AAAS,CAAC,KAAM;EAC9D,MAAMC,WAAW,GAAG,CACnB,IAAAC,qCAA4B,EAAEC,cAAM,CAACC,SAAS,EAAED,cAAM,CAACE,aAAc,CAAC,EACtE;IAAEC,eAAe,EAAEC,uBAAU,CAACC;EAAc,CAAC,EAC7CT,WAAW,CACX;EAED,OAAO,IAAAU,MAAA,CAAAC,aAAA,EAACjB,YAAA,CAAAkB,IAAI;IAACC,KAAK,EAAGX;EAAa,GAAGD,QAAgB,CAAC;AACvD,CAAC;AAAC,IAAAa,QAAA,GAEaf,qBAAqB;AAAAgB,OAAA,CAAAC,OAAA,GAAAF,QAAA"}

View File

@@ -0,0 +1,6 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
//# sourceMappingURL=types.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":[],"sources":["@wordpress/components/src/toolbar/toolbar-group/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ReactNode } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tDropdownMenuProps,\n\tDropdownOption,\n} from '../../dropdown-menu/types';\n\n/**\n * WordPress dependencies\n */\nimport type { Props as IconProps } from '../../icon';\n\nexport type ToolbarGroupControls = DropdownOption & {\n\t/**\n\t * An optional subscript associated to the control.\n\t */\n\tsubscript?: string;\n};\n\ntype ToolbarGroupPropsBase = {\n\t/**\n\t * The controls to render in this toolbar.\n\t */\n\tcontrols?: ToolbarGroupControls[] | ToolbarGroupControls[][];\n\n\t/**\n\t * Class to set on the container div.\n\t */\n\tclassName?: string;\n\n\t/**\n\t * Any other things to render inside the toolbar besides the controls.\n\t */\n\tchildren?: ReactNode;\n\n\t/**\n\t * The Dashicon icon slug to be shown for the option.\n\t */\n\ticon?: IconProps[ 'icon' ];\n};\n\nexport type ToolbarGroupProps = ToolbarGroupPropsBase &\n\t(\n\t\t| {\n\t\t\t\t/**\n\t\t\t\t * When true, turns `ToolbarGroup` into a dropdown menu.\n\t\t\t\t */\n\t\t\t\tisCollapsed?: false;\n\t\t\t\t/**\n\t\t\t\t * Any other things to render inside the toolbar besides the controls.\n\t\t\t\t */\n\t\t\t\tchildren?: ReactNode;\n\t\t\t\ttitle?: never;\n\t\t }\n\t\t| {\n\t\t\t\t/**\n\t\t\t\t * When true, turns `ToolbarGroup` into a dropdown menu.\n\t\t\t\t */\n\t\t\t\tisCollapsed: true;\n\t\t\t\t/**\n\t\t\t\t * Any other things to render inside the toolbar besides the controls.\n\t\t\t\t */\n\t\t\t\tchildren?: ToolbarGroupCollapsedProps[ 'children' ];\n\t\t\t\t/**\n\t\t\t\t * ARIA label for dropdown menu if is collapsed.\n\t\t\t\t */\n\t\t\t\ttitle: string;\n\t\t }\n\t);\n\nexport type ToolbarGroupCollapsedProps = DropdownMenuProps;\n\nexport type ToolbarGroupContainerProps = {\n\t/**\n\t * Children to be rendered inside the toolbar.\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 * Props to be passed.\n\t */\n\tprops?: any;\n};\n"],"mappings":""}