diff --git a/docs/reference-guides/data/data-core-block-editor.md b/docs/reference-guides/data/data-core-block-editor.md index 4c16e90441c4a6..c0a180f72adf4a 100644 --- a/docs/reference-guides/data/data-core-block-editor.md +++ b/docs/reference-guides/data/data-core-block-editor.md @@ -1492,7 +1492,7 @@ Action that enables or disables the navigation mode. _Parameters_ -- _isNavigationMode_ `string`: Enable/Disable navigation mode. +- _isNavigationMode_ `boolean`: Enable/Disable navigation mode. ### setTemplateValidity diff --git a/lib/experimental/editor-settings.php b/lib/experimental/editor-settings.php index 143d5690b76e9b..c93214385752b9 100644 --- a/lib/experimental/editor-settings.php +++ b/lib/experimental/editor-settings.php @@ -72,3 +72,15 @@ function gutenberg_initialize_editor( $editor_name, $editor_script_handle, $sett ); } + +/** + * Sets a global JS variable used to trigger the availability of zoomed out view. + */ +function gutenberg_enable_zoomed_out_view() { + $gutenberg_experiments = get_option( 'gutenberg-experiments' ); + if ( $gutenberg_experiments && array_key_exists( 'gutenberg-zoomed-out-view', $gutenberg_experiments ) ) { + wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableZoomedOutView = true', 'before' ); + } +} + +add_action( 'admin_init', 'gutenberg_enable_zoomed_out_view' ); diff --git a/lib/experiments-page.php b/lib/experiments-page.php index 37e87d016a6989..3d09f05bd655c8 100644 --- a/lib/experiments-page.php +++ b/lib/experiments-page.php @@ -40,6 +40,18 @@ function gutenberg_initialize_experiments_settings() { 'gutenberg_display_experiment_section', 'gutenberg-experiments' ); + + add_settings_field( + 'gutenberg-zoomed-out-view', + __( 'Zoomed out view ', 'gutenberg' ), + 'gutenberg_display_experiment_field', + 'gutenberg-experiments', + 'gutenberg_experiments_section', + array( + 'label' => __( 'Test a new zoomed out view on the site editor (Warning: The new feature is not ready. You may experience UX issues that are being addressed)', 'gutenberg' ), + 'id' => 'gutenberg-zoomed-out-view', + ) + ); register_setting( 'gutenberg-experiments', 'gutenberg-experiments' diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss index f5b6331e6fa589..b2bbe99be4f2d0 100644 --- a/packages/base-styles/_z-index.scss +++ b/packages/base-styles/_z-index.scss @@ -82,7 +82,7 @@ $z-layers: ( ".block-editor-block-contextual-toolbar": 61, // Ensures content overlay appears higher than resize containers used for image/video/etc. - ".block-editor-block-content-overlay__overlay": 10, + ".block-editor-block-list__block.has-block-overlay": 10, // Query block setup state. ".block-editor-block-pattern-setup .pattern-slide": 100, diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index 305c32f9d5d7df..c2b8ebc4efd714 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -717,7 +717,6 @@ _Parameters_ - _props_ `Object`: Optional. Props to pass to the element. Must contain the ref if one is defined. - _options_ `Object`: Options for internal use only. - _options.\_\_unstableIsHtml_ `boolean`: -- _options.\_\_unstableIsDisabled_ `boolean`: Whether the block should be disabled. _Returns_ diff --git a/packages/block-editor/src/components/block-content-overlay/index.js b/packages/block-editor/src/components/block-content-overlay/index.js index 034c7ddd7f2547..98929b64e45659 100644 --- a/packages/block-editor/src/components/block-content-overlay/index.js +++ b/packages/block-editor/src/components/block-content-overlay/index.js @@ -11,14 +11,10 @@ import { store as blockEditorStore } from '../../store'; export default function useBlockOverlayActive( clientId ) { return useSelect( ( select ) => { - const { isBlockSelected, hasSelectedInnerBlock, canEditBlock } = + const { __unstableHasActiveBlockOverlayActive } = select( blockEditorStore ); - return ( - ! canEditBlock( clientId ) || - ( ! isBlockSelected( clientId ) && - ! hasSelectedInnerBlock( clientId, true ) ) - ); + return __unstableHasActiveBlockOverlayActive( clientId ); }, [ clientId ] ); diff --git a/packages/block-editor/src/components/block-content-overlay/style.scss b/packages/block-editor/src/components/block-content-overlay/style.scss index cba4b603d0bcfc..7795bef2525f0b 100644 --- a/packages/block-editor/src/components/block-content-overlay/style.scss +++ b/packages/block-editor/src/components/block-content-overlay/style.scss @@ -1,4 +1,6 @@ -.block-editor-block-content-overlay { +.block-editor-block-list__block.has-block-overlay { + cursor: default; + &::before { content: ""; position: absolute; @@ -9,11 +11,30 @@ background: transparent; border: none; border-radius: $radius-block-ui; - z-index: z-index(".block-editor-block-content-overlay__overlay"); + z-index: z-index(".block-editor-block-list__block.has-block-overlay"); + } + + &::after { + content: none !important; } &:hover:not(.is-dragging-blocks)::before { - background: rgba(var(--wp-admin-theme-color--rgb), 0.1); + background: rgba(var(--wp-admin-theme-color--rgb), 0.3); + box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color) inset; + } + + &.is-selected:not(.is-dragging-blocks)::before { box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color) inset; } + + .block-editor-block-list__block { + pointer-events: none; + } + + .block-editor-iframe__body.is-zoomed-out &::before { + // Unfortunately because of the vw unit, this is not always going to be exact + // When the scrollbar is visible, the frame exceeds the canvas by a few pixels. + width: calc(100vw); + left: calc(( 100% - 100vw ) / 2); + } } diff --git a/packages/block-editor/src/components/block-list-appender/index.js b/packages/block-editor/src/components/block-list-appender/index.js index e671d59401d037..cb20d64cf80dcd 100644 --- a/packages/block-editor/src/components/block-list-appender/index.js +++ b/packages/block-editor/src/components/block-list-appender/index.js @@ -6,7 +6,7 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { withSelect } from '@wordpress/data'; +import { useSelect } from '@wordpress/data'; import { getDefaultBlockName } from '@wordpress/blocks'; /** @@ -18,14 +18,35 @@ import { store as blockEditorStore } from '../../store'; function BlockListAppender( { rootClientId, - canInsertDefaultBlock, - isLocked, renderAppender: CustomAppender, className, - selectedBlockClientId, tagName: TagName = 'div', } ) { - if ( isLocked || CustomAppender === false ) { + const { hideInserter, canInsertDefaultBlock, selectedBlockClientId } = + useSelect( + ( select ) => { + const { + canInsertBlockType, + getTemplateLock, + getSelectedBlockClientId, + __unstableGetEditorMode, + } = select( blockEditorStore ); + + return { + hideInserter: + !! getTemplateLock( rootClientId ) || + __unstableGetEditorMode() === 'zoom-out', + canInsertDefaultBlock: canInsertBlockType( + getDefaultBlockName(), + rootClientId + ), + selectedBlockClientId: getSelectedBlockClientId(), + }; + }, + [ rootClientId ] + ); + + if ( hideInserter || CustomAppender === false ) { return null; } @@ -92,16 +113,4 @@ function BlockListAppender( { ); } -export default withSelect( ( select, { rootClientId } ) => { - const { canInsertBlockType, getTemplateLock, getSelectedBlockClientId } = - select( blockEditorStore ); - - return { - isLocked: !! getTemplateLock( rootClientId ), - canInsertDefaultBlock: canInsertBlockType( - getDefaultBlockName(), - rootClientId - ), - selectedBlockClientId: getSelectedBlockClientId(), - }; -} )( BlockListAppender ); +export default BlockListAppender; diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js index d853f2529e5ae2..8157709b40b765 100644 --- a/packages/block-editor/src/components/block-list/index.js +++ b/packages/block-editor/src/components/block-list/index.js @@ -34,15 +34,15 @@ export const IntersectionObserver = createContext(); function Root( { className, ...settings } ) { const [ element, setElement ] = useState(); const isLargeViewport = useViewportMatch( 'medium' ); - const { isOutlineMode, isFocusMode, isNavigationMode } = useSelect( + const { isOutlineMode, isFocusMode, editorMode } = useSelect( ( select ) => { - const { getSettings, isNavigationMode: _isNavigationMode } = + const { getSettings, __unstableGetEditorMode } = select( blockEditorStore ); const { outlineMode, focusMode } = getSettings(); return { isOutlineMode: outlineMode, isFocusMode: focusMode, - isNavigationMode: _isNavigationMode(), + editorMode: __unstableGetEditorMode(), }; }, [] @@ -74,7 +74,7 @@ function Root( { className, ...settings } ) { className: classnames( 'is-root-container', className, { 'is-outline-mode': isOutlineMode, 'is-focus-mode': isFocusMode && isLargeViewport, - 'is-navigate-mode': isNavigationMode, + 'is-navigate-mode': editorMode === 'navigation', } ), }, settings diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss index e60bacb8a11930..f368a8428ca94d 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -13,15 +13,8 @@ .block-editor-block-list__layout { position: relative; - // Select tool/navigation mode shows the default cursor until an additional click edits. - &.is-navigate-mode { - cursor: default; - } - // The primary indicator of selection in text is the native selection marker. // When selecting multiple blocks, we provide an additional selection indicator. - &.is-navigate-mode .block-editor-block-list__block.is-selected, - &.is-navigate-mode .block-editor-block-list__block.is-hovered, .block-editor-block-list__block.is-multi-selected:not(.is-partially-selected), .block-editor-block-list__block.is-highlighted, .block-editor-block-list__block.is-highlighted ~ .is-multi-selected { @@ -58,10 +51,6 @@ } } - &.is-navigate-mode .block-editor-block-list__block.is-hovered:not(.is-selected)::after { - box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color); - } - .block-editor-block-list__block.is-highlighted::after { box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); outline: $border-width solid transparent; @@ -449,3 +438,23 @@ margin-bottom: auto; } } + +/** Zoom Out mode styles **/ +.block-editor-iframe__body { + transition: all 0.3s; + transform-origin: top center; + + &.is-zoomed-out { + margin: 100px 0; + transform: scale(0.45); + + // Add a bit more space between the top level blocks. + .wp-site-blocks > * + * { + margin-block-start: 2.5rem; + } + + > .block-list-appender { + display: none; + } + } +} 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 7733c197286dbb..3a02a400b9951a 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 @@ -34,6 +34,7 @@ import { useNavModeExit } from './use-nav-mode-exit'; import { useBlockRefProvider } from './use-block-refs'; import { useIntersectionObserver } from './use-intersection-observer'; import { store as blockEditorStore } from '../../../store'; +import useBlockOverlayActive from '../../block-content-overlay'; /** * If the block count exceeds the threshold, we disable the reordering animation @@ -50,18 +51,14 @@ const BLOCK_ANIMATION_THRESHOLD = 200; * also pass any other props through this hook, and they will be merged and * returned. * - * @param {Object} props Optional. Props to pass to the element. Must contain - * the ref if one is defined. - * @param {Object} options Options for internal use only. + * @param {Object} props Optional. Props to pass to the element. Must contain + * the ref if one is defined. + * @param {Object} options Options for internal use only. * @param {boolean} options.__unstableIsHtml - * @param {boolean} options.__unstableIsDisabled Whether the block should be disabled. * * @return {Object} Props to pass to the element to mark as a block. */ -export function useBlockProps( - props = {}, - { __unstableIsHtml, __unstableIsDisabled = false } = {} -) { +export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) { const { clientId, className, @@ -114,6 +111,8 @@ export function useBlockProps( [ clientId ] ); + const hasOverlay = useBlockOverlayActive( clientId ); + // translators: %s: Type of block (i.e. Text, Image etc) const blockLabel = sprintf( __( 'Block: %s' ), blockTitle ); const htmlSuffix = mode === 'html' && ! __unstableIsHtml ? '-visual' : ''; @@ -132,7 +131,7 @@ export function useBlockProps( enableAnimation, triggerAnimationOnChange: index, } ), - useDisabled( { isDisabled: ! __unstableIsDisabled } ), + useDisabled( { isDisabled: ! hasOverlay } ), ] ); const blockEditContext = useBlockEditContext(); @@ -158,6 +157,7 @@ export function useBlockProps( // The wp-block className is important for editor styles. classnames( 'block-editor-block-list__block', { 'wp-block': ! isAligned, + 'has-block-overlay': hasOverlay, } ), className, props.className, diff --git a/packages/block-editor/src/components/block-list/use-block-props/use-focus-first-element.js b/packages/block-editor/src/components/block-list/use-block-props/use-focus-first-element.js index 03983726083f11..21515d74b2ecdb 100644 --- a/packages/block-editor/src/components/block-list/use-block-props/use-focus-first-element.js +++ b/packages/block-editor/src/components/block-list/use-block-props/use-focus-first-element.js @@ -31,7 +31,7 @@ function useInitialPosition( clientId ) { ( select ) => { const { getSelectedBlocksInitialCaretPosition, - isNavigationMode, + __unstableGetEditorMode, isBlockSelected, } = select( blockEditorStore ); @@ -39,7 +39,7 @@ function useInitialPosition( clientId ) { return; } - if ( isNavigationMode() ) { + if ( __unstableGetEditorMode() !== 'edit' ) { return; } diff --git a/packages/block-editor/src/components/block-list/use-block-props/use-is-hovered.js b/packages/block-editor/src/components/block-list/use-block-props/use-is-hovered.js index 26fc68c21ce2ff..653ef3049b1242 100644 --- a/packages/block-editor/src/components/block-list/use-block-props/use-is-hovered.js +++ b/packages/block-editor/src/components/block-list/use-block-props/use-is-hovered.js @@ -26,8 +26,8 @@ function listener( event ) { */ export function useIsHovered() { const isEnabled = useSelect( ( select ) => { - const { isNavigationMode, getSettings } = select( blockEditorStore ); - return isNavigationMode() || getSettings().outlineMode; + const { getSettings } = select( blockEditorStore ); + return getSettings().outlineMode; }, [] ); return useRefEffect( diff --git a/packages/block-editor/src/components/block-list/use-in-between-inserter.js b/packages/block-editor/src/components/block-list/use-in-between-inserter.js index 47c90eb5cd5752..dac535e74c37f4 100644 --- a/packages/block-editor/src/components/block-list/use-in-between-inserter.js +++ b/packages/block-editor/src/components/block-list/use-in-between-inserter.js @@ -14,8 +14,10 @@ import { InsertionPointOpenRef } from '../block-tools/insertion-point'; export function useInBetweenInserter() { const openRef = useContext( InsertionPointOpenRef ); - const hasReducedUI = useSelect( - ( select ) => select( blockEditorStore ).getSettings().hasReducedUI, + const isInBetweenInserterDisabled = useSelect( + ( select ) => + select( blockEditorStore ).getSettings().hasReducedUI || + select( blockEditorStore ).__unstableGetEditorMode() === 'zoom-out', [] ); const { @@ -26,13 +28,14 @@ export function useInBetweenInserter() { isMultiSelecting, getSelectedBlockClientIds, getTemplateLock, + __unstableIsWithinBlockOverlay, } = useSelect( blockEditorStore ); const { showInsertionPoint, hideInsertionPoint } = useDispatch( blockEditorStore ); return useRefEffect( ( node ) => { - if ( hasReducedUI ) { + if ( isInBetweenInserterDisabled ) { return; } @@ -108,16 +111,11 @@ export function useInBetweenInserter() { // Don't show the insertion point if a parent block has an "overlay" // See https://github.com/WordPress/gutenberg/pull/34012#pullrequestreview-727762337 - const parentOverlay = element.parentElement?.closest( - '.block-editor-block-content-overlay' - ); - if ( parentOverlay ) { - return; - } - const clientId = element.id.slice( 'block-'.length ); - - if ( ! clientId ) { + if ( + ! clientId || + __unstableIsWithinBlockOverlay( clientId ) + ) { return; } @@ -126,7 +124,6 @@ export function useInBetweenInserter() { if ( getSelectedBlockClientIds().includes( clientId ) ) { return; } - const elementRect = element.getBoundingClientRect(); if ( @@ -175,6 +172,7 @@ export function useInBetweenInserter() { showInsertionPoint, hideInsertionPoint, getSelectedBlockClientIds, + isInBetweenInserterDisabled, ] ); } diff --git a/packages/block-editor/src/components/block-popover/inbetween.js b/packages/block-editor/src/components/block-popover/inbetween.js index f68a7532f58b83..f3f435a3c837a8 100644 --- a/packages/block-editor/src/components/block-popover/inbetween.js +++ b/packages/block-editor/src/components/block-popover/inbetween.js @@ -7,7 +7,13 @@ import classnames from 'classnames'; * WordPress dependencies */ import { useSelect } from '@wordpress/data'; -import { useCallback, useMemo, createContext } from '@wordpress/element'; +import { + useCallback, + useMemo, + createContext, + useReducer, + useLayoutEffect, +} from '@wordpress/element'; import { Popover } from '@wordpress/components'; import { isRTL } from '@wordpress/i18n'; @@ -28,6 +34,12 @@ function BlockPopoverInbetween( { __unstableContentRef, ...props } ) { + // This is a temporary hack to get the inbetween inserter to recompute properly. + const [ positionRecompute, forceRecompute ] = useReducer( + ( s ) => s + 1, + 0 + ); + const { orientation, rootClientId, isVisible } = useSelect( ( select ) => { const { @@ -47,7 +59,7 @@ function BlockPopoverInbetween( { isBlockVisible( nextClientId ), }; }, - [ previousClientId ] + [ previousClientId, nextClientId ] ); const previousElement = useBlockElement( previousClientId ); const nextElement = useBlockElement( nextClientId ); @@ -66,9 +78,7 @@ function BlockPopoverInbetween( { if ( isVertical ) { return { - width: previousElement - ? previousElement.offsetWidth - : nextElement.offsetWidth, + width: previousRect ? previousRect.width : nextRect.width, height: nextRect && previousRect ? nextRect.top - previousRect.bottom @@ -85,11 +95,15 @@ function BlockPopoverInbetween( { return { width, - height: previousElement - ? previousElement.offsetHeight - : nextElement.offsetHeight, + height: previousRect ? previousRect.height : nextRect.height, }; - }, [ previousElement, nextElement, isVertical ] ); + }, [ + previousElement, + nextElement, + isVertical, + positionRecompute, + isVisible, + ] ); const getAnchorRect = useCallback( () => { if ( ( ! previousElement && ! nextElement ) || ! isVisible ) { @@ -110,8 +124,8 @@ function BlockPopoverInbetween( { return { top: previousRect ? previousRect.bottom : nextRect.top, left: previousRect ? previousRect.right : nextRect.right, - right: previousRect ? previousRect.left : nextRect.left, - bottom: nextRect ? nextRect.top : previousRect.bottom, + right: previousRect ? previousRect.right : nextRect.right, + bottom: previousRect ? previousRect.bottom : nextRect.top, height: 0, width: 0, ownerDocument, @@ -121,8 +135,8 @@ function BlockPopoverInbetween( { return { top: previousRect ? previousRect.bottom : nextRect.top, left: previousRect ? previousRect.left : nextRect.left, - right: previousRect ? previousRect.right : nextRect.right, - bottom: nextRect ? nextRect.top : previousRect.bottom, + right: previousRect ? previousRect.left : nextRect.left, + bottom: previousRect ? previousRect.bottom : nextRect.top, height: 0, width: 0, ownerDocument, @@ -133,8 +147,8 @@ function BlockPopoverInbetween( { return { top: previousRect ? previousRect.top : nextRect.top, left: previousRect ? previousRect.left : nextRect.right, - right: nextRect ? nextRect.right : previousRect.left, - bottom: previousRect ? previousRect.bottom : nextRect.bottom, + right: previousRect ? previousRect.left : nextRect.right, + bottom: previousRect ? previousRect.top : nextRect.top, height: 0, width: 0, ownerDocument, @@ -144,16 +158,57 @@ function BlockPopoverInbetween( { return { top: previousRect ? previousRect.top : nextRect.top, left: previousRect ? previousRect.right : nextRect.left, - right: nextRect ? nextRect.left : previousRect.right, - bottom: previousRect ? previousRect.bottom : nextRect.bottom, + right: previousRect ? previousRect.right : nextRect.left, + bottom: previousRect ? previousRect.left : nextRect.right, height: 0, width: 0, ownerDocument, }; - }, [ previousElement, nextElement ] ); + }, [ previousElement, nextElement, positionRecompute, isVisible ] ); const popoverScrollRef = usePopoverScroll( __unstableContentRef ); + // This is only needed for a smooth transition when moving blocks. + useLayoutEffect( () => { + if ( ! previousElement ) { + return; + } + const observer = new window.MutationObserver( forceRecompute ); + observer.observe( previousElement, { attributes: true } ); + + return () => { + observer.disconnect(); + }; + }, [ previousElement ] ); + + useLayoutEffect( () => { + if ( ! nextElement ) { + return; + } + const observer = new window.MutationObserver( forceRecompute ); + observer.observe( nextElement, { attributes: true } ); + + return () => { + observer.disconnect(); + }; + }, [ nextElement ] ); + + useLayoutEffect( () => { + if ( ! previousElement ) { + return; + } + previousElement.ownerDocument.defaultView.addEventListener( + 'resize', + forceRecompute + ); + return () => { + previousElement.ownerDocument.defaultView.removeEventListener( + 'resize', + forceRecompute + ); + }; + }, [ previousElement ] ); + // If there's either a previous or a next element, show the inbetween popover. // Note that drag and drop uses the inbetween popover to show the drop indicator // before the first block and after the last block. @@ -188,8 +243,14 @@ function BlockPopoverInbetween( { ) } resize={ false } flip={ false } + placement="bottom-start" > -
{ children }
+
+ { children } +
); /* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */ diff --git a/packages/block-editor/src/components/block-popover/style.scss b/packages/block-editor/src/components/block-popover/style.scss index dc983dbbf4f89c..1ed4774a56c010 100644 --- a/packages/block-editor/src/components/block-popover/style.scss +++ b/packages/block-editor/src/components/block-popover/style.scss @@ -6,6 +6,9 @@ // like the popover is impacted by the block gap margin. margin: 0 !important; + // Allow clicking through the toolbar holder. + pointer-events: none; + .components-popover__content { margin: 0 !important; min-width: auto; @@ -15,9 +18,6 @@ outline: none; box-shadow: none; overflow-y: visible; - - // Allow clicking through the toolbar holder. - pointer-events: none; } // Enable pointer events for the toolbar's content. @@ -39,7 +39,6 @@ } // Re-enable pointer events when the inbetween inserter has a '+' button. - // // Needs specificity, do not simplify. .is-with-inserter { pointer-events: all; diff --git a/packages/block-editor/src/components/block-tools/block-selection-button.js b/packages/block-editor/src/components/block-tools/block-selection-button.js index 9dfb7ce9772abb..195ab92985b84e 100644 --- a/packages/block-editor/src/components/block-tools/block-selection-button.js +++ b/packages/block-editor/src/components/block-tools/block-selection-button.js @@ -39,6 +39,7 @@ import { store as blockEditorStore } from '../../store'; import BlockDraggable from '../block-draggable'; import useBlockDisplayInformation from '../use-block-display-information'; import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs'; +import BlockMover from '../block-mover'; /** * Block selection button component, displaying the label of the block. If the block @@ -59,6 +60,7 @@ function BlockSelectionButton( { clientId, rootClientId } ) { getBlockIndex, hasBlockMovingClientId, getBlockListSettings, + __unstableGetEditorMode, } = select( blockEditorStore ); const index = getBlockIndex( clientId ); const { name, attributes } = getBlock( clientId ); @@ -69,11 +71,19 @@ function BlockSelectionButton( { clientId, rootClientId } ) { attributes, blockMovingMode, orientation: getBlockListSettings( rootClientId )?.orientation, + editorMode: __unstableGetEditorMode(), }; }, [ clientId, rootClientId ] ); - const { index, name, attributes, blockMovingMode, orientation } = selected; + const { + index, + name, + attributes, + blockMovingMode, + orientation, + editorMode, + } = selected; const { setNavigationMode, removeBlock } = useDispatch( blockEditorStore ); const ref = useRef(); @@ -236,25 +246,34 @@ function BlockSelectionButton( { clientId, rootClientId } ) { - - { ( draggableProps ) => ( -