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

Autogenerate heading anchors #30825

Merged
merged 64 commits into from
Oct 14, 2021
Merged

Autogenerate heading anchors #30825

merged 64 commits into from
Oct 14, 2021

Conversation

aristath
Copy link
Member

@aristath aristath commented Apr 14, 2021

Fixes #29561

Description

This PR auto-generates anchors for headings.
It is one of the prerequisites for the table-of-contents block and discussed in #29561

How anchors are generated

  • If a heading already has an anchor, we leave it alone
  • We auto-generate the slug and prepend wp-
  • If multiple headings have the same text, then they get a -1, -2 etc suffix
  • If the user manually edits an anchor, the wp- prefix is automatically removed.

How has this been tested?

  • Tested by creating a new post and adding multiple headings.
  • Tested adding headings with the same text and anchors get a -1, -2 etc suffix.
  • Tested using both Latin and non-Latin characters. If the heading doesn't contain any Latin characters then it skips a regex and a proper anchor is still generated. You can test that scenario using text like Καλημέρα κόσμε (roughly translates to hello world).
  • Tested in existing posts, and when editing an existing post, headings that don't already have an anchor get one.

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).

Code for this implementation was ported and adapted from Yoast SEO Premium, with the blessings of @jdevalk

@aristath aristath requested review from mtias, gziolo and a team April 14, 2021 07:55
@aristath aristath added [Block] Heading Affects the Headings Block [Type] Enhancement A suggestion for improvement. labels Apr 14, 2021
@github-actions
Copy link

github-actions bot commented Apr 14, 2021

Size Change: +165 B (0%)

Total Size: 1.07 MB

