Adds all allowed innerblocks to the inspector animation experiment (#…

…47834)

* adds all allowed innerblocks to the inspector animation experiment

* don't animate unless we're in a navigation block

* make the nav block a config

* Update packages/block-editor/src/components/block-inspector/index.js

Co-authored-by: Andrei Draganescu <me@andreidraganescu.info>

* remove redundant comment

* be more clear block animation is temporary

---------

Co-authored-by: scruffian <ben@scruffian.com>

packages/block-editor/src/components/block-inspector/index.js

@@ -36,6 +36,7 @@ import { default as InspectorControlsTabs } from '../inspector-controls-tabs';
 import useInspectorControlsTabs from '../inspector-controls-tabs/use-inspector-controls-tabs';
 import AdvancedControls from '../inspector-controls-tabs/advanced-controls-panel';
 import PositionControls from '../inspector-controls-tabs/position-controls-panel';
+import useBlockInspectorAnimationSettings from './useBlockInspectorAnimationSettings';
 
 function useContentBlocks( blockTypes, block ) {
 	const contentBlocksObjectAux = useMemo( () => {
@@ -56,7 +57,7 @@ function useContentBlocks( blockTypes, block ) {
 		( blockName ) => {
 			return !! contentBlocksObjectAux[ blockName ];
 		},
-		[ blockTypes ]
+		[ contentBlocksObjectAux ]
 	);
 	return useMemo( () => {
 		return getContentBlocks( [ block ], isContentBlock );
@@ -173,19 +174,15 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 	const availableTabs = useInspectorControlsTabs( blockType?.name );
 	const showTabs = availableTabs?.length > 1;
 
-	const blockInspectorAnimationSettings = useSelect(
-		( select ) => {
-			if ( blockType ) {
-				const globalBlockInspectorAnimationSettings =
-					select( blockEditorStore ).getSettings()
-						.blockInspectorAnimation;
-				return globalBlockInspectorAnimationSettings?.[
-					blockType.name
-				];
-			}
-			return null;
-		},
-		[ selectedBlockClientId, blockType ]
+	// The block inspector animation settings will be completely
+	// removed in the future to create an API which allows the block
+	// inspector to transition between what it
+	// displays based on the relationship between the selected block
+	// and its parent, and only enable it if the parent is controlling
+	// its children blocks.
+	const blockInspectorAnimationSettings = useBlockInspectorAnimationSettings(
+		blockType,
+		selectedBlockClientId
 	);
 
 	if ( count > 1 ) {

packages/block-editor/src/components/block-inspector/useBlockInspectorAnimationSettings.js

@@ -0,0 +1,53 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+
+export default function useBlockInspectorAnimationSettings(
+	blockType,
+	selectedBlockClientId
+) {
+	return useSelect(
+		( select ) => {
+			if ( blockType ) {
+				const globalBlockInspectorAnimationSettings =
+					select( blockEditorStore ).getSettings()
+						.blockInspectorAnimation;
+
+				// Get the name of the block that will allow it's children to be animated.
+				const animationParent =
+					globalBlockInspectorAnimationSettings?.animationParent;
+
+				// Determine whether the animationParent block is a parent of the selected block.
+				const { getSelectedBlockClientId, getBlockParentsByBlockName } =
+					select( blockEditorStore );
+				const _selectedBlockClientId = getSelectedBlockClientId();
+				const animationParentBlockClientId = getBlockParentsByBlockName(
+					_selectedBlockClientId,
+					animationParent,
+					true
+				)[ 0 ];
+
+				// If the selected block is not a child of the animationParent block,
+				// and not an animationParent block itself, don't animate.
+				if (
+					! animationParentBlockClientId &&
+					blockType.name !== animationParent
+				) {
+					return null;
+				}
+
+				return globalBlockInspectorAnimationSettings?.[
+					blockType.name
+				];
+			}
+			return null;
+		},
+		[ selectedBlockClientId, blockType ]
+	);
+}

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

@@ -170,11 +170,24 @@ export const SETTINGS_DEFAULTS = {
 	__unstableGalleryWithImageBlocks: false,
 	__unstableIsPreviewMode: false,
 
-	// This setting is `private` now with `lock` API.
+	// These settings will be completely revamped in the future.
+	// The goal is to evolve this into an API which will instruct
+	// the block inspector to animate transitions between what it
+	// displays based on the relationship between the selected block
+	// and its parent, and only enable it if the parent is controlling
+	// its children blocks.
 	blockInspectorAnimation: {
+		animationParent: 'core/navigation',
 		'core/navigation': { enterDirection: 'leftToRight' },
 		'core/navigation-submenu': { enterDirection: 'rightToLeft' },
 		'core/navigation-link': { enterDirection: 'rightToLeft' },
+		'core/search': { enterDirection: 'rightToLeft' },
+		'core/social-links': { enterDirection: 'rightToLeft' },
+		'core/page-list': { enterDirection: 'rightToLeft' },
+		'core/spacer': { enterDirection: 'rightToLeft' },
+		'core/home-link': { enterDirection: 'rightToLeft' },
+		'core/site-title': { enterDirection: 'rightToLeft' },
+		'core/site-logo': { enterDirection: 'rightToLeft' },
 	},
 
 	generateAnchors: false,