Add a tag selection component to replace HeadinglevelDropdown

[carolinan]

What?

The HeadingLevelDropdown is a toolbar option used to choose between H1-H6 in the heading block, comments title, query title, and post title. The files are in the heading block, and the other blocks import them. The site title has its own similar option, and it adds a paragraph to the selection.

This PR: Creates a new editor component for selecting the HTML element via the block toolbar, based on the HeadingLevelDropdown. Replaces the HeadingLevelDropdown in the post title block.

I limited the PR to the post title block initially to reduce the size of the PR and the need for testing multiple blocks at once.

Fixes https://github.com/WordPress/gutenberg/issues/45743

Why?

To future proof the option if the heading block changes, and to make it useable with other HTML tags than H1-H6.

How?

Creates a new component that can be consistently reused in multiple blocks. Replaces the import of the HeadingLevelDropdown with the new component. Migrates the old block attribute to the new format: From a number to a tag name, as in "2" is now "h2".

Testing Instructions

Updated January 30:

1. Create a new post and add a post title block.
2. Confirm that the block toolbar has a button with the aria-label "Change HTML tag". The visible symbol is H2 which is the default HTML tag for the post title. The previous text for this block was "Change heading level".
3. Select and activate the button (click, press enter or press spacebar). Confirm that this opens a drop down with a button each for the available HTML tags, H1 to H6. There should be an icon, followed by a title, for example "Heading 2".
4. Confirm that the currently selected HTML tag is announced as "checked" (has aria-checked="true") and has a black background.
5. Select and activate the button for one of the heading levels. Confirm that the HTML element for the post title is updated.
6. Save the post and view the front, confirm that the heading level is correct on the front.

To test the migration of the block attribute I did the following:

1. Create a new post and add a post title block. Change the heading level to anything beside the default H2.
2. Open the code editor mode and replace the level value inside the comment for the post title with a number: Replace <!-- wp:post-title {"level":"h3"} /--> with <!-- wp:post-title {"level":3} /-->
3. Update the post.
4. Confirm that the value changed back to h3 and that the block did not break.

Optionally, test passing other tags from the post title to the component, as a proof of concept: In post-title/edit.js, create a constant that includes the tag (h2) and the visible title text (Heading 2). Add this before the export:

const DEFAULT_TAGS = [
	{
		tag: 'h1',
		title: __( 'Heading 1' ),
	},
	{
		tag: 'h2',
		title: __( 'Heading 2' ),
	},
	{
		tag: 'span',
		title: __( 'Span' ),
	},
];

Next add this list of tags inside <TagSelectionDropdown which is inside the BlockControls, around line 105.

<TagSelectionDropdown
	tags={ DEFAULT_TAGS }
	selectedTag={ level }
	onChange={ ( newLevel ) =>
		setAttributes( { level: newLevel } )
	}
/>

Build the plugin (run npm run build) Go back to the editor and refresh the post you created with the post title block. Confirm that the elements you listed in the constant are available for the the block and that switching works. The span is represented by a generic code icon.

Screenshots or screencast

Post title block, before:

Post title block, after:

This video shows a customized post title block with div and span options: https://user-images.githubusercontent.com/7422055/215435597-c4466822-a855-4b5d-8e29-7ea4259e7db0.mov

[codesandbox[bot]]

  Open in CodeSandbox Web Editor | VS Code | VS Code Insiders

[github-actions[bot]]

Size Change: -752 B (0%)

Total Size: 1.4 MB

Filename	Size	Change
build/block-editor/index.min.js	197 kB	+1.36 kB (+1%)
build/block-library/index.min.js	199 kB	-2.11 kB (-1%)

ℹ️ View Unchanged

