: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in
/** @typedef {import('../../types').MapSelect} MapSelect */
* @typedef {import('../../types').UseSelectReturn<T>} UseSelectReturn
* @template {MapSelect|StoreDescriptor<any>} T
function Store(registry, suspense) {
const select = suspense ? registry.suspendSelect : registry.select;
let lastMapResultValid = false;
let didWarnUnstableReference;
const storeStatesOnMount = new Map();
function getStoreState(name) {
var _registry$stores$name;
// If there's no store property (custom generic store), return an empty
// object. When comparing the state, the empty objects will cause the
// equality check to fail, setting `lastMapResultValid` to false.
return (_registry$stores$name = registry.stores[name]?.store?.getState?.()) !== null && _registry$stores$name !== void 0 ? _registry$stores$name : {};
const createSubscriber = stores => {
// The set of stores the `subscribe` function is supposed to subscribe to. Here it is
// initialized, and then the `updateStores` function can add new stores to it.
const activeStores = [...stores];
// The `subscribe` function, which is passed to the `useSyncExternalStore` hook, could
// be called multiple times to establish multiple subscriptions. That's why we need to
// keep a set of active subscriptions;
const activeSubscriptions = new Set();
function subscribe(listener) {
// Maybe invalidate the value right after subscription was created.
// React will call `getValue` after subscribing, to detect store
// updates that happened in the interval between the `getValue` call
// during render and creating the subscription, which is slightly
// delayed. We need to ensure that this second `getValue` call will
// compute a fresh value only if any of the store states have
// changed in the meantime.
if (lastMapResultValid) {
for (const name of activeStores) {
if (storeStatesOnMount.get(name) !== getStoreState(name)) {
lastMapResultValid = false;
storeStatesOnMount.clear();
const onStoreChange = () => {
// Invalidate the value on store update, so that a fresh value is computed.
lastMapResultValid = false;
renderQueue.add(queueContext, onStoreChange);
function subscribeStore(storeName) {
unsubs.push(registry.subscribe(onChange, storeName));
for (const storeName of activeStores) {
subscribeStore(storeName);
activeSubscriptions.add(subscribeStore);
activeSubscriptions.delete(subscribeStore);
for (const unsub of unsubs.values()) {
// The return value of the subscribe function could be undefined if the store is a custom generic store.
// Cancel existing store updates that were already scheduled.
renderQueue.cancel(queueContext);
// Check if `newStores` contains some stores we're not subscribed to yet, and add them.
function updateStores(newStores) {
for (const newStore of newStores) {
if (activeStores.includes(newStore)) {
// New `subscribe` calls will subscribe to `newStore`, too.
activeStores.push(newStore);
// Add `newStore` to existing subscriptions.
for (const subscription of activeSubscriptions) {
return (mapSelect, isAsync) => {
// If the last value is valid, and the `mapSelect` callback hasn't changed,
// then we can safely return the cached value. The value can change only on
// store update, and in that case value will be invalidated by the listener.
if (lastMapResultValid && mapSelect === lastMapSelect) {
const listeningStores = {
const mapResult = registry.__unstableMarkListeningStores(() => mapSelect(select, registry), listeningStores);
for (const name of listeningStores.current) {
storeStatesOnMount.set(name, getStoreState(name));
subscriber = createSubscriber(listeningStores.current);
subscriber.updateStores(listeningStores.current);
// If the new value is shallow-equal to the old one, keep the old one so
// that we don't trigger unwanted updates that do a `===` check.
if (!external_wp_isShallowEqual_default()(lastMapResult, mapResult)) {
lastMapResult = mapResult;
lastMapSelect = mapSelect;
lastMapResultValid = true;
// Update the value in case it's been invalidated or `mapSelect` has changed.
// When transitioning from async to sync mode, cancel existing store updates
// that have been scheduled, and invalidate the value so that it's freshly
// computed. It might have been changed by the update we just cancelled.
if (lastIsAsync && !isAsync) {
lastMapResultValid = false;
renderQueue.cancel(queueContext);
// Return a pair of functions that can be passed to `useSyncExternalStore`.
subscribe: subscriber.subscribe,
function useStaticSelect(storeName) {
return useRegistry().select(storeName);
function useMappingSelect(suspense, mapSelect, deps) {
const registry = useRegistry();
const isAsync = useAsyncMode();
const store = (0,external_wp_element_namespaceObject.useMemo)(() => Store(registry, suspense), [registry, suspense]);
// These are "pass-through" dependencies from the parent hook,
// and the parent should catch any hook rule violations.
// eslint-disable-next-line react-hooks/exhaustive-deps
const selector = (0,external_wp_element_namespaceObject.useCallback)(mapSelect, deps);
} = store(selector, isAsync);
const result = (0,external_wp_element_namespaceObject.useSyncExternalStore)(subscribe, getValue, getValue);
(0,external_wp_element_namespaceObject.useDebugValue)(result);
* Custom react hook for retrieving props from registered selectors.
* In general, this custom React hook follows the
* [rules of hooks](https://reactjs.org/docs/hooks-rules.html).
* @template {MapSelect | StoreDescriptor<any>} T
* @param {T} mapSelect Function called on every state change. The returned value is
* exposed to the component implementing this hook. The function
* receives the `registry.select` method on the first argument
* and the `registry` on the second argument.
* When a store key is passed, all selectors for the store will be
* returned. This is only meant for usage of these selectors in event
* callbacks, not for data needed to create the element tree.
* @param {unknown[]} deps If provided, this memoizes the mapSelect so the same `mapSelect` is
* invoked on every state change unless the dependencies change.
* import { useSelect } from '@wordpress/data';
* import { store as myCustomStore } from 'my-custom-store';
* function HammerPriceDisplay( { currency } ) {
* const price = useSelect( ( select ) => {
* return select( myCustomStore ).getPrice( 'hammer', currency );
* return new Intl.NumberFormat( 'en-US', {
* // Rendered in the application:
* // <HammerPriceDisplay currency="USD" />
* In the above example, when `HammerPriceDisplay` is rendered into an
* application, the price will be retrieved from the store state using the
* `mapSelect` callback on `useSelect`. If the currency prop changes then
* any price in the state for that currency is retrieved. If the currency prop
* doesn't change and other props are passed in that do change, the price will
* not change because the dependency is just the currency.
* When data is only used in an event callback, the data should not be retrieved
* on render, so it may be useful to get the selectors function instead.
* **Don't use `useSelect` this way when calling the selectors in the render
* function because your component won't re-render on a data change.**
* import { useSelect } from '@wordpress/data';
* import { store as myCustomStore } from 'my-custom-store';
* function Paste( { children } ) {
* const { getSettings } = useSelect( myCustomStore );
* // Do something with the settings.
* const settings = getSettings();
* return <div onPaste={ onPaste }>{ children }</div>;
* @return {UseSelectReturn<T>} A custom react hook.
function useSelect(mapSelect, deps) {
// On initial call, on mount, determine the mode of this `useSelect` call
// and then never allow it to change on subsequent updates.
const staticSelectMode = typeof mapSelect !== 'function';
const staticSelectModeRef = (0,external_wp_element_namespaceObject.useRef)(staticSelectMode);
if (staticSelectMode !== staticSelectModeRef.current) {
const prevMode = staticSelectModeRef.current ? 'static' : 'mapping';
const nextMode = staticSelectMode ? 'static' : 'mapping';
throw new Error(`Switching useSelect from ${prevMode} to ${nextMode} is not allowed`);
/* eslint-disable react-hooks/rules-of-hooks */
// `staticSelectMode` is not allowed to change during the hook instance's,
// lifetime, so the rules of hooks are not really violated.
return staticSelectMode ? useStaticSelect(mapSelect) : useMappingSelect(false, mapSelect, deps);
/* eslint-enable react-hooks/rules-of-hooks */
* A variant of the `useSelect` hook that has the same API, but is a compatible
* Suspense-enabled data source.
* @template {MapSelect} T
* @param {T} mapSelect Function called on every state change. The
* returned value is exposed to the component
* using this hook. The function receives the
* `registry.suspendSelect` method as the first
* argument and the `registry` as the second one.
* @param {Array} deps A dependency array used to memoize the `mapSelect`
* so that the same `mapSelect` is invoked on every
* state change unless the dependencies change.
* @throws {Promise} A suspense Promise that is thrown if any of the called
* selectors is in an unresolved state.
* @return {ReturnType<T>} Data object returned by the `mapSelect` function.
function useSuspenseSelect(mapSelect, deps) {
return useMappingSelect(true, mapSelect, deps);
;// CONCATENATED MODULE: external "ReactJSXRuntime"
const external_ReactJSXRuntime_namespaceObject = window["ReactJSXRuntime"];
;// CONCATENATED MODULE: ./node_modules/@wordpress/data/build-module/components/with-select/index.js
/** @typedef {import('react').ComponentType} ComponentType */
* Higher-order component used to inject state-derived props using registered
* @param {Function} mapSelectToProps Function called on every state change,
* expected to return object of props to
* merge with the component's own props.
* import { withSelect } from '@wordpress/data';
* import { store as myCustomStore } from 'my-custom-store';
* function PriceDisplay( { price, currency } ) {
* return new Intl.NumberFormat( 'en-US', {
* const HammerPriceDisplay = withSelect( ( select, ownProps ) => {
* const { getPrice } = select( myCustomStore );
* const { currency } = ownProps;
* price: getPrice( 'hammer', currency ),
* // Rendered in the application:
* // <HammerPriceDisplay currency="USD" />
* In the above example, when `HammerPriceDisplay` is rendered into an
* application, it will pass the price into the underlying `PriceDisplay`
* component and update automatically if the price of a hammer ever changes in
* @return {ComponentType} Enhanced component with merged state data props.
const withSelect = mapSelectToProps => (0,external_wp_compose_namespaceObject.createHigherOrderComponent)(WrappedComponent => (0,external_wp_compose_namespaceObject.pure)(ownProps => {
const mapSelect = (select, registry) => mapSelectToProps(select, ownProps, registry);
const mergeProps = useSelect(mapSelect);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(WrappedComponent, {
/* harmony default export */ const with_select = (withSelect);
;// CONCATENATED MODULE: ./node_modules/@wordpress/data/build-module/components/use-dispatch/use-dispatch-with-map.js
* Custom react hook for returning aggregate dispatch actions using the provided
* Currently this is an internal api only and is implemented by `withDispatch`
* @param {Function} dispatchMap Receives the `registry.dispatch` function as
* the first argument and the `registry` object
* as the second argument. Should return an
* object mapping props to functions.
* @param {Array} deps An array of dependencies for the hook.
* @return {Object} An object mapping props to functions created by the passed
const useDispatchWithMap = (dispatchMap, deps) => {
const registry = useRegistry();
const currentDispatchMap = (0,external_wp_element_namespaceObject.useRef)(dispatchMap);
(0,external_wp_compose_namespaceObject.useIsomorphicLayoutEffect)(() => {
currentDispatchMap.current = dispatchMap;
return (0,external_wp_element_namespaceObject.useMemo)(() => {
const currentDispatchProps = currentDispatchMap.current(registry.dispatch, registry);
return Object.fromEntries(Object.entries(currentDispatchProps).map(([propName, dispatcher]) => {
if (typeof dispatcher !== 'function') {
// eslint-disable-next-line no-console
console.warn(`Property ${propName} returned from dispatchMap in useDispatchWithMap must be a function.`);
return [propName, (...args) => currentDispatchMap.current(registry.dispatch, registry)[propName](...args)];
/* harmony default export */ const use_dispatch_with_map = (useDispatchWithMap);
;// CONCATENATED MODULE: ./node_modules/@wordpress/data/build-module/components/with-dispatch/index.js
/** @typedef {import('react').ComponentType} ComponentType */
* Higher-order component used to add dispatch props using registered action
* @param {Function} mapDispatchToProps A function of returning an object of
* prop names where value is a
* dispatch-bound action creator, or a
* function to be called with the
* component's props and returning an
* function Button( { onClick, children } ) {
* return <button type="button" onClick={ onClick }>{ children }</button>;
* import { withDispatch } from '@wordpress/data';
* import { store as myCustomStore } from 'my-custom-store';
* const SaleButton = withDispatch( ( dispatch, ownProps ) => {
* const { startSale } = dispatch( myCustomStore );
* const { discountPercent } = ownProps;
* startSale( discountPercent );
* // Rendered in the application:
* // <SaleButton discountPercent="20">Start Sale!</SaleButton>
* In the majority of cases, it will be sufficient to use only two first params
* passed to `mapDispatchToProps` as illustrated in the previous example.
* However, there might be some very advanced use cases where using the
* `registry` object might be used as a tool to optimize the performance of
* your component. Using `select` function from the registry might be useful
* when you need to fetch some dynamic data from the store at the time when the
* event is fired, but at the same time, you never use it to render your
* component. In such scenario, you can avoid using the `withSelect` higher
* order component to compute such prop, which might lead to unnecessary
* re-renders of your component caused by its frequent value change.
* Keep in mind, that `mapDispatchToProps` must return an object with functions
* function Button( { onClick, children } ) {
* return <button type="button" onClick={ onClick }>{ children }</button>;
* import { withDispatch } from '@wordpress/data';
* import { store as myCustomStore } from 'my-custom-store';
* const SaleButton = withDispatch( ( dispatch, ownProps, { select } ) => {
* // Stock number changes frequently.
* const { getStockNumber } = select( myCustomStore );
* const { startSale } = dispatch( myCustomStore );
* const discountPercent = getStockNumber() > 50 ? 10 : 20;
* startSale( discountPercent );
* // Rendered in the application:
* // <SaleButton>Start Sale!</SaleButton>
* _Note:_ It is important that the `mapDispatchToProps` function always
* returns an object with the same keys. For example, it should not contain
* conditions under which a different value would be returned.
* @return {ComponentType} Enhanced component with merged dispatcher props.
const withDispatch = mapDispatchToProps => (0,external_wp_compose_namespaceObject.createHigherOrderComponent)(WrappedComponent => ownProps => {
const mapDispatch = (dispatch, registry) => mapDispatchToProps(dispatch, ownProps, registry);
const dispatchProps = use_dispatch_with_map(mapDispatch, []);
return /*#__PURE__*/(0,external_ReactJSXRuntime_namespaceObject.jsx)(WrappedComponent, {
/* harmony default export */ const with_dispatch = (withDispatch);
;// CONCATENATED MODULE: ./node_modules/@wordpress/data/build-module/components/with-registry/index.js
It is recommended that you Edit text format, this type of Fix handles quite a lot in one request