Filename Size Change
build/block-library/index.min.js 147 kB +165 B (0%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 931 B
build/admin-manifest/index.min.js 1.09 kB
build/annotations/index.min.js 2.7 kB
build/api-fetch/index.min.js 2.21 kB
build/autop/index.min.js 2.08 kB
build/blob/index.min.js 459 B
build/block-directory/index.min.js 6.2 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/index.min.js 134 kB
build/block-editor/style-rtl.css 13.9 kB
build/block-editor/style.css 13.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 65 B
build/block-library/blocks/archives/style.css 65 B
build/block-library/blocks/audio/editor-rtl.css 58 B
build/block-library/blocks/audio/editor.css 58 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 474 B
build/block-library/blocks/button/editor.css 474 B
build/block-library/blocks/button/style-rtl.css 600 B
build/block-library/blocks/button/style.css 600 B
build/block-library/blocks/buttons/editor-rtl.css 315 B
build/block-library/blocks/buttons/editor.css 315 B
build/block-library/blocks/buttons/style-rtl.css 370 B
build/block-library/blocks/buttons/style.css 370 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 90 B
build/block-library/blocks/code/style.css 90 B
build/block-library/blocks/code/theme-rtl.css 131 B
build/block-library/blocks/code/theme.css 131 B
build/block-library/blocks/columns/editor-rtl.css 206 B
build/block-library/blocks/columns/editor.css 205 B
build/block-library/blocks/columns/style-rtl.css 497 B
build/block-library/blocks/columns/style.css 496 B
build/block-library/blocks/cover/editor-rtl.css 666 B
build/block-library/blocks/cover/editor.css 670 B
build/block-library/blocks/cover/style-rtl.css 1.23 kB
build/block-library/blocks/cover/style.css 1.23 kB
build/block-library/blocks/embed/editor-rtl.css 488 B
build/block-library/blocks/embed/editor.css 488 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 322 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 977 B
build/block-library/blocks/gallery/editor.css 982 B
build/block-library/blocks/gallery/style-rtl.css 1.6 kB
build/block-library/blocks/gallery/style.css 1.59 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/home-link/style-rtl.css 247 B
build/block-library/blocks/home-link/style.css 247 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 728 B
build/block-library/blocks/image/editor.css 728 B
build/block-library/blocks/image/style-rtl.css 482 B
build/block-library/blocks/image/style.css 487 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 137 B
build/block-library/blocks/latest-posts/editor.css 137 B
build/block-library/blocks/latest-posts/style-rtl.css 528 B
build/block-library/blocks/latest-posts/style.css 527 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 488 B
build/block-library/blocks/media-text/style.css 485 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 568 B
build/block-library/blocks/navigation-link/editor.css 570 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 300 B
build/block-library/blocks/navigation-submenu/editor.css 299 B
build/block-library/blocks/navigation-submenu/style-rtl.css 195 B
build/block-library/blocks/navigation-submenu/style.css 195 B
build/block-library/blocks/navigation-submenu/view.min.js 343 B
build/block-library/blocks/navigation/editor-rtl.css 1.72 kB
build/block-library/blocks/navigation/editor.css 1.72 kB
build/block-library/blocks/navigation/style-rtl.css 1.62 kB
build/block-library/blocks/navigation/style.css 1.61 kB
build/block-library/blocks/navigation/view.min.js 2.74 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 377 B
build/block-library/blocks/page-list/editor.css 377 B
build/block-library/blocks/page-list/style-rtl.css 198 B
build/block-library/blocks/page-list/style.css 198 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/editor-rtl.css 210 B
build/block-library/blocks/post-author/editor.css 210 B
build/block-library/blocks/post-author/style-rtl.css 182 B
build/block-library/blocks/post-author/style.css 181 B
build/block-library/blocks/post-comments-form/style-rtl.css 140 B
build/block-library/blocks/post-comments-form/style.css 140 B
build/block-library/blocks/post-comments/style-rtl.css 360 B
build/block-library/blocks/post-comments/style.css 359 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 398 B
build/block-library/blocks/post-featured-image/editor.css 398 B
build/block-library/blocks/post-featured-image/style-rtl.css 146 B
build/block-library/blocks/post-featured-image/style.css 146 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 391 B
build/block-library/blocks/post-template/style.css 392 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 60 B
build/block-library/blocks/post-title/style.css 60 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 378 B
build/block-library/blocks/pullquote/style.css 378 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 262 B
build/block-library/blocks/query-pagination/editor.css 255 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-title/editor-rtl.css 85 B
build/block-library/blocks/query-title/editor.css 85 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 187 B
build/block-library/blocks/quote/style.css 187 B
build/block-library/blocks/quote/theme-rtl.css 220 B
build/block-library/blocks/quote/theme.css 222 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 374 B
build/block-library/blocks/search/style.css 375 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 250 B
build/block-library/blocks/separator/style.css 250 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 462 B
build/block-library/blocks/site-logo/editor.css 464 B
build/block-library/blocks/site-logo/style-rtl.css 153 B
build/block-library/blocks/site-logo/style.css 153 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 165 B
build/block-library/blocks/social-link/editor.css 165 B
build/block-library/blocks/social-links/editor-rtl.css 812 B
build/block-library/blocks/social-links/editor.css 811 B
build/block-library/blocks/social-links/style-rtl.css 1.3 kB
build/block-library/blocks/social-links/style.css 1.3 kB
build/block-library/blocks/spacer/editor-rtl.css 307 B
build/block-library/blocks/spacer/editor.css 307 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 146 B
build/block-library/blocks/tag-cloud/style.css 146 B
build/block-library/blocks/template-part/editor-rtl.css 636 B
build/block-library/blocks/template-part/editor.css 635 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/editor-rtl.css 90 B
build/block-library/blocks/term-description/editor.css 90 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 853 B
build/block-library/common.css 849 B
build/block-library/editor-rtl.css 9.72 kB
build/block-library/editor.css 9.71 kB
build/block-library/reset-rtl.css 536 B
build/block-library/reset.css 536 B
build/block-library/style-rtl.css 10.4 kB
build/block-library/style.css 10.4 kB
build/block-library/theme-rtl.css 665 B
build/block-library/theme.css 669 B
build/block-serialization-default-parser/index.min.js 1.09 kB
build/block-serialization-spec-parser/index.min.js 2.79 kB
build/blocks/index.min.js 45.7 kB
build/components/index.min.js 214 kB
build/components/style-rtl.css 15.9 kB
build/components/style.css 15.9 kB
build/compose/index.min.js 10.3 kB
build/core-data/index.min.js 12.4 kB
build/customize-widgets/index.min.js 11.2 kB
build/customize-widgets/style-rtl.css 1.5 kB
build/customize-widgets/style.css 1.49 kB
build/data-controls/index.min.js 614 B
build/data/index.min.js 7.1 kB
build/date/index.min.js 31.5 kB
build/deprecated/index.min.js 428 B
build/dom-ready/index.min.js 304 B
build/dom/index.min.js 4.45 kB
build/edit-navigation/index.min.js 15.3 kB
build/edit-navigation/style-rtl.css 3.74 kB
build/edit-navigation/style.css 3.74 kB
build/edit-post/classic-rtl.css 492 B
build/edit-post/classic.css 494 B
build/edit-post/index.min.js 29.2 kB
build/edit-post/style-rtl.css 7.19 kB
build/edit-post/style.css 7.18 kB
build/edit-site/index.min.js 29.2 kB
build/edit-site/style-rtl.css 5.47 kB
build/edit-site/style.css 5.47 kB
build/edit-widgets/index.min.js 15.7 kB
build/edit-widgets/style-rtl.css 4.1 kB
build/edit-widgets/style.css 4.1 kB
build/editor/index.min.js 37.5 kB
build/editor/style-rtl.css 3.76 kB
build/editor/style.css 3.75 kB
build/element/index.min.js 3.17 kB
build/escape-html/index.min.js 517 B
build/format-library/index.min.js 5.93 kB
build/format-library/style-rtl.css 571 B
build/format-library/style.css 571 B
build/hooks/index.min.js 1.55 kB
build/html-entities/index.min.js 424 B
build/i18n/index.min.js 3.6 kB
build/is-shallow-equal/index.min.js 501 B
build/keyboard-shortcuts/index.min.js 1.72 kB
build/keycodes/index.min.js 1.3 kB
build/list-reusable-blocks/index.min.js 1.85 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.92 kB
build/notices/index.min.js 845 B
build/nux/index.min.js 2.03 kB
build/nux/style-rtl.css 747 B
build/nux/style.css 743 B
build/plugins/index.min.js 1.83 kB
build/primitives/index.min.js 921 B
build/priority-queue/index.min.js 582 B
build/react-i18n/index.min.js 671 B
build/redux-routine/index.min.js 2.63 kB
build/reusable-blocks/index.min.js 2.28 kB
build/reusable-blocks/style-rtl.css 256 B
build/reusable-blocks/style.css 256 B
build/rich-text/index.min.js 10.6 kB
build/server-side-render/index.min.js 1.5 kB
build/shortcode/index.min.js 1.48 kB
build/token-list/index.min.js 562 B
build/url/index.min.js 1.74 kB
build/viewport/index.min.js 1.02 kB
build/warning/index.min.js 248 B
build/widgets/index.min.js 7.11 kB
build/widgets/style-rtl.css 1.16 kB
build/widgets/style.css 1.16 kB
build/wordcount/index.min.js 1.04 kB

compressed-size-action

@hypest
Copy link
Contributor

hypest commented Apr 15, 2021

👋 Thanks for this PR, I'd love to see headings adopt an anchor by default, will make it more consistent to be able to link deeper inside a post/page!

Tested in existing posts, and when editing an existing post, headings that don't already have an anchor get one.

I wonder if that automatic editor behavior can be a surprise to the user and others. Opening a post can mark the post as dirty (if any heading block auto-generates its anchor) and that might confuse the user, or just end up having involuntary post editions.

Perhaps some interaction with the user can be useful? Like, either to notify the user that there has been this automatic change, or even a mild prompt to the user offering to perform this action? Not sure if we have similar interactions actually, automatic content manipulation that either happens silently or includes the user 🤔. @jasmussen perhaps you have insight?

@jasmussen
Copy link
Contributor

Thanks for the ping. I'm not sure we need to surface it; I'd personally be okay it being dirty when visiting it after an upgrade, mostly because it will only ever be used for existing content, not new content. But if we do need to surface it, I'd think a simple snackbar informing of the change might strike the right balance?

@aristath
Copy link
Member Author

I pushed a couple of bugfixes and also updated the e2e tests.
Tests now pass and I believe this is OK to be reviewed now again 👍

Copy link
Contributor

@ntsekouras ntsekouras left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for working on this Ari! 👍

I've left some small comments and a suggestion(and at the same time question for Riad :) ) about the creation of a new hook.

The only thing besides technical implementation that seems a bit confusing to me is where you have this check startsWith( anchor, 'wp-' ). With this check a user can focus on the input of anchor and can not edit anything after this. For example if we had an auto-generated anchor wp-something, if the user types anything after wp- it seems like it doesn't do anything, because it's regenerating from the content..

packages/block-library/src/heading/edit.js Outdated Show resolved Hide resolved
packages/block-library/src/heading/edit.js Outdated Show resolved Hide resolved
packages/block-library/src/heading/autogenerate-anchors.js Outdated Show resolved Hide resolved
@aristath
Copy link
Member Author

aristath commented Apr 20, 2021

For example if we had an auto-generated anchor wp-something, if the user types anything after wp- it seems like it doesn't do anything, because it's regenerating from the content..

Correct. Users can enter a custom anchor if they want, but the wp- prefix marks it as auto-generated. If they want a custom anchor they would simply remove the prefix... Do you think wp- is not clear and we should use something else that would make it clear that it's auto-generated? I went with wp- 'cause it's consistent and small.
Anchors will be used in URLs too, so perhaps something like h- would make more sense since it would indicate the URL goes to a heading, but at the same time it might not be that clear that it's auto-generated. Personally I like h- a lot more and it makes sense, but it might not be clear to users, whereas wp- is more opinionated and indicates "hey, WordPress did this" 🤔

@aristath aristath requested a review from ellatrix as a code owner April 20, 2021 08:59
@aristath aristath force-pushed the add/autogenerate-heading-anchors branch from 32401e3 to 51a6c68 Compare April 20, 2021 09:00
@aristath
Copy link
Member Author

aristath commented Apr 20, 2021

An alternative idea would be to add an autoAnchor prop. I pushed #30990 as an idea... If we do that, we could even completely remove the prefix, and have more meaningful anchors that are not wp-heading-title but are just heading-title as someone would expect them, and if they decide to manually edit an anchor, the prop is removed and anchors will no longer be auto-generated for that heading.
EDIT: Pushed another POC PR on #30992 (against this branch) with the prefix removed, it works as expected.

Pros of doing that would be cleaner anchors, con is that there is an extra attribute. 🤔
Opinions?

@ntsekouras
Copy link
Contributor

Cool work here Ari! 💯

Correct. Users can enter a custom anchor if they want, but the wp- prefix marks it as auto-generated. If they want a custom anchor they would simply remove the prefix... Do you think wp- is not clear

I don't think the problem lies to the prefix used. Is more about not 'allowing' to edit the generated anchor depending on where you're typing and this can be confusing. When I place the anchor after the prefix in my gif, I'm typing things that seem like it does nothing, but in fact it triggers updates based on the heading's content.

anchors

I don't believe adding a new prop like autoAnchor would be great. Maybe an alternative would be to allow editing of any anchor, anchors would have no prefix and only autogenerate if anchors are empty. What do you think?

@aristath
Copy link
Member Author

@ntsekouras I refactored the PR a bit... Now it doesn't use a prefix, and the issue you pointed-out earlier was resolved.
I used an extra attribute, but without saving it. So it's just used to calc if & what should change. Let me know if there is a better way to handle it... 👍

Copy link
Contributor

@ntsekouras ntsekouras left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks Ari for your work here!

I tried to find a solution without using a fake attribute here: #31174, but isn't working well and I've ping a couple of folks to chime in..

Other than the proper solution for the updates, I noticed that there is a problem also in the auto generated anchor when we have non-latin characters. For example in Καλημέρα κόσμε is autogenerated properly the first time, but if you add latin content it keeps only the latin one..

Also when we find the proper solution, a debounced call should probably be better for this when content changes. But let's make it work well for start. I wish I could be more helpful right now..

packages/block-library/src/heading/edit.js Outdated Show resolved Hide resolved
@aristath
Copy link
Member Author

I noticed that there is a problem also in the auto generated anchor when we have non-latin characters. For example in Καλημέρα κόσμε is autogenerated properly the first time, but if you add latin content it keeps only the latin one..

That was by design. However, I can see how that would be considered an "error"... I pushed a fix.

@aristath

This comment has been minimized.

@aristath
Copy link
Member Author

Pushed another fix for this PR:
If users manually edit the anchor, the wp- prefix is automatically removed. This marks the heading's anchor as not auto-generated, and I think that solves most - if not all - issues we had with this implementation?
cc @ntsekouras

@aristath
Copy link
Member Author

aristath commented Sep 6, 2021

Brought the branch up to speed with trunk 👍
The failing test does not seem to be related to this PR since it's also failing in all other recent PRs as well

@vdrover
Copy link

vdrover commented Sep 23, 2021

@aristath Any more insight into the block?

Copy link
Member

@Mamaduka Mamaduka left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this looks great.

I left a couple of suggestions. Feel free to ignore them if those are design choices, and I missed something in the comments.

CleanShot.2021-10-14.at.08.50.46.mp4

@@ -19,6 +20,9 @@ import {
* Internal dependencies
*/
import HeadingLevelDropdown from './heading-level-dropdown';
import { generateAnchor } from './autogenerate-anchors';

const allHeadingAnchors = {};
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nit: I think this is an implementation detail and should be part of the autogenerate-anchors file.

anchor: generateAnchor( clientId, content, allHeadingAnchors ),
} );
}
allHeadingAnchors[ clientId ] = anchor;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
allHeadingAnchors[ clientId ] = anchor;
setAnchor( clientId, anchor );

