Skip to content

Commit

Permalink
[Edit Post]: Migrate store actions to thunks (#36551)
Browse files Browse the repository at this point in the history 
* [Edit Post]: Migrate store actions to thunks

* fix dispatch call

* add first tests

* add more tests

* Fixup package-lock.json

* Add api-fetch as dependency

* part of review feedback

* update test check

* dispatch META_BOXES_INITIALIZED

* remove `return`

Co-authored-by: Jarda Snajdr <jsnajdr@gmail.com>
  • Loading branch information
@ntsekouras @jsnajdr
ntsekouras and jsnajdr authored Feb 15, 2022
1 parent 73a09c9 commit 8d5cf87
Show file tree
Hide file tree
Showing 6 changed files with 196 additions and 223 deletions.
2 changes: 1 addition & 1 deletion docs/reference-guides/data/data-core-edit-post.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -426,7 +426,7 @@ _Returns_

### requestMetaBoxUpdates

Returns an action object used to request meta box update.
Update a metabox.

### setAvailableMetaBoxesPerLocation

Expand Down
2 changes: 1 addition & 1 deletion package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion packages/edit-post/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,14 +28,14 @@
"dependencies": {
"@babel/runtime": "^7.16.0",
"@wordpress/a11y": "file:../a11y",
"@wordpress/api-fetch": "file:../api-fetch",
"@wordpress/block-editor": "file:../block-editor",
"@wordpress/block-library": "file:../block-library",
"@wordpress/blocks": "file:../blocks",
"@wordpress/components": "file:../components",
"@wordpress/compose": "file:../compose",
"@wordpress/core-data": "file:../core-data",
"@wordpress/data": "file:../data",
"@wordpress/data-controls": "file:../data-controls",
"@wordpress/editor": "file:../editor",
"@wordpress/element": "file:../element",
"@wordpress/hooks": "file:../hooks",
Expand Down
206 changes: 85 additions & 121 deletions packages/edit-post/src/store/actions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,9 @@ import { castArray, reduce } from 'lodash';
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { apiFetch } from '@wordpress/data-controls';
import { store as interfaceStore } from '@wordpress/interface';
import { controls, select, subscribe, dispatch } from '@wordpress/data';
import apiFetch from '@wordpress/api-fetch';
import { speak } from '@wordpress/a11y';
import { store as interfaceStore } from '@wordpress/interface';
import { store as noticesStore } from '@wordpress/notices';
import { store as coreStore } from '@wordpress/core-data';
import { store as blockEditorStore } from '@wordpress/block-editor';
Expand All @@ -21,34 +20,24 @@ import { store as editorStore } from '@wordpress/editor';
*/
import { getMetaBoxContainer } from '../utils/meta-boxes';
import { store as editPostStore } from '.';

/**
* Returns an action object used in signalling that the user opened an editor sidebar.
*
* @param {?string} name Sidebar name to be opened.
*
* @yield {Object} Action object.
*/
export function* openGeneralSidebar( name ) {
yield controls.dispatch(
interfaceStore,
'enableComplementaryArea',
editPostStore.name,
name
);
}
export const openGeneralSidebar = ( name ) => ( { registry } ) =>
registry
.dispatch( interfaceStore )
.enableComplementaryArea( editPostStore.name, name );

/**
* Returns an action object signalling that the user closed the sidebar.
*
* @yield {Object} Action object.
*/
export function* closeGeneralSidebar() {
yield controls.dispatch(
interfaceStore,
'disableComplementaryArea',
editPostStore.name
);
}
export const closeGeneralSidebar = () => ( { registry } ) =>
registry
.dispatch( interfaceStore )
.disableComplementaryArea( editPostStore.name );

/**
* Returns an action object used in signalling that the user opened a modal.
Expand Down Expand Up @@ -157,53 +146,43 @@ export function removeEditorPanel( panelName ) {
*
* @param {string} feature Feature name.
*/
export function* toggleFeature( feature ) {
yield controls.dispatch(
interfaceStore.name,
'toggleFeature',
'core/edit-post',
feature
);
}
export const toggleFeature = ( feature ) => ( { registry } ) =>
registry
.dispatch( interfaceStore )
.toggleFeature( 'core/edit-post', feature );

export function* switchEditorMode( mode ) {
yield {
export const switchEditorMode = ( mode ) => ( { dispatch, registry } ) => {
dispatch( {
type: 'SWITCH_MODE',
mode,
};
} );

// Unselect blocks when we switch to the code editor.
if ( mode !== 'visual' ) {
yield controls.dispatch( blockEditorStore, 'clearSelectedBlock' );
registry.dispatch( blockEditorStore ).clearSelectedBlock();
}

const message =
mode === 'visual'
? __( 'Visual editor selected' )
: __( 'Code editor selected' );
speak( message, 'assertive' );
}
};

/**
* Triggers an action object used to toggle a plugin name flag.
*
* @param {string} pluginName Plugin name.
*/
export function* togglePinnedPluginItem( pluginName ) {
const isPinned = yield controls.select(
interfaceStore,
'isItemPinned',
'core/edit-post',
pluginName
);
export const togglePinnedPluginItem = ( pluginName ) => ( { registry } ) => {
const isPinned = registry
.select( interfaceStore )
.isItemPinned( 'core/edit-post', pluginName );

yield controls.dispatch(
interfaceStore,
isPinned ? 'unpinItem' : 'pinItem',
'core/edit-post',
pluginName
);
}
registry
.dispatch( interfaceStore )
[ isPinned ? 'unpinItem' : 'pinItem' ]( 'core/edit-post', pluginName );
};

/**
* Returns an action object used in signalling that block types by the given
Expand Down Expand Up @@ -270,25 +249,26 @@ export function showBlockTypes( blockNames ) {
* what Meta boxes are available in which location.
*
* @param {Object} metaBoxesPerLocation Meta boxes per location.
*
* @yield {Object} Action object.
*/
export function* setAvailableMetaBoxesPerLocation( metaBoxesPerLocation ) {
yield {
export const setAvailableMetaBoxesPerLocation = ( metaBoxesPerLocation ) => ( {
dispatch,
} ) =>
dispatch( {
type: 'SET_META_BOXES_PER_LOCATIONS',
metaBoxesPerLocation,
};
}
} );

/**
* Returns an action object used to request meta box update.
*
* @yield {Object} Action object.
* Update a metabox.
*/
export function* requestMetaBoxUpdates() {
yield {
export const requestMetaBoxUpdates = () => async ( {
registry,
select,
dispatch,
} ) => {
dispatch( {
type: 'REQUEST_META_BOX_UPDATES',
};
} );

// Saves the wp_editor fields
if ( window.tinyMCE ) {
Expand All @@ -297,7 +277,7 @@ export function* requestMetaBoxUpdates() {

// Additional data needed for backward compatibility.
// If we do not provide this data, the post will be overridden with the default values.
const post = yield controls.select( editorStore, 'getCurrentPost' );
const post = registry.select( editorStore ).getCurrentPost();
const additionalData = [
post.comment_status ? [ 'comment_status', post.comment_status ] : false,
post.ping_status ? [ 'ping_status', post.ping_status ] : false,
Expand All @@ -309,10 +289,7 @@ export function* requestMetaBoxUpdates() {
const baseFormData = new window.FormData(
document.querySelector( '.metabox-base-form' )
);
const activeMetaBoxLocations = yield controls.select(
editPostStore,
'getActiveMetaBoxLocations'
);
const activeMetaBoxLocations = select.getActiveMetaBoxLocations();
const formDataToMerge = [
baseFormData,
...activeMetaBoxLocations.map(
Expand All @@ -338,17 +315,17 @@ export function* requestMetaBoxUpdates() {

try {
// Save the metaboxes
yield apiFetch( {
await apiFetch( {
url: window._wpMetaBoxUrl,
method: 'POST',
body: formData,
parse: false,
} );
yield controls.dispatch( editPostStore, 'metaBoxUpdatesSuccess' );
dispatch.metaBoxUpdatesSuccess();
} catch {
yield controls.dispatch( editPostStore, 'metaBoxUpdatesFailure' );
dispatch.metaBoxUpdatesFailure();
}
}
};

/**
* Returns an action object used to signal a successful meta box update.
Expand Down Expand Up @@ -436,93 +413,80 @@ export function setIsEditingTemplate( value ) {
*
* @param {boolean} newTemplate Is new template.
*/
export function* __unstableSwitchToTemplateMode( newTemplate = false ) {
yield setIsEditingTemplate( true );

const isWelcomeGuideActive = yield controls.select(
editPostStore,
'isFeatureActive',
export const __unstableSwitchToTemplateMode = ( newTemplate = false ) => ( {
registry,
select,
dispatch,
} ) => {
dispatch( setIsEditingTemplate( true ) );
const isWelcomeGuideActive = select.isFeatureActive(
'welcomeGuideTemplate'
);

if ( ! isWelcomeGuideActive ) {
const message = newTemplate
? __( "Custom template created. You're in template mode now." )
: __(
'Editing template. Changes made here affect all posts and pages that use the template.'
);
yield controls.dispatch( noticesStore, 'createSuccessNotice', message, {
registry.dispatch( noticesStore ).createSuccessNotice( message, {
type: 'snackbar',
} );
}
}
};

/**
* Create a block based template.
*
* @param {Object?} template Template to create and assign.
*/
export function* __unstableCreateTemplate( template ) {
const savedTemplate = yield controls.dispatch(
coreStore,
'saveEntityRecord',
'postType',
'wp_template',
template
);
const post = yield controls.select( editorStore, 'getCurrentPost' );

yield controls.dispatch(
coreStore,
'editEntityRecord',
'postType',
post.type,
post.id,
{
export const __unstableCreateTemplate = ( template ) => async ( {
registry,
} ) => {
const savedTemplate = await registry
.dispatch( coreStore )
.saveEntityRecord( 'postType', 'wp_template', template );
const post = registry.select( editorStore ).getCurrentPost();
registry
.dispatch( coreStore )
.editEntityRecord( 'postType', post.type, post.id, {
template: savedTemplate.slug,
}
);
}
} );
};

let metaBoxesInitialized = false;

/**
* Initializes WordPress `postboxes` script and the logic for saving meta boxes.
*/
export function* initializeMetaBoxes() {
const isEditorReady = yield controls.select(
editorStore,
'__unstableIsEditorReady'
);
export const initializeMetaBoxes = () => ( { registry, select, dispatch } ) => {
const isEditorReady = registry
.select( editorStore )
.__unstableIsEditorReady();

if ( ! isEditorReady ) {
return;
}

const postType = yield controls.select( editorStore, 'getCurrentPostType' );

// Only initialize once.
if ( metaBoxesInitialized ) {
return;
}

const postType = registry.select( editorStore ).getCurrentPostType();
if ( window.postboxes.page !== postType ) {
window.postboxes.add_postbox_toggles( postType );
}

metaBoxesInitialized = true;

let wasSavingPost = yield controls.select( editorStore, 'isSavingPost' );
let wasAutosavingPost = yield controls.select(
editorStore,
'isAutosavingPost'
);
const hasMetaBoxes = yield controls.select( editPostStore, 'hasMetaBoxes' );
let wasSavingPost = registry.select( editorStore ).isSavingPost();
let wasAutosavingPost = registry.select( editorStore ).isAutosavingPost();
const hasMetaBoxes = select.hasMetaBoxes();

// Save metaboxes when performing a full save on the post.
subscribe( () => {
const isSavingPost = select( editorStore ).isSavingPost();
const isAutosavingPost = select( editorStore ).isAutosavingPost();
registry.subscribe( async () => {
const isSavingPost = registry.select( editorStore ).isSavingPost();
const isAutosavingPost = registry
.select( editorStore )
.isAutosavingPost();

// Save metaboxes on save completion, except for autosaves that are not a post preview.
//
Expand All @@ -541,11 +505,11 @@ export function* initializeMetaBoxes() {
wasAutosavingPost = isAutosavingPost;

if ( shouldTriggerMetaboxesSave ) {
dispatch( editPostStore ).requestMetaBoxUpdates();
await dispatch.requestMetaBoxUpdates();
}
} );

return {
dispatch( {
type: 'META_BOXES_INITIALIZED',
};
}
} );
};
Loading

0 comments on commit 8d5cf87

Please sign in to comment.