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>

node_modules/@wordpress/components/build-module/custom-gradient-picker/gradient-bar/constants.js

@@ -0,0 +1,8 @@
+export const GRADIENT_MARKERS_WIDTH = 16;
+export const INSERT_POINT_WIDTH = 16;
+export const MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT = 10;
+export const MINIMUM_DISTANCE_BETWEEN_POINTS = 0;
+export const MINIMUM_SIGNIFICANT_MOVE = 5;
+export const KEYBOARD_CONTROL_POINT_VARIATION = MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT;
+export const MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_MARKER = (INSERT_POINT_WIDTH + GRADIENT_MARKERS_WIDTH) / 2;
+//# sourceMappingURL=constants.js.map

node_modules/@wordpress/components/build-module/custom-gradient-picker/gradient-bar/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["GRADIENT_MARKERS_WIDTH","INSERT_POINT_WIDTH","MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT","MINIMUM_DISTANCE_BETWEEN_POINTS","MINIMUM_SIGNIFICANT_MOVE","KEYBOARD_CONTROL_POINT_VARIATION","MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_MARKER"],"sources":["@wordpress/components/src/custom-gradient-picker/gradient-bar/constants.ts"],"sourcesContent":["export const GRADIENT_MARKERS_WIDTH = 16;\nexport const INSERT_POINT_WIDTH = 16;\nexport const MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT = 10;\nexport const MINIMUM_DISTANCE_BETWEEN_POINTS = 0;\nexport const MINIMUM_SIGNIFICANT_MOVE = 5;\n\nexport const KEYBOARD_CONTROL_POINT_VARIATION =\n\tMINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT;\nexport const MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_MARKER =\n\t( INSERT_POINT_WIDTH + GRADIENT_MARKERS_WIDTH ) / 2;\n"],"mappings":"AAAA,OAAO,MAAMA,sBAAsB,GAAG,EAAE;AACxC,OAAO,MAAMC,kBAAkB,GAAG,EAAE;AACpC,OAAO,MAAMC,2CAA2C,GAAG,EAAE;AAC7D,OAAO,MAAMC,+BAA+B,GAAG,CAAC;AAChD,OAAO,MAAMC,wBAAwB,GAAG,CAAC;AAEzC,OAAO,MAAMC,gCAAgC,GAC5CH,2CAA2C;AAC5C,OAAO,MAAMI,4CAA4C,GACxD,CAAEL,kBAAkB,GAAGD,sBAAsB,IAAK,CAAC"}

node_modules/@wordpress/components/build-module/custom-gradient-picker/gradient-bar/control-points.js

