Block settings dropdown: use block display title in remove label #39110

ramonjd · 2022-02-28T02:49:07Z

Description

This PR employs a block display title in the block settings dropdown rather than the default core block name in the drop down label "Remove x block".

A "block display title" might be a specific block variation title, or a reusable block group name.

This makes the label consistent with the block list view.

Changes

Gutting <BlockTitle /> and turning it into a hook that we use independently of JSX
Truncating long block display names to 25 chars (negotiable) ONLY for BlockSettingsDropdown, which appears in the block settings toolbar and the block list view. This is to maintain (roughly) the dropdown container's current width proportions.
Making truncation of the block title optional. I've passed the current default value of 35 for all existing usages to maintain the status quo for now.

Room for improvement

We might like to refactor <Blocktitle /> to use the <Text /> component, which has truncation built in, e.g.,

<Text
    as="span"
    limit={ 25 }
    ellipsizeMode="tail"
    truncate
    >
   { someLabel }
</Text>

Also, maybe an aria-label with the full value might be appropriate where there is a truncation?

Testing Instructions

Add a Group Block to a post.
Add a Row Block to a post.
Add another random block to a post, and turn it into a reusable block.
When removing the block via the block settings drop down, either via the Block List Tree ellipsis, or via the block's own toolbar, you should see the name of either the block, or its variation or the reusable group.
Check that other instances of <BlockTitle /> appear as they do on trunk (max 35 chars), e.g., bread crumb, block switcher...

Run npm run test-unit packages/block-editor/src/components/block-title/test/index.js

Some test code

<!-- wp:group {"layout":{"type":"flex","allowOrientation":false}} -->
<div class="wp-block-group"></div>
<!-- /wp:group -->

<!-- wp:group -->
<div class="wp-block-group"></div>
<!-- /wp:group -->

Screenshots

Before

Remove a "Row" Block (a Group variation)

Remove a reusable block

After

Types of changes

Enhancement to the block settings dropdown.

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows the accessibility standards.
I've tested my changes with keyboard and screen readers.
My code has proper inline documentation.
I've included developer documentation if appropriate.
I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).
I've updated related schemas if appropriate.

github-actions · 2022-02-28T02:56:20Z

Size Change: +33 B (0%)

Total Size: 1.15 MB

Filename	Size	Change
`build/block-editor/index.min.js`	144 kB	+33 B (0%)

ℹ️

View Unchanged