If you decide to move the cache variable will need a new setAnchor method.

@aristath
Copy link
Member Author

Thank you for the review @Mamaduka!

Since there are no issues with this implementation I'll go ahead and merge it so we can get things rolling.
We can do additional small PRs to improve things as we go when the need arises ❤️

@aristath aristath merged commit c906643 into trunk Oct 14, 2021
@aristath aristath deleted the add/autogenerate-heading-anchors branch October 14, 2021 06:28
@github-actions github-actions bot added this to the Gutenberg 11.8 milestone Oct 14, 2021
@Mamaduka
Copy link
Member

@aristath sounds good.

I'm also happy to do the follow-up PR if they look okay to you.

@aristath
Copy link
Member Author

I'm also happy to do the follow-up PR if they look okay to you.

Of course!

@NicoHood
Copy link

Nice!
Will the table of contents block now be re-enabled?

@aristath
Copy link
Member Author

This PR is not the reason why the TOC block was disabled, at the time there were more serious concerns about the way that block was implemented.
A more relevant PR would be #29739 👍

@priethor priethor removed the [Status] In Progress Tracking issues with work in progress label Oct 26, 2021
@paulwilde
Copy link
Contributor

paulwilde commented Nov 3, 2021

This has a bug where if you write a heading and then duplicate that block the old id is retained even if you change the text for the second heading.

It also doesn't take into consideration ids from different editor settings (such as widgets) so you can end up with duplicate ids on the page from the main editor and widgets.

I'm also seeing no flag to disable the functionality either. Not speaking personally as its bad practice these days, but I can see this having negative consequences on websites where they use ids for JavaScript hooks or styling where these autogenerated ids have the potential to break the page.

@mtias
Copy link
Member

mtias commented Nov 18, 2021

I think there's a case for considering a prefix for these auto-generated anchors.

@Zodiac1978
Copy link

#36365 (comment)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Heading Affects the Headings Block [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Heading Block: autogenerate anchors