@@ -0,0 +1,252 @@
+import { createElement, Fragment } from "react";
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import { colord } from 'colord';
+
+/**
+ * WordPress dependencies
+ */
+import { useInstanceId } from '@wordpress/compose';
+import { useEffect, useRef, useState, useMemo } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+import { plus } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import Button from '../../button';
+import { HStack } from '../../h-stack';
+import { ColorPicker } from '../../color-picker';
+import { VisuallyHidden } from '../../visually-hidden';
+import { CustomColorPickerDropdown } from '../../color-palette';
+import { addControlPoint, clampPercent, removeControlPoint, updateControlPointColor, updateControlPointColorByPosition, updateControlPointPosition, getHorizontalRelativeGradientPosition } from './utils';
+import { MINIMUM_SIGNIFICANT_MOVE, KEYBOARD_CONTROL_POINT_VARIATION } from './constants';
+import DropdownContentWrapper from '../../dropdown/dropdown-content-wrapper';
+function ControlPointButton({
+  isOpen,
+  position,
+  color,
+  ...additionalProps
+}) {
+  const instanceId = useInstanceId(ControlPointButton);
+  const descriptionId = `components-custom-gradient-picker__control-point-button-description-${instanceId}`;
+  return createElement(Fragment, null, createElement(Button, {
+    "aria-label": sprintf(
+    // translators: %1$s: gradient position e.g: 70, %2$s: gradient color code e.g: rgb(52,121,151).
+    __('Gradient control point at position %1$s%% with color code %2$s.'), position, color),
+    "aria-describedby": descriptionId,
+    "aria-haspopup": "true",
+    "aria-expanded": isOpen,
+    className: classnames('components-custom-gradient-picker__control-point-button', {
+      'is-active': isOpen
+    }),
+    ...additionalProps
+  }), createElement(VisuallyHidden, {
+    id: descriptionId
+  }, __('Use your left or right arrow keys or drag and drop with the mouse to change the gradient position. Press the button to change the color or remove the control point.')));
+}
+function GradientColorPickerDropdown({
+  isRenderedInSidebar,
+  className,
+  ...props
+}) {
+  // Open the popover below the gradient control/insertion point
+  const popoverProps = useMemo(() => ({
+    placement: 'bottom',
+    offset: 8,
+    // Disabling resize as it would otherwise cause the popover to show
+    // scrollbars while dragging the color picker's handle close to the
+    // popover edge.
+    resize: false
+  }), []);
+  const mergedClassName = classnames('components-custom-gradient-picker__control-point-dropdown', className);
+  return createElement(CustomColorPickerDropdown, {
+    isRenderedInSidebar: isRenderedInSidebar,
+    popoverProps: popoverProps,
+    className: mergedClassName,
+    ...props
+  });
+}
+function ControlPoints({
+  disableRemove,
+  disableAlpha,
+  gradientPickerDomRef,
+  ignoreMarkerPosition,
+  value: controlPoints,
+  onChange,
+  onStartControlPointChange,
+  onStopControlPointChange,
+  __experimentalIsRenderedInSidebar
+}) {
+  const controlPointMoveState = useRef();
+  const onMouseMove = event => {
+    if (controlPointMoveState.current === undefined || gradientPickerDomRef.current === null) {
+      return;
+    }
+    const relativePosition = getHorizontalRelativeGradientPosition(event.clientX, gradientPickerDomRef.current);
+    const {
+      initialPosition,
+      index,
+      significantMoveHappened
+    } = controlPointMoveState.current;
+    if (!significantMoveHappened && Math.abs(initialPosition - relativePosition) >= MINIMUM_SIGNIFICANT_MOVE) {
+      controlPointMoveState.current.significantMoveHappened = true;
+    }
+    onChange(updateControlPointPosition(controlPoints, index, relativePosition));
+  };
+  const cleanEventListeners = () => {
+    if (window && window.removeEventListener && controlPointMoveState.current && controlPointMoveState.current.listenersActivated) {
+      window.removeEventListener('mousemove', onMouseMove);
+      window.removeEventListener('mouseup', cleanEventListeners);
+      onStopControlPointChange();
+      controlPointMoveState.current.listenersActivated = false;
+    }
+  };
+
+  // Adding `cleanEventListeners` to the dependency array below requires the function itself to be wrapped in a `useCallback`
+  // This memoization would prevent the event listeners from being properly cleaned.
+  // Instead, we'll pass a ref to the function in our `useEffect` so `cleanEventListeners` itself is no longer a dependency.
+  const cleanEventListenersRef = useRef();
+  cleanEventListenersRef.current = cleanEventListeners;
+  useEffect(() => {
+    return () => {
+      cleanEventListenersRef.current?.();
+    };
+  }, []);
+  return createElement(Fragment, null, controlPoints.map((point, index) => {
+    const initialPosition = point?.position;
+    return ignoreMarkerPosition !== initialPosition && createElement(GradientColorPickerDropdown, {
+      isRenderedInSidebar: __experimentalIsRenderedInSidebar,
+      key: index,
+      onClose: onStopControlPointChange,
+      renderToggle: ({
+        isOpen,
+        onToggle
+      }) => createElement(ControlPointButton, {
+        key: index,
+        onClick: () => {
+          if (controlPointMoveState.current && controlPointMoveState.current.significantMoveHappened) {
+            return;
+          }
+          if (isOpen) {
+            onStopControlPointChange();
+          } else {
+            onStartControlPointChange();
+          }
+          onToggle();
+        },
+        onMouseDown: () => {
+          if (window && window.addEventListener) {
+            controlPointMoveState.current = {
+              initialPosition,
+              index,
+              significantMoveHappened: false,
+              listenersActivated: true
+            };
+            onStartControlPointChange();
+            window.addEventListener('mousemove', onMouseMove);
+            window.addEventListener('mouseup', cleanEventListeners);
+          }
+        },
+        onKeyDown: event => {
+          if (event.code === 'ArrowLeft') {
+            // Stop propagation of the key press event to avoid focus moving
+            // to another editor area.
+            event.stopPropagation();
+            onChange(updateControlPointPosition(controlPoints, index, clampPercent(point.position - KEYBOARD_CONTROL_POINT_VARIATION)));
+          } else if (event.code === 'ArrowRight') {
+            // Stop propagation of the key press event to avoid focus moving
+            // to another editor area.
+            event.stopPropagation();
+            onChange(updateControlPointPosition(controlPoints, index, clampPercent(point.position + KEYBOARD_CONTROL_POINT_VARIATION)));
+          }
+        },
+        isOpen: isOpen,
+        position: point.position,
+        color: point.color
+      }),
+      renderContent: ({
+        onClose
+      }) => createElement(DropdownContentWrapper, {
+        paddingSize: "none"
+      }, createElement(ColorPicker, {
+        enableAlpha: !disableAlpha,
+        color: point.color,
+        onChange: color => {
+          onChange(updateControlPointColor(controlPoints, index, colord(color).toRgbString()));
+        }
+      }), !disableRemove && controlPoints.length > 2 && createElement(HStack, {
+        className: "components-custom-gradient-picker__remove-control-point-wrapper",
+        alignment: "center"
+      }, createElement(Button, {
+        onClick: () => {
+          onChange(removeControlPoint(controlPoints, index));
+          onClose();
+        },
+        variant: "link"
+      }, __('Remove Control Point')))),
+      style: {
+        left: `${point.position}%`,
+        transform: 'translateX( -50% )'
+      }
+    });
+  }));
+}
+function InsertPoint({
+  value: controlPoints,
+  onChange,
+  onOpenInserter,
+  onCloseInserter,
+  insertPosition,
+  disableAlpha,
+  __experimentalIsRenderedInSidebar
+}) {
+  const [alreadyInsertedPoint, setAlreadyInsertedPoint] = useState(false);
+  return createElement(GradientColorPickerDropdown, {
+    isRenderedInSidebar: __experimentalIsRenderedInSidebar,
+    className: "components-custom-gradient-picker__inserter",
+    onClose: () => {
+      onCloseInserter();
+    },
+    renderToggle: ({
+      isOpen,
+      onToggle
+    }) => createElement(Button, {
+      "aria-expanded": isOpen,
+      "aria-haspopup": "true",
+      onClick: () => {
+        if (isOpen) {
+          onCloseInserter();
+        } else {
+          setAlreadyInsertedPoint(false);
+          onOpenInserter();
+        }
+        onToggle();
+      },
+      className: "components-custom-gradient-picker__insert-point-dropdown",
+      icon: plus
+    }),
+    renderContent: () => createElement(DropdownContentWrapper, {
+      paddingSize: "none"
+    }, createElement(ColorPicker, {
+      enableAlpha: !disableAlpha,
+      onChange: color => {
+        if (!alreadyInsertedPoint) {
+          onChange(addControlPoint(controlPoints, insertPosition, colord(color).toRgbString()));
+          setAlreadyInsertedPoint(true);
+        } else {
+          onChange(updateControlPointColorByPosition(controlPoints, insertPosition, colord(color).toRgbString()));
+        }
+      }
+    })),
+    style: insertPosition !== null ? {
+      left: `${insertPosition}%`,
+      transform: 'translateX( -50% )'
+    } : undefined
+  });
+}
+ControlPoints.InsertPoint = InsertPoint;
+export default ControlPoints;
+//# sourceMappingURL=control-points.js.map

