: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in
if (callbackRefElement.current) {
element = callbackRefElement.current;
} else if (refOrElement) {
if (refOrElement instanceof HTMLElement) {
element = refOrElement.current;
if (lastReportRef.current && lastReportRef.current.element === element && lastReportRef.current.reporter === callSubscriber) {
if (cleanupRef.current) {
// Making sure the cleanup is not called accidentally multiple times.
cleanupRef.current = null;
lastReportRef.current = {
reporter: callSubscriber,
// Only calling the subscriber, if there's an actual element to report.
cleanupRef.current = subscriber(element);
}, [refOrElement, subscriber]);
// On each render, we check whether a ref changed, or if we got a new raw
(0,external_wp_element_namespaceObject.useEffect)(() => {
// With this we're *technically* supporting cases where ref objects' current value changes, but only if there's a
// render accompanying that change as well.
// To guarantee we always have the right element, one must use the ref callback provided instead, but we support
// RefObjects to make the hook API more convenient in certain cases.
return (0,external_wp_element_namespaceObject.useCallback)(element => {
callbackRefElement.current = element;
// Declaring my own type here instead of using the one provided by TS (available since 4.2.2), because this way I'm not
// forcing consumers to use a specific TS version.
// We're only using the first element of the size sequences, until future versions of the spec solidify on how
// exactly it'll be used for fragments in multi-column scenarios:
// > The box size properties are exposed as FrozenArray in order to support elements that have multiple fragments,
// > which occur in multi-column scenarios. However the current definitions of content rect and border box do not
// > mention how those boxes are affected by multi-column layout. In this spec, there will only be a single
// > ResizeObserverSize returned in the FrozenArray, which will correspond to the dimensions of the first column.
// > A future version of this spec will extend the returned FrozenArray to contain the per-fragment size information.
// (https://drafts.csswg.org/resize-observer/#resize-observer-entry-interface)
// Also, testing these new box options revealed that in both Chrome and FF everything is returned in the callback,
// regardless of the "box" option.
// The spec states the following on this:
// > This does not have any impact on which box dimensions are returned to the defined callback when the event
// > is fired, it solely defines which box the author wishes to observe layout changes on.
// (https://drafts.csswg.org/resize-observer/#resize-observer-interface)
// I'm not exactly clear on what this means, especially when you consider a later section stating the following:
// > This section is non-normative. An author may desire to observe more than one CSS box.
// > In this case, author will need to use multiple ResizeObservers.
// (https://drafts.csswg.org/resize-observer/#resize-observer-interface)
// Which is clearly not how current browser implementations behave, and seems to contradict the previous quote.
// For this reason I decided to only return the requested size,
// even though it seems we have access to results for all box types.
// This also means that we get to keep the current api, being able to return a simple { width, height } pair,
// regardless of box option.
const extractSize = (entry, boxProp, sizeType) => {
if (boxProp === 'contentBoxSize') {
// The dimensions in `contentBoxSize` and `contentRect` are equivalent according to the spec.
// See the 6th step in the description for the RO algorithm:
// https://drafts.csswg.org/resize-observer/#create-and-populate-resizeobserverentry-h
// > Set this.contentRect to logical this.contentBoxSize given target and observedBox of "content-box".
// In real browser implementations of course these objects differ, but the width/height values should be equivalent.
return entry.contentRect[sizeType === 'inlineSize' ? 'width' : 'height'];
// A couple bytes smaller than calling Array.isArray() and just as effective here.
return entry[boxProp][0] ? entry[boxProp][0][sizeType] :
// TS complains about this, because the RO entry type follows the spec and does not reflect Firefox's current
// behaviour of returning objects instead of arrays for `borderBoxSize` and `contentBoxSize`.
entry[boxProp][sizeType];
function useResizeObserver(opts = {}) {
// Saving the callback as a ref. With this, I don't need to put onResize in the
// effect dep array, and just passing in an anonymous function without memoising
// will not reinstantiate the hook's ResizeObserver.
const onResize = opts.onResize;
const onResizeRef = (0,external_wp_element_namespaceObject.useRef)(undefined);
onResizeRef.current = onResize;
const round = opts.round || Math.round;
// Using a single instance throughout the hook's lifetime
const resizeObserverRef = (0,external_wp_element_namespaceObject.useRef)();
const [size, setSize] = (0,external_wp_element_namespaceObject.useState)({
// In certain edge cases the RO might want to report a size change just after
// the component unmounted.
const didUnmount = (0,external_wp_element_namespaceObject.useRef)(false);
(0,external_wp_element_namespaceObject.useEffect)(() => {
didUnmount.current = false;
didUnmount.current = true;
// Using a ref to track the previous width / height to avoid unnecessary renders.
const previous = (0,external_wp_element_namespaceObject.useRef)({
// This block is kinda like a useEffect, only it's called whenever a new
// element could be resolved based on the ref option. It also has a cleanup
const refCallback = useResolvedElement((0,external_wp_element_namespaceObject.useCallback)(element => {
// We only use a single Resize Observer instance, and we're instantiating it on demand, only once there's something to observe.
// This instance is also recreated when the `box` option changes, so that a new observation is fired if there was a previously observed element with a different box option.
if (!resizeObserverRef.current || resizeObserverRef.current.box !== opts.box || resizeObserverRef.current.round !== round) {
resizeObserverRef.current = {
instance: new ResizeObserver(entries => {
const entry = entries[0];
let boxProp = 'borderBoxSize';
if (opts.box === 'border-box') {
boxProp = 'borderBoxSize';
boxProp = opts.box === 'device-pixel-content-box' ? 'devicePixelContentBoxSize' : 'contentBoxSize';
const reportedWidth = extractSize(entry, boxProp, 'inlineSize');
const reportedHeight = extractSize(entry, boxProp, 'blockSize');
const newWidth = reportedWidth ? round(reportedWidth) : undefined;
const newHeight = reportedHeight ? round(reportedHeight) : undefined;
if (previous.current.width !== newWidth || previous.current.height !== newHeight) {
previous.current.width = newWidth;
previous.current.height = newHeight;
if (onResizeRef.current) {
onResizeRef.current(newSize);
} else if (!didUnmount.current) {
resizeObserverRef.current.instance.observe(element, {
if (resizeObserverRef.current) {
resizeObserverRef.current.instance.unobserve(element);
}, [opts.box, round]), opts.ref);
return (0,external_wp_element_namespaceObject.useMemo)(() => ({
}), [refCallback, size ? size.width : null, size ? size.height : null]);
* Hook which allows to listen the resize event of any target element when it changes sizes.
* _Note: `useResizeObserver` will report `null` until after first render.
* const [ resizeListener, sizes ] = useResizeObserver();
function useResizeAware() {
const sizes = (0,external_wp_element_namespaceObject.useMemo)(() => {
width: width !== null && width !== void 0 ? width : null,
height: height !== null && height !== void 0 ? height : null
const resizeListener = /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)("div", {
return [resizeListener, sizes];
;// CONCATENATED MODULE: external ["wp","priorityQueue"]
const external_wp_priorityQueue_namespaceObject = window["wp"]["priorityQueue"];
;// CONCATENATED MODULE: ./node_modules/@wordpress/compose/build-module/hooks/use-async-list/index.js
* Returns the first items from list that are present on state.
* @param state Current state.
* @return First items present iin state.
function getFirstItemsPresentInState(list, state) {
for (let i = 0; i < list.length; i++) {
if (!state.includes(item)) {
* React hook returns an array which items get asynchronously appended from a source array.
* This behavior is useful if we want to render a list of items asynchronously for performance reasons.
* @param list Source array.
* @param config Configuration object.
function useAsyncList(list, config = {
const [current, setCurrent] = (0,external_wp_element_namespaceObject.useState)([]);
(0,external_wp_element_namespaceObject.useEffect)(() => {
// On reset, we keep the first items that were previously rendered.
let firstItems = getFirstItemsPresentInState(list, current);
if (firstItems.length < step) {
firstItems = firstItems.concat(list.slice(firstItems.length, step));
const asyncQueue = (0,external_wp_priorityQueue_namespaceObject.createQueue)();
for (let i = firstItems.length; i < list.length; i += step) {
asyncQueue.add({}, () => {
(0,external_wp_element_namespaceObject.flushSync)(() => {
setCurrent(state => [...state, ...list.slice(i, i + step)]);
return () => asyncQueue.reset();
/* harmony default export */ const use_async_list = (useAsyncList);
;// CONCATENATED MODULE: ./node_modules/@wordpress/compose/build-module/hooks/use-warn-on-change/index.js
// Disable reason: Object and object are distinctly different types in TypeScript and we mean the lowercase object in thise case
// but eslint wants to force us to use `Object`. See https://stackoverflow.com/questions/49464634/difference-between-object-and-object-in-typescript
/* eslint-disable jsdoc/check-types */
* Hook that performs a shallow comparison between the preview value of an object
* and the new one, if there's a difference, it prints it to the console.
* this is useful in performance related work, to check why a component re-renders.
* function MyComponent(props) {
* useWarnOnChange(props);
* @param {object} object Object which changes to compare.
* @param {string} prefix Just a prefix to show when console logging.
function useWarnOnChange(object, prefix = 'Change detection') {
const previousValues = usePrevious(object);
Object.entries(previousValues !== null && previousValues !== void 0 ? previousValues : []).forEach(([key, value]) => {
if (value !== object[( /** @type {keyof typeof object} */key)]) {
// eslint-disable-next-line no-console
console.warn(`${prefix}: ${key} key changed:`, value, object[( /** @type {keyof typeof object} */key)]
/* eslint-enable jsdoc/check-types */);
/* harmony default export */ const use_warn_on_change = (useWarnOnChange);
;// CONCATENATED MODULE: external "React"
const external_React_namespaceObject = window["React"];
;// CONCATENATED MODULE: ./node_modules/use-memo-one/dist/use-memo-one.esm.js
function areInputsEqual(newInputs, lastInputs) {
if (newInputs.length !== lastInputs.length) {
for (var i = 0; i < newInputs.length; i++) {
if (newInputs[i] !== lastInputs[i]) {
function useMemoOne(getResult, inputs) {
var initial = (0,external_React_namespaceObject.useState)(function () {
var isFirstRun = (0,external_React_namespaceObject.useRef)(true);
var committed = (0,external_React_namespaceObject.useRef)(initial);
var useCache = isFirstRun.current || Boolean(inputs && committed.current.inputs && areInputsEqual(inputs, committed.current.inputs));
var cache = useCache ? committed.current : {
(0,external_React_namespaceObject.useEffect)(function () {
isFirstRun.current = false;
committed.current = cache;
function useCallbackOne(callback, inputs) {
return useMemoOne(function () {
var useMemo = (/* unused pure expression or super */ null && (useMemoOne));
var useCallback = (/* unused pure expression or super */ null && (useCallbackOne));
;// CONCATENATED MODULE: ./node_modules/@wordpress/compose/build-module/hooks/use-debounce/index.js
* Debounces a function similar to Lodash's `debounce`. A new debounced function will
* be returned and any scheduled calls cancelled if any of the arguments change,
* including the function to debounce, so please wrap functions created on
* render in components in `useCallback`.
* @see https://lodash.com/docs/4#debounce
* @template {(...args: any[]) => void} TFunc
* @param {TFunc} fn The function to debounce.
* @param {number} [wait] The number of milliseconds to delay.
* @param {import('../../utils/debounce').DebounceOptions} [options] The options object.
* @return {import('../../utils/debounce').DebouncedFunc<TFunc>} Debounced function.
function useDebounce(fn, wait, options) {
const debounced = useMemoOne(() => debounce(fn, wait !== null && wait !== void 0 ? wait : 0, options), [fn, wait, options]);
(0,external_wp_element_namespaceObject.useEffect)(() => () => debounced.cancel(), [debounced]);
;// CONCATENATED MODULE: ./node_modules/@wordpress/compose/build-module/hooks/use-debounced-input/index.js
* Helper hook for input fields that need to debounce the value before using it.
* @param defaultValue The default value to use.
* @return The input value, the setter and the debounced input value.
function useDebouncedInput(defaultValue = '') {
const [input, setInput] = (0,external_wp_element_namespaceObject.useState)(defaultValue);
const [debouncedInput, setDebouncedState] = (0,external_wp_element_namespaceObject.useState)(defaultValue);
const setDebouncedInput = useDebounce(setDebouncedState, 250);
(0,external_wp_element_namespaceObject.useEffect)(() => {
setDebouncedInput(input);
}, [input, setDebouncedInput]);
return [input, setInput, debouncedInput];
;// CONCATENATED MODULE: ./node_modules/@wordpress/compose/build-module/hooks/use-throttle/index.js
* Throttles a function similar to Lodash's `throttle`. A new throttled function will
* be returned and any scheduled calls cancelled if any of the arguments change,
* including the function to throttle, so please wrap functions created on
* render in components in `useCallback`.
* @see https://lodash.com/docs/4#throttle
* @template {(...args: any[]) => void} TFunc
* @param {TFunc} fn The function to throttle.
* @param {number} [wait] The number of milliseconds to throttle invocations to.
* @param {import('../../utils/throttle').ThrottleOptions} [options] The options object. See linked documentation for details.
* @return {import('../../utils/debounce').DebouncedFunc<TFunc>} Throttled function.
function useThrottle(fn, wait, options) {
const throttled = useMemoOne(() => throttle(fn, wait !== null && wait !== void 0 ? wait : 0, options), [fn, wait, options]);
(0,external_wp_element_namespaceObject.useEffect)(() => () => throttled.cancel(), [throttled]);
;// CONCATENATED MODULE: ./node_modules/@wordpress/compose/build-module/hooks/use-drop-zone/index.js
/* eslint-disable jsdoc/valid-types */
* @return {import('react').MutableRefObject<T|null>} A ref with the value.
function useFreshRef(value) {
/* eslint-enable jsdoc/valid-types */
/* eslint-disable jsdoc/no-undefined-types */
/** @type {import('react').MutableRefObject<T>} */
It is recommended that you Edit text format, this type of Fix handles quite a lot in one request