Filename	Size
build/a11y/index.min.js	955 B
build/annotations/index.min.js	2.69 kB
build/api-fetch/index.min.js	2.29 kB
build/autop/index.min.js	2.1 kB
build/blob/index.min.js	451 B
build/block-directory/index.min.js	6.99 kB
build/block-directory/style-rtl.css	1.02 kB
build/block-directory/style.css	1.02 kB
build/block-editor/content-rtl.css	4.22 kB
build/block-editor/content.css	4.22 kB
build/block-editor/default-editor-styles-rtl.css	381 B
build/block-editor/default-editor-styles.css	381 B
build/block-editor/style-rtl.css	14.9 kB
build/block-editor/style.css	14.9 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	90 B
build/block-library/blocks/archives/style.css	90 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	122 B
build/block-library/blocks/audio/style.css	122 B
build/block-library/blocks/audio/theme-rtl.css	126 B
build/block-library/blocks/audio/theme.css	126 B
build/block-library/blocks/avatar/editor-rtl.css	116 B
build/block-library/blocks/avatar/editor.css	116 B
build/block-library/blocks/avatar/style-rtl.css	104 B
build/block-library/blocks/avatar/style.css	104 B
build/block-library/blocks/block/editor-rtl.css	305 B
build/block-library/blocks/block/editor.css	305 B
build/block-library/blocks/button/editor-rtl.css	584 B
build/block-library/blocks/button/editor.css	582 B
build/block-library/blocks/button/style-rtl.css	624 B
build/block-library/blocks/button/style.css	623 B
build/block-library/blocks/buttons/editor-rtl.css	337 B
build/block-library/blocks/buttons/editor.css	337 B
build/block-library/blocks/buttons/style-rtl.css	332 B
build/block-library/blocks/buttons/style.css	332 B
build/block-library/blocks/calendar/style-rtl.css	239 B
build/block-library/blocks/calendar/style.css	239 B
build/block-library/blocks/categories/editor-rtl.css	113 B
build/block-library/blocks/categories/editor.css	112 B
build/block-library/blocks/categories/style-rtl.css	124 B
build/block-library/blocks/categories/style.css	124 B
build/block-library/blocks/code/editor-rtl.css	53 B
build/block-library/blocks/code/editor.css	53 B
build/block-library/blocks/code/style-rtl.css	121 B
build/block-library/blocks/code/style.css	121 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	409 B
build/block-library/blocks/columns/style.css	409 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-content/style-rtl.css	92 B
build/block-library/blocks/comment-content/style.css	92 B
build/block-library/blocks/comment-template/style-rtl.css	199 B
build/block-library/blocks/comment-template/style.css	198 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-title/editor-rtl.css	75 B
build/block-library/blocks/comments-title/editor.css	75 B
build/block-library/blocks/comments/editor-rtl.css	840 B
build/block-library/blocks/comments/editor.css	839 B
build/block-library/blocks/comments/style-rtl.css	637 B
build/block-library/blocks/comments/style.css	636 B
build/block-library/blocks/cover/editor-rtl.css	647 B
build/block-library/blocks/cover/editor.css	650 B
build/block-library/blocks/cover/style-rtl.css	1.61 kB
build/block-library/blocks/cover/style.css	1.6 kB
build/block-library/blocks/details/editor-rtl.css	65 B
build/block-library/blocks/details/editor.css	65 B
build/block-library/blocks/details/style-rtl.css	159 B
build/block-library/blocks/details/style.css	159 B
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	410 B
build/block-library/blocks/embed/style.css	410 B
build/block-library/blocks/embed/theme-rtl.css	126 B
build/block-library/blocks/embed/theme.css	126 B
build/block-library/blocks/file/editor-rtl.css	316 B
build/block-library/blocks/file/editor.css	316 B
build/block-library/blocks/file/interactivity.min.js	395 B
build/block-library/blocks/file/style-rtl.css	269 B
build/block-library/blocks/file/style.css	270 B
build/block-library/blocks/freeform/editor-rtl.css	2.58 kB
build/block-library/blocks/freeform/editor.css	2.58 kB
build/block-library/blocks/gallery/editor-rtl.css	947 B
build/block-library/blocks/gallery/editor.css	952 B
build/block-library/blocks/gallery/style-rtl.css	1.53 kB
build/block-library/blocks/gallery/style.css	1.53 kB
build/block-library/blocks/gallery/theme-rtl.css	108 B
build/block-library/blocks/gallery/theme.css	108 B
build/block-library/blocks/group/editor-rtl.css	654 B
build/block-library/blocks/group/editor.css	654 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	76 B
build/block-library/blocks/heading/style.css	76 B
build/block-library/blocks/html/editor-rtl.css	336 B
build/block-library/blocks/html/editor.css	337 B
build/block-library/blocks/image/editor-rtl.css	834 B
build/block-library/blocks/image/editor.css	833 B
build/block-library/blocks/image/interactivity.min.js	1.34 kB
build/block-library/blocks/image/style-rtl.css	1.34 kB
build/block-library/blocks/image/style.css	1.34 kB
build/block-library/blocks/image/theme-rtl.css	126 B
build/block-library/blocks/image/theme.css	126 B
build/block-library/blocks/latest-comments/style-rtl.css	357 B
build/block-library/blocks/latest-comments/style.css	357 B
build/block-library/blocks/latest-posts/editor-rtl.css	213 B
build/block-library/blocks/latest-posts/editor.css	212 B
build/block-library/blocks/latest-posts/style-rtl.css	478 B
build/block-library/blocks/latest-posts/style.css	478 B
build/block-library/blocks/list/style-rtl.css	88 B
build/block-library/blocks/list/style.css	88 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	507 B
build/block-library/blocks/media-text/style.css	505 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	712 B
build/block-library/blocks/navigation-link/editor.css	711 B
build/block-library/blocks/navigation-link/style-rtl.css	115 B
build/block-library/blocks/navigation-link/style.css	115 B
build/block-library/blocks/navigation-submenu/editor-rtl.css	296 B
build/block-library/blocks/navigation-submenu/editor.css	295 B
build/block-library/blocks/navigation/editor-rtl.css	2.35 kB
build/block-library/blocks/navigation/editor.css	2.36 kB
build/block-library/blocks/navigation/interactivity.min.js	978 B
build/block-library/blocks/navigation/style-rtl.css	2.21 kB
build/block-library/blocks/navigation/style.css	2.2 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	401 B
build/block-library/blocks/page-list/editor.css	401 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	174 B
build/block-library/blocks/paragraph/editor.css	174 B
build/block-library/blocks/paragraph/style-rtl.css	279 B
build/block-library/blocks/paragraph/style.css	281 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/editor-rtl.css	96 B
build/block-library/blocks/post-comments-form/editor.css	96 B
build/block-library/blocks/post-comments-form/style-rtl.css	508 B
build/block-library/blocks/post-comments-form/style.css	508 B
build/block-library/blocks/post-date/style-rtl.css	61 B
build/block-library/blocks/post-date/style.css	61 B
build/block-library/blocks/post-excerpt/editor-rtl.css	71 B
build/block-library/blocks/post-excerpt/editor.css	71 B
build/block-library/blocks/post-excerpt/style-rtl.css	141 B
build/block-library/blocks/post-excerpt/style.css	141 B
build/block-library/blocks/post-featured-image/editor-rtl.css	588 B
build/block-library/blocks/post-featured-image/editor.css	586 B
build/block-library/blocks/post-featured-image/style-rtl.css	319 B
build/block-library/blocks/post-featured-image/style.css	319 B
build/block-library/blocks/post-navigation-link/style-rtl.css	153 B
build/block-library/blocks/post-navigation-link/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	314 B
build/block-library/blocks/post-template/style.css	314 B
build/block-library/blocks/post-terms/style-rtl.css	96 B
build/block-library/blocks/post-terms/style.css	96 B
build/block-library/blocks/post-time-to-read/style-rtl.css	69 B
build/block-library/blocks/post-time-to-read/style.css	69 B
build/block-library/blocks/post-title/style-rtl.css	100 B
build/block-library/blocks/post-title/style.css	100 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	135 B
build/block-library/blocks/pullquote/editor.css	135 B
build/block-library/blocks/pullquote/style-rtl.css	335 B
build/block-library/blocks/pullquote/style.css	335 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	288 B
build/block-library/blocks/query-pagination/style.css	284 B
build/block-library/blocks/query-title/style-rtl.css	63 B
build/block-library/blocks/query-title/style.css	63 B
build/block-library/blocks/query/editor-rtl.css	450 B
build/block-library/blocks/query/editor.css	449 B
build/block-library/blocks/quote/style-rtl.css	222 B
build/block-library/blocks/quote/style.css	222 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	149 B
build/block-library/blocks/rss/editor.css	149 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	178 B
build/block-library/blocks/search/editor.css	178 B
build/block-library/blocks/search/style-rtl.css	587 B
build/block-library/blocks/search/style.css	584 B
build/block-library/blocks/search/theme-rtl.css	114 B
build/block-library/blocks/search/theme.css	114 B
build/block-library/blocks/search/view.min.js	531 B
build/block-library/blocks/separator/editor-rtl.css	146 B
build/block-library/blocks/separator/editor.css	146 B
build/block-library/blocks/separator/style-rtl.css	234 B
build/block-library/blocks/separator/style.css	234 B
build/block-library/blocks/separator/theme-rtl.css	194 B
build/block-library/blocks/separator/theme.css	194 B
build/block-library/blocks/shortcode/editor-rtl.css	323 B
build/block-library/blocks/shortcode/editor.css	323 B
build/block-library/blocks/site-logo/editor-rtl.css	754 B
build/block-library/blocks/site-logo/editor.css	754 B
build/block-library/blocks/site-logo/style-rtl.css	203 B
build/block-library/blocks/site-logo/style.css	203 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	116 B
build/block-library/blocks/site-title/editor.css	116 B
build/block-library/blocks/site-title/style-rtl.css	57 B
build/block-library/blocks/site-title/style.css	57 B
build/block-library/blocks/social-link/editor-rtl.css	184 B
build/block-library/blocks/social-link/editor.css	184 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.43 kB
build/block-library/blocks/social-links/style.css	1.42 kB
build/block-library/blocks/spacer/editor-rtl.css	348 B
build/block-library/blocks/spacer/editor.css	348 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	433 B
build/block-library/blocks/table/editor.css	433 B
build/block-library/blocks/table/style-rtl.css	645 B
build/block-library/blocks/table/style.css	644 B
build/block-library/blocks/table/theme-rtl.css	146 B
build/block-library/blocks/table/theme.css	146 B
build/block-library/blocks/tag-cloud/style-rtl.css	251 B
build/block-library/blocks/tag-cloud/style.css	253 B
build/block-library/blocks/template-part/editor-rtl.css	403 B
build/block-library/blocks/template-part/editor.css	403 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/term-description/style-rtl.css	111 B
build/block-library/blocks/term-description/style.css	111 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	99 B
build/block-library/blocks/verse/style.css	99 B
build/block-library/blocks/video/editor-rtl.css	552 B
build/block-library/blocks/video/editor.css	555 B
build/block-library/blocks/video/style-rtl.css	174 B
build/block-library/blocks/video/style.css	174 B
build/block-library/blocks/video/theme-rtl.css	126 B
build/block-library/blocks/video/theme.css	126 B
build/block-library/classic-rtl.css	179 B
build/block-library/classic.css	179 B
build/block-library/common-rtl.css	1.1 kB
build/block-library/common.css	1.1 kB
build/block-library/editor-elements-rtl.css	75 B
build/block-library/editor-elements.css	75 B
build/block-library/editor-rtl.css	12.2 kB
build/block-library/editor.css	12.1 kB
build/block-library/elements-rtl.css	54 B
build/block-library/elements.css	54 B
build/block-library/interactivity/runtime.min.js	2.69 kB
build/block-library/interactivity/vendors.min.js	8.2 kB
build/block-library/reset-rtl.css	478 B
build/block-library/reset.css	478 B
build/block-library/style-rtl.css	13.5 kB
build/block-library/style.css	13.5 kB
build/block-library/theme-rtl.css	686 B
build/block-library/theme.css	691 B
build/block-serialization-default-parser/index.min.js	1.12 kB
build/block-serialization-spec-parser/index.min.js	2.87 kB
build/blocks/index.min.js	50.8 kB
build/commands/index.min.js	14.9 kB
build/commands/style-rtl.css	827 B
build/commands/style.css	827 B
build/components/index.min.js	231 kB
build/components/style-rtl.css	11.8 kB
build/components/style.css	11.8 kB
build/compose/index.min.js	12 kB
build/core-commands/index.min.js	2.12 kB
build/core-data/index.min.js	15.7 kB
build/customize-widgets/index.min.js	11.9 kB
build/customize-widgets/style-rtl.css	1.46 kB
build/customize-widgets/style.css	1.45 kB
build/data-controls/index.min.js	640 B
build/data/index.min.js	8.25 kB
build/date/index.min.js	40.4 kB
build/deprecated/index.min.js	451 B
build/dom-ready/index.min.js	324 B
build/dom/index.min.js	4.63 kB
build/edit-post/classic-rtl.css	544 B
build/edit-post/classic.css	545 B
build/edit-post/index.min.js	33.9 kB
build/edit-post/style-rtl.css	7.58 kB
build/edit-post/style.css	7.57 kB
build/edit-site/index.min.js	73.4 kB
build/edit-site/style-rtl.css	11.9 kB
build/edit-site/style.css	11.9 kB
build/edit-widgets/index.min.js	16.8 kB
build/edit-widgets/style-rtl.css	4.53 kB
build/edit-widgets/style.css	4.53 kB
build/editor/index.min.js	44.6 kB
build/editor/style-rtl.css	3.58 kB
build/editor/style.css	3.58 kB
build/element/index.min.js	4.8 kB
build/escape-html/index.min.js	537 B
build/format-library/index.min.js	7.62 kB
build/format-library/style-rtl.css	554 B
build/format-library/style.css	553 B
build/hooks/index.min.js	1.55 kB
build/html-entities/index.min.js	448 B
build/i18n/index.min.js	3.58 kB
build/is-shallow-equal/index.min.js	527 B
build/keyboard-shortcuts/index.min.js	1.64 kB
build/keycodes/index.min.js	1.84 kB
build/list-reusable-blocks/index.min.js	2.13 kB
build/list-reusable-blocks/style-rtl.css	836 B
build/list-reusable-blocks/style.css	836 B
build/media-utils/index.min.js	2.9 kB
build/notices/index.min.js	948 B
build/plugins/index.min.js	1.77 kB
build/preferences-persistence/index.min.js	1.84 kB
build/preferences/index.min.js	1.24 kB
build/primitives/index.min.js	943 B
build/priority-queue/index.min.js	1.52 kB
build/private-apis/index.min.js	939 B
build/react-i18n/index.min.js	615 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.7 kB
build/reusable-blocks/index.min.js	2.38 kB
build/reusable-blocks/style-rtl.css	243 B
build/reusable-blocks/style.css	243 B
build/rich-text/index.min.js	10.7 kB
build/router/index.min.js	1.77 kB
build/server-side-render/index.min.js	1.94 kB
build/shortcode/index.min.js	1.39 kB
build/style-engine/index.min.js	1.42 kB
build/token-list/index.min.js	582 B
build/url/index.min.js	3.57 kB
build/vendors/inert-polyfill.min.js	2.48 kB
build/vendors/react-dom.min.js	41.8 kB
build/vendors/react.min.js	4.02 kB
build/viewport/index.min.js	958 B
build/warning/index.min.js	268 B
build/widgets/index.min.js	7.16 kB
build/widgets/style-rtl.css	1.15 kB
build/widgets/style.css	1.16 kB
build/wordcount/index.min.js	1.02 kB

