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

Add anchor support to static blocks #23197

Merged
merged 2 commits into from
Jun 23, 2020
Merged

Add anchor support to static blocks #23197

merged 2 commits into from
Jun 23, 2020

Conversation

youknowriad
Copy link
Contributor

Related #21023

This PR adds anchor support to several blocks and updates the transforms to retain the attribute when transforming blocks.

the reasoning is:

  • id is supported by all DOM elements
  • it's an advanced config in the "advanced" section"
  • Several persons tweak the html to add these ids manually causing invalidation, this will prevent this kind of block invalidation.

Notes

I'd like to do the same for dynamic blocks too. Work around support flags for dynamic blocks is being done here #23007 We should circle back to the anchor support too once it lands.

Testing instructions

  • Test that you can set IDs to: paragraph, audio, video, button, buttons, column columns, code, preformatted, verse, image, galleries, cover, list, media and text, pullquote, quote, separator, spacer and table.
  • Converting between these blocks should retain the id.
  • Pasting HTML or converting to blocks should retain ids for these blocks.

@youknowriad youknowriad self-assigned this Jun 16, 2020
@youknowriad youknowriad added the [Feature] Blocks Overall functionality of blocks label Jun 16, 2020
@github-actions
Copy link

github-actions bot commented Jun 16, 2020

Size Change: +236 B (0%)

Total Size: 1.12 MB

Filename Size Change
build/block-editor/index.js 107 kB +5 B (0%)
build/block-library/index.js 129 kB +231 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/annotations/index.js 3.62 kB 0 B
build/api-fetch/index.js 3.4 kB 0 B
build/autop/index.js 2.82 kB 0 B
build/blob/index.js 620 B 0 B
build/block-directory/index.js 7.27 kB 0 B
build/block-directory/style-rtl.css 937 B 0 B
build/block-directory/style.css 937 B 0 B
build/block-editor/style-rtl.css 10.7 kB 0 B
build/block-editor/style.css 10.7 kB 0 B
build/block-library/editor-rtl.css 7.59 kB 0 B
build/block-library/editor.css 7.59 kB 0 B
build/block-library/style-rtl.css 8.02 kB 0 B
build/block-library/style.css 8.02 kB 0 B
build/block-library/theme-rtl.css 730 B 0 B
build/block-library/theme.css 732 B 0 B
build/block-serialization-default-parser/index.js 1.88 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/blocks/index.js 48.2 kB 0 B
build/components/index.js 195 kB 0 B
build/components/style-rtl.css 15.8 kB 0 B
build/components/style.css 15.7 kB 0 B
build/compose/index.js 9.61 kB 0 B
build/core-data/index.js 11.4 kB 0 B
build/data-controls/index.js 1.29 kB 0 B
build/data/index.js 8.44 kB 0 B
build/date/index.js 5.47 kB 0 B
build/deprecated/index.js 772 B 0 B
build/dom-ready/index.js 569 B 0 B
build/dom/index.js 3.17 kB 0 B
build/edit-navigation/index.js 9.64 kB 0 B
build/edit-navigation/style-rtl.css 1.02 kB 0 B
build/edit-navigation/style.css 1.02 kB 0 B
build/edit-post/index.js 303 kB 0 B
build/edit-post/style-rtl.css 5.5 kB 0 B
build/edit-post/style.css 5.5 kB 0 B
build/edit-site/index.js 16.6 kB 0 B
build/edit-site/style-rtl.css 3.02 kB 0 B
build/edit-site/style.css 3.02 kB 0 B
build/edit-widgets/index.js 9.33 kB 0 B
build/edit-widgets/style-rtl.css 2.42 kB 0 B
build/edit-widgets/style.css 2.42 kB 0 B
build/editor/editor-styles-rtl.css 468 B 0 B
build/editor/editor-styles.css 469 B 0 B
build/editor/index.js 44.8 kB 0 B
build/editor/style-rtl.css 3.81 kB 0 B
build/editor/style.css 3.81 kB 0 B
build/element/index.js 4.65 kB 0 B
build/escape-html/index.js 733 B 0 B
build/format-library/index.js 7.72 kB 0 B
build/format-library/style-rtl.css 547 B 0 B
build/format-library/style.css 548 B 0 B
build/hooks/index.js 2.13 kB 0 B
build/html-entities/index.js 622 B 0 B
build/i18n/index.js 3.56 kB 0 B
build/is-shallow-equal/index.js 710 B 0 B
build/keyboard-shortcuts/index.js 2.51 kB 0 B
build/keycodes/index.js 1.94 kB 0 B
build/list-reusable-blocks/index.js 3.13 kB 0 B
build/list-reusable-blocks/style-rtl.css 450 B 0 B
build/list-reusable-blocks/style.css 451 B 0 B
build/media-utils/index.js 5.29 kB 0 B
build/notices/index.js 1.79 kB 0 B
build/nux/index.js 3.4 kB 0 B
build/nux/style-rtl.css 663 B 0 B
build/nux/style.css 660 B 0 B
build/plugins/index.js 2.56 kB 0 B
build/primitives/index.js 1.5 kB 0 B
build/priority-queue/index.js 789 B 0 B
build/redux-routine/index.js 2.85 kB 0 B
build/rich-text/index.js 14 kB 0 B
build/server-side-render/index.js 2.67 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.28 kB 0 B
build/url/index.js 4.06 kB 0 B
build/viewport/index.js 1.85 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.17 kB 0 B

compressed-size-action

@ItsJonQ
Copy link

ItsJonQ commented Jun 16, 2020

@youknowriad This is great! Tested it locally, and it works as expected! 👍

The only observation/suggestion I have is to maybe add autoComplete="off" to the <TextControl /> for the anchor ID field:

(Note: I recognize that the TextControl field wasn't modified in this PR)

https://github.com/WordPress/gutenberg/blob/master/packages/block-editor/src/hooks/anchor.js#L75

It would avoid interactions like this: (Chrome)

Screen Shot 2020-06-16 at 10 01 27 AM

@ZebulanStanphill ZebulanStanphill added the [Type] Enhancement A suggestion for improvement. label Jun 16, 2020
@youknowriad
Copy link
Contributor Author

Good suggestion @ItsJonQ Fixed.

@mtias
Copy link
Member

mtias commented Jun 23, 2020

Thanks for looking at this one. It makes sense to extend this support since people are already attempting to do it by hand and running into validation issues.

@youknowriad youknowriad merged commit d54e248 into master Jun 23, 2020
@youknowriad youknowriad deleted the update/anchor-support branch June 23, 2020 10:23
@github-actions github-actions bot added this to the Gutenberg 8.5 milestone Jun 23, 2020
@paaljoachim
Copy link
Contributor

This is very helpful! Thank you.

@bobeaston
Copy link

THANKS to all who helped get it this far!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Blocks Overall functionality of blocks [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants