diff --git a/package-lock.json b/package-lock.json
index b249fd1e4849e..bc8529a5b7357 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17530,7 +17530,6 @@
"@wordpress/shortcode": "file:packages/shortcode",
"@wordpress/token-list": "file:packages/token-list",
"@wordpress/url": "file:packages/url",
- "@wordpress/viewport": "file:packages/viewport",
"@wordpress/warning": "file:packages/warning",
"@wordpress/wordcount": "file:packages/wordcount",
"classnames": "^2.2.5",
@@ -18001,7 +18000,6 @@
"@wordpress/rich-text": "file:packages/rich-text",
"@wordpress/server-side-render": "file:packages/server-side-render",
"@wordpress/url": "file:packages/url",
- "@wordpress/viewport": "file:packages/viewport",
"@wordpress/wordcount": "file:packages/wordcount",
"classnames": "^2.2.5",
"lodash": "^4.17.19",
@@ -18127,6 +18125,7 @@
"@wordpress/i18n": "file:packages/i18n",
"@wordpress/icons": "file:packages/icons",
"@wordpress/plugins": "file:packages/plugins",
+ "@wordpress/viewport": "file:packages/viewport",
"classnames": "^2.2.5",
"lodash": "^4.17.19"
}
diff --git a/packages/block-editor/package.json b/packages/block-editor/package.json
index 41c4743e8bff7..09a829011d099 100644
--- a/packages/block-editor/package.json
+++ b/packages/block-editor/package.json
@@ -50,7 +50,6 @@
"@wordpress/shortcode": "file:../shortcode",
"@wordpress/token-list": "file:../token-list",
"@wordpress/url": "file:../url",
- "@wordpress/viewport": "file:../viewport",
"@wordpress/warning": "file:../warning",
"@wordpress/wordcount": "file:../wordcount",
"classnames": "^2.2.5",
diff --git a/packages/block-editor/src/index.js b/packages/block-editor/src/index.js
index 037b0f8fad5f1..f53f49e177598 100644
--- a/packages/block-editor/src/index.js
+++ b/packages/block-editor/src/index.js
@@ -3,7 +3,6 @@
*/
import '@wordpress/blocks';
import '@wordpress/rich-text';
-import '@wordpress/viewport';
import '@wordpress/keyboard-shortcuts';
import '@wordpress/notices';
diff --git a/packages/data/src/registry.js b/packages/data/src/registry.js
index fe3eb80d7efd9..2d6b055548691 100644
--- a/packages/data/src/registry.js
+++ b/packages/data/src/registry.js
@@ -80,6 +80,7 @@ export function createRegistry( storeConfigs = {}, parent = null ) {
* @return {*} The selector's returned value.
*/
function select( reducerKey ) {
+ reducerKey = String( reducerKey );
const store = stores[ reducerKey ];
if ( store ) {
return store.getSelectors();
@@ -153,6 +154,7 @@ export function createRegistry( storeConfigs = {}, parent = null ) {
* @return {*} The action's returned value.
*/
function dispatch( reducerKey ) {
+ reducerKey = String( reducerKey );
const store = stores[ reducerKey ];
if ( store ) {
return store.getActions();
@@ -222,6 +224,7 @@ export function createRegistry( storeConfigs = {}, parent = null ) {
const namespace = createNamespace( reducerKey, options, registry );
registerGenericStore( reducerKey, namespace );
+ namespace.store.toString = () => reducerKey;
return namespace.store;
};
diff --git a/packages/data/src/test/registry.js b/packages/data/src/test/registry.js
index ad4b47d308144..e7d03ea6b80c6 100644
--- a/packages/data/src/test/registry.js
+++ b/packages/data/src/test/registry.js
@@ -185,6 +185,16 @@ describe( 'createRegistry', () => {
} );
describe( 'registerStore', () => {
+ it( 'should return the reducer name for registered store', () => {
+ const store = registry.registerStore( 'butcher', {
+ reducer( state ) {
+ return state;
+ },
+ } );
+
+ expect( store.toString() ).toEqual( 'butcher' );
+ } );
+
it( 'should be shorthand for reducer, actions, selectors registration', () => {
const store = registry.registerStore( 'butcher', {
reducer( state = {}, action ) {
@@ -551,6 +561,18 @@ describe( 'createRegistry', () => {
);
} );
+ it( 'should work with the store object as param for select', () => {
+ const store = registry.registerStore( 'demo', {
+ reducer: ( state = 'OK' ) => state,
+ selectors: {
+ getValue: ( state ) => state,
+ },
+ resolvers: {},
+ } );
+
+ expect( registry.select( store ).getValue() ).toBe( 'OK' );
+ } );
+
it( 'should run the registry selector from a non-registry selector', () => {
const selector1 = () => 'result1';
const selector2 = createRegistrySelector( ( select ) => () =>
@@ -680,6 +702,26 @@ describe( 'createRegistry', () => {
registry.dispatch( 'counter' ).increment( 4 ); // state = 5
expect( store.getState() ).toBe( 5 );
} );
+
+ it( 'should work with the store object as param for dispatch', async () => {
+ const store = registry.registerStore( 'demo', {
+ reducer( state = 'OK', action ) {
+ if ( action.type === 'UPDATE' ) {
+ return 'UPDATED';
+ }
+ return state;
+ },
+ actions: {
+ update() {
+ return { type: 'UPDATE' };
+ },
+ },
+ } );
+
+ expect( store.getState() ).toBe( 'OK' );
+ await registry.dispatch( store ).update();
+ expect( store.getState() ).toBe( 'UPDATED' );
+ } );
} );
describe( 'use', () => {
diff --git a/packages/edit-post/src/index.js b/packages/edit-post/src/index.js
index a83aeb241d4b4..0e0f3d8399a09 100644
--- a/packages/edit-post/src/index.js
+++ b/packages/edit-post/src/index.js
@@ -6,7 +6,6 @@ import '@wordpress/block-editor';
import '@wordpress/editor';
import '@wordpress/keyboard-shortcuts';
import '@wordpress/reusable-blocks';
-import '@wordpress/viewport';
import '@wordpress/notices';
import {
registerCoreBlocks,
diff --git a/packages/edit-post/src/index.native.js b/packages/edit-post/src/index.native.js
index 93502e3701d09..6d09caa3d8309 100644
--- a/packages/edit-post/src/index.native.js
+++ b/packages/edit-post/src/index.native.js
@@ -2,7 +2,6 @@
* WordPress dependencies
*/
import '@wordpress/core-data';
-import '@wordpress/viewport';
import '@wordpress/notices';
import '@wordpress/format-library';
import '@wordpress/reusable-blocks';
diff --git a/packages/editor/package.json b/packages/editor/package.json
index e96ece9a91e3d..e4fc879bb8b7f 100644
--- a/packages/editor/package.json
+++ b/packages/editor/package.json
@@ -54,7 +54,6 @@
"@wordpress/rich-text": "file:../rich-text",
"@wordpress/server-side-render": "file:../server-side-render",
"@wordpress/url": "file:../url",
- "@wordpress/viewport": "file:../viewport",
"@wordpress/wordcount": "file:../wordcount",
"classnames": "^2.2.5",
"lodash": "^4.17.19",
diff --git a/packages/editor/src/index.js b/packages/editor/src/index.js
index 5e119148adb1d..f1b60b8841e7d 100644
--- a/packages/editor/src/index.js
+++ b/packages/editor/src/index.js
@@ -8,7 +8,6 @@ import '@wordpress/keyboard-shortcuts';
import '@wordpress/notices';
import '@wordpress/reusable-blocks';
import '@wordpress/rich-text';
-import '@wordpress/viewport';
/**
* Internal dependencies
diff --git a/packages/interface/package.json b/packages/interface/package.json
index 11a950f25e603..168899703de13 100644
--- a/packages/interface/package.json
+++ b/packages/interface/package.json
@@ -35,6 +35,7 @@
"@wordpress/i18n": "file:../i18n",
"@wordpress/icons": "file:../icons",
"@wordpress/plugins": "file:../plugins",
+ "@wordpress/viewport": "file:../viewport",
"classnames": "^2.2.5",
"lodash": "^4.17.19"
},
diff --git a/packages/interface/src/components/complementary-area/index.js b/packages/interface/src/components/complementary-area/index.js
index 83520dd3c0df9..fbacd4796cb96 100644
--- a/packages/interface/src/components/complementary-area/index.js
+++ b/packages/interface/src/components/complementary-area/index.js
@@ -11,6 +11,7 @@ import { useDispatch, useSelect } from '@wordpress/data';
import { __ } from '@wordpress/i18n';
import { check, starEmpty, starFilled } from '@wordpress/icons';
import { useEffect, useRef } from '@wordpress/element';
+import { viewportStore } from '@wordpress/viewport';
/**
* Internal dependencies
@@ -106,10 +107,8 @@ function ComplementaryArea( {
isActive: _activeArea === identifier,
isPinned: isItemPinned( scope, identifier ),
activeArea: _activeArea,
- isSmall: select( 'core/viewport' ).isViewportMatch(
- '< medium'
- ),
- isLarge: select( 'core/viewport' ).isViewportMatch( 'large' ),
+ isSmall: select( viewportStore ).isViewportMatch( '< medium' ),
+ isLarge: select( viewportStore ).isViewportMatch( 'large' ),
};
},
[ identifier, scope ]
diff --git a/packages/viewport/README.md b/packages/viewport/README.md
index 320f46daf8d43..1308bf64f5e9d 100644
--- a/packages/viewport/README.md
+++ b/packages/viewport/README.md
@@ -76,6 +76,10 @@ _Returns_
- `Function`: Higher-order component.
+# **viewportStore**
+
+Undocumented declaration.
+
# **withViewportMatch**
Higher-order component creator, creating a new component which renders with
diff --git a/packages/viewport/src/index.js b/packages/viewport/src/index.js
index b2faa96756948..0885bbafdbd8c 100644
--- a/packages/viewport/src/index.js
+++ b/packages/viewport/src/index.js
@@ -1,9 +1,9 @@
/**
* Internal dependencies
*/
-import './store';
import addDimensionsEventListener from './listener';
+export { default as viewportStore } from './store';
export { default as ifViewportMatches } from './if-viewport-matches';
export { default as withViewportMatch } from './with-viewport-match';
diff --git a/packages/viewport/src/listener.js b/packages/viewport/src/listener.js
index 4d81e15cc3f31..f7f6d3f5cc8e7 100644
--- a/packages/viewport/src/listener.js
+++ b/packages/viewport/src/listener.js
@@ -8,6 +8,11 @@ import { reduce, forEach, debounce, mapValues } from 'lodash';
*/
import { dispatch } from '@wordpress/data';
+/**
+ * Internal dependencies
+ */
+import viewportStore from './store';
+
const addDimensionsEventListener = ( breakpoints, operators ) => {
/**
* Callback invoked when media query state should be updated. Is invoked a
@@ -16,7 +21,7 @@ const addDimensionsEventListener = ( breakpoints, operators ) => {
const setIsMatching = debounce(
() => {
const values = mapValues( queries, ( query ) => query.matches );
- dispatch( 'core/viewport' ).setIsMatching( values );
+ dispatch( viewportStore ).setIsMatching( values );
},
{ leading: true }
);
diff --git a/packages/viewport/src/listener.native.js b/packages/viewport/src/listener.native.js
index 064ffbb81505d..85bd620fafd56 100644
--- a/packages/viewport/src/listener.native.js
+++ b/packages/viewport/src/listener.native.js
@@ -9,6 +9,11 @@ import { Dimensions } from 'react-native';
*/
import { dispatch } from '@wordpress/data';
+/**
+ * Internal dependencies
+ */
+import viewportStore from './store';
+
const matchWidth = ( operator, breakpoint ) => {
const { width } = Dimensions.get( 'window' );
if ( operator === 'max-width' ) {
@@ -34,7 +39,7 @@ const addDimensionsEventListener = ( breakpoints, operators ) => {
{}
);
- dispatch( 'core/viewport' ).setIsMatching( matches );
+ dispatch( viewportStore ).setIsMatching( matches );
};
Dimensions.addEventListener( 'change', setIsMatching );
diff --git a/packages/viewport/src/with-viewport-match.native.js b/packages/viewport/src/with-viewport-match.native.js
index 983aa22e365f8..c9652d240f147 100644
--- a/packages/viewport/src/with-viewport-match.native.js
+++ b/packages/viewport/src/with-viewport-match.native.js
@@ -9,6 +9,11 @@ import { mapValues } from 'lodash';
import { createHigherOrderComponent } from '@wordpress/compose';
import { withSelect } from '@wordpress/data';
+/**
+ * Internal dependencies
+ */
+import viewportStore from './store';
+
/**
* Higher-order component creator, creating a new component which renders with
* the given prop names, where the value passed to the underlying component is
@@ -36,7 +41,7 @@ const withViewportMatch = ( queries ) =>
createHigherOrderComponent(
withSelect( ( select ) => {
return mapValues( queries, ( query ) => {
- return select( 'core/viewport' ).isViewportMatch( query );
+ return select( viewportStore ).isViewportMatch( query );
} );
} ),
'withViewportMatch'