used smaller lock icon on off canvas editor

WordPress · Dec 16, 2022 · 0e276d7 · 0e276d7
1 parent 9258e2d
commit 0e276d7
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 2 deletions.
diff --git a/packages/block-editor/src/components/off-canvas-editor/block-select-button.js b/packages/block-editor/src/components/off-canvas-editor/block-select-button.js
@@ -12,7 +12,7 @@ import {
 	__experimentalTruncate as Truncate,
 } from '@wordpress/components';
 import { forwardRef } from '@wordpress/element';
-import { Icon, lock } from '@wordpress/icons';
+import { Icon, lockSmall as lock } from '@wordpress/icons';
 import { SPACE, ENTER } from '@wordpress/keycodes';
 
 /**
@@ -104,7 +104,7 @@ function ListViewBlockSelectButton(
 						</span>
 					) }
 					{ isLocked && (
-						<span className="block-editor-list-view-block-select-button__lock">
+						<span className="block-editor-list-view-block-select-button__lock offcanvas-editor-list-view-block-select-button__lock">
 							<Icon icon={ lock } />
 						</span>
 					) }

diff --git a/packages/block-editor/src/components/off-canvas-editor/style.scss b/packages/block-editor/src/components/off-canvas-editor/style.scss
@@ -23,4 +23,12 @@
 	display: block;
 	// sidebar width - tab panel padding
 	max-width: $sidebar-width - (2 * $grid-unit-20);
+	.offcanvas-editor-list-view-block-select-button__lock {
+		display: inline-flex;
+		justify-content: center;
+		align-items: center;
+		overflow: hidden;
+		width: 16px;
+		height: 16px;
+	}
 }
diff --git a/packages/icons/src/index.js b/packages/icons/src/index.js
@@ -129,6 +129,7 @@ export { default as listItem } from './library/list-item';
 export { default as listView } from './library/list-view';
 export { default as lock } from './library/lock';
 export { default as lockOutline } from './library/lock-outline';
+export { default as lockSmall } from './library/lock-small';
 export { default as login } from './library/login';
 export { default as loop } from './library/loop';
 export { default as mapMarker } from './library/map-marker';

diff --git a/packages/icons/src/library/lock-small.js b/packages/icons/src/library/lock-small.js
@@ -0,0 +1,16 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const lockSmall = (
+	<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M15 11h-.2V9c0-1.5-1.2-2.8-2.8-2.8S9.2 7.5 9.2 9v2H9c-.6 0-1 .4-1 1v4c0 .6.4 1 1 1h6c.6 0 1-.4 1-1v-4c0-.6-.4-1-1-1zm-1.8 0h-2.5V9c0-.7.6-1.2 1.2-1.2s1.2.6 1.2 1.2v2z"
+		/>
+	</SVG>
+);
+
+export default lockSmall;