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.

Sign up for GitHub

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: remove the sticky position icon tooltip #63850

Merged
merged 3 commits into from
Jul 24, 2024
Merged

List View: remove the sticky position icon tooltip #63850

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a2d6ae1
List View: remove tooltip around the "position: sticky" icon
ciampo Jul 23, 2024
dfabd3b
List view: add "position" information to the block accessible descrip…
ciampo Jul 23, 2024
6586f66
Apply feedback
ciampo Jul 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 3 additions & 13 deletions packages/block-editor/src/components/list-view/block-select-button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,10 @@ import {
Button,
__experimentalHStack as HStack,
__experimentalTruncate as Truncate,
Tooltip,
} from '@wordpress/components';
import { forwardRef } from '@wordpress/element';
import { Icon, lockSmall as lock, pinSmall } from '@wordpress/icons';
import { SPACE, ENTER } from '@wordpress/keycodes';
import { __, sprintf } from '@wordpress/i18n';
import { useSelect } from '@wordpress/data';

/**
Expand Down Expand Up @@ -65,14 +63,6 @@ function ListViewBlockSelectButton(
const isSticky = blockInformation?.positionType === 'sticky';
const images = useListViewImages( { clientId, isExpanded } );

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.
// We need to clear any HTML drag data to prevent `pasteHandler` from firing
Expand Down Expand Up @@ -136,10 +126,10 @@ function ListViewBlockSelectButton(
</Truncate>
</span>
) }
{ positionLabel && isSticky && (
<Tooltip text={ positionLabel }>
{ isSticky && (
<span className="block-editor-list-view-block-select-button__sticky">
<Icon icon={ pinSmall } />
</Tooltip>
</span>
) }
{ images.length ? (
<span
Expand Down
13 changes: 10 additions & 3 deletions packages/block-editor/src/components/list-view/block.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -465,8 +465,10 @@ function ListViewBlock( {
level
);

const blockPropertiesDescription =
getBlockPropertiesDescription( isLocked );
const blockPropertiesDescription = getBlockPropertiesDescription(
blockInformation,
isLocked
);

const hasSiblings = siblingBlockCount > 0;
const hasRenderedMovers = showBlockMovers && hasSiblings;
Expand Down Expand Up @@ -562,7 +564,12 @@ function ListViewBlock( {
ariaDescribedBy={ descriptionId }
/>
<AriaReferencedText id={ descriptionId }>
{ `${ blockPositionDescription } ${ blockPropertiesDescription }` }
{ [
blockPositionDescription,
blockPropertiesDescription,
]
.filter( Boolean )
.join( ' ' ) }
</AriaReferencedText>
</div>
) }
Expand Down
3 changes: 2 additions & 1 deletion packages/block-editor/src/components/list-view/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -416,7 +416,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
15 changes: 13 additions & 2 deletions packages/block-editor/src/components/list-view/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,19 @@ export const getBlockPositionDescription = ( position, siblingCount, level ) =>
level
);

export const getBlockPropertiesDescription = ( isLocked ) =>
isLocked ? __( 'This block is locked.' ) : '';
export const getBlockPropertiesDescription = ( blockInformation, isLocked ) =>
[
blockInformation?.positionLabel
? `${ sprintf(
// translators: %s: Position of selected block, e.g. "Sticky" or "Fixed".
__( 'Position: %s' ),
blockInformation.positionLabel
) }.`
: undefined,
isLocked ? __( 'This block is locked.' ) : undefined,
]
.filter( Boolean )
.join( ' ' );

/**
* Returns true if the client ID occurs within the block selection or multi-selection,
Expand Down
Loading