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

Export and document LinkControl's building blocks #25901

Merged
merged 14 commits into from
Oct 14, 2020

Conversation

adamziel
Copy link
Contributor

@adamziel adamziel commented Oct 7, 2020

Description

<LinkControl /> used to be all-or-nothing monolith. As of #23869 it's composed using more granular building blocks. While it's still not perfect, these building blocks could already be useful for building custom UIs that are visually consistent with the rest of Gutenberg. This PR exposes some of these components using __experimental prefix. If the response is positive, I will follow up by adding usage examples to README.

Checklist:

  • My code is tested
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • 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.

@adamziel adamziel added the [Feature] Link Editing Link components (LinkControl, URLInput) and integrations (RichText link formatting) label Oct 7, 2020
@adamziel adamziel requested a review from getdave October 7, 2020 13:01
@adamziel adamziel self-assigned this Oct 7, 2020
@adamziel adamziel requested a review from swissspidy October 7, 2020 13:01
@github-actions
Copy link

github-actions bot commented Oct 7, 2020

Size Change: -2.14 kB (0%)

Total Size: 1.19 MB

Filename Size Change
build/a11y/index.js 1.14 kB +1 B
build/annotations/index.js 3.54 kB -1 B
build/block-directory/index.js 8.6 kB +48 B (0%)
build/block-editor/index.js 130 kB +1.3 kB (1%)
build/block-editor/style-rtl.css 10.9 kB +2 B (0%)
build/block-editor/style.css 10.9 kB +3 B (0%)
build/block-library/editor-rtl.css 8.65 kB -2 B (0%)
build/block-library/editor.css 8.65 kB -4 B (0%)
build/block-library/index.js 143 kB -1.25 kB (0%)
build/block-library/style-rtl.css 7.71 kB +53 B (0%)
build/block-library/style.css 7.71 kB +54 B (0%)
build/blocks/index.js 47.6 kB +64 B (0%)
build/components/index.js 169 kB -327 B (0%)
build/components/style-rtl.css 15.5 kB +54 B (0%)
build/components/style.css 15.5 kB +55 B (0%)
build/compose/index.js 9.63 kB +200 B (2%)
build/core-data/index.js 12.1 kB +2 B (0%)
build/data-controls/index.js 684 B -1 B
build/data/index.js 8.63 kB +23 B (0%)
build/dom-ready/index.js 569 B +1 B
build/dom/index.js 4.43 kB +2 B (0%)
build/edit-navigation/index.js 10.6 kB +2 B (0%)
build/edit-post/index.js 306 kB -16 B (0%)
build/edit-post/style-rtl.css 6.3 kB +15 B (0%)
build/edit-post/style.css 6.29 kB +15 B (0%)
build/edit-site/index.js 21.3 kB +314 B (1%)
build/edit-site/style-rtl.css 3.86 kB +129 B (3%)
build/edit-site/style.css 3.86 kB +133 B (3%)
build/edit-widgets/index.js 21.3 kB +83 B (0%)
build/edit-widgets/style-rtl.css 2.97 kB -50 B (1%)
build/edit-widgets/style.css 2.97 kB -51 B (1%)
build/editor/editor-styles-rtl.css 480 B -12 B (2%)
build/editor/editor-styles.css 482 B -11 B (2%)
build/editor/index.js 42.5 kB -2.99 kB (7%)
build/editor/style-rtl.css 3.85 kB +4 B (0%)
build/editor/style.css 3.84 kB +2 B (0%)
build/element/index.js 4.45 kB +1 B
build/escape-html/index.js 733 B -1 B
build/format-library/index.js 7.49 kB +2 B (0%)
build/html-entities/index.js 622 B +1 B
build/is-shallow-equal/index.js 709 B -1 B
build/list-reusable-blocks/index.js 3.02 kB +1 B
build/media-utils/index.js 5.12 kB +2 B (0%)
build/notices/index.js 1.69 kB +1 B
build/nux/index.js 3.27 kB +1 B
build/primitives/index.js 1.34 kB +1 B
build/priority-queue/index.js 789 B -1 B
build/redux-routine/index.js 2.85 kB +2 B (0%)
build/rich-text/index.js 13 kB +6 B (0%)
build/server-side-render/index.js 2.6 kB +1 B
build/shortcode/index.js 1.7 kB -1 B
build/url/index.js 4.07 kB +3 B (0%)
build/viewport/index.js 1.75 kB +1 B
build/warning/index.js 1.13 kB -1 B
ℹ️ View Unchanged
Filename Size Change
build/api-fetch/index.js 3.35 kB 0 B
build/autop/index.js 2.72 kB 0 B
build/blob/index.js 668 B 0 B
build/block-directory/style-rtl.css 943 B 0 B
build/block-directory/style.css 942 B 0 B
build/block-library/theme-rtl.css 741 B 0 B
build/block-library/theme.css 741 B 0 B
build/block-serialization-default-parser/index.js 1.78 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/date/index.js 31.9 kB 0 B
build/deprecated/index.js 772 B 0 B
build/edit-navigation/style-rtl.css 868 B 0 B
build/edit-navigation/style.css 871 B 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 1.74 kB 0 B
build/i18n/index.js 3.54 kB 0 B
build/keyboard-shortcuts/index.js 2.39 kB 0 B
build/keycodes/index.js 1.85 kB 0 B
build/list-reusable-blocks/style-rtl.css 476 B 0 B
build/list-reusable-blocks/style.css 476 B 0 B
build/nux/style-rtl.css 671 B 0 B
build/nux/style.css 668 B 0 B
build/plugins/index.js 2.44 kB 0 B
build/reusable-blocks/index.js 3.04 kB 0 B
build/token-list/index.js 1.24 kB 0 B
build/wordcount/index.js 1.17 kB 0 B

