Block Editor: Add list view lock controls#78612
Open
richtabor wants to merge 3 commits into
Open
Conversation
github-actions
Bot
added
[Package] Block editor
|
Size Change: +1.31 kB (+0.02%) Total Size: 8.04 MB 📦 View Changed
ℹ️ View Unchanged
|
richtabor
force-pushed
the
codex/list-view-lock-controls-stacked
branch
2 times, most recently
from
870bc13 to
169b7ca
Compare
richtabor
force-pushed
the
codex/list-view-lock-controls-stacked
branch
from
169b7ca to
cb0da0e
Compare
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
richtabor
added
[Type] Enhancement
Contributor
There was a problem hiding this comment.
Pull request overview
This PR makes the List View lock indicator interactive so users can lock/unlock blocks directly from the List View row, reducing reliance on the lock modal and removing the lock button from the block toolbar.
Changes:
- Add a List View row lock toggle (unlock immediately when locked; open compact lock options menu when unlocked / when menu is already open).
- Introduce new small lock/unlock icons and update the existing
lock-smallglyph. - Remove the block toolbar lock controls so lock management is List View–driven.
Reviewed changes
Copilot reviewed 7 out of 9 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/icons/src/manifest.json | Registers the new unlock-small icon in the icon manifest. |
| packages/icons/src/library/unlock-small.svg | Adds the new small unlock SVG asset. |
| packages/icons/src/library/lock-small.svg | Updates the small lock SVG asset to the new design. |
| packages/block-editor/src/components/list-view/style.scss | Adds styling for the new List View row lock toggle visibility/spacing. |
| packages/block-editor/src/components/list-view/lock-menu-content.js | New compact lock options menu content (move/remove/layout). |
| packages/block-editor/src/components/list-view/block.js | Adds the interactive lock toggle + menu wiring into each List View row. |
| packages/block-editor/src/components/list-view/block-select-button.js | Removes the old passive lock icon from the row anchor. |
| packages/block-editor/src/components/block-toolbar/index.js | Removes the lock toolbar button from the block toolbar. |
| packages/block-editor/src/components/block-lock/use-unlock-block.js | Adds a reusable “unlock block with undo snackbar” hook used by List View. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| : unlockSmall; | ||
| const lockButtonLabel = isLocked | ||
| ? __( 'Lock options' ) | ||
| : __( 'Lock' ); |
Comment on lines
+21
to
+37
| const { blockAttributes, hasLayoutLock, isPatternSection } = useSelect( | ||
| ( select ) => { | ||
| const blockEditorSelect = select( blockEditorStore ); | ||
| const { getBlockName, getBlockAttributes } = blockEditorSelect; | ||
| const { isSectionBlock } = unlock( blockEditorSelect ); | ||
| const blockType = getBlockType( getBlockName( clientId ) ); | ||
| const attributes = getBlockAttributes( clientId ); | ||
| const _isPatternSection = | ||
| !! attributes?.metadata?.patternName && | ||
| isSectionBlock( clientId ); | ||
| const _hasTemplateLock = !! blockType?.attributes?.templateLock; | ||
|
|
||
| return { | ||
| blockAttributes: attributes, | ||
| hasLayoutLock: _hasTemplateLock || _isPatternSection, | ||
| isPatternSection: _isPatternSection, | ||
| }; |
Comment on lines
+41
to
+43
| return () => { | ||
| const previousAttributes = registry | ||
| .select( blockEditorStore ) |
|
Flaky tests detected in f0f373f. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/26371878696
|
Member
|
I think @ntsekouras was already working on this, but I don't recall the exact reason why the old PR wasn't merged. |
Contributor
It's been a while, but I had a PR for that here, which is closed now. I don't remember all the details, but the existing implementation of the list view with Not sure if things have changed now, but I'll take a look at this PR. It seems at first glance that the approach here is wider than the one I had, which was just opening the existing Lock modal. |
Contributor
This assumes users always have the list view open, which isn't the case. Wouldn't it be more confusing for those cases that they cannot see the block movers for example and don't know why? 🤔 |
ntsekouras
reviewed
Jun 3, 2026
Contributor
ntsekouras
left a comment
ntsekouras
left a comment
There was a problem hiding this comment.
Thanks for the PR! I took a quick first pass and left some comments mostly about UX.
| import BlockControls from '../block-controls'; | ||
| import __unstableBlockToolbarLastItem from './block-toolbar-last-item'; | ||
| import BlockSettingsMenu from '../block-settings-menu'; | ||
| import { BlockLockToolbar } from '../block-lock'; |
Contributor
There was a problem hiding this comment.
If we go with this approach it seems BlockLockToolbar is not used anywhere now.
| * @param {string} clientId Block client ID. | ||
| * @return {Function} Unlock callback. | ||
| */ | ||
| export default function useUnlockBlock( clientId ) { |
Contributor
There was a problem hiding this comment.
TBH I found the interaction of unlocking unconditionally a bit more confusing. For example we cannot easily update the 'locks' (e.g. move/remove) if we previously had one set. We first need to unlock and then lock again.
| applyLock( { remove: event.target.checked } ) | ||
| } | ||
| > | ||
| <Menu.ItemLabel>{ __( 'Prevent deletion' ) }</Menu.ItemLabel> |
Contributor
There was a problem hiding this comment.
Noting that there is copy drift here with the Lock modal (e.g Prevent deletion <-> Lock removal) which is still accessible through the block settings dropdown.
Member
Author
I think it's fine. If anything, maybe we follow-up with one of the following:
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What?
Makes the List View lock indicator interactive.
List View already shows a persistent lock icon for locked blocks, which matches the current trunk behavior. The biggest change in this PR is that the visible lock affordance is no longer passive: users can act on it directly from the row.
This is stacked on #78608 (
codex/layout-lock-model) so the diff only includes the List View lock-control work.Visual
list-controls.mp4
Why?
The lock state is already visible in List View, but a visible non-interactive control is frustrating. If the row shows that a block is locked, users should be able to act on that state in the same place.
The interaction is split intentionally:
This PR also deliberately removes the lock icons from the block toolbar. With the lock state now persistently visible and actionable in List View, a second contextual toolbar icon is confusing: it appears only temporarily for a selected locked block, can displace other toolbar controls, and makes a transient toolbar affordance feel like the source of truth for lock state. Keeping lock state and lock actions in List View gives users a stable place to see and change locking without reshuffling the block toolbar.
This positions the locking UI for the next iteration: once the block options menu is migrated to the newer
Menucomponent, these compact menu controls can replace the block lock modal rather than sending users into a separate dialog.How?
Unlock parentaction or a child-row lock control.Testing Instructions
npm run lint:js -- packages/block-editor/src/components/block-lock/use-unlock-block.js packages/block-editor/src/components/block-toolbar/index.js packages/block-editor/src/components/list-view/block-select-button.js packages/block-editor/src/components/list-view/block.js packages/block-editor/src/components/list-view/lock-menu-content.js.npm run lint:css -- packages/block-editor/src/components/list-view/style.scss.npm run test:unit packages/block-editor/src/components/list-view/test -- --runInBand.npm run wp-env status,npm run wp-env startif needed, andnpm start.Lock layoutcan be applied from the row menu without opening the block lock modal.Unlock parentaction.Testing
npm run lint:js -- packages/block-editor/src/components/block-lock/use-unlock-block.js packages/block-editor/src/components/block-toolbar/index.js packages/block-editor/src/components/list-view/block-select-button.js packages/block-editor/src/components/list-view/block.js packages/block-editor/src/components/list-view/lock-menu-content.jsnpm run lint:css -- packages/block-editor/src/components/list-view/style.scssnpm run test:unit packages/block-editor/src/components/list-view/test -- --runInBandgit diff --check