node_modules/@wordpress/components/build-module/custom-gradient-picker/gradient-bar/index.js

@@ -0,0 +1,164 @@
+import { createElement } from "react";
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { useRef, useReducer } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import ControlPoints from './control-points';
+import { getHorizontalRelativeGradientPosition } from './utils';
+import { MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT } from './constants';
+const customGradientBarReducer = (state, action) => {
+  switch (action.type) {
+    case 'MOVE_INSERTER':
+      if (state.id === 'IDLE' || state.id === 'MOVING_INSERTER') {
+        return {
+          id: 'MOVING_INSERTER',
+          insertPosition: action.insertPosition
+        };
+      }
+      break;
+    case 'STOP_INSERTER_MOVE':
+      if (state.id === 'MOVING_INSERTER') {
+        return {
+          id: 'IDLE'
+        };
+      }
+      break;
+    case 'OPEN_INSERTER':
+      if (state.id === 'MOVING_INSERTER') {
+        return {
+          id: 'INSERTING_CONTROL_POINT',
+          insertPosition: state.insertPosition
+        };
+      }
+      break;
+    case 'CLOSE_INSERTER':
+      if (state.id === 'INSERTING_CONTROL_POINT') {
+        return {
+          id: 'IDLE'
+        };
+      }
+      break;
+    case 'START_CONTROL_CHANGE':
+      if (state.id === 'IDLE') {
+        return {
+          id: 'MOVING_CONTROL_POINT'
+        };
+      }
+      break;
+    case 'STOP_CONTROL_CHANGE':
+      if (state.id === 'MOVING_CONTROL_POINT') {
+        return {
+          id: 'IDLE'
+        };
+      }
+      break;
+  }
+  return state;
+};
+const customGradientBarReducerInitialState = {
+  id: 'IDLE'
+};
+export default function CustomGradientBar({
+  background,
+  hasGradient,
+  value: controlPoints,
+  onChange,
+  disableInserter = false,
+  disableAlpha = false,
+  __experimentalIsRenderedInSidebar = false
+}) {
+  const gradientMarkersContainerDomRef = useRef(null);
+  const [gradientBarState, gradientBarStateDispatch] = useReducer(customGradientBarReducer, customGradientBarReducerInitialState);
+  const onMouseEnterAndMove = event => {
+    if (!gradientMarkersContainerDomRef.current) {
+      return;
+    }
+    const insertPosition = getHorizontalRelativeGradientPosition(event.clientX, gradientMarkersContainerDomRef.current);
+
+    // If the insert point is close to an existing control point don't show it.
+    if (controlPoints.some(({
+      position
+    }) => {
+      return Math.abs(insertPosition - position) < MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT;
+    })) {
+      if (gradientBarState.id === 'MOVING_INSERTER') {
+        gradientBarStateDispatch({
+          type: 'STOP_INSERTER_MOVE'
+        });
+      }
+      return;
+    }
+    gradientBarStateDispatch({
+      type: 'MOVE_INSERTER',
+      insertPosition
+    });
+  };
+  const onMouseLeave = () => {
+    gradientBarStateDispatch({
+      type: 'STOP_INSERTER_MOVE'
+    });
+  };
+  const isMovingInserter = gradientBarState.id === 'MOVING_INSERTER';
+  const isInsertingControlPoint = gradientBarState.id === 'INSERTING_CONTROL_POINT';
+  return createElement("div", {
+    className: classnames('components-custom-gradient-picker__gradient-bar', {
+      'has-gradient': hasGradient
+    }),
+    onMouseEnter: onMouseEnterAndMove,
+    onMouseMove: onMouseEnterAndMove,
+    onMouseLeave: onMouseLeave
+  }, createElement("div", {
+    className: "components-custom-gradient-picker__gradient-bar-background",
+    style: {
+      background,
+      opacity: hasGradient ? 1 : 0.4
+    }
+  }), createElement("div", {
+    ref: gradientMarkersContainerDomRef,
+    className: "components-custom-gradient-picker__markers-container"
+  }, !disableInserter && (isMovingInserter || isInsertingControlPoint) && createElement(ControlPoints.InsertPoint, {
+    __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
+    disableAlpha: disableAlpha,
+    insertPosition: gradientBarState.insertPosition,
+    value: controlPoints,
+    onChange: onChange,
+    onOpenInserter: () => {
+      gradientBarStateDispatch({
+        type: 'OPEN_INSERTER'
+      });
+    },
+    onCloseInserter: () => {
+      gradientBarStateDispatch({
+        type: 'CLOSE_INSERTER'
+      });
+    }
+  }), createElement(ControlPoints, {
+    __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
+    disableAlpha: disableAlpha,
+    disableRemove: disableInserter,
+    gradientPickerDomRef: gradientMarkersContainerDomRef,
+    ignoreMarkerPosition: isInsertingControlPoint ? gradientBarState.insertPosition : undefined,
+    value: controlPoints,
+    onChange: onChange,
+    onStartControlPointChange: () => {
+      gradientBarStateDispatch({
+        type: 'START_CONTROL_CHANGE'
+      });
+    },
+    onStopControlPointChange: () => {
+      gradientBarStateDispatch({
+        type: 'STOP_CONTROL_CHANGE'
+      });
+    }
+  })));
+}
+//# sourceMappingURL=index.js.map

