Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

List View: add an indicator of when a position type is set for a block #49122

Merged
merged 10 commits into from
Jun 19, 2023
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -166,6 +177,13 @@ function ListViewBlockSelectButton(
</Truncate>
</span>
) }
{ positionLabel && isSticky && (
<Tooltip text={ positionLabel }>
<span className="block-editor-list-view-block-select-button__sticky">
<Icon icon={ pinSmall } />
</span>
</Tooltip>
) }
{ isLocked && (
<span className="block-editor-list-view-block-select-button__lock">
<Icon icon={ lock } />
Expand Down
3 changes: 2 additions & 1 deletion packages/block-editor/src/components/list-view/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
isReusableBlock,
isTemplatePart,
} from '@wordpress/blocks';
import { __ } from '@wordpress/i18n';

/**
* Internal dependencies
Expand All @@ -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
Expand Down Expand Up @@ -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;

Expand All @@ -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 ]
Expand Down
1 change: 1 addition & 0 deletions packages/icons/src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
18 changes: 18 additions & 0 deletions packages/icons/src/library/pin-small.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
/**
* WordPress dependencies
*/
import { SVG, Path } from '@wordpress/primitives';

const pinSmall = (
<SVG
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<Path d="M10.97 10.159a3.382 3.382 0 0 0-2.857.955l1.724 1.723-2.836 2.913L7 17h1.25l2.913-2.837 1.723 1.723a3.38 3.38 0 0 0 .606-.825c.33-.63.446-1.343.35-2.032L17 10.695 13.305 7l-2.334 3.159Z" />
</SVG>
);

export default pinSmall;