diff --git a/packages/block-editor/src/components/list-view/block-select-button.js b/packages/block-editor/src/components/list-view/block-select-button.js index d5ec757ebe8bc..eba0cb34f169a 100644 --- a/packages/block-editor/src/components/list-view/block-select-button.js +++ b/packages/block-editor/src/components/list-view/block-select-button.js @@ -8,6 +8,9 @@ import classnames from 'classnames'; */ import { Button } from '@wordpress/components'; import { forwardRef } from '@wordpress/element'; +import { useSelect } from '@wordpress/data'; +import { Icon, lock } from '@wordpress/icons'; +import { SPACE, ENTER } from '@wordpress/keycodes'; /** * Internal dependencies @@ -16,7 +19,7 @@ import BlockIcon from '../block-icon'; import useBlockDisplayInformation from '../use-block-display-information'; import BlockTitle from '../block-title'; import ListViewExpander from './expander'; -import { SPACE, ENTER } from '@wordpress/keycodes'; +import { store as blockEditorStore } from '../../store'; function ListViewBlockSelectButton( { @@ -33,6 +36,14 @@ function ListViewBlockSelectButton( ref ) { const blockInformation = useBlockDisplayInformation( clientId ); + const isLocked = useSelect( + ( select ) => { + const { canMoveBlock, canRemoveBlock } = select( blockEditorStore ); + + return ! canMoveBlock( clientId ) || ! canRemoveBlock( clientId ); + }, + [ clientId ] + ); // The `href` attribute triggers the browser's native HTML drag operations. // When the link is dragged, the element's outerHTML is set in DataTransfer object as text/html. @@ -77,6 +88,11 @@ function ListViewBlockSelectButton( { blockInformation.anchor } ) } + { isLocked && ( + + + + ) } ); diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss index fd7bbedb76661..318a71f8b92e8 100644 --- a/packages/block-editor/src/components/list-view/style.scss +++ b/packages/block-editor/src/components/list-view/style.scss @@ -293,6 +293,15 @@ &.is-selected .block-editor-list-view-block-select-button__anchor { background: rgba($black, 0.3); } + + .block-editor-list-view-block-select-button__lock { + line-height: 0; + width: 24px; + min-width: 24px; + margin-left: auto; + padding: 0; + vertical-align: middle; + } } .block-editor-list-view-block-select-button__description,