From 8aa958eb3ae4e86ecb29123efcd9beb0cc8234ca Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Tue, 7 Feb 2023 15:23:11 +0200 Subject: [PATCH 1/6] adds all allowed innerblocks to the inspector animation experiment --- packages/block-editor/src/store/defaults.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/block-editor/src/store/defaults.js b/packages/block-editor/src/store/defaults.js index 44095cff573f54..8cd79011d13480 100644 --- a/packages/block-editor/src/store/defaults.js +++ b/packages/block-editor/src/store/defaults.js @@ -175,6 +175,13 @@ export const SETTINGS_DEFAULTS = { '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, From a8091a76db6356f2f37179c2fa35932477ff35ce Mon Sep 17 00:00:00 2001 From: scruffian Date: Tue, 14 Feb 2023 17:32:13 +0000 Subject: [PATCH 2/6] don't animate unless we're in a navigation block --- .../src/components/block-inspector/index.js | 20 +++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js index f80bfddb74018e..e9e6fa2d57d1ad 100644 --- a/packages/block-editor/src/components/block-inspector/index.js +++ b/packages/block-editor/src/components/block-inspector/index.js @@ -176,9 +176,29 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => { const blockInspectorAnimationSettings = useSelect( ( select ) => { if ( blockType ) { + const { getSelectedBlockClientId, getBlockParentsByBlockName } = + select( blockEditorStore ); + + const _selectedBlockClientId = getSelectedBlockClientId(); + const parentNavBlockClientId = getBlockParentsByBlockName( + _selectedBlockClientId, + 'core/navigation', + true + )[ 0 ]; + + // If the selected block is not a child of a navigation block, + // and not a navigation block itselt don't animate. + if ( + ! parentNavBlockClientId && + blockType.name !== 'core/navigation' + ) { + return null; + } + const globalBlockInspectorAnimationSettings = select( blockEditorStore ).getSettings() .blockInspectorAnimation; + return globalBlockInspectorAnimationSettings?.[ blockType.name ]; From d4fa60a920ce9a24f84a1ea7ec514b74c160ee33 Mon Sep 17 00:00:00 2001 From: scruffian Date: Tue, 14 Feb 2023 17:41:36 +0000 Subject: [PATCH 3/6] make the nav block a config --- .../src/components/block-inspector/index.js | 27 +++++++++++-------- packages/block-editor/src/store/defaults.js | 1 + 2 files changed, 17 insertions(+), 11 deletions(-) diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js index e9e6fa2d57d1ad..c80deedf793dfd 100644 --- a/packages/block-editor/src/components/block-inspector/index.js +++ b/packages/block-editor/src/components/block-inspector/index.js @@ -176,29 +176,34 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => { const blockInspectorAnimationSettings = useSelect( ( select ) => { if ( blockType ) { + // Get the global blockInspectorAnimationSettings. + 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; + + // Determin whether the animationParent block is a parent of the selected block. const { getSelectedBlockClientId, getBlockParentsByBlockName } = select( blockEditorStore ); - const _selectedBlockClientId = getSelectedBlockClientId(); - const parentNavBlockClientId = getBlockParentsByBlockName( + const animationParentBlockClientId = getBlockParentsByBlockName( _selectedBlockClientId, - 'core/navigation', + animationParent, true )[ 0 ]; - // If the selected block is not a child of a navigation block, - // and not a navigation block itselt don't animate. + // If the selected block is not a child of the animationParent block, + // and not an animationParent block itself, don't animate. if ( - ! parentNavBlockClientId && - blockType.name !== 'core/navigation' + ! animationParentBlockClientId && + blockType.name !== animationParent ) { return null; } - const globalBlockInspectorAnimationSettings = - select( blockEditorStore ).getSettings() - .blockInspectorAnimation; - return globalBlockInspectorAnimationSettings?.[ blockType.name ]; diff --git a/packages/block-editor/src/store/defaults.js b/packages/block-editor/src/store/defaults.js index 8cd79011d13480..173bdd43d3d66c 100644 --- a/packages/block-editor/src/store/defaults.js +++ b/packages/block-editor/src/store/defaults.js @@ -172,6 +172,7 @@ export const SETTINGS_DEFAULTS = { // This setting is `private` now with `lock` API. blockInspectorAnimation: { + animationParent: 'core/navigation', 'core/navigation': { enterDirection: 'leftToRight' }, 'core/navigation-submenu': { enterDirection: 'rightToLeft' }, 'core/navigation-link': { enterDirection: 'rightToLeft' }, From 617bfb1ad9a3aee6e5e05475d027b01cc1e0bf01 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Thu, 16 Feb 2023 11:06:03 +0000 Subject: [PATCH 4/6] Update packages/block-editor/src/components/block-inspector/index.js Co-authored-by: Andrei Draganescu --- packages/block-editor/src/components/block-inspector/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js index c80deedf793dfd..0f78709b542266 100644 --- a/packages/block-editor/src/components/block-inspector/index.js +++ b/packages/block-editor/src/components/block-inspector/index.js @@ -185,7 +185,7 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => { const animationParent = globalBlockInspectorAnimationSettings?.animationParent; - // Determin whether the animationParent block is a parent of the selected block. + // Determine whether the animationParent block is a parent of the selected block. const { getSelectedBlockClientId, getBlockParentsByBlockName } = select( blockEditorStore ); const _selectedBlockClientId = getSelectedBlockClientId(); From fc8debabce242d21602f5a0333e3ac3462c3887b Mon Sep 17 00:00:00 2001 From: scruffian Date: Thu, 16 Feb 2023 11:09:07 +0000 Subject: [PATCH 5/6] remove redundant comment --- packages/block-editor/src/components/block-inspector/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js index 0f78709b542266..5ab96379b65fec 100644 --- a/packages/block-editor/src/components/block-inspector/index.js +++ b/packages/block-editor/src/components/block-inspector/index.js @@ -176,7 +176,6 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => { const blockInspectorAnimationSettings = useSelect( ( select ) => { if ( blockType ) { - // Get the global blockInspectorAnimationSettings. const globalBlockInspectorAnimationSettings = select( blockEditorStore ).getSettings() .blockInspectorAnimation; From 4d6ad96a61af3caa58008be2c763aa7f69177ddb Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Wed, 22 Feb 2023 17:45:42 +0200 Subject: [PATCH 6/6] be more clear block animation is temporary --- .../src/components/block-inspector/index.js | 49 ++++------------- .../useBlockInspectorAnimationSettings.js | 53 +++++++++++++++++++ packages/block-editor/src/store/defaults.js | 7 ++- 3 files changed, 70 insertions(+), 39 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 5ab96379b65fec..b2fd086a2a29c7 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,43 +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; - - // 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 ] + // 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 00000000000000..6be7d3fe18667e --- /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 173bdd43d3d66c..7c33350d12dd01 100644 --- a/packages/block-editor/src/store/defaults.js +++ b/packages/block-editor/src/store/defaults.js @@ -170,7 +170,12 @@ 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' },