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,41 @@
import { createElement } from "react";
/**
* Internal dependencies
*/
import { contextConnect } from '../context';
import { View } from '../view';
import { useHStack } from './hook';
function UnconnectedHStack(props, forwardedRef) {
const hStackProps = useHStack(props);
return createElement(View, {
...hStackProps,
ref: forwardedRef
});
}
/**
* `HStack` (Horizontal Stack) arranges child elements in a horizontal line.
*
* `HStack` can render anything inside.
*
* ```jsx
* import {
* __experimentalHStack as HStack,
* __experimentalText as Text,
* } from `@wordpress/components`;
*
* function Example() {
* return (
* <HStack>
* <Text>Code</Text>
* <Text>is</Text>
* <Text>Poetry</Text>
* </HStack>
* );
* }
* ```
*/
export const HStack = contextConnect(UnconnectedHStack, 'HStack');
export default HStack;
//# sourceMappingURL=component.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["contextConnect","View","useHStack","UnconnectedHStack","props","forwardedRef","hStackProps","createElement","ref","HStack"],"sources":["@wordpress/components/src/h-stack/component.tsx"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\nimport { contextConnect } from '../context';\nimport { View } from '../view';\nimport { useHStack } from './hook';\nimport type { Props } from './types';\n\nfunction UnconnectedHStack(\n\tprops: WordPressComponentProps< Props, 'div' >,\n\tforwardedRef: React.ForwardedRef< any >\n) {\n\tconst hStackProps = useHStack( props );\n\n\treturn <View { ...hStackProps } ref={ forwardedRef } />;\n}\n\n/**\n * `HStack` (Horizontal Stack) arranges child elements in a horizontal line.\n *\n * `HStack` can render anything inside.\n *\n * ```jsx\n * import {\n * \t__experimentalHStack as HStack,\n * \t__experimentalText as Text,\n * } from `@wordpress/components`;\n *\n * function Example() {\n * \treturn (\n * \t\t<HStack>\n * \t\t\t<Text>Code</Text>\n * \t\t\t<Text>is</Text>\n * \t\t\t<Text>Poetry</Text>\n * \t\t</HStack>\n * \t);\n * }\n * ```\n */\nexport const HStack = contextConnect( UnconnectedHStack, 'HStack' );\n\nexport default HStack;\n"],"mappings":";AAAA;AACA;AACA;;AAEA,SAASA,cAAc,QAAQ,YAAY;AAC3C,SAASC,IAAI,QAAQ,SAAS;AAC9B,SAASC,SAAS,QAAQ,QAAQ;AAGlC,SAASC,iBAAiBA,CACzBC,KAA8C,EAC9CC,YAAuC,EACtC;EACD,MAAMC,WAAW,GAAGJ,SAAS,CAAEE,KAAM,CAAC;EAEtC,OAAOG,aAAA,CAACN,IAAI;IAAA,GAAMK,WAAW;IAAGE,GAAG,EAAGH;EAAc,CAAE,CAAC;AACxD;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMI,MAAM,GAAGT,cAAc,CAAEG,iBAAiB,EAAE,QAAS,CAAC;AAEnE,eAAeM,MAAM"}

View File

