From 33aae31339fa0c7c386aa612d22804f26b227571 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Fri, 24 Feb 2023 17:41:32 +0200 Subject: [PATCH 1/4] Align hook: improve BlockEdit filter --- packages/block-editor/src/hooks/align.js | 99 +++++++++++++----------- 1 file changed, 54 insertions(+), 45 deletions(-) diff --git a/packages/block-editor/src/hooks/align.js b/packages/block-editor/src/hooks/align.js index 8d5c7f850e89b..0138ca42ce3f3 100644 --- a/packages/block-editor/src/hooks/align.js +++ b/packages/block-editor/src/hooks/align.js @@ -109,6 +109,55 @@ export function addAttribute( settings ) { return settings; } +function AlignControls( props ) { + const { name: blockName } = props; + // Compute the block valid alignments by taking into account, + // if the theme supports wide alignments or not and the layout's + // availble alignments. We do that for conditionally rendering + // Slot. + const blockAllowedAlignments = getValidAlignments( + getBlockSupport( blockName, 'align' ), + hasBlockSupport( blockName, 'alignWide', true ) + ); + + const validAlignments = useAvailableAlignments( + blockAllowedAlignments + ).map( ( { name } ) => name ); + const isContentLocked = useSelect( + ( select ) => { + return select( blockEditorStore ).__unstableGetContentLockingParent( + props.clientId + ); + }, + [ props.clientId ] + ); + + if ( ! validAlignments.length || isContentLocked ) { + return null; + } + + const updateAlignment = ( nextAlign ) => { + if ( ! nextAlign ) { + const blockType = getBlockType( props.name ); + const blockDefaultAlign = blockType?.attributes?.align?.default; + if ( blockDefaultAlign ) { + nextAlign = ''; + } + } + props.setAttributes( { align: nextAlign } ); + }; + + return ( + + + + ); +} + /** * Override the default edit UI to include new toolbar controls for block * alignment, if block defines support. @@ -119,53 +168,13 @@ export function addAttribute( settings ) { */ export const withToolbarControls = createHigherOrderComponent( ( BlockEdit ) => ( props ) => { - const blockEdit = ; - const { name: blockName } = props; - // Compute the block valid alignments by taking into account, - // if the theme supports wide alignments or not and the layout's - // availble alignments. We do that for conditionally rendering - // Slot. - const blockAllowedAlignments = getValidAlignments( - getBlockSupport( blockName, 'align' ), - hasBlockSupport( blockName, 'alignWide', true ) - ); - - const validAlignments = useAvailableAlignments( - blockAllowedAlignments - ).map( ( { name } ) => name ); - const isContentLocked = useSelect( - ( select ) => { - return select( - blockEditorStore - ).__unstableGetContentLockingParent( props.clientId ); - }, - [ props.clientId ] - ); - if ( ! validAlignments.length || isContentLocked ) { - return blockEdit; - } - - const updateAlignment = ( nextAlign ) => { - if ( ! nextAlign ) { - const blockType = getBlockType( props.name ); - const blockDefaultAlign = blockType?.attributes?.align?.default; - if ( blockDefaultAlign ) { - nextAlign = ''; - } - } - props.setAttributes( { align: nextAlign } ); - }; - return ( <> - - - - { blockEdit } + { props.isSelected && + !! getBlockSupport( props.name, 'align' ) && ( + + ) } + ); }, From 8ed5ec3979ab058be5909e68a2d6b2f7691ad808 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Fri, 24 Feb 2023 18:26:50 +0200 Subject: [PATCH 2/4] Fix display condition --- .../src/components/block-edit/index.js | 33 +++++++++++++++++++ .../use-display-block-controls/index.js | 30 +---------------- packages/block-editor/src/hooks/align.js | 3 +- 3 files changed, 36 insertions(+), 30 deletions(-) diff --git a/packages/block-editor/src/components/block-edit/index.js b/packages/block-editor/src/components/block-edit/index.js index d24f8301c85fb..f96706e0f8d39 100644 --- a/packages/block-editor/src/components/block-edit/index.js +++ b/packages/block-editor/src/components/block-edit/index.js @@ -4,11 +4,14 @@ import { useMemo } from '@wordpress/element'; import { hasBlockSupport } from '@wordpress/blocks'; +import { useSelect } from '@wordpress/data'; + /** * Internal dependencies */ import Edit from './edit'; import { BlockEditContextProvider, useBlockEditContext } from './context'; +import { store as blockEditorStore } from '../../store'; /** * The `useBlockEditContext` hook provides information about the block this hook is being used in. @@ -34,12 +37,42 @@ export default function BlockEdit( props ) { '__experimentalLayout', false ); + const shouldDisplayControls = useSelect( + ( select ) => { + if ( isSelected ) { + return true; + } + + const { + getBlockName, + isFirstMultiSelectedBlock, + getMultiSelectedBlockClientIds, + hasSelectedInnerBlock, + } = select( blockEditorStore ); + + if ( isFirstMultiSelectedBlock( clientId ) ) { + return getMultiSelectedBlockClientIds().every( + ( id ) => getBlockName( id ) === name + ); + } + + return ( + hasBlockSupport( + getBlockName( clientId ), + '__experimentalExposeControlsToChildren', + false + ) && hasSelectedInnerBlock( clientId ) + ); + }, + [ clientId, isSelected, name ] + ); const context = { name, isSelected, clientId, layout: layoutSupport ? layout : null, __unstableLayoutClassNames, + shouldDisplayControls, }; return ( { - if ( isSelected ) { - return true; - } - - const { - getBlockName, - isFirstMultiSelectedBlock, - getMultiSelectedBlockClientIds, - } = select( blockEditorStore ); - - if ( isFirstMultiSelectedBlock( clientId ) ) { - return getMultiSelectedBlockClientIds().every( - ( id ) => getBlockName( id ) === name - ); - } - - return false; - }, - [ clientId, isSelected, name ] - ); + return useBlockEditContext().shouldDisplayControls; } diff --git a/packages/block-editor/src/hooks/align.js b/packages/block-editor/src/hooks/align.js index 0138ca42ce3f3..ac46a227b3428 100644 --- a/packages/block-editor/src/hooks/align.js +++ b/packages/block-editor/src/hooks/align.js @@ -21,6 +21,7 @@ import { useSelect } from '@wordpress/data'; import { BlockControls, BlockAlignmentControl } from '../components'; import useAvailableAlignments from '../components/block-alignment-control/use-available-alignments'; import { store as blockEditorStore } from '../store'; +import { useBlockEditContext } from '../components/block-edit/context'; /** * An array which includes all possible valid alignments, @@ -170,7 +171,7 @@ export const withToolbarControls = createHigherOrderComponent( ( BlockEdit ) => ( props ) => { return ( <> - { props.isSelected && + { useBlockEditContext().shouldDisplayControls && !! getBlockSupport( props.name, 'align' ) && ( ) } From 9835e7f32f9c872797cf2cb06879af9d8e12880c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Fri, 24 Feb 2023 19:00:20 +0200 Subject: [PATCH 3/4] Update useBlockControlsFill --- .../src/components/block-controls/hook.js | 27 ++----------------- 1 file changed, 2 insertions(+), 25 deletions(-) diff --git a/packages/block-editor/src/components/block-controls/hook.js b/packages/block-editor/src/components/block-controls/hook.js index 8f4940a8597da..e96d1107e7e65 100644 --- a/packages/block-editor/src/components/block-controls/hook.js +++ b/packages/block-editor/src/components/block-controls/hook.js @@ -1,37 +1,14 @@ -/** - * WordPress dependencies - */ -import { store as blocksStore } from '@wordpress/blocks'; -import { useSelect } from '@wordpress/data'; - /** * Internal dependencies */ import groups from './groups'; -import { store as blockEditorStore } from '../../store'; import { useBlockEditContext } from '../block-edit/context'; import useDisplayBlockControls from '../use-display-block-controls'; export default function useBlockControlsFill( group, shareWithChildBlocks ) { const isDisplayed = useDisplayBlockControls(); - const { clientId } = useBlockEditContext(); - const isParentDisplayed = useSelect( - ( select ) => { - const { getBlockName, hasSelectedInnerBlock } = - select( blockEditorStore ); - const { hasBlockSupport } = select( blocksStore ); - return ( - shareWithChildBlocks && - hasBlockSupport( - getBlockName( clientId ), - '__experimentalExposeControlsToChildren', - false - ) && - hasSelectedInnerBlock( clientId ) - ); - }, - [ shareWithChildBlocks, clientId ] - ); + const { shouldDisplayControls } = useBlockEditContext(); + const isParentDisplayed = shareWithChildBlocks && shouldDisplayControls; if ( isDisplayed ) { return groups[ group ]?.Fill; From 4ffc4964484612164667a7c178cb81dffc6f03e8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Fri, 24 Feb 2023 19:25:56 +0200 Subject: [PATCH 4/4] Fix fill --- .../block-editor/src/components/block-controls/hook.js | 10 ++++------ .../block-editor/src/components/block-edit/index.js | 10 +++++++++- packages/block-editor/src/hooks/align.js | 7 +++++-- 3 files changed, 18 insertions(+), 9 deletions(-) diff --git a/packages/block-editor/src/components/block-controls/hook.js b/packages/block-editor/src/components/block-controls/hook.js index e96d1107e7e65..35d62bc7fc862 100644 --- a/packages/block-editor/src/components/block-controls/hook.js +++ b/packages/block-editor/src/components/block-controls/hook.js @@ -3,17 +3,15 @@ */ import groups from './groups'; import { useBlockEditContext } from '../block-edit/context'; -import useDisplayBlockControls from '../use-display-block-controls'; export default function useBlockControlsFill( group, shareWithChildBlocks ) { - const isDisplayed = useDisplayBlockControls(); - const { shouldDisplayControls } = useBlockEditContext(); - const isParentDisplayed = shareWithChildBlocks && shouldDisplayControls; + const { shouldDisplayControls, shouldDisplayControlsWithinChildren } = + useBlockEditContext(); - if ( isDisplayed ) { + if ( shouldDisplayControls ) { return groups[ group ]?.Fill; } - if ( isParentDisplayed ) { + if ( shareWithChildBlocks && shouldDisplayControlsWithinChildren ) { return groups.parent.Fill; } return null; diff --git a/packages/block-editor/src/components/block-edit/index.js b/packages/block-editor/src/components/block-edit/index.js index f96706e0f8d39..2b76d03998073 100644 --- a/packages/block-editor/src/components/block-edit/index.js +++ b/packages/block-editor/src/components/block-edit/index.js @@ -47,7 +47,6 @@ export default function BlockEdit( props ) { getBlockName, isFirstMultiSelectedBlock, getMultiSelectedBlockClientIds, - hasSelectedInnerBlock, } = select( blockEditorStore ); if ( isFirstMultiSelectedBlock( clientId ) ) { @@ -56,6 +55,14 @@ export default function BlockEdit( props ) { ); } + return false; + }, + [ clientId, isSelected, name ] + ); + const shouldDisplayControlsWithinChildren = useSelect( + ( select ) => { + const { getBlockName, hasSelectedInnerBlock } = + select( blockEditorStore ); return ( hasBlockSupport( getBlockName( clientId ), @@ -73,6 +80,7 @@ export default function BlockEdit( props ) { layout: layoutSupport ? layout : null, __unstableLayoutClassNames, shouldDisplayControls, + shouldDisplayControlsWithinChildren, }; return ( ( props ) => { + const { shouldDisplayControls, shouldDisplayControlsWithinChildren } = + useBlockEditContext(); return ( <> - { useBlockEditContext().shouldDisplayControls && - !! getBlockSupport( props.name, 'align' ) && ( + { ( shouldDisplayControls || + shouldDisplayControlsWithinChildren ) && + hasBlockSupport( props.name, 'align' ) && ( ) }