compressed-size-action

@getdave
Copy link
Contributor

getdave commented Oct 7, 2020

I like this approach for allowing folks to build out custom UIs. I still believe the top-level monolith component isn't necessarily a bad thing as it retains a consistent UI for 90% of use cases. With this approach to exposing the lower-level components, we can service the 10% (disclaimer: those figures are completely arbitrary!).

Copy link
Contributor

@getdave getdave left a comment

Choose a reason for hiding this comment

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

Technically this looks sound.

Two points that seem minor:

  1. Is it better to export the default from the sub component files directly, or export them as non-default exports from the main LinkControl file? That way you could do:
import __experimentalLinkControl, {  __experimentalLinkControlSearchInput } from 'block-editor/link-control

This approach might not couple us to filenames. That said, if there's a convention let's stick with that.

  1. Should we update the docs to reflect these changes, even if it's just to say "We now export the lower level components"?

@adamziel adamziel force-pushed the update/export-granular-link-control-pieces branch from 53ef92b to 2e36b04 Compare October 8, 2020 10:36
@adamziel
Copy link
Contributor Author

adamziel commented Oct 8, 2020

@getdave @swissspidy I drafted how an updated README could look like - I'd appreciate your feedback.

@adamziel adamziel changed the title Export LinkControl's building blocks Export and document LinkControl's building blocks Oct 9, 2020
Copy link
Contributor

@getdave getdave left a comment

Choose a reason for hiding this comment

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

Overall this looks good. One (optional) tiny nit pick.

Co-authored-by: Dave Smith <getdavemail@gmail.com>
@adamziel adamziel merged commit c9b3874 into master Oct 14, 2020
@adamziel adamziel deleted the update/export-granular-link-control-pieces branch October 14, 2020 13:33
@github-actions github-actions bot added this to the Gutenberg 9.2 milestone Oct 14, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Link Editing Link components (LinkControl, URLInput) and integrations (RichText link formatting)
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants