@wordpress/edit-post 6.0.2 → 6.1.0

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,16 @@
 /**
  * External dependencies
  */
-import { castArray, reduce } from 'lodash';
+import { castArray, reduce, without } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
 import apiFetch from '@wordpress/api-fetch';
-import { speak } from '@wordpress/a11y';
 import { store as interfaceStore } from '@wordpress/interface';
+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';
 import { store as blockEditorStore } from '@wordpress/block-editor';
@@ -147,10 +148,13 @@ export function removeEditorPanel( panelName ) {
  * @param {string} feature Feature name.
  */
 export const toggleFeature = ( feature ) => ( { registry } ) =>
-	registry
-		.dispatch( interfaceStore )
-		.toggleFeature( 'core/edit-post', feature );
+	registry.dispatch( preferencesStore ).toggle( 'core/edit-post', feature );
 
+/**
+ * Triggers an action used to switch editor mode.
+ *
+ * @param {string} mode The editor mode.
+ */
 export const switchEditorMode = ( mode ) => ( { dispatch, registry } ) => {
 	dispatch( {
 		type: 'SWITCH_MODE',
@@ -184,21 +188,6 @@ export const togglePinnedPluginItem = ( pluginName ) => ( { registry } ) => {
 		[ 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 ),
-	};
-}
-
 /**
  * Returns an action object used in signaling that a style should be auto-applied when a block is created.
  *
@@ -230,19 +219,46 @@ 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
@@ -270,7 +286,7 @@ export const requestMetaBoxUpdates = () => async ( {
 		type: 'REQUEST_META_BOX_UPDATES',
 	} );
 
-	// Saves the wp_editor fields
+	// Saves the wp_editor fields.
 	if ( window.tinyMCE ) {
 		window.tinyMCE.triggerSave();
 	}
@@ -285,7 +301,7 @@ export const requestMetaBoxUpdates = () => async ( {
 		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' )
 	);
@@ -314,7 +330,7 @@ export const requestMetaBoxUpdates = () => async ( {
 	);
 
 	try {
-		// Save the metaboxes
+		// Save the metaboxes.
 		await apiFetch( {
 			url: window._wpMetaBoxUrl,
 			method: 'POST',
@@ -493,7 +509,7 @@ export const initializeMetaBoxes = () => ( { registry, select, dispatch } ) => {
 		// 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 &&

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': {

package/src/store/selectors.js

@@ -9,8 +9,12 @@ import { get, includes, some, flatten, values } from 'lodash';
  */
 import { createRegistrySelector } from '@wordpress/data';
 import { store as interfaceStore } from '@wordpress/interface';
+import { store as preferencesStore } from '@wordpress/preferences';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as editorStore } from '@wordpress/editor';
+
+const EMPTY_ARRAY = [];
+
 /**
  * Returns the current editing mode.
  *
@@ -85,6 +89,10 @@ export const getActiveGeneralSidebarName = createRegistrySelector(
 	}
 );
 
+// The current list of preference keys that have been migrated to the
+// preferences package.
+const MIGRATED_KEYS = [ 'hiddenBlockTypes' ];
+
 /**
  * Returns the preferences (these preferences are persisted locally).
  *
@@ -92,9 +100,34 @@ export const getActiveGeneralSidebarName = createRegistrySelector(
  *
  * @return {Object} Preferences Object.
  */
-export function getPreferences( state ) {
-	return state.preferences;
-}
+export const getPreferences = createRegistrySelector(
+	( select ) => ( state ) => {
+		const editPostPreferences = state.preferences;
+
+		// Some preferences now exist in the preferences store.
+		// Fetch them so that they can be merged into the post
+		// editor preferences.
+		const preferenceStorePreferences = MIGRATED_KEYS.reduce(
+			( accumulatedPrefs, preferenceKey ) => {
+				const value = select( preferencesStore ).get(
+					'core/edit-post',
+					preferenceKey
+				);
+
+				return {
+					...accumulatedPrefs,
+					[ preferenceKey ]: value,
+				};
+			},
+			{}
+		);
+
+		return {
+			...editPostPreferences,
+			...preferenceStorePreferences,
+		};
+	}
+);
 
 /**
  *
@@ -105,11 +138,29 @@ export function getPreferences( state ) {
  * @return {*} Preference Value.
  */
 export function getPreference( state, preferenceKey, defaultValue ) {
-	const preferences = getPreferences( state );
+	// Avoid using the `getPreferences` registry selector where possible.
+	const isMigratedKey = MIGRATED_KEYS.includes( preferenceKey );
+	const preferences = isMigratedKey
+		? getPreferences( state )
+		: state.preferences;
 	const value = preferences[ preferenceKey ];
 	return value === undefined ? defaultValue : value;
 }
 
+/**
+ * Returns an array of blocks that are hidden.
+ *
+ * @return {Array} A list of the hidden block types
+ */
+export const getHiddenBlockTypes = createRegistrySelector( ( select ) => () => {
+	return (
+		select( preferencesStore ).get(
+			'core/edit-post',
+			'hiddenBlockTypes'
+		) ?? EMPTY_ARRAY
+	);
+} );
+
 /**
  * Returns true if the publish sidebar is opened.
  *
@@ -191,10 +242,7 @@ export function isModalActive( state, modalName ) {
  */
 export const isFeatureActive = createRegistrySelector(
 	( select ) => ( state, feature ) => {
-		return select( interfaceStore ).isFeatureActive(
-			'core/edit-post',
-			feature
-		);
+		return !! select( preferencesStore ).get( 'core/edit-post', feature );
 	}
 );
 

package/src/store/test/actions.js

@@ -3,6 +3,7 @@
  */
 import { createRegistry } from '@wordpress/data';
 import { store as interfaceStore } from '@wordpress/interface';
+import { store as preferencesStore } from '@wordpress/preferences';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
@@ -22,6 +23,7 @@ function createRegistryWithStores() {
 		blockEditorStore,
 		coreStore,
 		interfaceStore,
+		preferencesStore,
 		editorStore,
 	].forEach( registry.register );
 	return registry;
@@ -32,6 +34,7 @@ describe( 'actions', () => {
 	beforeEach( () => {
 		registry = createRegistryWithStores();
 	} );
+
 	it( 'openGeneralSidebar/closeGeneralSidebar', () => {
 		registry.dispatch( editPostStore ).openGeneralSidebar( 'test/sidebar' );
 		expect(
@@ -49,21 +52,23 @@ describe( 'actions', () => {
 				.getActiveComplementaryArea( 'core/edit-post' )
 		).toBeNull();
 	} );
+
 	it( 'toggleFeature', () => {
 		registry.dispatch( editPostStore ).toggleFeature( 'welcomeGuide' );
 		expect(
 			registry
-				.select( interfaceStore )
-				.isFeatureActive( editPostStore.name, 'welcomeGuide' )
+				.select( preferencesStore )
+				.get( editPostStore.name, 'welcomeGuide' )
 		).toBe( true );
 
 		registry.dispatch( editPostStore ).toggleFeature( 'welcomeGuide' );
 		expect(
 			registry
-				.select( interfaceStore )
-				.isFeatureActive( editPostStore.name, 'welcomeGuide' )
+				.select( preferencesStore )
+				.get( editPostStore.name, 'welcomeGuide' )
 		).toBe( false );
 	} );
+
 	describe( 'switchEditorMode', () => {
 		it( 'to visual', () => {
 			registry.dispatch( editPostStore ).switchEditorMode( 'visual' );
@@ -71,6 +76,7 @@ describe( 'actions', () => {
 				'visual'
 			);
 		} );
+
 		it( 'to text', () => {
 			// Add a selected client id and make sure it's there.
 			const clientId = 'clientId_1';
@@ -85,6 +91,7 @@ describe( 'actions', () => {
 			).toBeNull();
 		} );
 	} );
+
 	it( 'togglePinnedPluginItem', () => {
 		registry.dispatch( editPostStore ).togglePinnedPluginItem( 'rigatoni' );
 		// Sidebars are pinned by default.
@@ -101,6 +108,7 @@ describe( 'actions', () => {
 				.isItemPinned( editPostStore.name, 'rigatoni' )
 		).toBe( true );
 	} );
+
 	describe( '__unstableSwitchToTemplateMode', () => {
 		it( 'welcome guide is active', () => {
 			// Activate `welcomeGuideTemplate` feature.
@@ -114,6 +122,7 @@ describe( 'actions', () => {
 			const notices = registry.select( noticesStore ).getNotices();
 			expect( notices ).toHaveLength( 0 );
 		} );
+
 		it( 'welcome guide is inactive', () => {
 			expect(
 				registry.select( editPostStore ).isEditingTemplate()
@@ -127,4 +136,158 @@ describe( 'actions', () => {
 			expect( notices[ 0 ].content ).toMatch( 'template' );
 		} );
 	} );
+
+	describe( 'hideBlockTypes', () => {
+		it( 'adds the hidden block type to the preferences', () => {
+			registry
+				.dispatch( editPostStore )
+				.hideBlockTypes( [ 'core/quote', 'core/table' ] );
+
+			const expected = [ 'core/quote', 'core/table' ];
+
+			// TODO - remove once `getPreference` is deprecated.
+			expect(
+				registry
+					.select( editPostStore )
+					.getPreference( 'hiddenBlockTypes' )
+			).toEqual( expected );
+
+			expect(
+				registry.select( editPostStore ).getHiddenBlockTypes()
+			).toEqual( expected );
+		} );
+	} );
+
+	describe( 'showBlockTypes', () => {
+		it( 'removes the hidden block type from the preferences', () => {
+			registry
+				.dispatch( editPostStore )
+				.hideBlockTypes( [ 'core/quote', 'core/table' ] );
+
+			const expectedA = [ 'core/quote', 'core/table' ];
+
+			// TODO - remove once `getPreference` is deprecated.
+			expect(
+				registry
+					.select( editPostStore )
+					.getPreference( 'hiddenBlockTypes' )
+			).toEqual( expectedA );
+
+			expect(
+				registry.select( editPostStore ).getHiddenBlockTypes()
+			).toEqual( expectedA );
+
+			registry
+				.dispatch( editPostStore )
+				.showBlockTypes( [ 'core/table' ] );
+
+			const expectedB = [ 'core/quote' ];
+
+			// TODO - remove once `getPreference` is deprecated.
+			expect(
+				registry
+					.select( editPostStore )
+					.getPreference( 'hiddenBlockTypes' )
+			).toEqual( expectedB );
+
+			expect(
+				registry.select( editPostStore ).getHiddenBlockTypes()
+			).toEqual( expectedB );
+		} );
+	} );
+
+	describe( '__experimentalUpdateLocalAutosaveInterval', () => {
+		it( 'sets the local autosave interval', () => {
+			registry
+				.dispatch( editPostStore )
+				.__experimentalUpdateLocalAutosaveInterval( 42 );
+
+			// TODO - remove once `getPreference` is deprecated.
+			expect(
+				registry
+					.select( editPostStore )
+					.getPreference( 'localAutosaveInterval' )
+			).toBe( 42 );
+		} );
+	} );
+
+	describe( 'toggleEditorPanelEnabled', () => {
+		it( 'toggles panels to be enabled and not enabled', () => {
+			const defaultState = {
+				'post-status': {
+					opened: true,
+				},
+			};
+
+			// This will switch it off, since the default is on.
+			registry
+				.dispatch( editPostStore )
+				.toggleEditorPanelEnabled( 'control-panel' );
+
+			// TODO - remove once `getPreference` is deprecated.
+			expect(
+				registry.select( editPostStore ).getPreference( 'panels' )
+			).toEqual( {
+				...defaultState,
+				'control-panel': {
+					enabled: false,
+				},
+			} );
+
+			// Switch it on again.
+			registry
+				.dispatch( editPostStore )
+				.toggleEditorPanelEnabled( 'control-panel' );
+
+			// TODO - remove once `getPreference` is deprecated.
+			expect(
+				registry.select( editPostStore ).getPreference( 'panels' )
+			).toEqual( {
+				...defaultState,
+				'control-panel': {
+					enabled: true,
+				},
+			} );
+		} );
+	} );
+
+	describe( 'toggleEditorPanelOpened', () => {
+		it( 'toggles panels open and closed', () => {
+			const defaultState = {
+				'post-status': {
+					opened: true,
+				},
+			};
+
+			// This will open it, since the default is closed.
+			registry
+				.dispatch( editPostStore )
+				.toggleEditorPanelOpened( 'control-panel' );
+
+			// TODO - remove once `getPreference` is deprecated.
+			expect(
+				registry.select( editPostStore ).getPreference( 'panels' )
+			).toEqual( {
+				...defaultState,
+				'control-panel': {
+					opened: true,
+				},
+			} );
+
+			// Close it.
+			registry
+				.dispatch( editPostStore )
+				.toggleEditorPanelOpened( 'control-panel' );
+
+			// TODO - remove once `getPreference` is deprecated.
+			expect(
+				registry.select( editPostStore ).getPreference( 'panels' )
+			).toEqual( {
+				...defaultState,
+				'control-panel': {
+					opened: false,
+				},
+			} );
+		} );
+	} );
 } );

package/src/store/test/reducer.js

@@ -151,34 +151,6 @@ describe( 'state', () => {
 
 			expect( state.editorMode ).toBe( 'text' );
 		} );
-
-		describe( 'hiddenBlockTypes', () => {
-			it( 'concatenates unique names on disable', () => {
-				const original = deepFreeze( {
-					hiddenBlockTypes: [ 'a', 'b' ],
-				} );
-
-				const state = preferences( original, {
-					type: 'HIDE_BLOCK_TYPES',
-					blockNames: [ 'b', 'c' ],
-				} );
-
-				expect( state.hiddenBlockTypes ).toEqual( [ 'a', 'b', 'c' ] );
-			} );
-
-			it( 'omits present names by enable', () => {
-				const original = deepFreeze( {
-					hiddenBlockTypes: [ 'a', 'b' ],
-				} );
-
-				const state = preferences( original, {
-					type: 'SHOW_BLOCK_TYPES',
-					blockNames: [ 'b', 'c' ],
-				} );
-
-				expect( state.hiddenBlockTypes ).toEqual( [ 'a' ] );
-			} );
-		} );
 	} );
 
 	describe( 'activeModal', () => {