List View: Display lock status (#40088)

* List View: Display lock status * Move lock status icon into ListViewBlockSelectButton component
WordPress · Apr 7, 2022 · 2d262ea · 2d262ea
1 parent d4927f0
commit 2d262ea
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 1 deletion.
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
@@ -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 }
 					</span>
 				) }
+				{ isLocked && (
+					<span className="block-editor-list-view-block-select-button__lock">
+						<Icon icon={ lock } />
+					</span>
+				) }
 			</Button>
 		</>
 	);

diff --git 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,