diff --git a/packages/block-editor/src/components/block-list/block.js b/packages/block-editor/src/components/block-list/block.js index 0923dcb99adcc..d06c286e430f5 100644 --- a/packages/block-editor/src/components/block-list/block.js +++ b/packages/block-editor/src/components/block-list/block.js @@ -161,6 +161,7 @@ function BlockListBlock( { clientId, className, wrapperProps: omit( wrapperProps, [ 'data-align' ] ), + isAligned, }; const memoizedValue = useMemo( () => value, Object.values( value ) ); diff --git a/packages/block-editor/src/components/block-list/use-block-props/index.js b/packages/block-editor/src/components/block-list/use-block-props/index.js index bbffe084d575c..4c4c5a6612ad9 100644 --- a/packages/block-editor/src/components/block-list/use-block-props/index.js +++ b/packages/block-editor/src/components/block-list/use-block-props/index.js @@ -58,7 +58,7 @@ const BLOCK_ANIMATION_THRESHOLD = 200; * @return {Object} Props to pass to the element to mark as a block. */ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) { - const { clientId, className, wrapperProps = {} } = useContext( + const { clientId, className, wrapperProps = {}, isAligned } = useContext( BlockListBlockContext ); const { @@ -141,7 +141,9 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) { 'data-title': blockTitle, className: classnames( // The wp-block className is important for editor styles. - 'wp-block block-editor-block-list__block', + classnames( 'block-editor-block-list__block', { + 'wp-block': ! isAligned, + } ), className, props.className, wrapperProps.className, diff --git a/packages/block-editor/src/utils/dom.js b/packages/block-editor/src/utils/dom.js index 3a6db1685aebb..4416f8eb4861e 100644 --- a/packages/block-editor/src/utils/dom.js +++ b/packages/block-editor/src/utils/dom.js @@ -1,6 +1,4 @@ -// Consider the block appender to be a child block of its own, which also has -// this class. -const BLOCK_SELECTOR = '.wp-block'; +const BLOCK_SELECTOR = '.block-editor-block-list__block'; /** * Returns true if two elements are contained within the same block. diff --git a/packages/block-library/src/navigation/edit.js b/packages/block-library/src/navigation/edit.js index 0796971e8f9a1..d4b6cd57b497b 100644 --- a/packages/block-library/src/navigation/edit.js +++ b/packages/block-library/src/navigation/edit.js @@ -197,10 +197,15 @@ export default compose( [ const selectedBlockHasDescendants = !! getClientIdsOfDescendants( [ selectedBlockId, ] )?.length; + return { isImmediateParentOfSelectedBlock, selectedBlockHasDescendants, hasExistingNavItems: !! innerBlocks.length, + + // This prop is already available but computing it here ensures it's + // fresh compared to isImmediateParentOfSelectedBlock + isSelected: selectedBlockId === clientId, }; } ), withDispatch( ( dispatch, { clientId } ) => {