From 67ce0298434be46537e159ec2fe3e7cedbc2004a Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Thu, 23 Feb 2023 10:18:32 +0200 Subject: [PATCH] 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 * remove redundant comment * be more clear block animation is temporary --------- Co-authored-by: scruffian --- .../src/components/block-inspector/index.js | 25 ++++----- .../useBlockInspectorAnimationSettings.js | 53 +++++++++++++++++++ packages/block-editor/src/store/defaults.js | 15 +++++- 3 files changed, 78 insertions(+), 15 deletions(-) create mode 100644 packages/block-editor/src/components/block-inspector/useBlockInspectorAnimationSettings.js diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js index f80bfddb74018..b2fd086a2a29c 100644 --- a/packages/block-editor/src/components/block-inspector/index.js +++ b/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 ) { diff --git a/packages/block-editor/src/components/block-inspector/useBlockInspectorAnimationSettings.js b/packages/block-editor/src/components/block-inspector/useBlockInspectorAnimationSettings.js new file mode 100644 index 0000000000000..6be7d3fe18667 --- /dev/null +++ b/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 ] + ); +} diff --git a/packages/block-editor/src/store/defaults.js b/packages/block-editor/src/store/defaults.js index 44095cff573f5..7c33350d12dd0 100644 --- a/packages/block-editor/src/store/defaults.js +++ b/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,