From 33789c36cf8ccd3b6237f51db102cca3f2c31c56 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Fri, 3 Oct 2025 14:59:21 +1000 Subject: [PATCH 1/5] Remove most uses of `isNavigationMode` in contentOnly logic --- .../block-settings-dropdown.js | 8 ++------ .../src/components/block-toolbar/index.js | 17 +++-------------- .../src/components/rich-text/index.js | 16 +++++----------- .../block-editor/src/store/private-selectors.js | 9 +-------- packages/block-editor/src/store/selectors.js | 2 -- packages/block-library/src/site-logo/edit.js | 7 +------ packages/block-library/src/site-title/edit.js | 8 ++------ 7 files changed, 14 insertions(+), 53 deletions(-) diff --git a/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js b/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js index 3e6fb985bb1c00..ca3de1f30ffbc0 100644 --- a/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js +++ b/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js @@ -88,7 +88,6 @@ export function BlockSettingsDropdown( { selectedBlockClientIds, openedBlockSettingsMenu, isContentOnly, - isNavigationMode, isZoomOut, } = useSelect( ( select ) => { @@ -100,7 +99,6 @@ export function BlockSettingsDropdown( { getBlockAttributes, getOpenedBlockSettingsMenu, getBlockEditingMode, - isNavigationMode: _isNavigationMode, isZoomOut: _isZoomOut, } = unlock( select( blockEditorStore ) ); @@ -126,7 +124,6 @@ export function BlockSettingsDropdown( { openedBlockSettingsMenu: getOpenedBlockSettingsMenu(), isContentOnly: getBlockEditingMode( firstBlockClientId ) === 'contentOnly', - isNavigationMode: _isNavigationMode(), isZoomOut: _isZoomOut(), }; }, @@ -158,7 +155,6 @@ export function BlockSettingsDropdown( { }; }, [] ); const hasSelectedBlocks = selectedBlockClientIds.length > 0; - const isContentOnlyWriteMode = isNavigationMode && isContentOnly; async function updateSelectionAfterDuplicate( clientIdsPromise ) { if ( ! __experimentalSelectBlock ) { @@ -282,14 +278,14 @@ export function BlockSettingsDropdown( { clientId={ firstBlockClientId } /> ) } - { ! isContentOnlyWriteMode && ( + { ! isContentOnly && ( ) } - { ! isContentOnlyWriteMode && ( + { ! isContentOnly && ( { const { getBlockName, @@ -89,10 +87,8 @@ export function PrivateBlockToolbar( { getBlockAttributes, getBlockParentsByBlockName, getTemplateLock, - getSettings, getParentSectionBlock, isZoomOut, - isNavigationMode: _isNavigationMode, isSectionBlock, } = unlock( select( blockEditorStore ) ); const selectedBlockClientIds = getSelectedBlockClientIds(); @@ -103,7 +99,6 @@ export function PrivateBlockToolbar( { const parentBlockName = getBlockName( parentClientId ); const parentBlockType = getBlockType( parentBlockName ); const editingMode = getBlockEditingMode( selectedBlockClientId ); - const isNavigationModeEnabled = _isNavigationMode(); const _isDefaultEditingMode = editingMode === 'default'; const _blockName = getBlockName( selectedBlockClientId ); const isValid = selectedBlockClientIds.every( ( id ) => @@ -133,12 +128,9 @@ export function PrivateBlockToolbar( { // The switch style button appears more prominently with the // content only pattern experiment. const _showSwitchSectionStyleButton = - window?.__experimentalContentOnlyPatternInsertion - ? _isZoomOut || isSectionBlock( selectedBlockClientId ) - : _isZoomOut || - ( isNavigationModeEnabled && - editingMode === 'contentOnly' && - isSectionBlock( selectedBlockClientId ) ); + ( window?.__experimentalContentOnlyPatternInsertion && + _isZoomOut ) || + isSectionBlock( selectedBlockClientId ); return { blockClientId: selectedBlockClientId, @@ -167,8 +159,6 @@ export function PrivateBlockToolbar( { showLockButtons: ! _isZoomOut, showBlockVisibilityButton: ! _isZoomOut, showSwitchSectionStyleButton: _showSwitchSectionStyleButton, - hasFixedToolbar: getSettings().hasFixedToolbar, - isNavigationMode: isNavigationModeEnabled, }; }, [] ); @@ -195,7 +185,6 @@ export function PrivateBlockToolbar( { // Shifts the toolbar to make room for the parent block selector. const classes = clsx( 'block-editor-block-contextual-toolbar', { 'has-parent': showParentSelector, - 'is-inverted-toolbar': isNavigationMode && ! hasFixedToolbar, } ); const innerClasses = clsx( 'block-editor-block-toolbar', { diff --git a/packages/block-editor/src/components/rich-text/index.js b/packages/block-editor/src/components/rich-text/index.js index 2a2ec59d3d0c87..a06d7ef9ce0985 100644 --- a/packages/block-editor/src/components/rich-text/index.js +++ b/packages/block-editor/src/components/rich-text/index.js @@ -135,12 +135,8 @@ export function RichTextWrapper( return { isSelected: false }; } - const { - getSelectionStart, - getSelectionEnd, - getBlockEditingMode, - isNavigationMode, - } = select( blockEditorStore ); + const { getSelectionStart, getSelectionEnd, getBlockEditingMode } = + select( blockEditorStore ); const selectionStart = getSelectionStart(); const selectionEnd = getSelectionEnd(); @@ -161,12 +157,10 @@ export function RichTextWrapper( selectionStart: isSelected ? selectionStart.offset : undefined, selectionEnd: isSelected ? selectionEnd.offset : undefined, isSelected, - isContentOnlyWriteMode: - isNavigationMode() && - getBlockEditingMode( clientId ) === 'contentOnly', + isContentOnly: getBlockEditingMode( clientId ) === 'contentOnly', }; }; - const { selectionStart, selectionEnd, isSelected, isContentOnlyWriteMode } = + const { selectionStart, selectionEnd, isSelected, isContentOnly } = useSelect( selector, [ clientId, identifier, @@ -354,7 +348,7 @@ export function RichTextWrapper( identifier, allowedFormats: adjustedAllowedFormats, withoutInteractiveFormatting, - disableNoneEssentialFormatting: isContentOnlyWriteMode, + disableNoneEssentialFormatting: isContentOnly, } ); function addEditorOnlyFormats( value ) { diff --git a/packages/block-editor/src/store/private-selectors.js b/packages/block-editor/src/store/private-selectors.js index 4eab9ef7c688a0..e84e1d5f5fd1ca 100644 --- a/packages/block-editor/src/store/private-selectors.js +++ b/packages/block-editor/src/store/private-selectors.js @@ -19,7 +19,6 @@ import { getBlockName, getTemplateLock, getClientIdsWithDescendants, - isNavigationMode, getBlockRootClientId, getBlockAttributes, } from './selectors'; @@ -530,15 +529,9 @@ export function isSectionBlock( state, clientId ) { return true; } - // Template parts become sections in navigation mode. - const _isNavigationMode = isNavigationMode( state ); - if ( _isNavigationMode && isTemplatePart ) { - return true; - } - const sectionRootClientId = getSectionRootClientId( state ); const sectionClientIds = getBlockOrder( state, sectionRootClientId ); - return _isNavigationMode && sectionClientIds.includes( clientId ); + return sectionClientIds.includes( clientId ); } /** diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index a5e8298058d1d7..35eadad3cc99b1 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/packages/block-editor/src/store/selectors.js @@ -1711,7 +1711,6 @@ const canInsertBlockTypeUnmemoized = ( // In write mode, check if this container allows insertion. if ( blockEditingMode === 'contentOnly' && - isNavigationMode( state ) && ! isContainerInsertableToInWriteMode( state, blockName, rootClientId ) ) { return false; @@ -1873,7 +1872,6 @@ export function canRemoveBlock( state, clientId ) { // Check if the parent container allows insertion/removal in write mode if ( blockEditingMode === 'contentOnly' && - isNavigationMode( state ) && ! isContainerInsertableToInWriteMode( state, getBlockName( state, rootClientId ), diff --git a/packages/block-library/src/site-logo/edit.js b/packages/block-library/src/site-logo/edit.js index 59263308a81968..4512a29d5f6f9a 100644 --- a/packages/block-library/src/site-logo/edit.js +++ b/packages/block-library/src/site-logo/edit.js @@ -77,12 +77,7 @@ const SiteLogo = ( { // Check if we're in contentOnly mode const blockEditingMode = useBlockEditingMode(); - const isNavigationMode = useSelect( - ( select ) => select( blockEditorStore ).isNavigationMode(), - [] - ); const isContentOnlyMode = blockEditingMode === 'contentOnly'; - const isContentOnlyWriteMode = isNavigationMode && isContentOnlyMode; const { imageEditing, maxWidth, title } = useSelect( ( select ) => { const settings = select( blockEditorStore ).getSettings(); @@ -217,7 +212,7 @@ const SiteLogo = ( { logoId && naturalWidth && naturalHeight && imageEditing; // Hide crop and dimensions editing in write mode - const shouldShowCropAndDimensions = ! isContentOnlyWriteMode; + const shouldShowCropAndDimensions = ! isContentOnlyMode; let imgEdit; if ( canEditImage && isEditingImage ) { diff --git a/packages/block-library/src/site-title/edit.js b/packages/block-library/src/site-title/edit.js index 68d91c750ef7f8..99ca6d64e21dfb 100644 --- a/packages/block-library/src/site-title/edit.js +++ b/packages/block-library/src/site-title/edit.js @@ -17,7 +17,6 @@ import { useBlockProps, HeadingLevelDropdown, useBlockEditingMode, - store as blockEditorStore, } from '@wordpress/block-editor'; import { ToggleControl, @@ -38,11 +37,9 @@ export default function SiteTitleEdit( { insertBlocksAfter, } ) { const { level, levelOptions, textAlign, isLink, linkTarget } = attributes; - const { canUserEdit, title, isNavigationMode } = useSelect( ( select ) => { + const { canUserEdit, title } = useSelect( ( select ) => { const { canUser, getEntityRecord, getEditedEntityRecord } = select( coreStore ); - const { isNavigationMode: _isNavigationMode } = - select( blockEditorStore ); const canEdit = canUser( 'update', { kind: 'root', name: 'site', @@ -53,7 +50,6 @@ export default function SiteTitleEdit( { return { canUserEdit: canEdit, title: canEdit ? settings?.title : readOnlySettings?.name, - isNavigationMode: _isNavigationMode(), }; }, [] ); const { editEntityRecord } = useDispatch( coreStore ); @@ -109,7 +105,7 @@ export default function SiteTitleEdit( { ); return ( <> - { ! isNavigationMode && blockEditingMode === 'default' && ( + { blockEditingMode === 'default' && ( Date: Fri, 3 Oct 2025 15:07:05 +1000 Subject: [PATCH 2/5] fix condition --- packages/block-editor/src/components/block-toolbar/index.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js index bbdc16872bc6ce..3691d8c9661c8a 100644 --- a/packages/block-editor/src/components/block-toolbar/index.js +++ b/packages/block-editor/src/components/block-toolbar/index.js @@ -128,9 +128,8 @@ export function PrivateBlockToolbar( { // The switch style button appears more prominently with the // content only pattern experiment. const _showSwitchSectionStyleButton = - ( window?.__experimentalContentOnlyPatternInsertion && - _isZoomOut ) || - isSectionBlock( selectedBlockClientId ); + window?.__experimentalContentOnlyPatternInsertion && + ( _isZoomOut || isSectionBlock( selectedBlockClientId ) ); return { blockClientId: selectedBlockClientId, From f9a7454beb2816bcfb7c572e94aa4e7b2821fad9 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Fri, 3 Oct 2025 16:41:32 +1000 Subject: [PATCH 3/5] Remove section root logic --- packages/block-editor/src/store/private-selectors.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/block-editor/src/store/private-selectors.js b/packages/block-editor/src/store/private-selectors.js index e84e1d5f5fd1ca..98df158565ae5a 100644 --- a/packages/block-editor/src/store/private-selectors.js +++ b/packages/block-editor/src/store/private-selectors.js @@ -528,10 +528,7 @@ export function isSectionBlock( state, clientId ) { ) { return true; } - - const sectionRootClientId = getSectionRootClientId( state ); - const sectionClientIds = getBlockOrder( state, sectionRootClientId ); - return sectionClientIds.includes( clientId ); + return false; } /** From c68e4f5de2221e80cbee6f91934e53a6b6d58233 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Tue, 7 Oct 2025 13:48:00 +1100 Subject: [PATCH 4/5] Skip write mode and fix zoom out test --- test/e2e/specs/editor/various/write-design-mode.spec.js | 2 +- test/e2e/specs/site-editor/zoom-out.spec.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/test/e2e/specs/editor/various/write-design-mode.spec.js b/test/e2e/specs/editor/various/write-design-mode.spec.js index d18033962ed4b9..edeebebdee2051 100644 --- a/test/e2e/specs/editor/various/write-design-mode.spec.js +++ b/test/e2e/specs/editor/various/write-design-mode.spec.js @@ -3,7 +3,7 @@ */ const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' ); -test.describe( 'Write/Design mode', () => { +test.describe.skip( 'Write/Design mode', () => { test.beforeAll( async ( { requestUtils } ) => { await requestUtils.activateTheme( 'emptytheme' ); } ); diff --git a/test/e2e/specs/site-editor/zoom-out.spec.js b/test/e2e/specs/site-editor/zoom-out.spec.js index 28ccba2004a33c..74f64226932549 100644 --- a/test/e2e/specs/site-editor/zoom-out.spec.js +++ b/test/e2e/specs/site-editor/zoom-out.spec.js @@ -263,8 +263,8 @@ test.describe( 'Zoom Out', () => { .getByRole( 'menu', { name: 'Options' } ) .getByRole( 'menuitem' ); - // we expect 4 items in the options menu - await expect( optionsMenu ).toHaveCount( 4 ); + // we expect 2 items in the options menu: Duplicate and Delete. + await expect( optionsMenu ).toHaveCount( 2 ); } ); test( 'Zoom Out cannot be activated when the section root is missing', async ( { From d8c39ce4be42556f2fe075bf663eef3aa0177a18 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Tue, 7 Oct 2025 16:43:39 +1100 Subject: [PATCH 5/5] Remove inverted toolbar styles --- .../src/components/block-tools/style.scss | 44 ------------------- 1 file changed, 44 deletions(-) diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss index 35d0f99c827b67..fbcee4669f4d5d 100644 --- a/packages/block-editor/src/components/block-tools/style.scss +++ b/packages/block-editor/src/components/block-tools/style.scss @@ -140,50 +140,6 @@ border-right-color: $gray-900; } - .is-inverted-toolbar { - background-color: $gray-900; - color: $gray-100; - - &.block-editor-block-contextual-toolbar { - border-color: $gray-800; - } - - button { - color: $gray-300; - - &:hover { - color: $white; - } - - &:focus::before { - box-shadow: inset 0 0 0 1px $gray-900, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); - } - - &:disabled, - &[aria-disabled="true"] { - color: $gray-700; - } - } - - .block-editor-block-parent-selector .block-editor-block-parent-selector__button { - border-color: $gray-800; - background-color: $gray-900; - } - - .block-editor-block-switcher__toggle { - color: $gray-100; - } - - .components-toolbar-group, - .components-toolbar { - border-right-color: $gray-800 !important; - } - - .is-pressed { - color: var(--wp-admin-theme-color); - } - } - // Hide the block toolbar if the insertion point is shown. &.is-insertion-point-visible { visibility: hidden;