Filename	Size
`build/a11y/index.min.js`	993 B
`build/admin-manifest/index.min.js`	1.24 kB
`build/annotations/index.min.js`	2.77 kB
`build/api-fetch/index.min.js`	2.27 kB
`build/autop/index.min.js`	2.15 kB
`build/blob/index.min.js`	487 B
`build/block-directory/index.min.js`	6.49 kB
`build/block-directory/style-rtl.css`	1.01 kB
`build/block-directory/style.css`	1.01 kB
`build/block-editor/default-editor-styles-rtl.css`	378 B
`build/block-editor/default-editor-styles.css`	378 B
`build/block-editor/style-rtl.css`	14.8 kB
`build/block-editor/style.css`	14.8 kB
`build/block-library/blocks/archives/editor-rtl.css`	61 B
`build/block-library/blocks/archives/editor.css`	60 B
`build/block-library/blocks/archives/style-rtl.css`	65 B
`build/block-library/blocks/archives/style.css`	65 B
`build/block-library/blocks/audio/editor-rtl.css`	150 B
`build/block-library/blocks/audio/editor.css`	150 B
`build/block-library/blocks/audio/style-rtl.css`	111 B
`build/block-library/blocks/audio/style.css`	111 B
`build/block-library/blocks/audio/theme-rtl.css`	125 B
`build/block-library/blocks/audio/theme.css`	125 B
`build/block-library/blocks/block/editor-rtl.css`	161 B
`build/block-library/blocks/block/editor.css`	161 B
`build/block-library/blocks/button/editor-rtl.css`	445 B
`build/block-library/blocks/button/editor.css`	445 B
`build/block-library/blocks/button/style-rtl.css`	560 B
`build/block-library/blocks/button/style.css`	560 B
`build/block-library/blocks/buttons/editor-rtl.css`	292 B
`build/block-library/blocks/buttons/editor.css`	292 B
`build/block-library/blocks/buttons/style-rtl.css`	275 B
`build/block-library/blocks/buttons/style.css`	275 B
`build/block-library/blocks/calendar/style-rtl.css`	207 B
`build/block-library/blocks/calendar/style.css`	207 B
`build/block-library/blocks/categories/editor-rtl.css`	84 B
`build/block-library/blocks/categories/editor.css`	83 B
`build/block-library/blocks/categories/style-rtl.css`	79 B
`build/block-library/blocks/categories/style.css`	79 B
`build/block-library/blocks/code/style-rtl.css`	103 B
`build/block-library/blocks/code/style.css`	103 B
`build/block-library/blocks/code/theme-rtl.css`	124 B
`build/block-library/blocks/code/theme.css`	124 B
`build/block-library/blocks/columns/editor-rtl.css`	108 B
`build/block-library/blocks/columns/editor.css`	108 B
`build/block-library/blocks/columns/style-rtl.css`	406 B
`build/block-library/blocks/columns/style.css`	406 B
`build/block-library/blocks/comment-author-avatar/editor-rtl.css`	125 B
`build/block-library/blocks/comment-author-avatar/editor.css`	125 B
`build/block-library/blocks/comment-template/style-rtl.css`	127 B
`build/block-library/blocks/comment-template/style.css`	127 B
`build/block-library/blocks/comments-pagination-numbers/editor-rtl.css`	123 B
`build/block-library/blocks/comments-pagination-numbers/editor.css`	121 B
`build/block-library/blocks/comments-pagination/editor-rtl.css`	222 B
`build/block-library/blocks/comments-pagination/editor.css`	209 B
`build/block-library/blocks/comments-pagination/style-rtl.css`	235 B
`build/block-library/blocks/comments-pagination/style.css`	231 B
`build/block-library/blocks/comments-query-loop/editor-rtl.css`	95 B
`build/block-library/blocks/comments-query-loop/editor.css`	95 B
`build/block-library/blocks/cover/editor-rtl.css`	546 B
`build/block-library/blocks/cover/editor.css`	547 B
`build/block-library/blocks/cover/style-rtl.css`	1.56 kB
`build/block-library/blocks/cover/style.css`	1.56 kB
`build/block-library/blocks/embed/editor-rtl.css`	293 B
`build/block-library/blocks/embed/editor.css`	293 B
`build/block-library/blocks/embed/style-rtl.css`	417 B
`build/block-library/blocks/embed/style.css`	417 B
`build/block-library/blocks/embed/theme-rtl.css`	124 B
`build/block-library/blocks/embed/theme.css`	124 B
`build/block-library/blocks/file/editor-rtl.css`	300 B
`build/block-library/blocks/file/editor.css`	300 B
`build/block-library/blocks/file/style-rtl.css`	255 B
`build/block-library/blocks/file/style.css`	255 B
`build/block-library/blocks/file/view.min.js`	353 B
`build/block-library/blocks/freeform/editor-rtl.css`	2.44 kB
`build/block-library/blocks/freeform/editor.css`	2.44 kB
`build/block-library/blocks/gallery/editor-rtl.css`	965 B
`build/block-library/blocks/gallery/editor.css`	967 B
`build/block-library/blocks/gallery/style-rtl.css`	1.61 kB
`build/block-library/blocks/gallery/style.css`	1.61 kB
`build/block-library/blocks/gallery/theme-rtl.css`	122 B
`build/block-library/blocks/gallery/theme.css`	122 B
`build/block-library/blocks/group/editor-rtl.css`	159 B
`build/block-library/blocks/group/editor.css`	159 B
`build/block-library/blocks/group/style-rtl.css`	57 B
`build/block-library/blocks/group/style.css`	57 B
`build/block-library/blocks/group/theme-rtl.css`	78 B
`build/block-library/blocks/group/theme.css`	78 B
`build/block-library/blocks/heading/style-rtl.css`	114 B
`build/block-library/blocks/heading/style.css`	114 B
`build/block-library/blocks/html/editor-rtl.css`	332 B
`build/block-library/blocks/html/editor.css`	333 B
`build/block-library/blocks/image/editor-rtl.css`	731 B
`build/block-library/blocks/image/editor.css`	730 B
`build/block-library/blocks/image/style-rtl.css`	518 B
`build/block-library/blocks/image/style.css`	523 B
`build/block-library/blocks/image/theme-rtl.css`	124 B
`build/block-library/blocks/image/theme.css`	124 B
`build/block-library/blocks/latest-comments/style-rtl.css`	284 B
`build/block-library/blocks/latest-comments/style.css`	284 B
`build/block-library/blocks/latest-posts/editor-rtl.css`	199 B
`build/block-library/blocks/latest-posts/editor.css`	198 B
`build/block-library/blocks/latest-posts/style-rtl.css`	447 B
`build/block-library/blocks/latest-posts/style.css`	446 B
`build/block-library/blocks/list/style-rtl.css`	94 B
`build/block-library/blocks/list/style.css`	94 B
`build/block-library/blocks/media-text/editor-rtl.css`	266 B
`build/block-library/blocks/media-text/editor.css`	263 B
`build/block-library/blocks/media-text/style-rtl.css`	493 B
`build/block-library/blocks/media-text/style.css`	490 B
`build/block-library/blocks/more/editor-rtl.css`	431 B
`build/block-library/blocks/more/editor.css`	431 B
`build/block-library/blocks/navigation-link/editor-rtl.css`	649 B
`build/block-library/blocks/navigation-link/editor.css`	650 B
`build/block-library/blocks/navigation-link/style-rtl.css`	94 B
`build/block-library/blocks/navigation-link/style.css`	94 B
`build/block-library/blocks/navigation-submenu/editor-rtl.css`	299 B
`build/block-library/blocks/navigation-submenu/editor.css`	299 B
`build/block-library/blocks/navigation-submenu/view.min.js`	375 B
`build/block-library/blocks/navigation/editor-rtl.css`	2.03 kB
`build/block-library/blocks/navigation/editor.css`	2.04 kB
`build/block-library/blocks/navigation/style-rtl.css`	1.89 kB
`build/block-library/blocks/navigation/style.css`	1.88 kB
`build/block-library/blocks/navigation/view.min.js`	2.85 kB
`build/block-library/blocks/nextpage/editor-rtl.css`	395 B
`build/block-library/blocks/nextpage/editor.css`	395 B
`build/block-library/blocks/page-list/editor-rtl.css`	363 B
`build/block-library/blocks/page-list/editor.css`	363 B
`build/block-library/blocks/page-list/style-rtl.css`	175 B
`build/block-library/blocks/page-list/style.css`	175 B
`build/block-library/blocks/paragraph/editor-rtl.css`	157 B
`build/block-library/blocks/paragraph/editor.css`	157 B
`build/block-library/blocks/paragraph/style-rtl.css`	273 B
`build/block-library/blocks/paragraph/style.css`	273 B
`build/block-library/blocks/post-author/style-rtl.css`	175 B
`build/block-library/blocks/post-author/style.css`	176 B
`build/block-library/blocks/post-comments-form/style-rtl.css`	446 B
`build/block-library/blocks/post-comments-form/style.css`	446 B
`build/block-library/blocks/post-comments/style-rtl.css`	521 B
`build/block-library/blocks/post-comments/style.css`	521 B
`build/block-library/blocks/post-excerpt/editor-rtl.css`	73 B
`build/block-library/blocks/post-excerpt/editor.css`	73 B
`build/block-library/blocks/post-excerpt/style-rtl.css`	69 B
`build/block-library/blocks/post-excerpt/style.css`	69 B
`build/block-library/blocks/post-featured-image/editor-rtl.css`	721 B
`build/block-library/blocks/post-featured-image/editor.css`	721 B
`build/block-library/blocks/post-featured-image/style-rtl.css`	153 B
`build/block-library/blocks/post-featured-image/style.css`	153 B
`build/block-library/blocks/post-template/editor-rtl.css`	99 B
`build/block-library/blocks/post-template/editor.css`	98 B
`build/block-library/blocks/post-template/style-rtl.css`	323 B
`build/block-library/blocks/post-template/style.css`	323 B
`build/block-library/blocks/post-terms/style-rtl.css`	73 B
`build/block-library/blocks/post-terms/style.css`	73 B
`build/block-library/blocks/post-title/style-rtl.css`	80 B
`build/block-library/blocks/post-title/style.css`	80 B
`build/block-library/blocks/preformatted/style-rtl.css`	103 B
`build/block-library/blocks/preformatted/style.css`	103 B
`build/block-library/blocks/pullquote/editor-rtl.css`	198 B
`build/block-library/blocks/pullquote/editor.css`	198 B
`build/block-library/blocks/pullquote/style-rtl.css`	389 B
`build/block-library/blocks/pullquote/style.css`	388 B
`build/block-library/blocks/pullquote/theme-rtl.css`	167 B
`build/block-library/blocks/pullquote/theme.css`	167 B
`build/block-library/blocks/query-pagination-numbers/editor-rtl.css`	122 B
`build/block-library/blocks/query-pagination-numbers/editor.css`	121 B
`build/block-library/blocks/query-pagination/editor-rtl.css`	221 B
`build/block-library/blocks/query-pagination/editor.css`	211 B
`build/block-library/blocks/query-pagination/style-rtl.css`	234 B
`build/block-library/blocks/query-pagination/style.css`	231 B
`build/block-library/blocks/query/editor-rtl.css`	131 B
`build/block-library/blocks/query/editor.css`	132 B
`build/block-library/blocks/quote/style-rtl.css`	201 B
`build/block-library/blocks/quote/style.css`	201 B
`build/block-library/blocks/quote/theme-rtl.css`	223 B
`build/block-library/blocks/quote/theme.css`	226 B
`build/block-library/blocks/read-more/style-rtl.css`	132 B
`build/block-library/blocks/read-more/style.css`	132 B
`build/block-library/blocks/rss/editor-rtl.css`	202 B
`build/block-library/blocks/rss/editor.css`	204 B
`build/block-library/blocks/rss/style-rtl.css`	289 B
`build/block-library/blocks/rss/style.css`	288 B
`build/block-library/blocks/search/editor-rtl.css`	165 B
`build/block-library/blocks/search/editor.css`	165 B
`build/block-library/blocks/search/style-rtl.css`	397 B
`build/block-library/blocks/search/style.css`	398 B
`build/block-library/blocks/search/theme-rtl.css`	64 B
`build/block-library/blocks/search/theme.css`	64 B
`build/block-library/blocks/separator/editor-rtl.css`	99 B
`build/block-library/blocks/separator/editor.css`	99 B
`build/block-library/blocks/separator/style-rtl.css`	233 B
`build/block-library/blocks/separator/style.css`	233 B
`build/block-library/blocks/separator/theme-rtl.css`	172 B
`build/block-library/blocks/separator/theme.css`	172 B
`build/block-library/blocks/shortcode/editor-rtl.css`	474 B
`build/block-library/blocks/shortcode/editor.css`	474 B
`build/block-library/blocks/site-logo/editor-rtl.css`	744 B
`build/block-library/blocks/site-logo/editor.css`	744 B
`build/block-library/blocks/site-logo/style-rtl.css`	181 B
`build/block-library/blocks/site-logo/style.css`	181 B
`build/block-library/blocks/site-tagline/editor-rtl.css`	86 B
`build/block-library/blocks/site-tagline/editor.css`	86 B
`build/block-library/blocks/site-title/editor-rtl.css`	84 B
`build/block-library/blocks/site-title/editor.css`	84 B
`build/block-library/blocks/social-link/editor-rtl.css`	177 B
`build/block-library/blocks/social-link/editor.css`	177 B
`build/block-library/blocks/social-links/editor-rtl.css`	674 B
`build/block-library/blocks/social-links/editor.css`	673 B
`build/block-library/blocks/social-links/style-rtl.css`	1.37 kB
`build/block-library/blocks/social-links/style.css`	1.36 kB
`build/block-library/blocks/spacer/editor-rtl.css`	332 B
`build/block-library/blocks/spacer/editor.css`	332 B
`build/block-library/blocks/spacer/style-rtl.css`	48 B
`build/block-library/blocks/spacer/style.css`	48 B
`build/block-library/blocks/table/editor-rtl.css`	471 B
`build/block-library/blocks/table/editor.css`	472 B
`build/block-library/blocks/table/style-rtl.css`	481 B
`build/block-library/blocks/table/style.css`	481 B
`build/block-library/blocks/table/theme-rtl.css`	188 B
`build/block-library/blocks/table/theme.css`	188 B
`build/block-library/blocks/tag-cloud/style-rtl.css`	226 B
`build/block-library/blocks/tag-cloud/style.css`	227 B
`build/block-library/blocks/template-part/editor-rtl.css`	235 B
`build/block-library/blocks/template-part/editor.css`	235 B
`build/block-library/blocks/template-part/theme-rtl.css`	101 B
`build/block-library/blocks/template-part/theme.css`	101 B
`build/block-library/blocks/text-columns/editor-rtl.css`	95 B
`build/block-library/blocks/text-columns/editor.css`	95 B
`build/block-library/blocks/text-columns/style-rtl.css`	166 B
`build/block-library/blocks/text-columns/style.css`	166 B
`build/block-library/blocks/verse/style-rtl.css`	87 B
`build/block-library/blocks/verse/style.css`	87 B
`build/block-library/blocks/video/editor-rtl.css`	571 B
`build/block-library/blocks/video/editor.css`	572 B
`build/block-library/blocks/video/style-rtl.css`	173 B
`build/block-library/blocks/video/style.css`	173 B
`build/block-library/blocks/video/theme-rtl.css`	124 B
`build/block-library/blocks/video/theme.css`	124 B
`build/block-library/common-rtl.css`	934 B
`build/block-library/common.css`	932 B
`build/block-library/editor-rtl.css`	9.92 kB
`build/block-library/editor.css`	9.92 kB
`build/block-library/index.min.js`	167 kB
`build/block-library/reset-rtl.css`	474 B
`build/block-library/reset.css`	474 B
`build/block-library/style-rtl.css`	11.4 kB
`build/block-library/style.css`	11.4 kB
`build/block-library/theme-rtl.css`	665 B
`build/block-library/theme.css`	670 B
`build/block-serialization-default-parser/index.min.js`	1.12 kB
`build/block-serialization-spec-parser/index.min.js`	2.83 kB
`build/blocks/index.min.js`	46.4 kB
`build/components/index.min.js`	217 kB
`build/components/style-rtl.css`	15.6 kB
`build/components/style.css`	15.6 kB
`build/compose/index.min.js`	11.2 kB
`build/core-data/index.min.js`	14 kB
`build/customize-widgets/index.min.js`	11.2 kB
`build/customize-widgets/style-rtl.css`	1.39 kB
`build/customize-widgets/style.css`	1.39 kB
`build/data-controls/index.min.js`	663 B
`build/data/index.min.js`	7.72 kB
`build/date/index.min.js`	31.9 kB
`build/deprecated/index.min.js`	518 B
`build/dom-ready/index.min.js`	336 B
`build/dom/index.min.js`	4.53 kB
`build/edit-navigation/index.min.js`	16.2 kB
`build/edit-navigation/style-rtl.css`	3.76 kB
`build/edit-navigation/style.css`	3.76 kB
`build/edit-post/classic-rtl.css`	546 B
`build/edit-post/classic.css`	547 B
`build/edit-post/index.min.js`	29.9 kB
`build/edit-post/style-rtl.css`	7.14 kB
`build/edit-post/style.css`	7.13 kB
`build/edit-site/index.min.js`	41.8 kB
`build/edit-site/style-rtl.css`	7.23 kB
`build/edit-site/style.css`	7.22 kB
`build/edit-widgets/index.min.js`	16.5 kB
`build/edit-widgets/style-rtl.css`	4.12 kB
`build/edit-widgets/style.css`	4.13 kB
`build/editor/index.min.js`	38.5 kB
`build/editor/style-rtl.css`	3.71 kB
`build/editor/style.css`	3.71 kB
`build/element/index.min.js`	4.29 kB
`build/escape-html/index.min.js`	548 B
`build/format-library/index.min.js`	6.62 kB
`build/format-library/style-rtl.css`	571 B
`build/format-library/style.css`	571 B
`build/hooks/index.min.js`	1.66 kB
`build/html-entities/index.min.js`	454 B
`build/i18n/index.min.js`	3.79 kB
`build/is-shallow-equal/index.min.js`	535 B
`build/keyboard-shortcuts/index.min.js`	1.83 kB
`build/keycodes/index.min.js`	1.41 kB
`build/list-reusable-blocks/index.min.js`	1.75 kB
`build/list-reusable-blocks/style-rtl.css`	838 B
`build/list-reusable-blocks/style.css`	838 B
`build/media-utils/index.min.js`	2.94 kB
`build/notices/index.min.js`	957 B
`build/nux/index.min.js`	2.12 kB
`build/nux/style-rtl.css`	751 B
`build/nux/style.css`	749 B
`build/plugins/index.min.js`	1.98 kB
`build/preferences/index.min.js`	1.2 kB
`build/primitives/index.min.js`	949 B
`build/priority-queue/index.min.js`	611 B
`build/react-i18n/index.min.js`	704 B
`build/react-refresh-entry/index.min.js`	8.44 kB
`build/react-refresh-runtime/index.min.js`	7.31 kB
`build/redux-routine/index.min.js`	2.69 kB
`build/reusable-blocks/index.min.js`	2.24 kB
`build/reusable-blocks/style-rtl.css`	256 B
`build/reusable-blocks/style.css`	256 B
`build/rich-text/index.min.js`	11.1 kB
`build/server-side-render/index.min.js`	1.61 kB
`build/shortcode/index.min.js`	1.52 kB
`build/token-list/index.min.js`	668 B
`build/url/index.min.js`	1.94 kB
`build/viewport/index.min.js`	1.08 kB
`build/warning/index.min.js`	280 B
`build/widgets/index.min.js`	7.18 kB
`build/widgets/style-rtl.css`	1.16 kB
`build/widgets/style.css`	1.16 kB
`build/wordcount/index.min.js`	1.07 kB

