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,57 @@
import { createElement } from "react";
/**
* External dependencies
*/
import classnames from 'classnames';
/**
* WordPress dependencies
*/
import { cloneElement, Children } from '@wordpress/element';
/**
* Internal dependencies
*/
/**
* A wrapper component that maintains its aspect ratio when resized.
*
* ```jsx
* import { ResponsiveWrapper } from '@wordpress/components';
*
* const MyResponsiveWrapper = () => (
* <ResponsiveWrapper naturalWidth={ 2000 } naturalHeight={ 680 }>
* <img
* src="https://s.w.org/style/images/about/WordPress-logotype-standard.png"
* alt="WordPress"
* />
* </ResponsiveWrapper>
* );
* ```
*/
function ResponsiveWrapper({
naturalWidth,
naturalHeight,
children,
isInline = false
}) {
if (Children.count(children) !== 1) {
return null;
}
const TagName = isInline ? 'span' : 'div';
let aspectRatio;
if (naturalWidth && naturalHeight) {
aspectRatio = `${naturalWidth} / ${naturalHeight}`;
}
return createElement(TagName, {
className: "components-responsive-wrapper"
}, createElement("div", null, cloneElement(children, {
className: classnames('components-responsive-wrapper__content', children.props.className),
style: {
...children.props.style,
aspectRatio
}
})));
}
export default ResponsiveWrapper;
//# sourceMappingURL=index.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["classnames","cloneElement","Children","ResponsiveWrapper","naturalWidth","naturalHeight","children","isInline","count","TagName","aspectRatio","createElement","className","props","style"],"sources":["@wordpress/components/src/responsive-wrapper/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { cloneElement, Children } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { ResponsiveWrapperProps } from './types';\n\n/**\n * A wrapper component that maintains its aspect ratio when resized.\n *\n * ```jsx\n * import { ResponsiveWrapper } from '@wordpress/components';\n *\n * const MyResponsiveWrapper = () => (\n * \t<ResponsiveWrapper naturalWidth={ 2000 } naturalHeight={ 680 }>\n * \t\t<img\n * \t\t\tsrc=\"https://s.w.org/style/images/about/WordPress-logotype-standard.png\"\n * \t\t\talt=\"WordPress\"\n * \t\t/>\n * \t</ResponsiveWrapper>\n * );\n * ```\n */\nfunction ResponsiveWrapper( {\n\tnaturalWidth,\n\tnaturalHeight,\n\tchildren,\n\tisInline = false,\n}: ResponsiveWrapperProps ) {\n\tif ( Children.count( children ) !== 1 ) {\n\t\treturn null;\n\t}\n\n\tconst TagName = isInline ? 'span' : 'div';\n\tlet aspectRatio;\n\tif ( naturalWidth && naturalHeight ) {\n\t\taspectRatio = `${ naturalWidth } / ${ naturalHeight }`;\n\t}\n\n\treturn (\n\t\t<TagName className=\"components-responsive-wrapper\">\n\t\t\t<div>\n\t\t\t\t{ cloneElement( children, {\n\t\t\t\t\tclassName: classnames(\n\t\t\t\t\t\t'components-responsive-wrapper__content',\n\t\t\t\t\t\tchildren.props.className\n\t\t\t\t\t),\n\t\t\t\t\tstyle: {\n\t\t\t\t\t\t...children.props.style,\n\t\t\t\t\t\taspectRatio,\n\t\t\t\t\t},\n\t\t\t\t} ) }\n\t\t\t</div>\n\t\t</TagName>\n\t);\n}\n\nexport default ResponsiveWrapper;\n"],"mappings":";AAAA;AACA;AACA;AACA,OAAOA,UAAU,MAAM,YAAY;;AAEnC;AACA;AACA;AACA,SAASC,YAAY,EAAEC,QAAQ,QAAQ,oBAAoB;;AAE3D;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,iBAAiBA,CAAE;EAC3BC,YAAY;EACZC,aAAa;EACbC,QAAQ;EACRC,QAAQ,GAAG;AACY,CAAC,EAAG;EAC3B,IAAKL,QAAQ,CAACM,KAAK,CAAEF,QAAS,CAAC,KAAK,CAAC,EAAG;IACvC,OAAO,IAAI;EACZ;EAEA,MAAMG,OAAO,GAAGF,QAAQ,GAAG,MAAM,GAAG,KAAK;EACzC,IAAIG,WAAW;EACf,IAAKN,YAAY,IAAIC,aAAa,EAAG;IACpCK,WAAW,GAAI,GAAGN,YAAc,MAAMC,aAAe,EAAC;EACvD;EAEA,OACCM,aAAA,CAACF,OAAO;IAACG,SAAS,EAAC;EAA+B,GACjDD,aAAA,cACGV,YAAY,CAAEK,QAAQ,EAAE;IACzBM,SAAS,EAAEZ,UAAU,CACpB,wCAAwC,EACxCM,QAAQ,CAACO,KAAK,CAACD,SAChB,CAAC;IACDE,KAAK,EAAE;MACN,GAAGR,QAAQ,CAACO,KAAK,CAACC,KAAK;MACvBJ;IACD;EACD,CAAE,CACE,CACG,CAAC;AAEZ;AAEA,eAAeP,iBAAiB"}

View File

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

View File

@@ -0,0 +1 @@
{"version":3,"names":[],"sources":["@wordpress/components/src/responsive-wrapper/types.ts"],"sourcesContent":["export type ResponsiveWrapperProps = {\n\t/**\n\t * The intrinsic width of the element to wrap. Will be used to determine the aspect ratio.\n\t */\n\tnaturalWidth?: number;\n\t/**\n\t * The intrinsic height of the element to wrap. Will be used to determine the aspect ratio.\n\t */\n\tnaturalHeight?: number;\n\t/**\n\t * The element to wrap.\n\t */\n\tchildren: React.ReactElement;\n\t/**\n\t * If true, the wrapper will be `span` instead of `div`.\n\t *\n\t * @default false\n\t */\n\tisInline?: boolean;\n};\n"],"mappings":""}