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 ca5e414ae6576..b6517357e7b65 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 @@ -10,12 +10,14 @@ import { Button, __experimentalHStack as HStack, __experimentalTruncate as Truncate, + Tooltip, } from '@wordpress/components'; import { forwardRef } from '@wordpress/element'; -import { Icon, lockSmall as lock } from '@wordpress/icons'; +import { Icon, lockSmall as lock, pinSmall } from '@wordpress/icons'; import { SPACE, ENTER, BACKSPACE, DELETE } from '@wordpress/keycodes'; import { useSelect, useDispatch } from '@wordpress/data'; import { __unstableUseShortcutEventMatch as useShortcutEventMatch } from '@wordpress/keyboard-shortcuts'; +import { __, sprintf } from '@wordpress/i18n'; /** * Internal dependencies @@ -60,6 +62,15 @@ function ListViewBlockSelectButton( } = useSelect( blockEditorStore ); const { removeBlocks } = useDispatch( blockEditorStore ); const isMatch = useShortcutEventMatch(); + const isSticky = blockInformation?.positionType === 'sticky'; + + const positionLabel = blockInformation?.positionLabel + ? sprintf( + // translators: 1: Position of selected block, e.g. "Sticky" or "Fixed". + __( 'Position: %1$s' ), + blockInformation.positionLabel + ) + : ''; // 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. @@ -166,6 +177,13 @@ function ListViewBlockSelectButton( ) } + { positionLabel && isSticky && ( + + + + + + ) } { isLocked && ( diff --git a/packages/block-editor/src/components/list-view/style.scss b/packages/block-editor/src/components/list-view/style.scss index 082389f71d4a0..4b3ba296d35bc 100644 --- a/packages/block-editor/src/components/list-view/style.scss +++ b/packages/block-editor/src/components/list-view/style.scss @@ -335,7 +335,8 @@ background: rgba($black, 0.3); } - .block-editor-list-view-block-select-button__lock { + .block-editor-list-view-block-select-button__lock, + .block-editor-list-view-block-select-button__sticky { line-height: 0; } } diff --git a/packages/block-editor/src/components/use-block-display-information/index.js b/packages/block-editor/src/components/use-block-display-information/index.js index 950cb9c905b24..87909cea45f63 100644 --- a/packages/block-editor/src/components/use-block-display-information/index.js +++ b/packages/block-editor/src/components/use-block-display-information/index.js @@ -7,6 +7,7 @@ import { isReusableBlock, isTemplatePart, } from '@wordpress/blocks'; +import { __ } from '@wordpress/i18n'; /** * Internal dependencies @@ -27,6 +28,26 @@ import { store as blockEditorStore } from '../../store'; * @property {string} anchor HTML anchor. */ +/** + * Get the display label for a block's position type. + * + * @param {Object} attributes Block attributes. + * @return {string} The position type label. + */ +function getPositionTypeLabel( attributes ) { + const positionType = attributes?.style?.position?.type; + + if ( positionType === 'sticky' ) { + return __( 'Sticky' ); + } + + if ( positionType === 'fixed' ) { + return __( 'Fixed' ); + } + + return null; +} + /** * Hook used to try to find a matching block variation and return * the appropriate information for display reasons. In order to @@ -57,12 +78,15 @@ export default function useBlockDisplayInformation( clientId ) { const match = getActiveBlockVariation( blockName, attributes ); const isSynced = isReusableBlock( blockType ) || isTemplatePart( blockType ); + const positionLabel = getPositionTypeLabel( attributes ); const blockTypeInfo = { isSynced, title: blockType.title, icon: blockType.icon, description: blockType.description, anchor: attributes?.anchor, + positionLabel, + positionType: attributes?.style?.position?.type, }; if ( ! match ) return blockTypeInfo; @@ -72,6 +96,8 @@ export default function useBlockDisplayInformation( clientId ) { icon: match.icon || blockType.icon, description: match.description || blockType.description, anchor: attributes?.anchor, + positionLabel, + positionType: attributes?.style?.position?.type, }; }, [ clientId ] diff --git a/packages/icons/src/index.js b/packages/icons/src/index.js index cd8058425a8d6..903d6f9455a87 100644 --- a/packages/icons/src/index.js +++ b/packages/icons/src/index.js @@ -169,6 +169,7 @@ export { default as positionRight } from './library/position-right'; export { default as pencil } from './library/pencil'; export { default as people } from './library/people'; export { default as pin } from './library/pin'; +export { default as pinSmall } from './library/pin-small'; export { default as plugins } from './library/plugins'; export { default as plusCircleFilled } from './library/plus-circle-filled'; export { default as plusCircle } from './library/plus-circle'; diff --git a/packages/icons/src/library/pin-small.js b/packages/icons/src/library/pin-small.js new file mode 100644 index 0000000000000..7ed84e47949a2 --- /dev/null +++ b/packages/icons/src/library/pin-small.js @@ -0,0 +1,18 @@ +/** + * WordPress dependencies + */ +import { SVG, Path } from '@wordpress/primitives'; + +const pinSmall = ( + + + +); + +export default pinSmall;