_{compressed-size-action}

andrewserong

Nice one @ramonjd — good idea abstracting the logic from the BlockTitle component and moving it to a hook with custom truncation length 👍.

This is testing nicely for me in the post and site editors, the List View display of the block title still looks good, and now the text for removing a Row block looks correct, along with removing a Reusable block:

Removing a Row block	Removing a Reusable block

I just left a tiny comment about where we use an example of the BlockTitle component, but this LGTM! Might be worth getting another pair of eyes on it too, just in case 🙂

packages/block-editor/README.md

packages/block-editor/src/components/block-title/use-block-display-title.js

gziolo · 2022-02-28T07:25:14Z

Truncating long block display names to 25 chars (negotiable)

It looks lit was updated to 35 chars. Anyway, I'm slightly concerned about using any default value for truncating the computed block's title. It will impact every usage of the <BlockTitle /> component, including other places of the editor like the breadcrumb in the footer or the usage in the React Native mobile app. Even if the decision would be to use this default value, it would be great to update the documentation of the Block API and recommend shorter titles for blocks. It looks like this impacts also titles created by users in the UI for the Reusable block or Template Part block.

ramonjd · 2022-02-28T08:14:15Z

Thanks for checking it out @gziolo ! 🙇

It looks lit was updated to 35 chars.

