@wordpress/edit-post 6.0.1 → 6.1.0-next.e230fbab09.0

package/src/components/secondary-sidebar/list-view-sidebar.js

@@ -1,10 +1,7 @@
 /**
  * WordPress dependencies
  */
-import {
-	__experimentalListView as ListView,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
+import { __experimentalListView as ListView } from '@wordpress/block-editor';
 import { Button } from '@wordpress/components';
 import {
 	useFocusOnMount,
@@ -25,12 +22,6 @@ import { store as editPostStore } from '../../store';
 export default function ListViewSidebar() {
 	const { setIsListViewOpened } = useDispatch( editPostStore );
 
-	const { clearSelectedBlock, selectBlock } = useDispatch( blockEditorStore );
-	async function selectEditorBlock( clientId ) {
-		await clearSelectedBlock();
-		selectBlock( clientId, -1 );
-	}
-
 	const focusOnMountRef = useFocusOnMount( 'firstElement' );
 	const headerFocusReturnRef = useFocusReturn();
 	const contentFocusReturnRef = useFocusReturn();
@@ -70,7 +61,6 @@ export default function ListViewSidebar() {
 				] ) }
 			>
 				<ListView
-					onSelect={ selectEditorBlock }
 					showNestedBlocks
 					__experimentalFeatures
 					__experimentalPersistentListViewFeatures

package/src/components/sidebar/post-link/index.js

@@ -10,8 +10,8 @@ import { __ } from '@wordpress/i18n';
 import { PanelBody, TextControl, ExternalLink } from '@wordpress/components';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { compose, ifCondition } from '@wordpress/compose';
-import { cleanForSlug, store as editorStore } from '@wordpress/editor';
-import { safeDecodeURIComponent } from '@wordpress/url';
+import { store as editorStore } from '@wordpress/editor';
+import { safeDecodeURIComponent, cleanForSlug } from '@wordpress/url';
 import { store as coreStore } from '@wordpress/core-data';
 import { useState } from '@wordpress/element';
 

package/src/editor.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { size, map, without } from 'lodash';
+import { forEach, size, map, without } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -55,6 +55,7 @@ function Editor( {
 				__experimentalGetPreviewDeviceType,
 				isEditingTemplate,
 				getEditedPostTemplate,
+				getHiddenBlockTypes,
 			} = select( editPostStore );
 			const { getEntityRecord, getPostType, getEntityRecords } = select(
 				coreStore
@@ -89,7 +90,7 @@ function Editor( {
 				preferredStyleVariations: getPreference(
 					'preferredStyleVariations'
 				),
-				hiddenBlockTypes: getPreference( 'hiddenBlockTypes' ),
+				hiddenBlockTypes: getHiddenBlockTypes(),
 				blockTypes: getBlockTypes(),
 				__experimentalLocalAutosaveInterval: getPreference(
 					'localAutosaveInterval'
@@ -164,7 +165,7 @@ function Editor( {
 	const styles = useMemo( () => {
 		const themeStyles = [];
 		const presetStyles = [];
-		settings.styles.forEach( ( style ) => {
+		forEach( settings.styles, ( style ) => {
 			if ( ! style.__unstableType || style.__unstableType === 'theme' ) {
 				themeStyles.push( style );
 			} else {

package/src/editor.native.js

@@ -36,7 +36,7 @@ class Editor extends Component {
 		window.wp.galleryBlockV2Enabled = galleryWithImageBlocks;
 
 		if ( props.initialHtmlModeEnabled && props.mode === 'visual' ) {
-			// enable html mode if the initial mode the parent wants it but we're not already in it
+			// Enable html mode if the initial mode the parent wants it but we're not already in it.
 			this.props.switchEditorMode( 'text' );
 		}
 
@@ -64,8 +64,8 @@ class Editor extends Component {
 		// Omit hidden block types if exists and non-empty.
 		if ( size( hiddenBlockTypes ) > 0 ) {
 			if ( settings.allowedBlockTypes === undefined ) {
-				// if no specific flags for allowedBlockTypes are set, assume `true`
-				// meaning allow all block types
+				// If no specific flags for allowedBlockTypes are set, assume `true`
+				// meaning allow all block types.
 				settings.allowedBlockTypes = true;
 			}
 			// Defer to passed setting for `allowedBlockTypes` if provided as
@@ -156,9 +156,9 @@ class Editor extends Component {
 			},
 			featured_media: featuredImageId,
 			content: {
-				// make sure the post content is in sync with gutenberg store
+				// Make sure the post content is in sync with gutenberg store
 				// to avoid marking the post as modified when simply loaded
-				// For now, let's assume: serialize( parse( html ) ) !== html
+				// For now, let's assume: serialize( parse( html ) ) !== html.
 				raw: serialize( parse( initialHtml || '' ) ),
 			},
 			type: postType,
@@ -187,8 +187,8 @@ export default compose( [
 		const {
 			isFeatureActive,
 			getEditorMode,
-			getPreference,
 			__experimentalGetPreviewDeviceType,
+			getHiddenBlockTypes,
 		} = select( editPostStore );
 		const { getBlockTypes } = select( blocksStore );
 
@@ -198,7 +198,7 @@ export default compose( [
 				__experimentalGetPreviewDeviceType() !== 'Desktop',
 			focusMode: isFeatureActive( 'focusMode' ),
 			mode: getEditorMode(),
-			hiddenBlockTypes: getPreference( 'hiddenBlockTypes' ),
+			hiddenBlockTypes: getHiddenBlockTypes(),
 			blockTypes: getBlockTypes(),
 		};
 	} ),

package/src/hooks/validate-multiple-use/index.js

@@ -124,7 +124,7 @@ const withMultipleValidation = createHigherOrderComponent( ( BlockEdit ) => {
  * @return {?Object} The chosen default block type.
  */
 function getOutboundType( blockName ) {
-	// Grab the first outbound transform
+	// Grab the first outbound transform.
 	const transform = findTransform(
 		getBlockTransforms( 'to', blockName ),
 		( { type, blocks } ) => type === 'block' && blocks.length === 1 // What about when .length > 1?

package/src/index.js

@@ -9,7 +9,7 @@ import {
 import { render, unmountComponentAtNode } from '@wordpress/element';
 import { dispatch, select } from '@wordpress/data';
 import { addFilter } from '@wordpress/hooks';
-import { store as interfaceStore } from '@wordpress/interface';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -106,13 +106,14 @@ export function initializeEditor(
 		initialEdits
 	);
 
-	dispatch( interfaceStore ).setFeatureDefaults( 'core/edit-post', {
+	dispatch( preferencesStore ).setDefaults( 'core/edit-post', {
 		fixedToolbar: false,
-		welcomeGuide: true,
 		fullscreenMode: true,
+		hiddenBlockTypes: [],
+		showBlockBreadcrumbs: true,
 		showIconLabels: false,
 		themeStyles: true,
-		showBlockBreadcrumbs: true,
+		welcomeGuide: true,
 		welcomeGuideTemplate: true,
 	} );
 

package/src/plugins/welcome-guide-menu-item/index.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { MoreMenuFeatureToggle } from '@wordpress/interface';
+import { PreferenceToggleMenuItem } from '@wordpress/preferences';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -17,9 +17,9 @@ export default function WelcomeGuideMenuItem() {
 	);
 
 	return (
-		<MoreMenuFeatureToggle
+		<PreferenceToggleMenuItem
 			scope="core/edit-post"
-			feature={ isTemplateMode ? 'welcomeGuideTemplate' : 'welcomeGuide' }
+			name={ isTemplateMode ? 'welcomeGuideTemplate' : 'welcomeGuide' }
 			label={ __( 'Welcome Guide' ) }
 		/>
 	);

package/src/store/actions.js

@@ -1,15 +1,15 @@
 /**
  * External dependencies
  */
-import { castArray, reduce } from 'lodash';
+import { castArray, reduce, without } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { apiFetch } from '@wordpress/data-controls';
+import apiFetch from '@wordpress/api-fetch';
 import { store as interfaceStore } from '@wordpress/interface';
-import { controls, select, subscribe, dispatch } from '@wordpress/data';
+import { store as preferencesStore } from '@wordpress/preferences';
 import { speak } from '@wordpress/a11y';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as coreStore } from '@wordpress/core-data';
@@ -21,34 +21,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.
@@ -157,24 +147,23 @@ 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( preferencesStore ).toggle( 'core/edit-post', feature );
 
-export function* switchEditorMode( mode ) {
-	yield {
+/**
+ * Triggers an action used to switch editor mode.
+ *
+ * @param {string} mode The editor mode.
+ */
+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 =
@@ -182,43 +171,22 @@ export function* switchEditorMode( mode ) {
 			? __( '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
-	);
-}
-
-/**
- * Returns an action object used in signalling that block types by the given
- * name(s) should be hidden.
- *
- * @param {string[]} blockNames Names of block types to hide.
- *
- * @return {Object} Action object.
- */
-export function hideBlockTypes( blockNames ) {
-	return {
-		type: 'HIDE_BLOCK_TYPES',
-		blockNames: castArray( blockNames ),
-	};
-}
+	registry
+		.dispatch( interfaceStore )
+		[ isPinned ? 'unpinItem' : 'pinItem' ]( 'core/edit-post', pluginName );
+};
 
 /**
  * Returns an action object used in signaling that a style should be auto-applied when a block is created.
@@ -251,53 +219,81 @@ export function __experimentalUpdateLocalAutosaveInterval( interval ) {
 }
 
 /**
- * Returns an action object used in signalling that block types by the given
- * name(s) should be shown.
+ * Update the provided block types to be visible.
  *
  * @param {string[]} blockNames Names of block types to show.
+ */
+export const showBlockTypes = ( blockNames ) => ( { registry } ) => {
+	const existingBlockNames =
+		registry
+			.select( preferencesStore )
+			.get( 'core/edit-post', 'hiddenBlockTypes' ) ?? [];
+
+	const newBlockNames = without(
+		existingBlockNames,
+		...castArray( blockNames )
+	);
+
+	registry
+		.dispatch( preferencesStore )
+		.set( 'core/edit-post', 'hiddenBlockTypes', newBlockNames );
+};
+
+/**
+ * Update the provided block types to be hidden.
  *
- * @return {Object} Action object.
+ * @param {string[]} blockNames Names of block types to hide.
  */
-export function showBlockTypes( blockNames ) {
-	return {
-		type: 'SHOW_BLOCK_TYPES',
-		blockNames: castArray( blockNames ),
-	};
-}
+export const hideBlockTypes = ( blockNames ) => ( { registry } ) => {
+	const existingBlockNames =
+		registry
+			.select( preferencesStore )
+			.get( 'core/edit-post', 'hiddenBlockTypes' ) ?? [];
+
+	const mergedBlockNames = new Set( [
+		...existingBlockNames,
+		...castArray( blockNames ),
+	] );
+
+	registry
+		.dispatch( preferencesStore )
+		.set( 'core/edit-post', 'hiddenBlockTypes', [ ...mergedBlockNames ] );
+};
 
 /**
  * Returns an action object used in signaling
  * 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
+	// Saves the wp_editor fields.
 	if ( window.tinyMCE ) {
 		window.tinyMCE.triggerSave();
 	}
 
 	// 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,
@@ -305,14 +301,11 @@ export function* requestMetaBoxUpdates() {
 		post.author ? [ 'post_author', post.author ] : false,
 	].filter( Boolean );
 
-	// We gather all the metaboxes locations data and the base form data
+	// We gather all the metaboxes locations data and the base form data.
 	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(
@@ -337,18 +330,18 @@ export function* requestMetaBoxUpdates() {
 	);
 
 	try {
-		// Save the metaboxes
-		yield apiFetch( {
+		// Save the metaboxes.
+		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.
@@ -436,100 +429,87 @@ 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.
 		//
 		// Meta boxes are initialized once at page load. It is not necessary to
 		// account for updates on each state change.
 		//
-		// See: https://github.com/WordPress/WordPress/blob/5.1.1/wp-admin/includes/post.php#L2307-L2309
+		// See: https://github.com/WordPress/WordPress/blob/5.1.1/wp-admin/includes/post.php#L2307-L2309.
 		const shouldTriggerMetaboxesSave =
 			hasMetaBoxes &&
 			wasSavingPost &&
@@ -541,11 +521,11 @@ export function* initializeMetaBoxes() {
 		wasAutosavingPost = isAutosavingPost;
 
 		if ( shouldTriggerMetaboxesSave ) {
-			dispatch( editPostStore ).requestMetaBoxUpdates();
+			await dispatch.requestMetaBoxUpdates();
 		}
 	} );
 
-	return {
+	dispatch( {
 		type: 'META_BOXES_INITIALIZED',
-	};
-}
+	} );
+};

package/src/store/index.js

@@ -2,7 +2,6 @@
  * WordPress dependencies
  */
 import { createReduxStore, registerStore } from '@wordpress/data';
-import { controls } from '@wordpress/data-controls';
 
 /**
  * Internal dependencies
@@ -16,7 +15,6 @@ const storeConfig = {
 	reducer,
 	actions,
 	selectors,
-	controls,
 	persist: [ 'preferences' ],
 };
 

package/src/store/reducer.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { flow, get, includes, omit, union, without } from 'lodash';
+import { flow, get, includes, omit } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -85,17 +85,6 @@ export const preferences = flow( [
 
 		return state;
 	},
-	hiddenBlockTypes( state, action ) {
-		switch ( action.type ) {
-			case 'SHOW_BLOCK_TYPES':
-				return without( state, ...action.blockNames );
-
-			case 'HIDE_BLOCK_TYPES':
-				return union( state, action.blockNames );
-		}
-
-		return state;
-	},
 	preferredStyleVariations( state, action ) {
 		switch ( action.type ) {
 			case 'UPDATE_PREFERRED_STYLE_VARIATIONS': {