@@ -0,0 +1,48 @@
import { createElement } from "react";
/**
* External dependencies
*/
/**
* Internal dependencies
*/
import { hasConnectNamespace, useContextSystem } from '../context';
import { FlexItem, useFlex } from '../flex';
import { getAlignmentProps } from './utils';
import { getValidChildren } from '../utils/get-valid-children';
export function useHStack(props) {
const {
alignment = 'edge',
children,
direction,
spacing = 2,
...otherProps
} = useContextSystem(props, 'HStack');
const align = getAlignmentProps(alignment, direction);
const validChildren = getValidChildren(children);
const clonedChildren = validChildren.map((child, index) => {
const _isSpacer = hasConnectNamespace(child, ['Spacer']);
if (_isSpacer) {
const childElement = child;
const _key = childElement.key || `hstack-${index}`;
return createElement(FlexItem, {
isBlock: true,
key: _key,
...childElement.props
});
}
return child;
});
const propsForFlex = {
children: clonedChildren,
direction,
justify: 'center',
...align,
...otherProps,
gap: spacing
};
const flexProps = useFlex(propsForFlex);
return flexProps;
}
//# sourceMappingURL=hook.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["hasConnectNamespace","useContextSystem","FlexItem","useFlex","getAlignmentProps","getValidChildren","useHStack","props","alignment","children","direction","spacing","otherProps","align","validChildren","clonedChildren","map","child","index","_isSpacer","childElement","_key","key","createElement","isBlock","propsForFlex","justify","gap","flexProps"],"sources":["@wordpress/components/src/h-stack/hook.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ReactElement } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../context';\nimport { hasConnectNamespace, useContextSystem } from '../context';\nimport { FlexItem, useFlex } from '../flex';\nimport { getAlignmentProps } from './utils';\nimport { getValidChildren } from '../utils/get-valid-children';\nimport type { Props } from './types';\n\nexport function useHStack( props: WordPressComponentProps< Props, 'div' > ) {\n\tconst {\n\t\talignment = 'edge',\n\t\tchildren,\n\t\tdirection,\n\t\tspacing = 2,\n\t\t...otherProps\n\t} = useContextSystem( props, 'HStack' );\n\n\tconst align = getAlignmentProps( alignment, direction );\n\n\tconst validChildren = getValidChildren( children );\n\tconst clonedChildren = validChildren.map( ( child, index ) => {\n\t\tconst _isSpacer = hasConnectNamespace( child, [ 'Spacer' ] );\n\n\t\tif ( _isSpacer ) {\n\t\t\tconst childElement = child as ReactElement;\n\t\t\tconst _key = childElement.key || `hstack-${ index }`;\n\n\t\t\treturn <FlexItem isBlock key={ _key } { ...childElement.props } />;\n\t\t}\n\n\t\treturn child;\n\t} );\n\n\tconst propsForFlex = {\n\t\tchildren: clonedChildren,\n\t\tdirection,\n\t\tjustify: 'center',\n\t\t...align,\n\t\t...otherProps,\n\t\tgap: spacing,\n\t};\n\n\tconst flexProps = useFlex( propsForFlex );\n\n\treturn flexProps;\n}\n"],"mappings":";AAAA;AACA;AACA;;AAGA;AACA;AACA;;AAEA,SAASA,mBAAmB,EAAEC,gBAAgB,QAAQ,YAAY;AAClE,SAASC,QAAQ,EAAEC,OAAO,QAAQ,SAAS;AAC3C,SAASC,iBAAiB,QAAQ,SAAS;AAC3C,SAASC,gBAAgB,QAAQ,6BAA6B;AAG9D,OAAO,SAASC,SAASA,CAAEC,KAA8C,EAAG;EAC3E,MAAM;IACLC,SAAS,GAAG,MAAM;IAClBC,QAAQ;IACRC,SAAS;IACTC,OAAO,GAAG,CAAC;IACX,GAAGC;EACJ,CAAC,GAAGX,gBAAgB,CAAEM,KAAK,EAAE,QAAS,CAAC;EAEvC,MAAMM,KAAK,GAAGT,iBAAiB,CAAEI,SAAS,EAAEE,SAAU,CAAC;EAEvD,MAAMI,aAAa,GAAGT,gBAAgB,CAAEI,QAAS,CAAC;EAClD,MAAMM,cAAc,GAAGD,aAAa,CAACE,GAAG,CAAE,CAAEC,KAAK,EAAEC,KAAK,KAAM;IAC7D,MAAMC,SAAS,GAAGnB,mBAAmB,CAAEiB,KAAK,EAAE,CAAE,QAAQ,CAAG,CAAC;IAE5D,IAAKE,SAAS,EAAG;MAChB,MAAMC,YAAY,GAAGH,KAAqB;MAC1C,MAAMI,IAAI,GAAGD,YAAY,CAACE,GAAG,IAAK,UAAUJ,KAAO,EAAC;MAEpD,OAAOK,aAAA,CAACrB,QAAQ;QAACsB,OAAO;QAACF,GAAG,EAAGD,IAAM;QAAA,GAAMD,YAAY,CAACb;MAAK,CAAI,CAAC;IACnE;IAEA,OAAOU,KAAK;EACb,CAAE,CAAC;EAEH,MAAMQ,YAAY,GAAG;IACpBhB,QAAQ,EAAEM,cAAc;IACxBL,SAAS;IACTgB,OAAO,EAAE,QAAQ;IACjB,GAAGb,KAAK;IACR,GAAGD,UAAU;IACbe,GAAG,EAAEhB;EACN,CAAC;EAED,MAAMiB,SAAS,GAAGzB,OAAO,CAAEsB,YAAa,CAAC;EAEzC,OAAOG,SAAS;AACjB"}