I left the default of 35 alone. It was bumped from 15 more than a year ago.

The 25 characters introduced in this PR is only for the block setting drop down list to maintain (roughly) the dropdown container's current width proportions. Apologies, I probably didn't make that very clear in the description. I've updated it.

It looks like this impacts also titles created by users in the UI for the Reusable block or Template Part block.

The BlockSettingsDropdown appears in the block settings toolbar and the block list view, so any block titles displayed in that drop down.

The goal was to avoid huge titles in the drop down and therefore very wide dropdown panels.

35 chars	25 chars

Anyway, I'm slightly concerned about using any default value for truncating the computed block's title. It will impact every usage of the component, including other places of the editor like the breadcrumb in the footer or the usage in the React Native mobile app.

Agree that truncation is probably not appropriate in all cases. For the Block List Tree and, arguably, the drop down menus, it might be desirable to defend against loquacious labels.

I'm happy to create another PR to audit the usage of BlockTitle and pass a maximum string value only where it would make sense from a UX/readability perspective.

It might be worthwhile adding an aria-label in the case where it's truncated as well. I wanted to do that in this PR but was trying keep things focussed and review-friendly.

Even if the decision would be to use this default value, it would be great to update the documentation of the Block API and recommend shorter titles for blocks.

As part of any follow up I can definitely update the documentation of the Block API to recommended shorter titles in general for blocks. Sounds like a very reasonable thing to communicate to folks.