node_modules/@wordpress/components/build-module/custom-gradient-picker/gradient-bar/utils.js

@@ -0,0 +1,156 @@
+/**
+ * Internal dependencies
+ */
+import { MINIMUM_DISTANCE_BETWEEN_POINTS } from './constants';
+/**
+ * Clamps a number between 0 and 100.
+ *
+ * @param value Value to clamp.
+ *
+ * @return Value clamped between 0 and 100.
+ */
+export function clampPercent(value) {
+  return Math.max(0, Math.min(100, value));
+}
+
+/**
+ * Check if a control point is overlapping with another.
+ *
+ * @param value        Array of control points.
+ * @param initialIndex Index of the position to test.
+ * @param newPosition  New position of the control point.
+ * @param minDistance  Distance considered to be overlapping.
+ *
+ * @return True if the point is overlapping.
+ */
+export function isOverlapping(value, initialIndex, newPosition, minDistance = MINIMUM_DISTANCE_BETWEEN_POINTS) {
+  const initialPosition = value[initialIndex].position;
+  const minPosition = Math.min(initialPosition, newPosition);
+  const maxPosition = Math.max(initialPosition, newPosition);
+  return value.some(({
+    position
+  }, index) => {
+    return index !== initialIndex && (Math.abs(position - newPosition) < minDistance || minPosition < position && position < maxPosition);
+  });
+}
+
+/**
+ * Adds a control point from an array and returns the new array.
+ *
+ * @param points   Array of control points.
+ * @param position Position to insert the new point.
+ * @param color    Color to update the control point at index.
+ *
+ * @return New array of control points.
+ */
+export function addControlPoint(points, position, color) {
+  const nextIndex = points.findIndex(point => point.position > position);
+  const newPoint = {
+    color,
+    position
+  };
+  const newPoints = points.slice();
+  newPoints.splice(nextIndex - 1, 0, newPoint);
+  return newPoints;
+}
+
+/**
+ * Removes a control point from an array and returns the new array.
+ *
+ * @param points Array of control points.
+ * @param index  Index to remove.
+ *
+ * @return New array of control points.
+ */
+export function removeControlPoint(points, index) {
+  return points.filter((_point, pointIndex) => {
+    return pointIndex !== index;
+  });
+}
+/**
+ * Updates a control point from an array and returns the new array.
+ *
+ * @param points   Array of control points.
+ * @param index    Index to update.
+ * @param newPoint New control point to replace the index.
+ *
+ * @return New array of control points.
+ */
+export function updateControlPoint(points, index, newPoint) {
+  const newValue = points.slice();
+  newValue[index] = newPoint;
+  return newValue;
+}
+
+/**
+ * Updates the position of a control point from an array and returns the new array.
+ *
+ * @param points      Array of control points.
+ * @param index       Index to update.
+ * @param newPosition Position to move the control point at index.
+ *
+ * @return New array of control points.
+ */
+export function updateControlPointPosition(points, index, newPosition) {
+  if (isOverlapping(points, index, newPosition)) {
+    return points;
+  }
+  const newPoint = {
+    ...points[index],
+    position: newPosition
+  };
+  return updateControlPoint(points, index, newPoint);
+}
+
+/**
+ * Updates the position of a control point from an array and returns the new array.
+ *
+ * @param points   Array of control points.
+ * @param index    Index to update.
+ * @param newColor Color to update the control point at index.
+ *
+ * @return New array of control points.
+ */
+export function updateControlPointColor(points, index, newColor) {
+  const newPoint = {
+    ...points[index],
+    color: newColor
+  };
+  return updateControlPoint(points, index, newPoint);
+}
+
+/**
+ * Updates the position of a control point from an array and returns the new array.
+ *
+ * @param points   Array of control points.
+ * @param position Position of the color stop.
+ * @param newColor Color to update the control point at index.
+ *
+ * @return New array of control points.
+ */
+export function updateControlPointColorByPosition(points, position, newColor) {
+  const index = points.findIndex(point => point.position === position);
+  return updateControlPointColor(points, index, newColor);
+}
+
+/**
+ * Gets the horizontal coordinate when dragging a control point with the mouse.
+ *
+ * @param mouseXcoordinate Horizontal coordinate of the mouse position.
+ * @param containerElement Container for the gradient picker.
+ *
+ * @return Whole number percentage from the left.
+ */
+
+export function getHorizontalRelativeGradientPosition(mouseXCoordinate, containerElement) {
+  if (!containerElement) {
+    return;
+  }
+  const {
+    x,
+    width
+  } = containerElement.getBoundingClientRect();
+  const absolutePositionValue = mouseXCoordinate - x;
+  return Math.round(clampPercent(absolutePositionValue * 100 / width));
+}
+//# sourceMappingURL=utils.js.map