View File

@@ -0,0 +1,3 @@
export { default as HStack } from './component';
export { useHStack } from './hook';
//# sourceMappingURL=index.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["default","HStack","useHStack"],"sources":["@wordpress/components/src/h-stack/index.ts"],"sourcesContent":["export { default as HStack } from './component';\nexport { useHStack } from './hook';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,MAAM,QAAQ,aAAa;AAC/C,SAASC,SAAS,QAAQ,QAAQ"}

View File

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

View File

@@ -0,0 +1 @@
{"version":3,"names":[],"sources":["@wordpress/components/src/h-stack/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { CSSProperties } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { FlexProps } from '../flex/types';\n\nexport type HStackAlignment =\n\t| 'bottom'\n\t| 'bottomLeft'\n\t| 'bottomRight'\n\t| 'center'\n\t| 'edge'\n\t| 'left'\n\t| 'right'\n\t| 'stretch'\n\t| 'top'\n\t| 'topLeft'\n\t| 'topRight';\n\nexport type AlignmentProps = {\n\tjustify?: CSSProperties[ 'justifyContent' ];\n\talign?: CSSProperties[ 'alignItems' ];\n};\n\nexport type Alignments = Record< HStackAlignment, AlignmentProps >;\n\nexport type Props = Omit< FlexProps, 'align' | 'gap' > & {\n\t/**\n\t * Determines how the child elements are aligned.\n\t *\n\t * * `top`: Aligns content to the top.\n\t * * `topLeft`: Aligns content to the top/left.\n\t * * `topRight`: Aligns content to the top/right.\n\t * * `left`: Aligns content to the left.\n\t * * `center`: Aligns content to the center.\n\t * * `right`: Aligns content to the right.\n\t * * `bottom`: Aligns content to the bottom.\n\t * * `bottomLeft`: Aligns content to the bottom/left.\n\t * * `bottomRight`: Aligns content to the bottom/right.\n\t * * `edge`: Justifies content to be evenly spread out up to the main axis edges of the container.\n\t * * `stretch`: Stretches content to the cross axis edges of the container.\n\t *\n\t * @default 'edge'\n\t */\n\talignment?: HStackAlignment | CSSProperties[ 'alignItems' ];\n\t/**\n\t * The amount of space between each child element. Spacing in between each child can be adjusted by using `spacing`.\n\t * The value of `spacing` works as a multiplier to the library's grid system (base of `4px`).\n\t *\n\t * @default 2\n\t */\n\tspacing?: CSSProperties[ 'width' ];\n};\n"],"mappings":""}

View File