talldan · 2022-03-04T03:44:58Z

packages/block-editor/src/components/block-title/use-block-display-title.js

+ * @param {string} clientId Client ID of block.
+ * @param {number} maximumLength The maximum length that the block title string may be before truncated.
+ * @return {?string} Block title.
+ */
+export default function useBlockDisplayTitle( clientId, maximumLength ) {
+	maximumLength = Number.isInteger( maximumLength )
+		? maximumLength
+		: MAXIMUM_TITLE_LENGTH;


Could maximumLength be treated as an optional param with a default value?

Suggested change

* @param {string} clientId Client ID of block.

* @param {number} maximumLength The maximum length that the block title string may be before truncated.

* @return {?string} Block title.

*/

export default function useBlockDisplayTitle( clientId, maximumLength ) {

maximumLength = Number.isInteger( maximumLength )

? maximumLength

: MAXIMUM_TITLE_LENGTH;

* @param {string} clientId Client ID of block.

* @param {number|undefined} maximumLength The maximum length that the block title string may be before truncated.

* @return {?string} Block title.

*/

export default function useBlockDisplayTitle( clientId, maximumLength = MAXIMUM_TITLE_LENGTH ) {

Now that I've said that I've noticed that there doesn't seem to be a way to always get the full block title without any truncation. The only option is to use a really big number for the max length.

Because a new API is being introduced with this hook there's an opportunity to step away from the way BlockTitle did things.

The truncation in BlockTitle could still be left working as it was for back compat by passing in a max length param to the hook, but maybe when undefined is passed to the hook it should return the full block title (and not have an implicit default at all).

Right, that was my initial thinking that isn't possible to show the full title with the revised implementation. There is some legacy handling here that truncates long titles for reusable blocks but it wasn't applied to other blocks. So maybe we could keep it as the default, and truncate everything when an explicit value is passed.

Thanks for your help @talldan and @gziolo

maybe when undefined is passed to the hook it should return the full block title (and not have an implicit default at all
So maybe we could keep it as the default, and truncate everything when an explicit value is passed.

I agree that it makes a lot of sense if truncation is optional.

I've taken this route in f625f28 since it allows for greater flexibility. 👍

For all existing usages I'm passing 35 (the current default) for now to maintain the status quo and to keep this PR manageable.

If we want to revisit individual lengths, I'm happy to do it in a follow up PR. How does that sound?

…the drop down label, similar to the way the block list view does it. Add a maximum truncate value Updated tests

Pass `35` as maximumLength to maintain backwards compatibility for current usages Updated tests

ramonjd · 2022-03-04T11:21:14Z

Updated in f625f28 to remove truncation by default.

I've preserved the current, default truncation value of 35 for current usages of <BlockTitle />. For example, in the bread crumb

talldan · 2022-03-08T05:24:52Z

packages/block-editor/src/components/block-title/use-block-display-title.js

+	if ( label && label !== blockType.title ) {
+		return maximumLength && maximumLength > 0
+			? truncate( label, { length: maximumLength } )
+			: label;
+	}


It's minor, but it might be worth mentioning in the docs for the maximumLength param that truncation only applies to the label (and not the title).

I'm not sure the best way to explain it, maybe mentioning that truncation only applies when the block displays something other than its title (e.g. a variation name or a custom label).

Good point. Definitely worth communicating that. I'll throw up a small PR.

What if the block title has 100 characters? 😄

Maybe we should also truncate it for consistency when someone explicitly passes this parameter.

What if the block title has 100 characters? 😄

💥

Haha. Yeah, the expectation seems to have been that block title strings should be protected from truncation or were never going to be long enough to be truncated.

Maybe we should also truncate it for consistency when someone explicitly passes this parameter.

A cursory grep through the block.json files (there might be a few e2e fixtures in there) shows that there's not much over 28 chars in length, so we could probably get away with it.

Block title string lengths

Read More: 9 Site Logo: 9 Post Author: 11 Video: 5 Post Comments Link: 18 Comment Author Avatar: 21 Custom Link: 11 Comments Pagination: 19 Tag Cloud: 9 Calendar: 8 Buttons: 7 Post Date: 9 Comments Query Loop: 19 Embed: 5 Post Excerpt: 12 File: 4 Paragraph: 9 Quote: 5 Group: 5 Site Tagline: 12 Shortcode: 9 Comment Edit Link: 17 Separator: 9 Gallery: 7 Heading: 7 Comment Template: 16 Comment Content: 15 Term Description: 16 RSS: 3 Post Author Name: 16 Next Page: 9 Page Numbers: 12 Code: 4 Navigation: 10 Verse: 5 Post Comments Count: 19 Pullquote: 9 Post Author Biography: 21 Query Title: 11 Custom HTML: 11 Column: 6 Template Part: 13 Archives: 8 Social Icons: 12 Unsupported: 11 Spacer: 6 Social Icon: 11 Post Navigation Link: 20 Image: 5 More: 4 Table of Contents: 17 Search: 6 Page Break: 10 Text Columns (deprecated): 25 Comment Date: 12 Audio: 5 Post Comments Form: 18 Next Page: 9 Button: 6 Login/out: 9 Table: 5 Post Template: 13 List: 4 Preformatted: 12 Pagination: 10 Classic: 7 Post Terms: 10 Previous Page: 13 Navigation Area: 15 Home Link: 9 Post Featured Image: 19 Page List: 9 Previous Page: 13 Comment Author Name: 19 Columns: 7 Latest Comments: 15 Latest Posts: 12 Pattern: 7 Media & Text: 12 Post Content: 12 Post Title: 10 Query Loop: 10 Site Title: 10 Comment Reply Link: 18 Submenu: 7 Page Numbers: 12 Categories: 10 Post Comments: 13 Reusable block: 14 Post Comment (deprecated): 25 Cover: 5 Iframed Block: 13 Iframed Masonry Block: 21 Iframed Multiple Stylesheets: 28 Iframed Inline Styles: 21 Legacy Widget: 13 Notice: 6 Read More: 9 Site Logo: 9 Post Author: 11 Video: 5 Post Comments Link: 18 Comment Author Avatar: 21 Custom Link: 11 Comments Pagination: 19 Tag Cloud: 9 Calendar: 8 Buttons: 7 Post Date: 9 Comments Query Loop: 19 Embed: 5 Post Excerpt: 12 File: 4 Paragraph: 9 Quote: 5 Group: 5 Site Tagline: 12 Shortcode: 9 Comment Edit Link: 17 Separator: 9 Gallery: 7 Heading: 7 Comment Template: 16 Comment Content: 15 Term Description: 16 RSS: 3 Post Author Name: 16 Next Page: 9 Page Numbers: 12 Code: 4 Navigation: 10 Verse: 5 Post Comments Count: 19 Pullquote: 9 Post Author Biography: 21 Query Title: 11 Custom HTML: 11 Column: 6 Template Part: 13 Archives: 8 Social Icons: 12 Unsupported: 11 Spacer: 6 Social Icon: 11 Post Navigation Link: 20 Image: 5 More: 4 Table of Contents: 17 Search: 6 Page Break: 10 Text Columns (deprecated): 25 Comment Date: 12 Audio: 5 Post Comments Form: 18 Next Page: 9 Button: 6 Login/out: 9 Table: 5 Post Template: 13 List: 4 Preformatted: 12 Pagination: 10 Classic: 7 Post Terms: 10 Previous Page: 13 Navigation Area: 15 Home Link: 9 Post Featured Image: 19 Page List: 9 Previous Page: 13 Comment Author Name: 19 Columns: 7 Latest Comments: 15 Latest Posts: 12 Pattern: 7 Media & Text: 12 Post Content: 12 Post Title: 10 Query Loop: 10 Site Title: 10 Comment Reply Link: 18 Submenu: 7 Page Numbers: 12 Categories: 10 Post Comments: 13 Reusable block: 14 Post Comment (deprecated): 25 Cover: 5 Iframed Block: 13 Iframed Masonry Block: 21 Iframed Multiple Stylesheets: 28 Iframed Inline Styles: 21 Legacy Widget: 13 Read More: 9 Post Comment Author: 19 Site Logo: 9 Post Author: 11 Post Comment Date: 17 Video: 5 Post Comments Link: 18 Comment Author Avatar: 21 Comment Author Avatar: 21 Custom Link: 11 Comments Pagination: 19 Tag Cloud: 9 Calendar: 8 Buttons: 7 Post Date: 9 Comments Query Loop: 19 Embed: 5 Post Comment Content: 20 Post Excerpt: 12 File: 4 Paragraph: 9 Quote: 5 Group: 5 Site Tagline: 12 Shortcode: 9 Post Comment Reply Link: 23 Comment Edit Link: 17 Separator: 9 Gallery: 7 Heading: 7 Comment Template: 16 Comment Content: 15 Term Description: 16 RSS: 3 Post Author Name: 16 Next Page: 9 Page Numbers: 12 Code: 4 Navigation: 10 Verse: 5 Post Comments Count: 19 Pullquote: 9 Post Author Biography: 21 Query Title: 11 Custom HTML: 11 Column: 6 Template Part: 13 Archives: 8 Social Icons: 12 Unsupported: 11 Spacer: 6 Social Icon: 11 Post Navigation Link: 20 Image: 5 More: 4 Table of Contents: 17 Search: 6 Page Break: 10 Text Columns (deprecated): 25 Comment Date: 12 Audio: 5 Post Comments Form: 18 Next Page: 9 Button: 6 Login/out: 9 Table: 5 Post Template: 13 List: 4 Preformatted: 12 Pagination: 10 Classic: 7 Post Terms: 10 Previous Page: 13 Navigation Area: 15 Home Link: 9 Post Featured Image: 19 Page List: 9 Previous Page: 13 Comment Author Name: 19 Post Empty: 10 Post Comment Edit Link: 22 Columns: 7 Latest Comments: 15 Latest Posts: 12 Pattern: 7 Media & Text: 12 Post Content: 12 Post Title: 10 Query Loop: 10 Site Title: 10 Comment Reply Link: 18 Submenu: 7 Page Numbers: 12 Categories: 10 Post Comments: 13 Reusable block: 14 Post Comment (deprecated): 25 Cover: 5 Legacy Widget: 13 Notice: 6 Read More: 9 Site Logo: 9 Post Author: 11 Video: 5 Post Comments Link: 18 Comment Author Avatar: 21 Custom Link: 11 Comments Pagination: 19 Tag Cloud: 9 Calendar: 8 Buttons: 7 Post Date: 9 Comments Query Loop: 19 Embed: 5 Post Excerpt: 12 File: 4 Paragraph: 9 Quote: 5 Group: 5 Site Tagline: 12 Shortcode: 9 Comment Edit Link: 17 Separator: 9 Gallery: 7 Heading: 7 Comment Template: 16 Comment Content: 15 Term Description: 16 RSS: 3 Post Author Name: 16 Next Page: 9 Page Numbers: 12 Code: 4 Navigation: 10 Verse: 5 Post Comments Count: 19 Pullquote: 9 Post Author Biography: 21 Query Title: 11 Custom HTML: 11 Column: 6 Template Part: 13 Archives: 8 Social Icons: 12 Unsupported: 11 Spacer: 6 Social Icon: 11 Post Navigation Link: 20 Image: 5 More: 4 Table of Contents: 17 Search: 6 Page Break: 10 Text Columns (deprecated): 25 Comment Date: 12 Audio: 5 Post Comments Form: 18 Next Page: 9 Button: 6 Login/out: 9 Table: 5 Post Template: 13 List: 4 Preformatted: 12 Pagination: 10 Classic: 7 Post Terms: 10 Previous Page: 13 Navigation Area: 15 Home Link: 9 Post Featured Image: 19 Page List: 9 Previous Page: 13 Comment Author Name: 19 Columns: 7 Latest Comments: 15 Latest Posts: 12 Pattern: 7 Media & Text: 12 Post Content: 12 Post Title: 10 Query Loop: 10 Site Title: 10 Comment Reply Link: 18 Submenu: 7 Page Numbers: 12 Categories: 10 Post Comments: 13 Reusable block: 14 Post Comment (deprecated): 25 Cover: 5

If the truncation is applied to both the block title and the other labels, that's probably the point at which it doesn't need to be part of the hook.

The same code would just be:

const title = useBlockDisplayTitle( clientId ); const truncatedTitle = truncate( title, maxLength );

A cursory grep through the block.json files (there might be a few e2e fixtures in there) shows that there's not much over 28 chars in length, so we could probably get away with it.

Thank you for checking that in WordPress core. It looks like we can postpone the decision 👍🏻

It's not that I want to push for truncating block titles, but I had this thought that I wanted to share here. When you translate titles they might be longer. As far as I remember the German language has this tendency to be much longer than what you see in English.

As far as I remember the German language has this tendency to be much longer than what you see in English.

That is an excellent point.

We might one day have a Rindfleischetikettierungsüberwachungsaufgabenübertragungsgesetz Block and be in real trouble. 😄

If the truncation is applied to both the block title and the other labels, that's probably the point at which it doesn't need to be part of the hook.

I think it's probably worth doing to make things work more logically for our future selves, thanks for the example too. I'll make a note and throw up a PR next week.

Rindfleischetikettierungsüberwachungsaufgabenübertragungsgesetz

I see it's a real thing 🙃

I'll make a note and throw up a PR next week

#39416

that's probably the point at which it doesn't need to be part of the hook.

I kept it in the hook for now to keep changes small as <BlockTitle /> (and therefore the legacy 35 char limit) is used very liberally.

talldan

Thanks for making those late changes.

This works really well, and I think it's also a nice little accessibility improvement that the label for the menu item now matches how the item in List View is announced.

andrewserong · 2022-03-08T05:46:27Z

In @ramonjd's absence, I'll merge this one in now since it looks like the main feedback has been addressed. We can always tweak further in follow-ups if need be, so let us know here if there was anything else folks wanted to see changed!

…dPress#39110) * Use a block display title rather than the default core block name in the drop down label, similar to the way the block list view does it. Add a maximum truncate value Updated tests * Updating docs * Updating inline docs * Updating docs * Remove truncation by default from <BlockTitle /> Pass `35` as maximumLength to maintain backwards compatibility for current usages Updated tests

ramonjd requested a review from ellatrix as a code owner Feb 28, 2022

ramonjd removed the request for review from ellatrix Feb 28, 2022

ramonjd changed the title ~~Block~~ Block settings dropdown: use block display title in remove label Feb 28, 2022

ramonjd self-assigned this Feb 28, 2022

ramonjd added [Feature] Block settings menu [Type] Enhancement labels Feb 28, 2022

ramonjd mentioned this pull request Feb 28, 2022

Row Block has multiple issues #39090

Open

ramonjd requested review from andrewserong, carolinan, amustaque97 and mtias Feb 28, 2022

andrewserong approved these changes Feb 28, 2022

View changes

packages/block-editor/README.md Show resolved Hide resolved

packages/block-editor/src/components/block-title/use-block-display-title.js Outdated Show resolved Hide resolved

talldan reviewed Mar 4, 2022

View changes

ramonjd added 5 commits Mar 4, 2022

Use a block display title rather than the default core block name in …

6790696

…the drop down label, similar to the way the block list view does it. Add a maximum truncate value Updated tests

Updating docs

8c0116c

Updating inline docs

c5a35b0

Updating docs

546e7b8

Remove truncation by default from <BlockTitle />

f625f28

Pass `35` as maximumLength to maintain backwards compatibility for current usages Updated tests

ramonjd force-pushed the update/remove_label_to_use_display_title branch from a4f8483 to f625f28 Compare Mar 4, 2022

ramonjd requested a review from ajitbohra as a code owner Mar 4, 2022

I didn't mean to check that in :)

c358688

talldan reviewed Mar 8, 2022

View changes

talldan added the [a11y] Labelling label Mar 8, 2022

talldan approved these changes Mar 8, 2022

View changes

andrewserong merged commit 98ba5c2 into trunk Mar 8, 2022
23 checks passed

andrewserong deleted the update/remove_label_to_use_display_title branch Mar 8, 2022

github-actions bot added this to the Gutenberg 12.8 milestone Mar 8, 2022

ramonjd mentioned this pull request Mar 14, 2022

Block Title: remove truncate discrimination #39416

Merged

WordPress / gutenberg Public

Block settings dropdown: use block display title in remove label #39110

Block settings dropdown: use block display title in remove label #39110

ramonjd commented Feb 28, 2022 •

edited

github-actions bot commented Feb 28, 2022 •

edited

andrewserong left a comment

gziolo commented Feb 28, 2022

ramonjd commented Feb 28, 2022 •

edited

talldan Mar 4, 2022

talldan Mar 4, 2022 •

edited

gziolo Mar 4, 2022 •

edited

ramonjd Mar 4, 2022

ramonjd commented Mar 4, 2022

talldan Mar 8, 2022 •

edited

ramonjd Mar 9, 2022

ramonjd Mar 9, 2022

gziolo Mar 10, 2022

ramonjd Mar 11, 2022 •

edited

talldan Mar 11, 2022

gziolo Mar 11, 2022

ramonjd Mar 11, 2022

gziolo Mar 11, 2022

ramonjd Mar 14, 2022

talldan left a comment

andrewserong commented Mar 8, 2022

WordPress / gutenberg Public

Block settings dropdown: use block display title in remove label #39110

Block settings dropdown: use block display title in remove label #39110

Conversation

ramonjd commented Feb 28, 2022 • edited

Description

Changes

Room for improvement

Testing Instructions

Screenshots

Before

After

Types of changes

Checklist:

github-actions bot commented Feb 28, 2022 • edited

andrewserong left a comment

gziolo commented Feb 28, 2022

ramonjd commented Feb 28, 2022 • edited

Choose a reason for hiding this comment

talldan Mar 4, 2022 • edited

Choose a reason for hiding this comment

gziolo Mar 4, 2022 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ramonjd commented Mar 4, 2022

talldan Mar 8, 2022 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ramonjd Mar 11, 2022 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

talldan left a comment

andrewserong commented Mar 8, 2022

ramonjd commented Feb 28, 2022 •

edited

github-actions bot commented Feb 28, 2022 •

edited

ramonjd commented Feb 28, 2022 •

edited

talldan Mar 4, 2022 •

edited

gziolo Mar 4, 2022 •

edited

talldan Mar 8, 2022 •

edited

ramonjd Mar 11, 2022 •

edited