Skip to content

Commit 920b8f0

Browse files
nerradnerrad
authored
Refactor: move core/edit-post INIT effect to use action-generators and controls (#14740)
* move constants into constants file * move init effect into action-generators and controls * add tests for new functionality * update docs build * update changelog * clarify controls/actions that are experimental/unstable This leaves room for future refactors that could eliminate these. * fix reference for version in changelog * move dispatch of initialize action to initializeEditor execution * add js docs for constants * doc change * Add flag for triggering initial invoking of listener props @aduth * eliminate ADJUST_SIDEBAR control and move logic into action * update tests * update docs
1 parent 77b8234 commit 920b8f0

10 files changed

Lines changed: 335 additions & 78 deletions

File tree

‎packages/edit-post/CHANGELOG.md‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
1-
## V.V.V (Unreleased)
1+
## Master
22

33
### New Features
44

55
- Implement the `addToGallery` option in the `MediaUpload` hook. The option allows users to open the media modal in the `gallery-library`instead of `gallery-edit` state.
66

7+
### Refactor
8+
9+
- convert `INIT` effect to controls & actions [#14740](https://github.com/WordPress/gutenberg/pull/14740)
10+
711

812
## 3.2.0 (2019-03-06)
913

‎packages/edit-post/src/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,7 @@ export function initializeEditor( id, postType, postId, settings, initialEdits )
7676
console.warn( "Your browser is using Quirks Mode. \nThis can cause rendering issues such as blocks overlaying meta boxes in the editor. Quirks Mode can be triggered by PHP errors or HTML code appearing before the opening <!DOCTYPE html>. Try checking the raw page source or your site's PHP error log and resolving errors there, removing any HTML before the doctype, or disabling plugins." );
7777
}
7878

79+
dispatch( 'core/edit-post' ).__unstableInitialize();
7980
dispatch( 'core/nux' ).triggerGuide( [
8081
'core/editor.inserter',
8182
'core/editor.settings',

‎packages/edit-post/src/store/actions.js‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,13 @@
33
*/
44
import { castArray } from 'lodash';
55

6+
/**
7+
* Internal dependencies
8+
*/
9+
import { __unstableSubscribe } from './controls';
10+
import { onChangeListener } from './utils';
11+
import { STORE_KEY, VIEW_AS_LINK_SELECTOR } from './constants';
12+
613
/**
714
* Returns an action object used in signalling that the user opened an editor sidebar.
815
*
@@ -232,3 +239,74 @@ export function metaBoxUpdatesSuccess() {
232239
};
233240
}
234241

242+
/**
243+
* Returns an action generator used to initialize some subscriptions for the
244+
* post editor:
245+
*
246+
* - subscription for toggling the `edit-post/block` general sidebar when a
247+
* block is selected.
248+
* - subscription for hiding/showing the sidebar depending on size of viewport.
249+
* - subscription for updating the "View Post" link in the admin bar when
250+
* permalink is updated.
251+
*/
252+
export function* __unstableInitialize() {
253+
// Select the block settings tab when the selected block changes
254+
yield __unstableSubscribe( ( registry ) => onChangeListener(
255+
() => !! registry.select( 'core/block-editor' )
256+
.getBlockSelectionStart(),
257+
( hasBlockSelection ) => {
258+
if ( ! registry.select( 'core/edit-post' ).isEditorSidebarOpened() ) {
259+
return;
260+
}
261+
if ( hasBlockSelection ) {
262+
registry.dispatch( STORE_KEY )
263+
.openGeneralSidebar( 'edit-post/block' );
264+
} else {
265+
registry.dispatch( STORE_KEY )
266+
.openGeneralSidebar( 'edit-post/document' );
267+
}
268+
}
269+
) );
270+
// hide/show the sidebar depending on size of viewport.
271+
yield __unstableSubscribe( ( registry ) => onChangeListener(
272+
() => registry.select( 'core/viewport' )
273+
.isViewportMatch( '< medium' ),
274+
( () => {
275+
let sidebarToReOpenOnExpand = null;
276+
return ( isSmall ) => {
277+
const { getActiveGeneralSidebarName } = registry.select( STORE_KEY );
278+
const {
279+
closeGeneralSidebar: closeSidebar,
280+
openGeneralSidebar: openSidebar,
281+
} = registry.dispatch( STORE_KEY );
282+
if ( isSmall ) {
283+
sidebarToReOpenOnExpand = getActiveGeneralSidebarName();
284+
if ( sidebarToReOpenOnExpand ) {
285+
closeSidebar();
286+
}
287+
} else if (
288+
sidebarToReOpenOnExpand &&
289+
! getActiveGeneralSidebarName()
290+
) {
291+
openSidebar( sidebarToReOpenOnExpand );
292+
}
293+
};
294+
} )(),
295+
true
296+
) );
297+
// Update View Post link in the admin bar when permalink is updated.
298+
yield __unstableSubscribe( ( registry ) => onChangeListener(
299+
() => registry.select( 'core/editor' ).getCurrentPost().link,
300+
( newPermalink ) => {
301+
if ( ! newPermalink ) {
302+
return;
303+
}
304+
const nodeToUpdate = document.querySelector( VIEW_AS_LINK_SELECTOR );
305+
if ( ! nodeToUpdate ) {
306+
return;
307+
}
308+
nodeToUpdate.setAttribute( 'href', newPermalink );
309+
}
310+
) );
311+
}
312+

‎packages/edit-post/src/store/constants.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
/**
2+
* The identifier for the data store.
3+
* @type {string}
4+
*/
5+
export const STORE_KEY = 'core/edit-post';
6+
7+
/**
8+
* CSS selector string for the admin bar view post link anchor tag.
9+
* @type {string}
10+
*/
11+
export const VIEW_AS_LINK_SELECTOR = '#wp-admin-bar-view a';

‎packages/edit-post/src/store/controls.js‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
/**
2+
* WordPress dependencies
3+
*/
4+
import { createRegistryControl } from '@wordpress/data';
5+
6+
/**
7+
* Calls a selector using the current state.
8+
*
9+
* @param {string} storeName Store name.
10+
* @param {string} selectorName Selector name.
11+
* @param {Array} args Selector arguments.
12+
*
13+
* @return {Object} control descriptor.
14+
*/
15+
export function select( storeName, selectorName, ...args ) {
16+
return {
17+
type: 'SELECT',
18+
storeName,
19+
selectorName,
20+
args,
21+
};
22+
}
23+
24+
/**
25+
* Calls a subscriber using the current state.
26+
*
27+
* @param {function} listenerCallback A callback for the subscriber that
28+
* receives the registry.
29+
* @return {Object} control descriptor.
30+
*/
31+
export function __unstableSubscribe( listenerCallback ) {
32+
return { type: 'SUBSCRIBE', listenerCallback };
33+
}
34+
35+
const controls = {
36+
SELECT: createRegistryControl(
37+
( registry ) => ( { storeName, selectorName, args } ) => {
38+
return registry.select( storeName )[ selectorName ]( ...args );
39+
}
40+
),
41+
SUBSCRIBE: createRegistryControl(
42+
( registry ) => ( { listenerCallback } ) => {
43+
return registry.subscribe( listenerCallback( registry ) );
44+
}
45+
),
46+
};
47+
48+
export default controls;

‎packages/edit-post/src/store/effects.js‎

Lines changed: 2 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -14,20 +14,9 @@ import apiFetch from '@wordpress/api-fetch';
1414
/**
1515
* Internal dependencies
1616
*/
17-
import {
18-
metaBoxUpdatesSuccess,
19-
requestMetaBoxUpdates,
20-
openGeneralSidebar,
21-
closeGeneralSidebar,
22-
} from './actions';
23-
import {
24-
getActiveMetaBoxLocations,
25-
getActiveGeneralSidebarName,
26-
} from './selectors';
17+
import { metaBoxUpdatesSuccess, requestMetaBoxUpdates } from './actions';
18+
import { getActiveMetaBoxLocations } from './selectors';
2719
import { getMetaBoxContainer } from '../utils/meta-boxes';
28-
import { onChangeListener } from './utils';
29-
30-
const VIEW_AS_LINK_SELECTOR = '#wp-admin-bar-view a';
3120

3221
const effects = {
3322
SET_META_BOXES_PER_LOCATIONS( action, store ) {
@@ -126,66 +115,6 @@ const effects = {
126115
const message = action.mode === 'visual' ? __( 'Visual editor selected' ) : __( 'Code editor selected' );
127116
speak( message, 'assertive' );
128117
},
129-
INIT( _, store ) {
130-
// Select the block settings tab when the selected block changes
131-
subscribe( onChangeListener(
132-
() => !! select( 'core/block-editor' ).getBlockSelectionStart(),
133-
( hasBlockSelection ) => {
134-
if ( ! select( 'core/edit-post' ).isEditorSidebarOpened() ) {
135-
return;
136-
}
137-
if ( hasBlockSelection ) {
138-
store.dispatch( openGeneralSidebar( 'edit-post/block' ) );
139-
} else {
140-
store.dispatch( openGeneralSidebar( 'edit-post/document' ) );
141-
}
142-
} )
143-
);
144-
145-
const isMobileViewPort = () => select( 'core/viewport' ).isViewportMatch( '< medium' );
146-
const adjustSidebar = ( () => {
147-
// contains the sidebar we close when going to viewport sizes lower than medium.
148-
// This allows to reopen it when going again to viewport sizes greater than medium.
149-
let sidebarToReOpenOnExpand = null;
150-
return ( isSmall ) => {
151-
if ( isSmall ) {
152-
sidebarToReOpenOnExpand = getActiveGeneralSidebarName( store.getState() );
153-
if ( sidebarToReOpenOnExpand ) {
154-
store.dispatch( closeGeneralSidebar() );
155-
}
156-
} else if ( sidebarToReOpenOnExpand && ! getActiveGeneralSidebarName( store.getState() ) ) {
157-
store.dispatch( openGeneralSidebar( sidebarToReOpenOnExpand ) );
158-
}
159-
};
160-
} )();
161-
162-
adjustSidebar( isMobileViewPort() );
163-
164-
// Collapse sidebar when viewport shrinks.
165-
// Reopen sidebar it if viewport expands and it was closed because of a previous shrink.
166-
subscribe( onChangeListener( isMobileViewPort, adjustSidebar ) );
167-
168-
// Update View as link when currentPost link changes
169-
const updateViewAsLink = ( newPermalink ) => {
170-
if ( ! newPermalink ) {
171-
return;
172-
}
173-
174-
const nodeToUpdate = document.querySelector(
175-
VIEW_AS_LINK_SELECTOR
176-
);
177-
if ( ! nodeToUpdate ) {
178-
return;
179-
}
180-
nodeToUpdate.setAttribute( 'href', newPermalink );
181-
};
182-
183-
subscribe( onChangeListener(
184-
() => select( 'core/editor' ).getCurrentPost().link,
185-
updateViewAsLink
186-
) );
187-
},
188-
189118
};
190119

191120
export default effects;

‎packages/edit-post/src/store/index.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,17 @@ import reducer from './reducer';
1010
import applyMiddlewares from './middlewares';
1111
import * as actions from './actions';
1212
import * as selectors from './selectors';
13+
import controls from './controls';
14+
import { STORE_KEY } from './constants';
1315

14-
const store = registerStore( 'core/edit-post', {
16+
const store = registerStore( STORE_KEY, {
1517
reducer,
1618
actions,
1719
selectors,
20+
controls,
1821
persist: [ 'preferences' ],
1922
} );
2023

2124
applyMiddlewares( store );
22-
store.dispatch( { type: 'INIT' } );
2325

2426
export default store;

‎packages/edit-post/src/store/index.native.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,9 @@ import reducer from './reducer';
1010
import applyMiddlewares from './middlewares';
1111
import * as actions from './actions';
1212
import * as selectors from './selectors';
13+
import { STORE_KEY } from './constants';
1314

14-
const store = registerStore( 'core/edit-post', {
15+
const store = registerStore( STORE_KEY, {
1516
reducer,
1617
actions,
1718
selectors,

0 commit comments

Comments
 (0)