@@ -0,0 +1,111 @@
/**
* External dependencies
*/
/**
* Internal dependencies
*/
import { isValueDefined } from '../utils/values';
const H_ALIGNMENTS = {
bottom: {
align: 'flex-end',
justify: 'center'
},
bottomLeft: {
align: 'flex-end',
justify: 'flex-start'
},
bottomRight: {
align: 'flex-end',
justify: 'flex-end'
},
center: {
align: 'center',
justify: 'center'
},
edge: {
align: 'center',
justify: 'space-between'
},
left: {
align: 'center',
justify: 'flex-start'
},
right: {
align: 'center',
justify: 'flex-end'
},
stretch: {
align: 'stretch'
},
top: {
align: 'flex-start',
justify: 'center'
},
topLeft: {
align: 'flex-start',
justify: 'flex-start'
},
topRight: {
align: 'flex-start',
justify: 'flex-end'
}
};
const V_ALIGNMENTS = {
bottom: {
justify: 'flex-end',
align: 'center'
},
bottomLeft: {
justify: 'flex-end',
align: 'flex-start'
},
bottomRight: {
justify: 'flex-end',
align: 'flex-end'
},
center: {
justify: 'center',
align: 'center'
},
edge: {
justify: 'space-between',
align: 'center'
},
left: {
justify: 'center',
align: 'flex-start'
},
right: {
justify: 'center',
align: 'flex-end'
},
stretch: {
align: 'stretch'
},
top: {
justify: 'flex-start',
align: 'center'
},
topLeft: {
justify: 'flex-start',
align: 'flex-start'
},
topRight: {
justify: 'flex-start',
align: 'flex-end'
}
};
export function getAlignmentProps(alignment, direction = 'row') {
if (!isValueDefined(alignment)) {
return {};
}
const isVertical = direction === 'column';
const props = isVertical ? V_ALIGNMENTS : H_ALIGNMENTS;
const alignmentProps = alignment in props ? props[alignment] : {
align: alignment
};
return alignmentProps;
}
//# sourceMappingURL=utils.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["isValueDefined","H_ALIGNMENTS","bottom","align","justify","bottomLeft","bottomRight","center","edge","left","right","stretch","top","topLeft","topRight","V_ALIGNMENTS","getAlignmentProps","alignment","direction","isVertical","props","alignmentProps"],"sources":["@wordpress/components/src/h-stack/utils.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { CSSProperties } from 'react';\n/**\n * Internal dependencies\n */\nimport type { FlexDirection } from '../flex/types';\nimport type { HStackAlignment, AlignmentProps, Alignments } from './types';\nimport { isValueDefined } from '../utils/values';\n\nconst H_ALIGNMENTS: Alignments = {\n\tbottom: { align: 'flex-end', justify: 'center' },\n\tbottomLeft: { align: 'flex-end', justify: 'flex-start' },\n\tbottomRight: { align: 'flex-end', justify: 'flex-end' },\n\tcenter: { align: 'center', justify: 'center' },\n\tedge: { align: 'center', justify: 'space-between' },\n\tleft: { align: 'center', justify: 'flex-start' },\n\tright: { align: 'center', justify: 'flex-end' },\n\tstretch: { align: 'stretch' },\n\ttop: { align: 'flex-start', justify: 'center' },\n\ttopLeft: { align: 'flex-start', justify: 'flex-start' },\n\ttopRight: { align: 'flex-start', justify: 'flex-end' },\n};\n\nconst V_ALIGNMENTS: Alignments = {\n\tbottom: { justify: 'flex-end', align: 'center' },\n\tbottomLeft: { justify: 'flex-end', align: 'flex-start' },\n\tbottomRight: { justify: 'flex-end', align: 'flex-end' },\n\tcenter: { justify: 'center', align: 'center' },\n\tedge: { justify: 'space-between', align: 'center' },\n\tleft: { justify: 'center', align: 'flex-start' },\n\tright: { justify: 'center', align: 'flex-end' },\n\tstretch: { align: 'stretch' },\n\ttop: { justify: 'flex-start', align: 'center' },\n\ttopLeft: { justify: 'flex-start', align: 'flex-start' },\n\ttopRight: { justify: 'flex-start', align: 'flex-end' },\n};\n\nexport function getAlignmentProps(\n\talignment: HStackAlignment | CSSProperties[ 'alignItems' ],\n\tdirection: FlexDirection = 'row'\n): AlignmentProps {\n\tif ( ! isValueDefined( alignment ) ) {\n\t\treturn {};\n\t}\n\tconst isVertical = direction === 'column';\n\tconst props = isVertical ? V_ALIGNMENTS : H_ALIGNMENTS;\n\n\tconst alignmentProps =\n\t\talignment in props\n\t\t\t? props[ alignment as keyof typeof props ]\n\t\t\t: { align: alignment };\n\n\treturn alignmentProps;\n}\n"],"mappings":"AAAA;AACA;AACA;;AAEA;AACA;AACA;;AAGA,SAASA,cAAc,QAAQ,iBAAiB;AAEhD,MAAMC,YAAwB,GAAG;EAChCC,MAAM,EAAE;IAAEC,KAAK,EAAE,UAAU;IAAEC,OAAO,EAAE;EAAS,CAAC;EAChDC,UAAU,EAAE;IAAEF,KAAK,EAAE,UAAU;IAAEC,OAAO,EAAE;EAAa,CAAC;EACxDE,WAAW,EAAE;IAAEH,KAAK,EAAE,UAAU;IAAEC,OAAO,EAAE;EAAW,CAAC;EACvDG,MAAM,EAAE;IAAEJ,KAAK,EAAE,QAAQ;IAAEC,OAAO,EAAE;EAAS,CAAC;EAC9CI,IAAI,EAAE;IAAEL,KAAK,EAAE,QAAQ;IAAEC,OAAO,EAAE;EAAgB,CAAC;EACnDK,IAAI,EAAE;IAAEN,KAAK,EAAE,QAAQ;IAAEC,OAAO,EAAE;EAAa,CAAC;EAChDM,KAAK,EAAE;IAAEP,KAAK,EAAE,QAAQ;IAAEC,OAAO,EAAE;EAAW,CAAC;EAC/CO,OAAO,EAAE;IAAER,KAAK,EAAE;EAAU,CAAC;EAC7BS,GAAG,EAAE;IAAET,KAAK,EAAE,YAAY;IAAEC,OAAO,EAAE;EAAS,CAAC;EAC/CS,OAAO,EAAE;IAAEV,KAAK,EAAE,YAAY;IAAEC,OAAO,EAAE;EAAa,CAAC;EACvDU,QAAQ,EAAE;IAAEX,KAAK,EAAE,YAAY;IAAEC,OAAO,EAAE;EAAW;AACtD,CAAC;AAED,MAAMW,YAAwB,GAAG;EAChCb,MAAM,EAAE;IAAEE,OAAO,EAAE,UAAU;IAAED,KAAK,EAAE;EAAS,CAAC;EAChDE,UAAU,EAAE;IAAED,OAAO,EAAE,UAAU;IAAED,KAAK,EAAE;EAAa,CAAC;EACxDG,WAAW,EAAE;IAAEF,OAAO,EAAE,UAAU;IAAED,KAAK,EAAE;EAAW,CAAC;EACvDI,MAAM,EAAE;IAAEH,OAAO,EAAE,QAAQ;IAAED,KAAK,EAAE;EAAS,CAAC;EAC9CK,IAAI,EAAE;IAAEJ,OAAO,EAAE,eAAe;IAAED,KAAK,EAAE;EAAS,CAAC;EACnDM,IAAI,EAAE;IAAEL,OAAO,EAAE,QAAQ;IAAED,KAAK,EAAE;EAAa,CAAC;EAChDO,KAAK,EAAE;IAAEN,OAAO,EAAE,QAAQ;IAAED,KAAK,EAAE;EAAW,CAAC;EAC/CQ,OAAO,EAAE;IAAER,KAAK,EAAE;EAAU,CAAC;EAC7BS,GAAG,EAAE;IAAER,OAAO,EAAE,YAAY;IAAED,KAAK,EAAE;EAAS,CAAC;EAC/CU,OAAO,EAAE;IAAET,OAAO,EAAE,YAAY;IAAED,KAAK,EAAE;EAAa,CAAC;EACvDW,QAAQ,EAAE;IAAEV,OAAO,EAAE,YAAY;IAAED,KAAK,EAAE;EAAW;AACtD,CAAC;AAED,OAAO,SAASa,iBAAiBA,CAChCC,SAA0D,EAC1DC,SAAwB,GAAG,KAAK,EACf;EACjB,IAAK,CAAElB,cAAc,CAAEiB,SAAU,CAAC,EAAG;IACpC,OAAO,CAAC,CAAC;EACV;EACA,MAAME,UAAU,GAAGD,SAAS,KAAK,QAAQ;EACzC,MAAME,KAAK,GAAGD,UAAU,GAAGJ,YAAY,GAAGd,YAAY;EAEtD,MAAMoB,cAAc,GACnBJ,SAAS,IAAIG,KAAK,GACfA,KAAK,CAAEH,SAAS,CAAwB,GACxC;IAAEd,KAAK,EAAEc;EAAU,CAAC;EAExB,OAAOI,cAAc;AACtB"}