diff --git a/packages/block-editor/src/components/block-edit/edit.js b/packages/block-editor/src/components/block-edit/edit.js index 1154b99efebab5..31344b54337935 100644 --- a/packages/block-editor/src/components/block-edit/edit.js +++ b/packages/block-editor/src/components/block-edit/edit.js @@ -29,7 +29,25 @@ import BlockContext from '../block-context'; */ const DEFAULT_BLOCK_CONTEXT = {}; -export const Edit = ( props ) => { +const Edit = ( props ) => { + const { name } = props; + const blockType = getBlockType( name ); + + if ( ! blockType ) { + return null; + } + + // `edit` and `save` are functions or components describing the markup + // with which a block is displayed. If `blockType` is valid, assign + // them preferentially as the render value for the block. + const Component = blockType.edit || blockType.save; + + return ; +}; + +const EditWithFilters = withFilters( 'editor.BlockEdit' )( Edit ); + +const EditWithGeneratedProps = ( props ) => { const { attributes = {}, name } = props; const blockType = getBlockType( name ); const blockContext = useContext( BlockContext ); @@ -49,13 +67,8 @@ export const Edit = ( props ) => { return null; } - // `edit` and `save` are functions or components describing the markup - // with which a block is displayed. If `blockType` is valid, assign - // them preferentially as the render value for the block. - const Component = blockType.edit || blockType.save; - if ( blockType.apiVersion > 1 ) { - return ; + return ; } // Generate a class name for the block's editable form. @@ -69,8 +82,12 @@ export const Edit = ( props ) => { ); return ( - + ); }; -export default withFilters( 'editor.BlockEdit' )( Edit ); +export default EditWithGeneratedProps; diff --git a/packages/block-editor/src/components/block-edit/test/edit.js b/packages/block-editor/src/components/block-edit/test/edit.js index 0eb4c72cbbfc9f..76afbcb852ac19 100644 --- a/packages/block-editor/src/components/block-edit/test/edit.js +++ b/packages/block-editor/src/components/block-edit/test/edit.js @@ -15,7 +15,7 @@ import { /** * Internal dependencies */ -import { Edit } from '../edit'; +import Edit from '../edit'; import { BlockContextProvider } from '../../block-context'; const noop = () => {}; diff --git a/packages/block-editor/src/components/list-view/use-list-view-client-ids.js b/packages/block-editor/src/components/list-view/use-list-view-client-ids.js index d51412fdf2c3db..8a1ccfcede4c12 100644 --- a/packages/block-editor/src/components/list-view/use-list-view-client-ids.js +++ b/packages/block-editor/src/components/list-view/use-list-view-client-ids.js @@ -16,14 +16,14 @@ export default function useListViewClientIds( { blocks, rootClientId } ) { const { getDraggedBlockClientIds, getSelectedBlockClientIds, - getListViewClientIdsTree, + getEnabledClientIdsTree, } = unlock( select( blockEditorStore ) ); return { selectedClientIds: getSelectedBlockClientIds(), draggedClientIds: getDraggedBlockClientIds(), clientIdsTree: - blocks ?? getListViewClientIdsTree( rootClientId ), + blocks ?? getEnabledClientIdsTree( rootClientId ), }; }, [ blocks, rootClientId ] diff --git a/packages/block-editor/src/store/private-selectors.js b/packages/block-editor/src/store/private-selectors.js index 454f3f32ba8f70..72f3dd3c735101 100644 --- a/packages/block-editor/src/store/private-selectors.js +++ b/packages/block-editor/src/store/private-selectors.js @@ -136,21 +136,18 @@ export const isBlockSubtreeDisabled = createSelector( * * @return {Object[]} Tree of block objects with only clientID and innerBlocks set. */ -export const getListViewClientIdsTree = createSelector( +export const getEnabledClientIdsTree = createSelector( ( state, rootClientId = '' ) => { return getBlockOrder( state, rootClientId ).flatMap( ( clientId ) => { if ( getBlockEditingMode( state, clientId ) !== 'disabled' ) { return [ { clientId, - innerBlocks: getListViewClientIdsTree( - state, - clientId - ), + innerBlocks: getEnabledClientIdsTree( state, clientId ), }, ]; } - return getListViewClientIdsTree( state, clientId ); + return getEnabledClientIdsTree( state, clientId ); } ); }, ( state ) => [ diff --git a/packages/block-editor/src/store/test/private-selectors.js b/packages/block-editor/src/store/test/private-selectors.js index 30cf702c605263..e826db4a62bb9d 100644 --- a/packages/block-editor/src/store/test/private-selectors.js +++ b/packages/block-editor/src/store/test/private-selectors.js @@ -11,7 +11,7 @@ import { getLastInsertedBlocksClientIds, getBlockEditingMode, isBlockSubtreeDisabled, - getListViewClientIdsTree, + getEnabledClientIdsTree, getEnabledBlockParents, } from '../private-selectors'; @@ -391,7 +391,7 @@ describe( 'private selectors', () => { } ); } ); - describe( 'getListViewClientIdsTree', () => { + describe( 'getEnabledClientIdsTree', () => { const baseState = { settings: {}, blocks: { @@ -462,7 +462,7 @@ describe( 'private selectors', () => { ...baseState, blockEditingModes: new Map( [] ), }; - expect( getListViewClientIdsTree( state ) ).toEqual( [ + expect( getEnabledClientIdsTree( state ) ).toEqual( [ { clientId: '6cf70164-9097-4460-bcbf-200560546988', innerBlocks: [], @@ -500,7 +500,7 @@ describe( 'private selectors', () => { blockEditingModes: new Map( [] ), }; expect( - getListViewClientIdsTree( + getEnabledClientIdsTree( state, 'ef45d5fd-5234-4fd5-ac4f-c3736c7f9337' ) @@ -534,7 +534,7 @@ describe( 'private selectors', () => { [ '9b9c5c3f-2e46-4f02-9e14-9fe9515b958f', 'contentOnly' ], ] ), }; - expect( getListViewClientIdsTree( state ) ).toEqual( [ + expect( getEnabledClientIdsTree( state ) ).toEqual( [ { clientId: 'b26fc763-417d-4f01-b81c-2ec61e14a972', innerBlocks: [], diff --git a/packages/edit-site/src/components/page-content-focus-manager/constants.js b/packages/edit-site/src/components/page-content-focus-manager/constants.js deleted file mode 100644 index a81b2fd37563af..00000000000000 --- a/packages/edit-site/src/components/page-content-focus-manager/constants.js +++ /dev/null @@ -1,5 +0,0 @@ -export const PAGE_CONTENT_BLOCK_TYPES = [ - 'core/post-title', - 'core/post-featured-image', - 'core/post-content', -]; diff --git a/packages/edit-site/src/components/page-content-focus-manager/disable-non-page-content-blocks.js b/packages/edit-site/src/components/page-content-focus-manager/disable-non-page-content-blocks.js index 33ea486863d203..7b184ff253c7e6 100644 --- a/packages/edit-site/src/components/page-content-focus-manager/disable-non-page-content-blocks.js +++ b/packages/edit-site/src/components/page-content-focus-manager/disable-non-page-content-blocks.js @@ -10,16 +10,22 @@ import { useEffect } from '@wordpress/element'; * Internal dependencies */ import { unlock } from '../../lock-unlock'; -import { PAGE_CONTENT_BLOCK_TYPES } from './constants'; const { useBlockEditingMode } = unlock( blockEditorPrivateApis ); +const PAGE_CONTENT_BLOCK_TYPES = [ + 'core/post-title', + 'core/post-featured-image', + 'core/post-content', +]; + /** * Component that when rendered, makes it so that the site editor allows only * page content to be edited. */ export default function DisableNonPageContentBlocks() { useDisableNonPageContentBlocks(); + return null; } /** @@ -43,8 +49,11 @@ export function useDisableNonPageContentBlocks() { const withDisableNonPageContentBlocks = createHigherOrderComponent( ( BlockEdit ) => ( props ) => { - const isContent = PAGE_CONTENT_BLOCK_TYPES.includes( props.name ); - const mode = isContent ? 'contentOnly' : undefined; + const isDescendentOfQueryLoop = !! props.context.queryId; + const isPageContent = + PAGE_CONTENT_BLOCK_TYPES.includes( props.name ) && + ! isDescendentOfQueryLoop; + const mode = isPageContent ? 'contentOnly' : undefined; useBlockEditingMode( mode ); return ; }, diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-content.js b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-content.js index d6e7dd23a709fa..dd40bcaef9f707 100644 --- a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-content.js +++ b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/page-content.js @@ -6,22 +6,24 @@ import { store as blockEditorStore, privateApis as blockEditorPrivateApis, } from '@wordpress/block-editor'; +import { useMemo } from '@wordpress/element'; /** * Internal dependencies */ -import { PAGE_CONTENT_BLOCK_TYPES } from '../../page-content-focus-manager/constants'; import { unlock } from '../../../lock-unlock'; const { BlockQuickNavigation } = unlock( blockEditorPrivateApis ); export default function PageContent() { - const clientIds = useSelect( + const clientIdsTree = useSelect( ( select ) => - select( blockEditorStore ).__experimentalGetGlobalBlocksByName( - PAGE_CONTENT_BLOCK_TYPES - ), + unlock( select( blockEditorStore ) ).getEnabledClientIdsTree(), [] ); + const clientIds = useMemo( + () => clientIdsTree.map( ( { clientId } ) => clientId ), + [ clientIdsTree ] + ); return ; }