Skip to content

Remove most uses of isNavigationMode in contentOnly logic #72043

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tellthemachines merged 5 commits into from
Oct 8, 2025
Merged

Remove most uses of isNavigationMode in contentOnly logic #72043

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
33789c3
Remove most uses of `isNavigationMode` in contentOnly logic
tellthemachines Oct 3, 2025
f948b73
fix condition
tellthemachines Oct 3, 2025
f9a7454
Remove section root logic
tellthemachines Oct 3, 2025
c68e4f5
Skip write mode and fix zoom out test
tellthemachines Oct 7, 2025
d8c39ce
Remove inverted toolbar styles
tellthemachines Oct 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 2 additions & 6 deletions packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,6 @@ export function BlockSettingsDropdown( {
selectedBlockClientIds,
openedBlockSettingsMenu,
isContentOnly,
isNavigationMode,
isZoomOut,
} = useSelect(
( select ) => {
Expand All @@ -100,7 +99,6 @@ export function BlockSettingsDropdown( {
getBlockAttributes,
getOpenedBlockSettingsMenu,
getBlockEditingMode,
isNavigationMode: _isNavigationMode,
isZoomOut: _isZoomOut,
} = unlock( select( blockEditorStore ) );

Expand All @@ -126,7 +124,6 @@ export function BlockSettingsDropdown( {
openedBlockSettingsMenu: getOpenedBlockSettingsMenu(),
isContentOnly:
getBlockEditingMode( firstBlockClientId ) === 'contentOnly',
isNavigationMode: _isNavigationMode(),
isZoomOut: _isZoomOut(),
};
},
Expand Down Expand Up @@ -158,7 +155,6 @@ export function BlockSettingsDropdown( {
};
}, [] );
const hasSelectedBlocks = selectedBlockClientIds.length > 0;
const isContentOnlyWriteMode = isNavigationMode && isContentOnly;

async function updateSelectionAfterDuplicate( clientIdsPromise ) {
if ( ! __experimentalSelectBlock ) {
Expand Down Expand Up @@ -282,14 +278,14 @@ export function BlockSettingsDropdown( {
clientId={ firstBlockClientId }
/>
) }
{ ! isContentOnlyWriteMode && (
{ ! isContentOnly && (
<CopyMenuItem
clientIds={ clientIds }
onCopy={ onCopy }
shortcut={ shortcuts.copy }
/>
) }
{ ! isContentOnlyWriteMode && (
{ ! isContentOnly && (
<CopyMenuItem
clientIds={ clientIds }
label={ __( 'Cut' ) }
Expand Down
16 changes: 2 additions & 14 deletions packages/block-editor/src/components/block-toolbar/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,8 +76,6 @@ export function PrivateBlockToolbar( {
showLockButtons,
showBlockVisibilityButton,
showSwitchSectionStyleButton,
hasFixedToolbar,
isNavigationMode,
} = useSelect( ( select ) => {
const {
getBlockName,
Expand All @@ -89,10 +87,8 @@ export function PrivateBlockToolbar( {
getBlockAttributes,
getBlockParentsByBlockName,
getTemplateLock,
getSettings,
getParentSectionBlock,
isZoomOut,
isNavigationMode: _isNavigationMode,
isSectionBlock,
} = unlock( select( blockEditorStore ) );
const selectedBlockClientIds = getSelectedBlockClientIds();
Expand All @@ -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 ) =>
Expand Down Expand Up @@ -133,12 +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 )
: _isZoomOut ||
( isNavigationModeEnabled &&
editingMode === 'contentOnly' &&
isSectionBlock( selectedBlockClientId ) );
window?.__experimentalContentOnlyPatternInsertion &&
( _isZoomOut || isSectionBlock( selectedBlockClientId ) );

return {
blockClientId: selectedBlockClientId,
Expand Down Expand Up @@ -167,8 +158,6 @@ export function PrivateBlockToolbar( {
showLockButtons: ! _isZoomOut,
showBlockVisibilityButton: ! _isZoomOut,
showSwitchSectionStyleButton: _showSwitchSectionStyleButton,
hasFixedToolbar: getSettings().hasFixedToolbar,
isNavigationMode: isNavigationModeEnabled,
};
}, [] );

Expand All @@ -195,7 +184,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,
Copy link
Copy Markdown
Contributor

@andrewserong andrewserong Oct 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You might already be imagining a different PR for it, but if this classname is removed, we can probably remove the CSS here, too?

gutenberg/packages/block-editor/src/components/block-tools/style.scss

Line 143 in 8b837f7

.is-inverted-toolbar {

Copy link
Copy Markdown
Contributor Author

@tellthemachines tellthemachines Oct 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes that makes sense!

} );

const innerClasses = clsx( 'block-editor-block-toolbar', {
Expand Down
44 changes: 0 additions & 44 deletions packages/block-editor/src/components/block-tools/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
16 changes: 5 additions & 11 deletions packages/block-editor/src/components/rich-text/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();

Expand All @@ -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,
Expand Down Expand Up @@ -354,7 +348,7 @@ export function RichTextWrapper(
identifier,
allowedFormats: adjustedAllowedFormats,
withoutInteractiveFormatting,
disableNoneEssentialFormatting: isContentOnlyWriteMode,
disableNoneEssentialFormatting: isContentOnly,
} );

function addEditorOnlyFormats( value ) {
Expand Down
12 changes: 1 addition & 11 deletions packages/block-editor/src/store/private-selectors.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ import {
getBlockName,
getTemplateLock,
getClientIdsWithDescendants,
isNavigationMode,
getBlockRootClientId,
getBlockAttributes,
} from './selectors';
Expand Down Expand Up @@ -529,16 +528,7 @@ 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 false;
}

/**
Expand Down
2 changes: 0 additions & 2 deletions packages/block-editor/src/store/selectors.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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 ),
Expand Down
7 changes: 1 addition & 6 deletions packages/block-library/src/site-logo/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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 ) {
Expand Down
8 changes: 2 additions & 6 deletions packages/block-library/src/site-title/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ import {
useBlockProps,
HeadingLevelDropdown,
useBlockEditingMode,
store as blockEditorStore,
} from '@wordpress/block-editor';
import {
ToggleControl,
Expand All @@ -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',
Expand All @@ -53,7 +50,6 @@ export default function SiteTitleEdit( {
return {
canUserEdit: canEdit,
title: canEdit ? settings?.title : readOnlySettings?.name,
isNavigationMode: _isNavigationMode(),
};
}, [] );
const { editEntityRecord } = useDispatch( coreStore );
Expand Down Expand Up @@ -109,7 +105,7 @@ export default function SiteTitleEdit( {
);
return (
<>
{ ! isNavigationMode && blockEditingMode === 'default' && (
{ blockEditingMode === 'default' && (
<BlockControls group="block">
<HeadingLevelDropdown
value={ level }
Expand Down
2 changes: 1 addition & 1 deletion test/e2e/specs/editor/various/write-design-mode.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
*/
const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );

test.describe( 'Write/Design mode', () => {
Copy link
Copy Markdown
Contributor Author

@tellthemachines tellthemachines Oct 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've disabled these for now instead of removing them because I think we can rewrite them to apply to contentOnly patterns instead. It might be better to wait until the feature is a bit more stable to do that though!

test.describe.skip( 'Write/Design mode', () => {
test.beforeAll( async ( { requestUtils } ) => {
await requestUtils.activateTheme( 'emptytheme' );
} );
Expand Down
4 changes: 2 additions & 2 deletions test/e2e/specs/site-editor/zoom-out.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
Copy link
Copy Markdown
Contributor Author

@tellthemachines tellthemachines Oct 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is an expected change because patterns in contentOnly mode no longer have "cut" and "copy" options.

} );

test( 'Zoom Out cannot be activated when the section root is missing', async ( {
Expand Down
Loading