Use experiment locking/unlocking system for block interface selector …

…and actions (#47375)

* Update block editor store to make the block interface API properly experimental

* Unlock experimental block interface API before usage

* Fix tests

* Remove __experimental prefix from locked APIs

* Update documentation

Co-authored-by: Adam Zielinski <adam@adamziel.com>

* Fix incorrect `privateSettings` key

---------

Co-authored-by: Adam Zielinski <adam@adamziel.com>

packages/block-editor/src/components/block-tools/selected-block-popover.js

@@ -21,17 +21,18 @@ import { store as blockEditorStore } from '../../store';
 import BlockPopover from '../block-popover';
 import useBlockToolbarPopoverProps from './use-block-toolbar-popover-props';
 import Inserter from '../inserter';
+import { unlock } from '../../experiments';
 
 function selector( select ) {
 	const {
 		__unstableGetEditorMode,
 		isMultiSelecting,
 		hasMultiSelection,
 		isTyping,
-		__experimentalIsBlockInterfaceHidden: isBlockInterfaceHidden,
+		isBlockInterfaceHidden,
 		getSettings,
 		getLastMultiSelectedBlockClientId,
-	} = select( blockEditorStore );
+	} = unlock( select( blockEditorStore ) );
 
 	return {
 		editorMode: __unstableGetEditorMode(),

packages/block-editor/src/hooks/dimensions.js

@@ -59,6 +59,7 @@ import {
 } from './child-layout';
 import useSetting from '../components/use-setting';
 import { store as blockEditorStore } from '../store';
+import { unlock } from '../experiments';
 
 export const DIMENSIONS_SUPPORT_KEY = 'dimensions';
 export const SPACING_SUPPORT_KEY = 'spacing';
@@ -67,10 +68,9 @@ export const AXIAL_SIDES = [ 'vertical', 'horizontal' ];
 
 function useVisualizerMouseOver() {
 	const [ isMouseOver, setIsMouseOver ] = useState( false );
-	const {
-		__experimentalHideBlockInterface: hideBlockInterface,
-		__experimentalShowBlockInterface: showBlockInterface,
-	} = useDispatch( blockEditorStore );
+	const { hideBlockInterface, showBlockInterface } = unlock(
+		useDispatch( blockEditorStore )
+	);
 	const onMouseOver = ( e ) => {
 		e.stopPropagation();
 		hideBlockInterface();

packages/block-editor/src/store/actions.js

@@ -16,7 +16,6 @@ import { speak } from '@wordpress/a11y';
 import { __, _n, sprintf } from '@wordpress/i18n';
 import { create, insert, remove, toHTMLString } from '@wordpress/rich-text';
 import deprecated from '@wordpress/deprecated';
-import { Platform } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -26,6 +25,7 @@ import {
 	retrieveSelectedAttribute,
 	START_OF_SELECTED_AREA,
 } from '../utils/selection';
+import { __experimentalUpdateSettings } from './private-actions';
 
 /** @typedef {import('../components/use-on-block-drop/types').WPDropOperation} WPDropOperation */
 
@@ -1264,28 +1264,6 @@ export function toggleBlockMode( clientId ) {
 	};
 }
 
-/**
- * Returns an action object used in signalling that the block interface, eg. toolbar, outline, etc. should be hidden.
- *
- * @return {Object} Action object.
- */
-export function __experimentalHideBlockInterface() {
-	return {
-		type: 'HIDE_BLOCK_INTERFACE',
-	};
-}
-
-/**
- * Returns an action object used in signalling that the block interface, eg. toolbar, outline, etc. should be shown.
- *
- * @return {Object} Action object.
- */
-export function __experimentalShowBlockInterface() {
-	return {
-		type: 'SHOW_BLOCK_INTERFACE',
-	};
-}
-
 /**
  * Returns an action object used in signalling that the user has begun to type.
  *
@@ -1446,45 +1424,6 @@ export function updateSettings( settings ) {
 	return __experimentalUpdateSettings( settings, true );
 }
 
-/**
- * A list of private/experimental block editor settings that
- * should not become a part of the WordPress public API.
- * BlockEditorProvider will remove these settings from the
- * settings object it receives.
- *
- * @see https://github.com/WordPress/gutenberg/pull/46131
- */
-const privateSettings = [ 'inserterMediaCategories' ];
-
-/**
- * Action that updates the block editor settings and
- * conditionally preserves the experimental ones.
- *
- * @param {Object}  settings                  Updated settings
- * @param {boolean} stripExperimentalSettings Whether to strip experimental settings.
- * @return {Object} Action object
- */
-export function __experimentalUpdateSettings(
-	settings,
-	stripExperimentalSettings = false
-) {
-	let cleanSettings = settings;
-	// There are no plugins in the mobile apps, so there is no
-	// need to strip the experimental settings:
-	if ( stripExperimentalSettings && Platform.OS === 'web' ) {
-		cleanSettings = {};
-		for ( const key in settings ) {
-			if ( ! privateSettings.includes( key ) ) {
-				cleanSettings[ key ] = settings[ key ];
-			}
-		}
-	}
-	return {
-		type: 'UPDATE_SETTINGS',
-		settings: cleanSettings,
-	};
-}
-
 /**
  * Action that signals that a temporary reusable block has been saved
  * in order to switch its temporary id with the real id.

packages/block-editor/src/store/index.js

@@ -8,12 +8,12 @@ import { createReduxStore, registerStore } from '@wordpress/data';
  */
 import reducer from './reducer';
 import * as selectors from './selectors';
-import * as allActions from './actions';
+import * as privateActions from './private-actions';
+import * as privateSelectors from './private-selectors';
+import * as actions from './actions';
 import { STORE_NAME } from './constants';
 import { unlock } from '../experiments';
 
-const { __experimentalUpdateSettings, ...actions } = allActions;
-
 /**
  * Block editor data store configuration.
  *
@@ -34,14 +34,14 @@ export const store = createReduxStore( STORE_NAME, {
 	...storeConfig,
 	persist: [ 'preferences' ],
 } );
+unlock( store ).registerPrivateActions( privateActions );
+unlock( store ).registerPrivateSelectors( privateSelectors );
 
 // We will be able to use the `register` function once we switch
 // the "preferences" persistence to use the new preferences package.
 const registeredStore = registerStore( STORE_NAME, {
 	...storeConfig,
 	persist: [ 'preferences' ],
 } );
-
-unlock( registeredStore ).registerPrivateActions( {
-	__experimentalUpdateSettings,
-} );
+unlock( registeredStore ).registerPrivateActions( privateActions );
+unlock( registeredStore ).registerPrivateSelectors( privateSelectors );

packages/block-editor/src/store/private-actions.js

@@ -0,0 +1,65 @@
+/**
+ * WordPress dependencies
+ */
+import { Platform } from '@wordpress/element';
+
+/**
+ * A list of private/experimental block editor settings that
+ * should not become a part of the WordPress public API.
+ * BlockEditorProvider will remove these settings from the
+ * settings object it receives.
+ *
+ * @see https://github.com/WordPress/gutenberg/pull/46131
+ */
+const privateSettings = [ 'inserterMediaCategories' ];
+
+/**
+ * Action that updates the block editor settings and
+ * conditionally preserves the experimental ones.
+ *
+ * @param {Object}  settings                  Updated settings
+ * @param {boolean} stripExperimentalSettings Whether to strip experimental settings.
+ * @return {Object} Action object
+ */
+export function __experimentalUpdateSettings(
+	settings,
+	stripExperimentalSettings = false
+) {
+	let cleanSettings = settings;
+	// There are no plugins in the mobile apps, so there is no
+	// need to strip the experimental settings:
+	if ( stripExperimentalSettings && Platform.OS === 'web' ) {
+		cleanSettings = {};
+		for ( const key in settings ) {
+			if ( ! privateSettings.includes( key ) ) {
+				cleanSettings[ key ] = settings[ key ];
+			}
+		}
+	}
+	return {
+		type: 'UPDATE_SETTINGS',
+		settings: cleanSettings,
+	};
+}
+
+/**
+ * Hides the block interface (eg. toolbar, outline, etc.)
+ *
+ * @return {Object} Action object.
+ */
+export function hideBlockInterface() {
+	return {
+		type: 'HIDE_BLOCK_INTERFACE',
+	};
+}
+
+/**
+ * Shows the block interface (eg. toolbar, outline, etc.)
+ *
+ * @return {Object} Action object.
+ */
+export function showBlockInterface() {
+	return {
+		type: 'SHOW_BLOCK_INTERFACE',
+	};
+}

packages/block-editor/src/store/private-selectors.js

@@ -0,0 +1,10 @@
+/**
+ * Returns true if the block interface is hidden, or false otherwise.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {boolean} Whether the block toolbar is hidden.
+ */
+export function isBlockInterfaceHidden( state ) {
+	return state.isBlockInterfaceHidden;
+}

packages/block-editor/src/store/selectors.js

@@ -1279,17 +1279,6 @@ export function isTyping( state ) {
 	return state.isTyping;
 }
 
-/**
- * Returns true if the the block interface should be hidden, or false otherwise.
- *
- * @param {Object} state Global application state.
- *
- * @return {boolean} Whether the block toolbar is hidden.
- */
-export function __experimentalIsBlockInterfaceHidden( state ) {
-	return state.isBlockInterfaceHidden;
-}
-
 /**
  * Returns true if the user is dragging blocks, or false otherwise.
  *

packages/block-editor/src/store/test/actions.js

@@ -27,7 +27,6 @@ const noop = () => {};
 
 const {
 	clearSelectedBlock,
-	__experimentalHideBlockInterface: hideBlockInterface,
 	insertBlock,
 	insertBlocks,
 	mergeBlocks,
@@ -40,7 +39,6 @@ const {
 	replaceInnerBlocks,
 	resetBlocks,
 	selectBlock,
-	__experimentalShowBlockInterface: showBlockInterface,
 	showInsertionPoint,
 	startMultiSelect,
 	startTyping,
@@ -777,22 +775,6 @@ describe( 'actions', () => {
 		} );
 	} );
 
-	describe( 'hideBlockInterface', () => {
-		it( 'should return the HIDE_BLOCK_INTERFACE action', () => {
-			expect( hideBlockInterface() ).toEqual( {
-				type: 'HIDE_BLOCK_INTERFACE',
-			} );
-		} );
-	} );
-
-	describe( 'showBlockInterface', () => {
-		it( 'should return the SHOW_BLOCK_INTERFACE action', () => {
-			expect( showBlockInterface() ).toEqual( {
-				type: 'SHOW_BLOCK_INTERFACE',
-			} );
-		} );
-	} );
-
 	describe( 'startTyping', () => {
 		it( 'should return the START_TYPING action', () => {
 			expect( startTyping() ).toEqual( {

packages/block-editor/src/store/test/private-actions.js

@@ -0,0 +1,22 @@
+/**
+ * Internal dependencies
+ */
+import { hideBlockInterface, showBlockInterface } from '../private-actions';
+
+describe( 'private actions', () => {
+	describe( 'hideBlockInterface', () => {
+		it( 'should return the HIDE_BLOCK_INTERFACE action', () => {
+			expect( hideBlockInterface() ).toEqual( {
+				type: 'HIDE_BLOCK_INTERFACE',
+			} );
+		} );
+	} );
+
+	describe( 'showBlockInterface', () => {
+		it( 'should return the SHOW_BLOCK_INTERFACE action', () => {
+			expect( showBlockInterface() ).toEqual( {
+				type: 'SHOW_BLOCK_INTERFACE',
+			} );
+		} );
+	} );
+} );

packages/block-editor/src/store/test/private-selectors.js

@@ -0,0 +1,24 @@
+/**
+ * Internal dependencies
+ */
+import { isBlockInterfaceHidden } from '../private-selectors';
+
+describe( 'private selectors', () => {
+	describe( 'isBlockInterfaceHidden', () => {
+		it( 'should return the true if toggled true in state', () => {
+			const state = {
+				isBlockInterfaceHidden: true,
+			};
+
+			expect( isBlockInterfaceHidden( state ) ).toBe( true );
+		} );
+
+		it( 'should return false if toggled false in state', () => {
+			const state = {
+				isBlockInterfaceHidden: false,
+			};
+
+			expect( isBlockInterfaceHidden( state ) ).toBe( false );
+		} );
+	} );
+} );

packages/block-editor/src/store/test/selectors.js

@@ -44,7 +44,6 @@ const {
 	isBlockMultiSelected,
 	isFirstMultiSelectedBlock,
 	getBlockMode,
-	__experimentalIsBlockInterfaceHidden: isBlockInterfaceHidden,
 	isTyping,
 	isDraggingBlocks,
 	getDraggedBlockClientIds,
@@ -2259,24 +2258,6 @@ describe( 'selectors', () => {
 		} );
 	} );
 
-	describe( 'isBlockInterfaceHidden', () => {
-		it( 'should return the true if toggled true in state', () => {
-			const state = {
-				isBlockInterfaceHidden: true,
-			};
-
-			expect( isBlockInterfaceHidden( state ) ).toBe( true );
-		} );
-
-		it( 'should return false if toggled false in state', () => {
-			const state = {
-				isBlockInterfaceHidden: false,
-			};
-
-			expect( isBlockInterfaceHidden( state ) ).toBe( false );
-		} );
-	} );
-
 	describe( 'isTyping', () => {
 		it( 'should return the isTyping flag if the block is selected', () => {
 			const state = {