_{compressed-size-action}

[alexstine]

@carolinan Could you please provide clear testing instructions? Insert block X, select X, expect X?

[carolinan]

@carolinan Could you please provide clear testing instructions? Insert block X, select X, expect X?

Yes! I am still working on the PR though, it is still a draft.

[alexstine]

@carolinan Oh sorry, did not catch that. :(

[carolinan]

@WordPress/gutenberg-design , @alexstine This PR is ready for review.

[carolinan]

Another reason for adding a new component for this is that developers would like to choose which tags are available, either via theme.json or via a filter.

[github-actions[bot]]

Flaky tests detected in ce5c979ae855b8b6f5a051b84cf2e59670e6170f. Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/5320082763 📝 Reported issues:

• #44341 in specs/editor/plugins/cpt-locking.test.js

[jameskoster]

To future proof the option if the heading block changes, and to make it useable with other HTML tags than H1-H6.

Is this something we'll ever do? 🤔

[carolinan]

To future proof the option if the heading block changes, and to make it useable with other HTML tags than H1-H6.

Is this something we'll ever do? 🤔

Yes it has been suggested to allow more tags for the <summary> text in the details/summary block

[jameskoster]

Thanks. Considering such cases:

The control starts to feel a bit obscure. Unless you're familiar with HTML then the div and span options could be confusing? Would this affordance be better suited to the Inspector? We have a similar control for template parts:

[carolinan]

I think that choice would need to be up to the creator of the custom block. For the details/summary block, I would propose only adding the paragraph in addition to the headings.

The option in the Advanced section has so far (in core), only been used for the whole block, the wrapper. In the context of the summary, you select the summary which is an inner block of the details, and I think having it close, in the toolbar of the summary, works well.

[paaljoachim]

I am not getting it.... Is this a suggestion to replace? The Heading block H drop down?

With a selection in the sidebar HTML Element dropdown? Similar to selecting the Group block (in a template) Advanced panel. I have hardly ever looked at this HTML Element drop down. As in general I do not need to. I do on occasion need to change Heading from Heading 2 to Heading 3.

EDIT: From the video I noticed this is in the Site Title block. For me changing the H drop down would create some confusion. As one would see one way for the Heading block and another way for the Site Title block (and other blocks this will be added to.)

One could if needed add it into the sidebar similar to the Advanced panel in the Group block.

[carolinan]

@paaljoachim With this PR the only change users will see is that the post title block is more similar to the site title block.

[carolinan]

I can limit it to only allow H1-H6 and paragraph, but I think we will find that people will want to customize this, for example, they might want to allow only H2 to H4.

[paaljoachim]

Site Title block:

Post Title block:

"To future proof the option if the heading block changes, and to make it useable with other HTML tags than H1-H6." It sounds like a good thing to have included. Having the most used visible seems fine. Having the less used more hidden away would probably be good. I feel I just do not know enough of use cases for this PR and will let others with more knowledge give feedback. @skorasaurus Will I am thinking you might have some thoughts to share here.

[skorasaurus]

Thanks for the mention @paaljoachim .

My initial impressions (I don't have time today to do a full audit and to test the PR):

Conceptually I love this as Carolinan mentions earlier , this sounds it would eventually enable a developer to filter the tags provided in many blocks and solve issues like https://github.com/WordPress/gutenberg/issues/20213 , https://github.com/WordPress/gutenberg/issues/30549 , and a couple other issues that escape me at the moment.

From a quick look from the example that carolinan provided; using the tag as the block attribute's value is also really helpful so non heading tags (e.g. span, li, etc) could be eventually be implemented (instead of just using an ambiguous value of '3'.).

[carolinan]

Do you think the HTML tag selection in the advanced panel and the selection in the toolbar should be one component?

[aristath]

Regarding allowing elements other than H1-H6 + p: This is not something we currently do. It is not something we currently need. If at some point in the future we need it, we can further abstract it. But let's not try to account for all future scenarios until we actually get there. 👍

[carolinan]

I have removed all the customizations and the PR now only copies the HedingLevelDropdown from the heading block to a new component. I have made the PR a draft, to implement the component in the remaining heading blocks:

• [x] Heading
• [x] Query title
• [x] Comments title
• [x] Site title

[carolinan]

I am not sure what to do with the block-library/src/heading/heading-level-dropdown.native.js file, so I will leave it and the icon utility file as is.

[carolinan]

@WordPress/native-mobile Hi, I need help solving the failing mobile unit tests and with any necessary changes to the block's native.js file.

[geriux]

@WordPress/native-mobile Hi, I need help solving the failing mobile unit tests and with any necessary changes to the block's native.js file.

Hey there! I will check it out 👍

[geriux]

Hey @carolinan 👋 I created https://github.com/WordPress/gutenberg/pull/47967 that targets your branch. If CI checks we can merge it into your branch. Could you approve the PR if the changes look good to you? Thank you!

[carolinan]

And thank you for the review.

[carolinan]

@WordPress/gutenberg-design I feel that this is ready to be merged, but I also think it could be improved if the text "Heading 1" etc, was always visible to the right of the icon inside the dropdown and not only as a tooltip, as discussed in https://github.com/WordPress/gutenberg/issues/50402

Like in this earlier screenshot of the site title

[richtabor]

I also think it could be improved if the text "Heading 1" etc, was always visible to the right of the icon inside the dropdown and not only as a tooltip

I think it seems a bit redundant to have both.

[carolinan]

I did not mean using both tooltip and permanently visible text. I meant the permanent text is an improvement over the tooltip, which covers the other options because of its position.

[richtabor]

Right, I mean having "H1" and "Heading 1" right next to it seems a bit redundant.

I think the tooltip is performing as expected, if you move to another item, the tooltip moves with it. Is the tooltip only necessary because we don't have visible text, like in other toolbar menus?

[afercia]

Right, I mean having "H1" and "Heading 1" right next to it seems a bit redundant.

I think the tooltip is performing as expected, if you move to another item, the tooltip moves with it. Is the tooltip only necessary because we don't have visible text, like in other toolbar menus?

I'd kindly disagree. The tooltip is an usability problem now that the dropdown is vertical, as reported in https://github.com/WordPress/gutenberg/issues/55927 and https://github.com/WordPress/gutenberg/issues/50402.

I don't think keeping both the icon and the visible text is redundant. Instead, it bring sin best of both worlds: a visual hint and an universally understandable visible text. It's not uncommon for many big applications around to display both an icon and visible text.

I would also like to remind that icon-only buttons have inherent usability and accessibility problems. Their usage shoudl be limited to only cases where there's not enough space to use visible text. A follow-up discussion is ongoing on https://github.com/WordPress/gutenberg/issues/50402