Skip to content

/ gutenberg

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

Jump to bottom

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

@youknowriad youknowriad commented Jun 16, 2020

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
@github-actions
Copy link

@github-actions github-actions bot commented Jun 16, 2020 •
edited

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
Contributor

@ItsJonQ ItsJonQ commented Jun 16, 2020 •
edited

@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
youknowriad added 2 commits Jun 16, 2020
@youknowriad
Add anchor support to static blocks
6e84495
@youknowriad
Disable autocomplete from the anchor field
Loading status checks…
4605974
@youknowriad youknowriad force-pushed the update/anchor-support branch from 883460e to 4605974 Jun 22, 2020
@youknowriad youknowriad requested a review from ellatrix as a code owner Jun 22, 2020
@youknowriad
Copy link
Contributor Author

@youknowriad youknowriad commented Jun 22, 2020

Good suggestion @ItsJonQ Fixed.
@mtias
mtias approved these changes Jun 23, 2020
View changes
@mtias
Copy link
Contributor

@mtias 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
4 checks passed
4 checks passed
build build
Details
build
Details
pull-request-automation
Details
Travis CI - Pull Request Build Passed
Details
@youknowriad youknowriad deleted the update/anchor-support branch Jun 23, 2020
@github-actions github-actions bot added this to the Gutenberg 8.5 milestone Jun 23, 2020
@paaljoachim
Copy link
Contributor

@paaljoachim paaljoachim commented Jul 9, 2020

This is very helpful! Thank you.
@mcsf mcsf mentioned this pull request Jul 9, 2020
Open
@bobeaston
Copy link

@bobeaston bobeaston commented Jul 15, 2020

THANKS to all who helped get it this far!
@mkaz mkaz mentioned this pull request Sep 14, 2020
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@mtias mtias

@ajitbohra ajitbohra

@mkaz mkaz

@mkevins mkevins

@pinarol pinarol

@Soean Soean

@talldan talldan

@ellatrix ellatrix

Assignees

@youknowriad youknowriad

Labels
[Feature] Blocks [Type] Enhancement
Projects
None yet
Milestone
Gutenberg 8.5
Linked issues

Successfully merging this pull request may close these issues.

None yet

6 participants
@youknowriad @ItsJonQ @mtias @paaljoachim @bobeaston @ZebulanStanphill