From 627dcf3674ed8980a0d68cfc17814a244b0290bb Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Fri, 25 Sep 2020 19:01:58 -0400 Subject: [PATCH 01/19] apply mode from blocklist + css --- .../src/components/block-list/index.js | 22 +++++++++++++++++-- .../src/components/block-list/style.scss | 13 +++++++++++ 2 files changed, 33 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js index 22ede3bc48e677..4b7d52876d8feb 100644 --- a/packages/block-editor/src/components/block-list/index.js +++ b/packages/block-editor/src/components/block-list/index.js @@ -36,6 +36,8 @@ function BlockList( ) { function selector( select ) { const { + getBlockName, + getBlockParentsByBlockName, getBlockOrder, getBlockListSettings, getSelectedBlockClientId, @@ -46,16 +48,30 @@ function BlockList( isDraggingBlocks, } = select( 'core/block-editor' ); + const selectedBlockClientId = getSelectedBlockClientId(); + const multiSelectedBlockClientIds = getMultiSelectedBlockClientIds(); + const isTemplatePartOrChildSelected = + getBlockName( selectedBlockClientId ) === 'core/template-part' || + getBlockParentsByBlockName( + selectedBlockClientId, + 'core/template-part' + ).length || + getBlockParentsByBlockName( + multiSelectedBlockClientIds[ 0 ], + 'core/template-part' + ).length; + return { blockClientIds: getBlockOrder( rootClientId ), - selectedBlockClientId: getSelectedBlockClientId(), - multiSelectedBlockClientIds: getMultiSelectedBlockClientIds(), + selectedBlockClientId, + multiSelectedBlockClientIds, orientation: getBlockListSettings( rootClientId )?.orientation, hasMultiSelection: hasMultiSelection(), enableAnimation: ! isTyping() && getGlobalBlockCount() <= BLOCK_ANIMATION_THRESHOLD, isDraggingBlocks: isDraggingBlocks(), + isTemplatePartOrChildSelected, }; } @@ -67,6 +83,7 @@ function BlockList( hasMultiSelection, enableAnimation, isDraggingBlocks, + isTemplatePartOrChildSelected, } = useSelect( selector, [ rootClientId ] ); const fallbackRef = useRef(); @@ -117,6 +134,7 @@ function BlockList( 'is-dropping-horizontally': isDropTarget && orientation === 'horizontal', + 'template-part-highlighting': isTemplatePartOrChildSelected, } ) } /> diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss index ad60dd086b12ca..442917cfb358f6 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -85,6 +85,19 @@ opacity: 1; } } + + // Template Part highlighting. + &.template-part-highlighting:not(.is-focus-mode) { + opacity: 0.5; + transition: opacity 0.1s linear; + @include reduce-motion("transition"); + + &.is-selected, + &.has-child-selected, + .block-editor-block-list__block { + opacity: 1; + } + } } .block-editor-block-list__layout .block-editor-block-list__block, From 6181fd4ca318140c9bb1ebc225cfe69884fab277 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Mon, 28 Sep 2020 16:33:33 -0400 Subject: [PATCH 02/19] added class to most active template part --- .../src/components/block-list/block.js | 2 ++ .../src/components/block-list/index.js | 34 ++++++++++++------- 2 files changed, 23 insertions(+), 13 deletions(-) diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js index 9d151b9793d3cf..6f651668f461e5 100644 --- a/packages/block-editor/src/components/block-list/block.js +++ b/packages/block-editor/src/components/block-list/block.js @@ -102,6 +102,7 @@ function BlockListBlock( { toggleSelection, index, enableAnimation, + activeTemplatePartId, } ) { // In addition to withSelect, we should favor using useSelect in this // component going forward to avoid leaking new props to the public API @@ -166,6 +167,7 @@ function BlockListBlock( { isFocusMode && ( isSelected || isAncestorOfSelectedBlock ), 'is-focus-mode': isFocusMode, 'has-child-selected': isAncestorOfSelectedBlock && ! isDragging, + 'is-active-template-part': activeTemplatePartId === clientId, }, className ); diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js index 4b7d52876d8feb..05daa54be317fb 100644 --- a/packages/block-editor/src/components/block-list/index.js +++ b/packages/block-editor/src/components/block-list/index.js @@ -2,7 +2,7 @@ * External dependencies */ import classnames from 'classnames'; - +import { last } from 'lodash'; /** * WordPress dependencies */ @@ -50,16 +50,23 @@ function BlockList( const selectedBlockClientId = getSelectedBlockClientId(); const multiSelectedBlockClientIds = getMultiSelectedBlockClientIds(); - const isTemplatePartOrChildSelected = - getBlockName( selectedBlockClientId ) === 'core/template-part' || - getBlockParentsByBlockName( - selectedBlockClientId, - 'core/template-part' - ).length || - getBlockParentsByBlockName( - multiSelectedBlockClientIds[ 0 ], + + // Determine if there is a template part block to highlight. + const activeTemplatePartId = ( function () { + if ( + getBlockName( selectedBlockClientId ) === 'core/template-part' + ) { + return selectedBlockClientId; + } + const templatePartParents = getBlockParentsByBlockName( + selectedBlockClientId || multiSelectedBlockClientIds[ 0 ], 'core/template-part' - ).length; + ); + if ( templatePartParents ) { + return last( templatePartParents ); + } + return null; + } )(); return { blockClientIds: getBlockOrder( rootClientId ), @@ -71,7 +78,7 @@ function BlockList( ! isTyping() && getGlobalBlockCount() <= BLOCK_ANIMATION_THRESHOLD, isDraggingBlocks: isDraggingBlocks(), - isTemplatePartOrChildSelected, + activeTemplatePartId, }; } @@ -83,7 +90,7 @@ function BlockList( hasMultiSelection, enableAnimation, isDraggingBlocks, - isTemplatePartOrChildSelected, + activeTemplatePartId, } = useSelect( selector, [ rootClientId ] ); const fallbackRef = useRef(); @@ -134,8 +141,9 @@ function BlockList( 'is-dropping-horizontally': isDropTarget && orientation === 'horizontal', - 'template-part-highlighting': isTemplatePartOrChildSelected, + 'template-part-highlighting': activeTemplatePartId, } ) } + activeTemplatePartId={ activeTemplatePartId } /> ); From 1f117bd267157425fe02b3dc95e900a2c6cfce4d Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Mon, 28 Sep 2020 16:41:45 -0400 Subject: [PATCH 03/19] css rules to support nested/active template parts --- packages/block-editor/src/components/block-list/style.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss index 442917cfb358f6..d2abc0d2504b8a 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -86,7 +86,7 @@ } } - // Template Part highlighting. + // Active template part highlighting. &.template-part-highlighting:not(.is-focus-mode) { opacity: 0.5; transition: opacity 0.1s linear; @@ -94,7 +94,9 @@ &.is-selected, &.has-child-selected, - .block-editor-block-list__block { + &:not(.is-selected):not(.has-child-selected) .block-editor-block-list__block, + &.is-active-template-part .block-editor-block-list__block, + .is-active-template-part .block-editor-block-list__block { opacity: 1; } } From 536a55bd780da5c9e4d18313db2b95de7c088809 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Mon, 28 Sep 2020 19:54:45 -0400 Subject: [PATCH 04/19] gate template part check behind site editor experiment --- .../src/components/block-list/index.js | 36 +++++++++++-------- 1 file changed, 21 insertions(+), 15 deletions(-) diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js index 05daa54be317fb..add3151504ef4a 100644 --- a/packages/block-editor/src/components/block-list/index.js +++ b/packages/block-editor/src/components/block-list/index.js @@ -40,6 +40,7 @@ function BlockList( getBlockParentsByBlockName, getBlockOrder, getBlockListSettings, + getSettings, getSelectedBlockClientId, getMultiSelectedBlockClientIds, hasMultiSelection, @@ -51,22 +52,27 @@ function BlockList( const selectedBlockClientId = getSelectedBlockClientId(); const multiSelectedBlockClientIds = getMultiSelectedBlockClientIds(); + const isFullSiteEditingEnabled = getSettings() + .__experimentalEnableFullSiteEditing; // Determine if there is a template part block to highlight. - const activeTemplatePartId = ( function () { - if ( - getBlockName( selectedBlockClientId ) === 'core/template-part' - ) { - return selectedBlockClientId; - } - const templatePartParents = getBlockParentsByBlockName( - selectedBlockClientId || multiSelectedBlockClientIds[ 0 ], - 'core/template-part' - ); - if ( templatePartParents ) { - return last( templatePartParents ); - } - return null; - } )(); + const activeTemplatePartId = + isFullSiteEditingEnabled && + ( function () { + if ( + getBlockName( selectedBlockClientId ) === + 'core/template-part' + ) { + return selectedBlockClientId; + } + const templatePartParents = getBlockParentsByBlockName( + selectedBlockClientId || multiSelectedBlockClientIds[ 0 ], + 'core/template-part' + ); + if ( templatePartParents ) { + return last( templatePartParents ); + } + return null; + } )(); return { blockClientIds: getBlockOrder( rootClientId ), From 70c56e57ec8d9b6e0417a14f9a40a239bb5e5527 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Tue, 29 Sep 2020 15:25:18 -0400 Subject: [PATCH 05/19] rebrand/refactor to support more entity blocks if necessary --- .../developers/data/data-core-block-editor.md | 10 +++--- .../src/components/block-list/block.js | 4 +-- .../src/components/block-list/index.js | 31 ++++++++++++------- .../src/components/block-list/style.scss | 6 ++-- packages/block-editor/src/store/selectors.js | 23 +++++++++----- 5 files changed, 45 insertions(+), 29 deletions(-) diff --git a/docs/designers-developers/developers/data/data-core-block-editor.md b/docs/designers-developers/developers/data/data-core-block-editor.md index 2fb6515f86a7fb..b4e3f2cd31a4ad 100644 --- a/docs/designers-developers/developers/data/data-core-block-editor.md +++ b/docs/designers-developers/developers/data/data-core-block-editor.md @@ -243,15 +243,17 @@ _Returns_ # **getBlockParentsByBlockName** -Given a block client ID and a block name, -returns the list of all its parents from top to bottom, -filtered by the given name. +Given a block client ID and a block name, returns the list of all its parents +from top to bottom, filtered by the given name(s). For example, if passed +'core/group' as the blockName, it will only return parents which are group +blocks. If passed `[ 'core/group', 'core/cover']`, as the blockName, it will +return parents which are group blocks and parents which are cover blocks. _Parameters_ - _state_ `Object`: Editor state. - _clientId_ `string`: Block from which to find root client ID. -- _blockName_ `string`: Block name to filter. +- _blockName_ `(string|Array)`: Block name(s) to filter. - _ascending_ `boolean`: Order results from bottom to top (true) or top to bottom (false). _Returns_ diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js index 6f651668f461e5..c63c1e527d7329 100644 --- a/packages/block-editor/src/components/block-list/block.js +++ b/packages/block-editor/src/components/block-list/block.js @@ -102,7 +102,7 @@ function BlockListBlock( { toggleSelection, index, enableAnimation, - activeTemplatePartId, + activeEntityBlockId, } ) { // In addition to withSelect, we should favor using useSelect in this // component going forward to avoid leaking new props to the public API @@ -167,7 +167,7 @@ function BlockListBlock( { isFocusMode && ( isSelected || isAncestorOfSelectedBlock ), 'is-focus-mode': isFocusMode, 'has-child-selected': isAncestorOfSelectedBlock && ! isDragging, - 'is-active-template-part': activeTemplatePartId === clientId, + 'is-active-entity': activeEntityBlockId === clientId, }, className ); diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js index add3151504ef4a..e832350d491c0f 100644 --- a/packages/block-editor/src/components/block-list/index.js +++ b/packages/block-editor/src/components/block-list/index.js @@ -22,6 +22,8 @@ import useBlockDropZone from '../use-block-drop-zone'; * to avoid laginess. */ const BLOCK_ANIMATION_THRESHOLD = 200; +// List of blocks to 'spotlight' when active in Full Site Editing. +const ENTITY_AREAS = [ 'core/template-part' ]; function BlockList( { @@ -52,24 +54,29 @@ function BlockList( const selectedBlockClientId = getSelectedBlockClientId(); const multiSelectedBlockClientIds = getMultiSelectedBlockClientIds(); + // Determine if there is an active template part (or other entity) to spotlight. + // Restrict to Full Site Editing experiment. const isFullSiteEditingEnabled = getSettings() .__experimentalEnableFullSiteEditing; - // Determine if there is a template part block to highlight. - const activeTemplatePartId = + const activeEntityBlockId = isFullSiteEditingEnabled && ( function () { + // Check if selected block is a valid entity area. if ( - getBlockName( selectedBlockClientId ) === - 'core/template-part' + ENTITY_AREAS.includes( + getBlockName( selectedBlockClientId ) + ) ) { return selectedBlockClientId; } - const templatePartParents = getBlockParentsByBlockName( + // Check if first selected block is a child of a valid entity area. + const entityAreaParents = getBlockParentsByBlockName( selectedBlockClientId || multiSelectedBlockClientIds[ 0 ], - 'core/template-part' + ENTITY_AREAS ); - if ( templatePartParents ) { - return last( templatePartParents ); + if ( entityAreaParents ) { + // Last parent closest/most interior. + return last( entityAreaParents ); } return null; } )(); @@ -84,7 +91,7 @@ function BlockList( ! isTyping() && getGlobalBlockCount() <= BLOCK_ANIMATION_THRESHOLD, isDraggingBlocks: isDraggingBlocks(), - activeTemplatePartId, + activeEntityBlockId, }; } @@ -96,7 +103,7 @@ function BlockList( hasMultiSelection, enableAnimation, isDraggingBlocks, - activeTemplatePartId, + activeEntityBlockId, } = useSelect( selector, [ rootClientId ] ); const fallbackRef = useRef(); @@ -147,9 +154,9 @@ function BlockList( 'is-dropping-horizontally': isDropTarget && orientation === 'horizontal', - 'template-part-highlighting': activeTemplatePartId, + 'has-active-entity': activeEntityBlockId, } ) } - activeTemplatePartId={ activeTemplatePartId } + activeEntityBlockId={ activeEntityBlockId } /> ); diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss index d2abc0d2504b8a..4eb895ed936545 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -87,7 +87,7 @@ } // Active template part highlighting. - &.template-part-highlighting:not(.is-focus-mode) { + &.has-active-entity:not(.is-focus-mode) { opacity: 0.5; transition: opacity 0.1s linear; @include reduce-motion("transition"); @@ -95,8 +95,8 @@ &.is-selected, &.has-child-selected, &:not(.is-selected):not(.has-child-selected) .block-editor-block-list__block, - &.is-active-template-part .block-editor-block-list__block, - .is-active-template-part .block-editor-block-list__block { + &.is-active-entity .block-editor-block-list__block, + .is-active-entity .block-editor-block-list__block { opacity: 1; } } diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index b84a7ff24aed79..2de81289ad88de 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/packages/block-editor/src/store/selectors.js @@ -512,14 +512,16 @@ export const getBlockParents = createSelector( ); /** - * Given a block client ID and a block name, - * returns the list of all its parents from top to bottom, - * filtered by the given name. + * Given a block client ID and a block name, returns the list of all its parents + * from top to bottom, filtered by the given name(s). For example, if passed + * 'core/group' as the blockName, it will only return parents which are group + * blocks. If passed `[ 'core/group', 'core/cover']`, as the blockName, it will + * return parents which are group blocks and parents which are cover blocks. * - * @param {Object} state Editor state. - * @param {string} clientId Block from which to find root client ID. - * @param {string} blockName Block name to filter. - * @param {boolean} ascending Order results from bottom to top (true) or top to bottom (false). + * @param {Object} state Editor state. + * @param {string} clientId Block from which to find root client ID. + * @param {string|string[]} blockName Block name(s) to filter. + * @param {boolean} ascending Order results from bottom to top (true) or top to bottom (false). * * @return {Array} ClientIDs of the parent blocks. */ @@ -532,7 +534,12 @@ export const getBlockParentsByBlockName = createSelector( id, name: getBlockName( state, id ), } ) ), - { name: blockName } + ( { name } ) => { + if ( Array.isArray( blockName ) ) { + return blockName.includes( name ); + } + return name === blockName; + } ), ( { id } ) => id ); From 5bd938457e2cda84779edc2976a1b0990ba3cbde Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Thu, 1 Oct 2020 14:19:36 -0400 Subject: [PATCH 06/19] move logic to selector --- .../src/components/block-list/index.js | 34 +++---------------- packages/block-editor/src/store/selectors.js | 29 ++++++++++++++++ 2 files changed, 34 insertions(+), 29 deletions(-) diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js index e832350d491c0f..10657365a44543 100644 --- a/packages/block-editor/src/components/block-list/index.js +++ b/packages/block-editor/src/components/block-list/index.js @@ -2,7 +2,7 @@ * External dependencies */ import classnames from 'classnames'; -import { last } from 'lodash'; + /** * WordPress dependencies */ @@ -38,8 +38,6 @@ function BlockList( ) { function selector( select ) { const { - getBlockName, - getBlockParentsByBlockName, getBlockOrder, getBlockListSettings, getSettings, @@ -49,42 +47,20 @@ function BlockList( getGlobalBlockCount, isTyping, isDraggingBlocks, + getActiveEntityBlockId, } = select( 'core/block-editor' ); - const selectedBlockClientId = getSelectedBlockClientId(); - const multiSelectedBlockClientIds = getMultiSelectedBlockClientIds(); - // Determine if there is an active template part (or other entity) to spotlight. // Restrict to Full Site Editing experiment. const isFullSiteEditingEnabled = getSettings() .__experimentalEnableFullSiteEditing; const activeEntityBlockId = - isFullSiteEditingEnabled && - ( function () { - // Check if selected block is a valid entity area. - if ( - ENTITY_AREAS.includes( - getBlockName( selectedBlockClientId ) - ) - ) { - return selectedBlockClientId; - } - // Check if first selected block is a child of a valid entity area. - const entityAreaParents = getBlockParentsByBlockName( - selectedBlockClientId || multiSelectedBlockClientIds[ 0 ], - ENTITY_AREAS - ); - if ( entityAreaParents ) { - // Last parent closest/most interior. - return last( entityAreaParents ); - } - return null; - } )(); + isFullSiteEditingEnabled && getActiveEntityBlockId( ENTITY_AREAS ); return { blockClientIds: getBlockOrder( rootClientId ), - selectedBlockClientId, - multiSelectedBlockClientIds, + selectedBlockClientId: getSelectedBlockClientId(), + multiSelectedBlockClientIds: getMultiSelectedBlockClientIds(), orientation: getBlockListSettings( rootClientId )?.orientation, hasMultiSelection: hasMultiSelection(), enableAnimation: diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index 2de81289ad88de..faa8b47e30ae04 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/packages/block-editor/src/store/selectors.js @@ -1798,3 +1798,32 @@ export function isBlockHighlighted( state, clientId ) { export function areInnerBlocksControlled( state, clientId ) { return !! state.blocks.controlledInnerBlocks[ clientId ]; } + +export const getActiveEntityBlockId = createSelector( + ( state, validControllerBlocks ) => { + // Check if selected block is a valid entity area. + const selectedBlockClientId = getSelectedBlockClientId( state ); + if ( + validControllerBlocks.includes( + getBlockName( state, selectedBlockClientId ) + ) + ) { + return selectedBlockClientId; + } + // Check if first selected block is a child of a valid entity area. + const multiSelectedBlockClientIds = getMultiSelectedBlockClientIds( + state + ); + const entityAreaParents = getBlockParentsByBlockName( + state, + selectedBlockClientId || multiSelectedBlockClientIds[ 0 ], + validControllerBlocks + ); + if ( entityAreaParents ) { + // Last parent closest/most interior. + return last( entityAreaParents ); + } + return null; + }, + ( state ) => [ state.selectionStart.clientId ] +); From 9a620d9b62953e205b4dce6714cee3d5d681db38 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Thu, 1 Oct 2020 14:50:50 -0400 Subject: [PATCH 07/19] change selector name and add doc comments --- .../developers/data/data-core-block-editor.md | 15 +++++++++++++++ .../src/components/block-list/index.js | 5 +++-- packages/block-editor/src/store/selectors.js | 18 ++++++++++++++---- 3 files changed, 32 insertions(+), 6 deletions(-) diff --git a/docs/designers-developers/developers/data/data-core-block-editor.md b/docs/designers-developers/developers/data/data-core-block-editor.md index b4e3f2cd31a4ad..878ee407bfa35b 100644 --- a/docs/designers-developers/developers/data/data-core-block-editor.md +++ b/docs/designers-developers/developers/data/data-core-block-editor.md @@ -60,6 +60,21 @@ _Returns_ - `boolean`: Whether the last change was automatic. +# **getActiveBlockIdByBlockType** + +Returns the clientId for the first 'active' block of a given array of block types. +A block is 'active' if it (or a child) is the selected block. +Returns the first match moving up the DOM from the selected block. + +_Parameters_ + +- _state_ `Object`: Global application state. +- _validBlocksTypes_ `Array`: The parent block types to check for. + +_Returns_ + +- `string`: The matching block's clientId. + # **getAdjacentBlockClientId** Returns the client ID of the block adjacent one at the given reference diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js index 10657365a44543..38b836718a87b4 100644 --- a/packages/block-editor/src/components/block-list/index.js +++ b/packages/block-editor/src/components/block-list/index.js @@ -47,7 +47,7 @@ function BlockList( getGlobalBlockCount, isTyping, isDraggingBlocks, - getActiveEntityBlockId, + getActiveBlockIdByBlockType, } = select( 'core/block-editor' ); // Determine if there is an active template part (or other entity) to spotlight. @@ -55,7 +55,8 @@ function BlockList( const isFullSiteEditingEnabled = getSettings() .__experimentalEnableFullSiteEditing; const activeEntityBlockId = - isFullSiteEditingEnabled && getActiveEntityBlockId( ENTITY_AREAS ); + isFullSiteEditingEnabled && + getActiveBlockIdByBlockType( ENTITY_AREAS ); return { blockClientIds: getBlockOrder( rootClientId ), diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index faa8b47e30ae04..eed1fb8576d6da 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/packages/block-editor/src/store/selectors.js @@ -1799,12 +1799,22 @@ export function areInnerBlocksControlled( state, clientId ) { return !! state.blocks.controlledInnerBlocks[ clientId ]; } -export const getActiveEntityBlockId = createSelector( - ( state, validControllerBlocks ) => { +/** + * Returns the clientId for the first 'active' block of a given array of block types. + * A block is 'active' if it (or a child) is the selected block. + * Returns the first match moving up the DOM from the selected block. + * + * @param {Object} state Global application state. + * @param {string[]} validBlocksTypes The parent block types to check for. + * + * @return {string} The matching block's clientId. + */ +export const getActiveBlockIdByBlockType = createSelector( + ( state, validBlocksTypes ) => { // Check if selected block is a valid entity area. const selectedBlockClientId = getSelectedBlockClientId( state ); if ( - validControllerBlocks.includes( + validBlocksTypes.includes( getBlockName( state, selectedBlockClientId ) ) ) { @@ -1817,7 +1827,7 @@ export const getActiveEntityBlockId = createSelector( const entityAreaParents = getBlockParentsByBlockName( state, selectedBlockClientId || multiSelectedBlockClientIds[ 0 ], - validControllerBlocks + validBlocksTypes ); if ( entityAreaParents ) { // Last parent closest/most interior. From f30c4a1c2b8f4e86f657a1bb6f0271fa199f7488 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Thu, 1 Oct 2020 15:13:23 -0400 Subject: [PATCH 08/19] update tests for updated selector --- .../block-editor/src/store/test/selectors.js | 54 +++++++++++++++++++ 1 file changed, 54 insertions(+) diff --git a/packages/block-editor/src/store/test/selectors.js b/packages/block-editor/src/store/test/selectors.js index 187a5fb6dc767e..d6421dcadf356a 100644 --- a/packages/block-editor/src/store/test/selectors.js +++ b/packages/block-editor/src/store/test/selectors.js @@ -525,6 +525,60 @@ describe( 'selectors', () => { ) ).toEqual( [] ); } ); + it( 'Should optionally accept an array of parent types and return parents of multiple types', () => { + const state = { + blocks: { + parents: { + 'client-id-01': '', + 'client-id-02': 'client-id-01', + 'client-id-03': 'client-id-02', + 'client-id-04': 'client-id-03', + 'client-id-05': 'client-id-04', + }, + byClientId: { + 'client-id-01': { + clientId: 'client-id-01', + name: 'core/navigation', + }, + 'client-id-02': { + clientId: 'client-id-02', + name: 'core/columns', + }, + 'client-id-03': { + clientId: 'client-id-03', + name: 'core/navigation', + }, + 'client-id-04': { + clientId: 'client-id-04', + name: 'core/navigation-link', + }, + 'client-id-05': { + clientId: 'client-id-05', + name: 'core/navigation-link', + }, + }, + cache: { + 'client-id-01': {}, + 'client-id-02': {}, + 'client-id-03': {}, + 'client-id-04': {}, + 'client-id-05': {}, + }, + controlledInnerBlocks: {}, + }, + }; + expect( + getBlockParentsByBlockName( state, 'client-id-05', [ + 'core/navigation', + ] ) + ).toEqual( [ 'client-id-01', 'client-id-03' ] ); + expect( + getBlockParentsByBlockName( state, 'client-id-05', [ + 'core/columns', + 'core/navigation', + ] ) + ).toEqual( [ 'client-id-01', 'client-id-02', 'client-id-03' ] ); + } ); } ); describe( 'getClientIdsOfDescendants', () => { From 1ef369550d318f58def2b4fff20f310082373515 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Thu, 1 Oct 2020 16:13:38 -0400 Subject: [PATCH 09/19] add test for new selector --- .../developers/data/data-core-block-editor.md | 6 +- .../src/components/block-list/index.js | 7 +- packages/block-editor/src/store/selectors.js | 12 +-- .../block-editor/src/store/test/selectors.js | 75 +++++++++++++++++++ 4 files changed, 88 insertions(+), 12 deletions(-) diff --git a/docs/designers-developers/developers/data/data-core-block-editor.md b/docs/designers-developers/developers/data/data-core-block-editor.md index 878ee407bfa35b..40bc63ff57037a 100644 --- a/docs/designers-developers/developers/data/data-core-block-editor.md +++ b/docs/designers-developers/developers/data/data-core-block-editor.md @@ -60,16 +60,16 @@ _Returns_ - `boolean`: Whether the last change was automatic. -# **getActiveBlockIdByBlockType** +# **getActiveBlockIdByBlockNames** -Returns the clientId for the first 'active' block of a given array of block types. +Returns the clientId for the first 'active' block of a given array of block names. A block is 'active' if it (or a child) is the selected block. Returns the first match moving up the DOM from the selected block. _Parameters_ - _state_ `Object`: Global application state. -- _validBlocksTypes_ `Array`: The parent block types to check for. +- _validBlocksNames_ `Array`: The names of block types to check for. _Returns_ diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js index 38b836718a87b4..a17bd5f6c8fe06 100644 --- a/packages/block-editor/src/components/block-list/index.js +++ b/packages/block-editor/src/components/block-list/index.js @@ -47,16 +47,17 @@ function BlockList( getGlobalBlockCount, isTyping, isDraggingBlocks, - getActiveBlockIdByBlockType, + getActiveBlockIdByBlockNames, } = select( 'core/block-editor' ); // Determine if there is an active template part (or other entity) to spotlight. - // Restrict to Full Site Editing experiment. + // Restrict to Full Site Editing experiment while the currently defined ENTITY_AREAS + // only exist in FSE. const isFullSiteEditingEnabled = getSettings() .__experimentalEnableFullSiteEditing; const activeEntityBlockId = isFullSiteEditingEnabled && - getActiveBlockIdByBlockType( ENTITY_AREAS ); + getActiveBlockIdByBlockNames( ENTITY_AREAS ); return { blockClientIds: getBlockOrder( rootClientId ), diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index eed1fb8576d6da..0eccca5ce0491e 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/packages/block-editor/src/store/selectors.js @@ -1800,21 +1800,21 @@ export function areInnerBlocksControlled( state, clientId ) { } /** - * Returns the clientId for the first 'active' block of a given array of block types. + * Returns the clientId for the first 'active' block of a given array of block names. * A block is 'active' if it (or a child) is the selected block. * Returns the first match moving up the DOM from the selected block. * * @param {Object} state Global application state. - * @param {string[]} validBlocksTypes The parent block types to check for. + * @param {string[]} validBlocksNames The names of block types to check for. * * @return {string} The matching block's clientId. */ -export const getActiveBlockIdByBlockType = createSelector( - ( state, validBlocksTypes ) => { +export const getActiveBlockIdByBlockNames = createSelector( + ( state, validBlocksNames ) => { // Check if selected block is a valid entity area. const selectedBlockClientId = getSelectedBlockClientId( state ); if ( - validBlocksTypes.includes( + validBlocksNames.includes( getBlockName( state, selectedBlockClientId ) ) ) { @@ -1827,7 +1827,7 @@ export const getActiveBlockIdByBlockType = createSelector( const entityAreaParents = getBlockParentsByBlockName( state, selectedBlockClientId || multiSelectedBlockClientIds[ 0 ], - validBlocksTypes + validBlocksNames ); if ( entityAreaParents ) { // Last parent closest/most interior. diff --git a/packages/block-editor/src/store/test/selectors.js b/packages/block-editor/src/store/test/selectors.js index d6421dcadf356a..1fdc7bbd1ef492 100644 --- a/packages/block-editor/src/store/test/selectors.js +++ b/packages/block-editor/src/store/test/selectors.js @@ -68,6 +68,7 @@ const { __experimentalGetBlockListSettingsForBlocks, __experimentalGetLastBlockAttributeChanges, getLowestCommonAncestorWithSelectedBlock, + getActiveBlockIdByBlockNames, } = selectors; describe( 'selectors', () => { @@ -3000,4 +3001,78 @@ describe( 'selectors', () => { ).toBe( 'a' ); } ); } ); + + describe( 'getActiveBlockIdByBlockName', () => { + const state = { + selectionStart: { + clientId: 'client-id-04', + }, + selectionEnd: { + clientId: 'client-id-04', + }, + blocks: { + parents: { + 'client-id-01': '', + 'client-id-02': 'client-id-01', + 'client-id-03': 'client-id-02', + 'client-id-04': 'client-id-03', + 'client-id-05': 'client-id-03', + }, + byClientId: { + 'client-id-01': { + clientId: 'client-id-01', + name: 'core/columns', + }, + 'client-id-02': { + clientId: 'client-id-02', + name: 'core/navigation', + }, + 'client-id-03': { + clientId: 'client-id-03', + name: 'core/navigation-link', + }, + 'client-id-04': { + clientId: 'client-id-04', + name: 'core/navigation-link', + }, + 'client-id-05': { + clientId: 'client-id-05', + name: 'core/navigation-link', + }, + }, + cache: { + 'client-id-01': {}, + 'client-id-02': {}, + 'client-id-03': {}, + 'client-id-04': {}, + 'client-id-05': {}, + }, + order: { + 'client-id-03': [ 'client-id-04', 'client-id-05' ], + }, + controlledInnerBlocks: {}, + }, + }; + it( 'Should return first active matching block (including self) when single block selected', () => { + expect( + getActiveBlockIdByBlockNames( state, [ + 'core/navigation-link', + ] ) + ).toEqual( 'client-id-04' ); + expect( + getActiveBlockIdByBlockNames( state, [ + 'core/columns', + 'core/navigation', + ] ) + ).toEqual( 'client-id-02' ); + } ); + it( 'Should return first active matching block with (excluding self) when multi selected', () => { + state.selectionEnd.clientId = 'client-id-05'; + expect( + getActiveBlockIdByBlockNames( state, [ + 'core/navigation-link', + ] ) + ).toEqual( 'client-id-03' ); + } ); + } ); } ); From 05a921e9f2111c2bfa583aa2176ac2209e69272f Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Thu, 1 Oct 2020 16:17:54 -0400 Subject: [PATCH 10/19] make test state reusable for updated parents tests --- .../block-editor/src/store/test/selectors.js | 121 ++++++------------ 1 file changed, 41 insertions(+), 80 deletions(-) diff --git a/packages/block-editor/src/store/test/selectors.js b/packages/block-editor/src/store/test/selectors.js index 1fdc7bbd1ef492..bf0b61f3156100 100644 --- a/packages/block-editor/src/store/test/selectors.js +++ b/packages/block-editor/src/store/test/selectors.js @@ -459,49 +459,48 @@ describe( 'selectors', () => { } ); describe( 'getBlockParentsByBlockName', () => { - it( 'should return parent blocks', () => { - const state = { - blocks: { - parents: { - 'client-id-01': '', - 'client-id-02': 'client-id-01', - 'client-id-03': 'client-id-02', - 'client-id-04': 'client-id-03', - 'client-id-05': 'client-id-04', + const state = { + blocks: { + parents: { + 'client-id-01': '', + 'client-id-02': 'client-id-01', + 'client-id-03': 'client-id-02', + 'client-id-04': 'client-id-03', + 'client-id-05': 'client-id-04', + }, + byClientId: { + 'client-id-01': { + clientId: 'client-id-01', + name: 'core/navigation', }, - byClientId: { - 'client-id-01': { - clientId: 'client-id-01', - name: 'core/navigation', - }, - 'client-id-02': { - clientId: 'client-id-02', - name: 'core/columns', - }, - 'client-id-03': { - clientId: 'client-id-03', - name: 'core/navigation', - }, - 'client-id-04': { - clientId: 'client-id-04', - name: 'core/navigation-link', - }, - 'client-id-05': { - clientId: 'client-id-05', - name: 'core/navigation-link', - }, + 'client-id-02': { + clientId: 'client-id-02', + name: 'core/columns', }, - cache: { - 'client-id-01': {}, - 'client-id-02': {}, - 'client-id-03': {}, - 'client-id-04': {}, - 'client-id-05': {}, + 'client-id-03': { + clientId: 'client-id-03', + name: 'core/navigation', + }, + 'client-id-04': { + clientId: 'client-id-04', + name: 'core/navigation-link', + }, + 'client-id-05': { + clientId: 'client-id-05', + name: 'core/navigation-link', }, - controlledInnerBlocks: {}, }, - }; - + cache: { + 'client-id-01': {}, + 'client-id-02': {}, + 'client-id-03': {}, + 'client-id-04': {}, + 'client-id-05': {}, + }, + controlledInnerBlocks: {}, + }, + }; + it( 'should return parent blocks', () => { expect( getBlockParentsByBlockName( state, @@ -527,52 +526,12 @@ describe( 'selectors', () => { ).toEqual( [] ); } ); it( 'Should optionally accept an array of parent types and return parents of multiple types', () => { - const state = { - blocks: { - parents: { - 'client-id-01': '', - 'client-id-02': 'client-id-01', - 'client-id-03': 'client-id-02', - 'client-id-04': 'client-id-03', - 'client-id-05': 'client-id-04', - }, - byClientId: { - 'client-id-01': { - clientId: 'client-id-01', - name: 'core/navigation', - }, - 'client-id-02': { - clientId: 'client-id-02', - name: 'core/columns', - }, - 'client-id-03': { - clientId: 'client-id-03', - name: 'core/navigation', - }, - 'client-id-04': { - clientId: 'client-id-04', - name: 'core/navigation-link', - }, - 'client-id-05': { - clientId: 'client-id-05', - name: 'core/navigation-link', - }, - }, - cache: { - 'client-id-01': {}, - 'client-id-02': {}, - 'client-id-03': {}, - 'client-id-04': {}, - 'client-id-05': {}, - }, - controlledInnerBlocks: {}, - }, - }; expect( getBlockParentsByBlockName( state, 'client-id-05', [ 'core/navigation', ] ) ).toEqual( [ 'client-id-01', 'client-id-03' ] ); + expect( getBlockParentsByBlockName( state, 'client-id-05', [ 'core/columns', @@ -3059,6 +3018,7 @@ describe( 'selectors', () => { 'core/navigation-link', ] ) ).toEqual( 'client-id-04' ); + expect( getActiveBlockIdByBlockNames( state, [ 'core/columns', @@ -3068,6 +3028,7 @@ describe( 'selectors', () => { } ); it( 'Should return first active matching block with (excluding self) when multi selected', () => { state.selectionEnd.clientId = 'client-id-05'; + expect( getActiveBlockIdByBlockNames( state, [ 'core/navigation-link', From 27ea5d62b59b39950c6469961f54fef70fb359ed Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Thu, 1 Oct 2020 16:30:02 -0400 Subject: [PATCH 11/19] cleanup document-actions useSecondaryText to use new selector --- .../header/document-actions/index.js | 46 +++---------------- 1 file changed, 7 insertions(+), 39 deletions(-) diff --git a/packages/edit-site/src/components/header/document-actions/index.js b/packages/edit-site/src/components/header/document-actions/index.js index 74da7e72488810..a9adfcfdd28c3e 100644 --- a/packages/edit-site/src/components/header/document-actions/index.js +++ b/packages/edit-site/src/components/header/document-actions/index.js @@ -12,7 +12,6 @@ import { getBlockType, } from '@wordpress/blocks'; import { useSelect } from '@wordpress/data'; -import { last } from 'lodash'; function getBlockDisplayText( block ) { return block @@ -21,49 +20,18 @@ function getBlockDisplayText( block ) { } function useSecondaryText() { - const { - selectedBlock, - getBlockParentsByBlockName, - getBlockWithoutInnerBlocks, - } = useSelect( ( select ) => { + const { activeEntityBlockId, getBlock } = useSelect( ( select ) => { return { - selectedBlock: select( 'core/block-editor' ).getSelectedBlock(), - getBlockParentsByBlockName: select( 'core/block-editor' ) - .getBlockParentsByBlockName, - getBlockWithoutInnerBlocks: select( 'core/block-editor' ) - .__unstableGetBlockWithoutInnerBlocks, + activeEntityBlockId: select( + 'core/block-editor' + ).getActiveBlockIdByBlockNames( [ 'core/template-part' ] ), + getBlock: select( 'core/block-editor' ).getBlock, }; } ); - // Check if current block is a template part: - const selectedBlockLabel = - selectedBlock?.name === 'core/template-part' - ? getBlockDisplayText( selectedBlock ) - : null; - - if ( selectedBlockLabel ) { - return { - label: selectedBlockLabel, - isActive: true, - }; - } - - // Check if an ancestor of the current block is a template part: - const templatePartParents = !! selectedBlock - ? getBlockParentsByBlockName( - selectedBlock?.clientId, - 'core/template-part' - ) - : []; - - if ( templatePartParents.length ) { - // templatePartParents is in order from top to bottom, so the closest - // parent is at the end. - const closestParent = getBlockWithoutInnerBlocks( - last( templatePartParents ) - ); + if ( activeEntityBlockId ) { return { - label: getBlockDisplayText( closestParent ), + label: getBlockDisplayText( getBlock( activeEntityBlockId ) ), isActive: true, }; } From 83f3c69d482aa2d1626b28f5c06de9020b3616b6 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Thu, 1 Oct 2020 16:43:53 -0400 Subject: [PATCH 12/19] add dependency to selector for selectionEnd --- packages/block-editor/src/store/selectors.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index 0eccca5ce0491e..74041c098b72a6 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/packages/block-editor/src/store/selectors.js @@ -1835,5 +1835,5 @@ export const getActiveBlockIdByBlockNames = createSelector( } return null; }, - ( state ) => [ state.selectionStart.clientId ] + ( state ) => [ state.selectionStart.clientId, state.selectionEnd.clientId ] ); From 624b93b5b458e22735ec9791186ed16e22679e01 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Thu, 1 Oct 2020 16:52:07 -0400 Subject: [PATCH 13/19] remove unnecessary style selectors --- packages/block-editor/src/components/block-list/style.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss index 4eb895ed936545..fc118d422766ac 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -92,9 +92,9 @@ transition: opacity 0.1s linear; @include reduce-motion("transition"); - &.is-selected, + &.is-active-entity, &.has-child-selected, - &:not(.is-selected):not(.has-child-selected) .block-editor-block-list__block, + &:not(.has-child-selected) .block-editor-block-list__block, &.is-active-entity .block-editor-block-list__block, .is-active-entity .block-editor-block-list__block { opacity: 1; From 01a91f72f5775d15ac6f67baa4259fbdf52f6ccc Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Thu, 1 Oct 2020 18:36:00 -0400 Subject: [PATCH 14/19] make selector experimental --- .../developers/data/data-core-block-editor.md | 15 --------------- .../src/components/block-list/index.js | 4 ++-- packages/block-editor/src/store/selectors.js | 8 ++++++-- packages/block-editor/src/store/test/selectors.js | 2 +- .../components/header/document-actions/index.js | 4 +++- 5 files changed, 12 insertions(+), 21 deletions(-) diff --git a/docs/designers-developers/developers/data/data-core-block-editor.md b/docs/designers-developers/developers/data/data-core-block-editor.md index 40bc63ff57037a..b4e3f2cd31a4ad 100644 --- a/docs/designers-developers/developers/data/data-core-block-editor.md +++ b/docs/designers-developers/developers/data/data-core-block-editor.md @@ -60,21 +60,6 @@ _Returns_ - `boolean`: Whether the last change was automatic. -# **getActiveBlockIdByBlockNames** - -Returns the clientId for the first 'active' block of a given array of block names. -A block is 'active' if it (or a child) is the selected block. -Returns the first match moving up the DOM from the selected block. - -_Parameters_ - -- _state_ `Object`: Global application state. -- _validBlocksNames_ `Array`: The names of block types to check for. - -_Returns_ - -- `string`: The matching block's clientId. - # **getAdjacentBlockClientId** Returns the client ID of the block adjacent one at the given reference diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js index a17bd5f6c8fe06..56d681677f389d 100644 --- a/packages/block-editor/src/components/block-list/index.js +++ b/packages/block-editor/src/components/block-list/index.js @@ -47,7 +47,7 @@ function BlockList( getGlobalBlockCount, isTyping, isDraggingBlocks, - getActiveBlockIdByBlockNames, + __experimentalGetActiveBlockIdByBlockNames, } = select( 'core/block-editor' ); // Determine if there is an active template part (or other entity) to spotlight. @@ -57,7 +57,7 @@ function BlockList( .__experimentalEnableFullSiteEditing; const activeEntityBlockId = isFullSiteEditingEnabled && - getActiveBlockIdByBlockNames( ENTITY_AREAS ); + __experimentalGetActiveBlockIdByBlockNames( ENTITY_AREAS ); return { blockClientIds: getBlockOrder( rootClientId ), diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index 74041c098b72a6..d8fcd0fc70d98e 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/packages/block-editor/src/store/selectors.js @@ -1809,7 +1809,7 @@ export function areInnerBlocksControlled( state, clientId ) { * * @return {string} The matching block's clientId. */ -export const getActiveBlockIdByBlockNames = createSelector( +export const __experimentalGetActiveBlockIdByBlockNames = createSelector( ( state, validBlocksNames ) => { // Check if selected block is a valid entity area. const selectedBlockClientId = getSelectedBlockClientId( state ); @@ -1835,5 +1835,9 @@ export const getActiveBlockIdByBlockNames = createSelector( } return null; }, - ( state ) => [ state.selectionStart.clientId, state.selectionEnd.clientId ] + ( state, validBlockNames ) => [ + state.selectionStart.clientId, + state.selectionEnd.clientId, + validBlockNames, + ] ); diff --git a/packages/block-editor/src/store/test/selectors.js b/packages/block-editor/src/store/test/selectors.js index bf0b61f3156100..113dd2550488b8 100644 --- a/packages/block-editor/src/store/test/selectors.js +++ b/packages/block-editor/src/store/test/selectors.js @@ -68,7 +68,7 @@ const { __experimentalGetBlockListSettingsForBlocks, __experimentalGetLastBlockAttributeChanges, getLowestCommonAncestorWithSelectedBlock, - getActiveBlockIdByBlockNames, + __experimentalGetActiveBlockIdByBlockNames: getActiveBlockIdByBlockNames, } = selectors; describe( 'selectors', () => { diff --git a/packages/edit-site/src/components/header/document-actions/index.js b/packages/edit-site/src/components/header/document-actions/index.js index a9adfcfdd28c3e..c7b36a4331b5d9 100644 --- a/packages/edit-site/src/components/header/document-actions/index.js +++ b/packages/edit-site/src/components/header/document-actions/index.js @@ -24,7 +24,9 @@ function useSecondaryText() { return { activeEntityBlockId: select( 'core/block-editor' - ).getActiveBlockIdByBlockNames( [ 'core/template-part' ] ), + ).__experimentalGetActiveBlockIdByBlockNames( [ + 'core/template-part', + ] ), getBlock: select( 'core/block-editor' ).getBlock, }; } ); From 9f77800051bd7ccf0f5c20efc023922334ba2481 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Fri, 2 Oct 2020 14:50:26 -0400 Subject: [PATCH 15/19] refactor list of blocks to editor settings --- .../src/components/block-list/index.js | 14 ++++---------- packages/block-editor/src/store/defaults.js | 1 + packages/edit-site/src/index.js | 1 + 3 files changed, 6 insertions(+), 10 deletions(-) diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js index 56d681677f389d..6d266df26f0dc8 100644 --- a/packages/block-editor/src/components/block-list/index.js +++ b/packages/block-editor/src/components/block-list/index.js @@ -22,8 +22,6 @@ import useBlockDropZone from '../use-block-drop-zone'; * to avoid laginess. */ const BLOCK_ANIMATION_THRESHOLD = 200; -// List of blocks to 'spotlight' when active in Full Site Editing. -const ENTITY_AREAS = [ 'core/template-part' ]; function BlockList( { @@ -50,14 +48,10 @@ function BlockList( __experimentalGetActiveBlockIdByBlockNames, } = select( 'core/block-editor' ); - // Determine if there is an active template part (or other entity) to spotlight. - // Restrict to Full Site Editing experiment while the currently defined ENTITY_AREAS - // only exist in FSE. - const isFullSiteEditingEnabled = getSettings() - .__experimentalEnableFullSiteEditing; - const activeEntityBlockId = - isFullSiteEditingEnabled && - __experimentalGetActiveBlockIdByBlockNames( ENTITY_AREAS ); + // Determine if there is an active entity area to spotlight. + const activeEntityBlockId = __experimentalGetActiveBlockIdByBlockNames( + getSettings().__experimentalSpotlightBlocks + ); return { blockClientIds: getBlockOrder( rootClientId ), diff --git a/packages/block-editor/src/store/defaults.js b/packages/block-editor/src/store/defaults.js index bfb4eb1ecc39e0..69c476a3e33e31 100644 --- a/packages/block-editor/src/store/defaults.js +++ b/packages/block-editor/src/store/defaults.js @@ -68,4 +68,5 @@ export const SETTINGS_DEFAULTS = { __mobileEnablePageTemplates: false, __experimentalBlockPatterns: [], __experimentalBlockPatternCategories: [], + __experimentalSpotlightBlocks: [], }; diff --git a/packages/edit-site/src/index.js b/packages/edit-site/src/index.js index a34d4c242423be..2ded29997f5cdb 100644 --- a/packages/edit-site/src/index.js +++ b/packages/edit-site/src/index.js @@ -55,6 +55,7 @@ const fetchLinkSuggestions = ( search, { perPage = 20 } = {} ) => export function initialize( id, settings ) { findTemplate.siteUrl = settings.siteUrl; settings.__experimentalFetchLinkSuggestions = fetchLinkSuggestions; + settings.__experimentalSpotlightBlocks = [ 'core/template-part' ]; registerEditSiteStore( { settings } ); From 1646269243711a0361562cc0bd749f82075ee22e Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Fri, 2 Oct 2020 14:54:43 -0400 Subject: [PATCH 16/19] selector return early if no names are passed --- packages/block-editor/src/store/selectors.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index d8fcd0fc70d98e..6e23fd8b9a1218 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/packages/block-editor/src/store/selectors.js @@ -1810,11 +1810,14 @@ export function areInnerBlocksControlled( state, clientId ) { * @return {string} The matching block's clientId. */ export const __experimentalGetActiveBlockIdByBlockNames = createSelector( - ( state, validBlocksNames ) => { + ( state, validBlockNames ) => { + if ( ! validBlockNames.length ) { + return null; + } // Check if selected block is a valid entity area. const selectedBlockClientId = getSelectedBlockClientId( state ); if ( - validBlocksNames.includes( + validBlockNames.includes( getBlockName( state, selectedBlockClientId ) ) ) { @@ -1827,7 +1830,7 @@ export const __experimentalGetActiveBlockIdByBlockNames = createSelector( const entityAreaParents = getBlockParentsByBlockName( state, selectedBlockClientId || multiSelectedBlockClientIds[ 0 ], - validBlocksNames + validBlockNames ); if ( entityAreaParents ) { // Last parent closest/most interior. From 7a838f0f758ccca06d38f2ce798e0dd6bebd13d1 Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Wed, 7 Oct 2020 13:37:51 -0400 Subject: [PATCH 17/19] update css comment from template part to entity --- packages/block-editor/src/components/block-list/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss index fc118d422766ac..89293a6835353a 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -86,7 +86,7 @@ } } - // Active template part highlighting. + // Active entity spotlight. &.has-active-entity:not(.is-focus-mode) { opacity: 0.5; transition: opacity 0.1s linear; From 4c8e7c582217a8056a1d25d6753e19b3095b479c Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Wed, 7 Oct 2020 13:48:18 -0400 Subject: [PATCH 18/19] rename the settings list to include 'entity' --- packages/block-editor/src/components/block-list/index.js | 2 +- packages/block-editor/src/store/defaults.js | 2 +- packages/edit-site/src/index.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js index 6d266df26f0dc8..ef1b5834a39bbe 100644 --- a/packages/block-editor/src/components/block-list/index.js +++ b/packages/block-editor/src/components/block-list/index.js @@ -50,7 +50,7 @@ function BlockList( // Determine if there is an active entity area to spotlight. const activeEntityBlockId = __experimentalGetActiveBlockIdByBlockNames( - getSettings().__experimentalSpotlightBlocks + getSettings().__experimentalSpotlightEntityBlocks ); return { diff --git a/packages/block-editor/src/store/defaults.js b/packages/block-editor/src/store/defaults.js index 69c476a3e33e31..85a18b298c174e 100644 --- a/packages/block-editor/src/store/defaults.js +++ b/packages/block-editor/src/store/defaults.js @@ -68,5 +68,5 @@ export const SETTINGS_DEFAULTS = { __mobileEnablePageTemplates: false, __experimentalBlockPatterns: [], __experimentalBlockPatternCategories: [], - __experimentalSpotlightBlocks: [], + __experimentalSpotlightEntityBlocks: [], }; diff --git a/packages/edit-site/src/index.js b/packages/edit-site/src/index.js index 2ded29997f5cdb..244ffc12d9f23d 100644 --- a/packages/edit-site/src/index.js +++ b/packages/edit-site/src/index.js @@ -55,7 +55,7 @@ const fetchLinkSuggestions = ( search, { perPage = 20 } = {} ) => export function initialize( id, settings ) { findTemplate.siteUrl = settings.siteUrl; settings.__experimentalFetchLinkSuggestions = fetchLinkSuggestions; - settings.__experimentalSpotlightBlocks = [ 'core/template-part' ]; + settings.__experimentalSpotlightEntityBlocks = [ 'core/template-part' ]; registerEditSiteStore( { settings } ); From 5c5dfb702c6f6be9b8f09c4d4672d2275cc7857e Mon Sep 17 00:00:00 2001 From: Addison-Stavlo Date: Fri, 9 Oct 2020 12:55:54 -0400 Subject: [PATCH 19/19] remove unused import --- .../edit-site/src/components/header/document-actions/index.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/edit-site/src/components/header/document-actions/index.js b/packages/edit-site/src/components/header/document-actions/index.js index db60780e84cbb5..29ce463ba80882 100644 --- a/packages/edit-site/src/components/header/document-actions/index.js +++ b/packages/edit-site/src/components/header/document-actions/index.js @@ -14,9 +14,6 @@ import { import { useSelect } from '@wordpress/data'; import { VisuallyHidden } from '@wordpress/components'; -import { last } from 'lodash'; - - function getBlockDisplayText( block ) { return block ? getBlockLabel( getBlockType( block.name ), block.attributes )