WordPress
Social Icon: Try auto-matching variation based on URL
What?
Resolves #56259.
PR updates Social Icon's block to auto-match service variation based on the URL pattern. It also enables direct insertion of the block.
[!NOTE]
Some variations like Mastodon, which allow services to be hosted on different domains, can't be auto-matched. But they can be inserted using the global block inserter.
Why?
See #56259.
How?
Define pattern matches for each variation, similar to how Embeds block implementation.
Testing Instructions
- Open a post or page.
- Insert the Social Icons block.
- Add a social icon.
- Type URLs for a few social networks.
- The block's variation should change with URLs.
- When a URL doesn't match the variation, it should display a link icon.
Testing Instructions for Keyboard
Same.
Screenshots or screencast
https://github.com/WordPress/gutenberg/assets/240569/2e91dd07-7e73-45d1-aad5-39ac02e452d5
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.
If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.
Co-authored-by: Mamaduka <[email protected]>
Co-authored-by: fabiankaegy <[email protected]>
Co-authored-by: jasmussen <[email protected]>
Co-authored-by: ntsekouras <[email protected]>
Co-authored-by: carlomanf <[email protected]>
Co-authored-by: richtabor <[email protected]>
Co-authored-by: t-hamano <[email protected]>
Co-authored-by: afercia <[email protected]>
Co-authored-by: getdave <[email protected]>
Co-authored-by: ndiego <[email protected]>
Co-authored-by: krokodok <[email protected]>
To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
Size Change: +525 B (+0.03%)
Total Size: 1.75 MB
| Filename | Size | Change |
|---|---|---|
build/block-library/index.min.js |
218 kB | +525 B (+0.24%) |
âšī¸ View Unchanged
| Filename | Size |
|---|---|
build/a11y/index.min.js |
955 B |
build/annotations/index.min.js |
2.27 kB |
build/api-fetch/index.min.js |
2.32 kB |
build/autop/index.min.js |
2.1 kB |
build/blob/index.min.js |
578 B |
build/block-directory/index.min.js |
7.26 kB |
build/block-directory/style-rtl.css |
1.03 kB |
build/block-directory/style.css |
1.03 kB |
build/block-editor/content-rtl.css |
4.57 kB |
build/block-editor/content.css |
4.57 kB |
build/block-editor/default-editor-styles-rtl.css |
395 B |
build/block-editor/default-editor-styles.css |
395 B |
build/block-editor/index.min.js |
259 kB |
build/block-editor/style-rtl.css |
15.5 kB |
build/block-editor/style.css |
15.5 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 |
133 B |
build/block-library/blocks/audio/theme.css |
133 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 |
277 B |
build/block-library/blocks/block/editor.css |
277 B |
build/block-library/blocks/button/editor-rtl.css |
415 B |
build/block-library/blocks/button/editor.css |
414 B |
build/block-library/blocks/button/style-rtl.css |
627 B |
build/block-library/blocks/button/style.css |
626 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 |
421 B |
build/block-library/blocks/columns/style.css |
421 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 |
671 B |
build/block-library/blocks/cover/editor.css |
674 B |
build/block-library/blocks/cover/style-rtl.css |
1.7 kB |
build/block-library/blocks/cover/style.css |
1.69 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 |
86 B |
build/block-library/blocks/details/style.css |
86 B |
build/block-library/blocks/embed/editor-rtl.css |
312 B |
build/block-library/blocks/embed/editor.css |
312 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 |
133 B |
build/block-library/blocks/embed/theme.css |
133 B |
build/block-library/blocks/file/editor-rtl.css |
326 B |
build/block-library/blocks/file/editor.css |
327 B |
build/block-library/blocks/file/style-rtl.css |
280 B |
build/block-library/blocks/file/style.css |
281 B |
build/block-library/blocks/file/view.min.js |
324 B |
build/block-library/blocks/footnotes/style-rtl.css |
201 B |
build/block-library/blocks/footnotes/style.css |
199 B |
build/block-library/blocks/form-input/editor-rtl.css |
227 B |
build/block-library/blocks/form-input/editor.css |
227 B |
build/block-library/blocks/form-input/style-rtl.css |
343 B |
build/block-library/blocks/form-input/style.css |
343 B |
build/block-library/blocks/form-submission-notification/editor-rtl.css |
340 B |
build/block-library/blocks/form-submission-notification/editor.css |
340 B |
build/block-library/blocks/form-submit-button/style-rtl.css |
69 B |
build/block-library/blocks/form-submit-button/style.css |
69 B |
build/block-library/blocks/form/view.min.js |
471 B |
build/block-library/blocks/freeform/editor-rtl.css |
2.61 kB |
build/block-library/blocks/freeform/editor.css |
2.61 kB |
build/block-library/blocks/gallery/editor-rtl.css |
956 B |
build/block-library/blocks/gallery/editor.css |
960 B |
build/block-library/blocks/gallery/style-rtl.css |
1.72 kB |
build/block-library/blocks/gallery/style.css |
1.72 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 |
403 B |
build/block-library/blocks/group/editor.css |
403 B |
build/block-library/blocks/group/style-rtl.css |
103 B |
build/block-library/blocks/group/style.css |
103 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 |
189 B |
build/block-library/blocks/heading/style.css |
189 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 |
891 B |
build/block-library/blocks/image/editor.css |
891 B |
build/block-library/blocks/image/style-rtl.css |
1.6 kB |
build/block-library/blocks/image/style.css |
1.59 kB |
build/block-library/blocks/image/theme-rtl.css |
133 B |
build/block-library/blocks/image/theme.css |
133 B |
build/block-library/blocks/image/view.min.js |
1.54 kB |
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 |
306 B |
build/block-library/blocks/media-text/editor.css |
305 B |
build/block-library/blocks/media-text/style-rtl.css |
505 B |
build/block-library/blocks/media-text/style.css |
503 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 |
668 B |
build/block-library/blocks/navigation-link/editor.css |
669 B |
build/block-library/blocks/navigation-link/style-rtl.css |
193 B |
build/block-library/blocks/navigation-link/style.css |
192 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.26 kB |
build/block-library/blocks/navigation/editor.css |
2.26 kB |
build/block-library/blocks/navigation/style-rtl.css |
2.26 kB |
build/block-library/blocks/navigation/style.css |
2.25 kB |
build/block-library/blocks/navigation/view.min.js |
1.03 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 |
175 B |
build/block-library/blocks/page-list/style.css |
175 B |
build/block-library/blocks/paragraph/editor-rtl.css |
235 B |
build/block-library/blocks/paragraph/editor.css |
235 B |
build/block-library/blocks/paragraph/style-rtl.css |
335 B |
build/block-library/blocks/paragraph/style.css |
335 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-content/editor-rtl.css |
74 B |
build/block-library/blocks/post-content/editor.css |
74 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 |
734 B |
build/block-library/blocks/post-featured-image/editor.css |
732 B |
build/block-library/blocks/post-featured-image/style-rtl.css |
342 B |
build/block-library/blocks/post-featured-image/style.css |
342 B |
build/block-library/blocks/post-navigation-link/style-rtl.css |
215 B |
build/block-library/blocks/post-navigation-link/style.css |
214 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 |
397 B |
build/block-library/blocks/post-template/style.css |
396 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 |
125 B |
build/block-library/blocks/preformatted/style.css |
125 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 |
354 B |
build/block-library/blocks/pullquote/style.css |
353 B |
build/block-library/blocks/pullquote/theme-rtl.css |
174 B |
build/block-library/blocks/pullquote/theme.css |
174 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 |
486 B |
build/block-library/blocks/query/editor.css |
486 B |
build/block-library/blocks/query/view.min.js |
958 B |
build/block-library/blocks/quote/style-rtl.css |
237 B |
build/block-library/blocks/quote/style.css |
237 B |
build/block-library/blocks/quote/theme-rtl.css |
233 B |
build/block-library/blocks/quote/theme.css |
235 B |
build/block-library/blocks/read-more/style-rtl.css |
140 B |
build/block-library/blocks/read-more/style.css |
140 B |
build/block-library/blocks/rss/editor-rtl.css |
101 B |
build/block-library/blocks/rss/editor.css |
101 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 |
184 B |
build/block-library/blocks/search/editor.css |
184 B |
build/block-library/blocks/search/style-rtl.css |
690 B |
build/block-library/blocks/search/style.css |
689 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 |
478 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 |
239 B |
build/block-library/blocks/separator/style.css |
239 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 |
286 B |
build/block-library/blocks/shortcode/editor.css |
286 B |
build/block-library/blocks/site-logo/editor-rtl.css |
805 B |
build/block-library/blocks/site-logo/editor.css |
805 B |
build/block-library/blocks/site-logo/style-rtl.css |
204 B |
build/block-library/blocks/site-logo/style.css |
204 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 |
324 B |
build/block-library/blocks/social-link/editor.css |
324 B |
build/block-library/blocks/social-links/editor-rtl.css |
676 B |
build/block-library/blocks/social-links/editor.css |
675 B |
build/block-library/blocks/social-links/style-rtl.css |
1.48 kB |
build/block-library/blocks/social-links/style.css |
1.48 kB |
build/block-library/blocks/spacer/editor-rtl.css |
350 B |
build/block-library/blocks/spacer/editor.css |
350 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 |
395 B |
build/block-library/blocks/table/editor.css |
395 B |
build/block-library/blocks/table/style-rtl.css |
639 B |
build/block-library/blocks/table/style.css |
639 B |
build/block-library/blocks/table/theme-rtl.css |
152 B |
build/block-library/blocks/table/theme.css |
152 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 |
393 B |
build/block-library/blocks/template-part/editor.css |
393 B |
build/block-library/blocks/template-part/theme-rtl.css |
107 B |
build/block-library/blocks/template-part/theme.css |
107 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 |
185 B |
build/block-library/blocks/video/style.css |
185 B |
build/block-library/blocks/video/theme-rtl.css |
133 B |
build/block-library/blocks/video/theme.css |
133 B |
build/block-library/classic-rtl.css |
179 B |
build/block-library/classic.css |
179 B |
build/block-library/common-rtl.css |
1.11 kB |
build/block-library/common.css |
1.11 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.2 kB |
build/block-library/elements-rtl.css |
54 B |
build/block-library/elements.css |
54 B |
build/block-library/reset-rtl.css |
472 B |
build/block-library/reset.css |
472 B |
build/block-library/style-rtl.css |
14.8 kB |
build/block-library/style.css |
14.8 kB |
build/block-library/theme-rtl.css |
707 B |
build/block-library/theme.css |
713 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 |
51.7 kB |
build/commands/index.min.js |
15.1 kB |
build/commands/style-rtl.css |
953 B |
build/commands/style.css |
951 B |
build/components/index.min.js |
222 kB |
build/components/style-rtl.css |
12 kB |
build/components/style.css |
12 kB |
build/compose/index.min.js |
12.8 kB |
build/core-commands/index.min.js |
2.81 kB |
build/core-data/index.min.js |
72.5 kB |
build/customize-widgets/index.min.js |
10.9 kB |
build/customize-widgets/style-rtl.css |
1.36 kB |
build/customize-widgets/style.css |
1.36 kB |
build/data-controls/index.min.js |
640 B |
build/data/index.min.js |
9 kB |
build/date/index.min.js |
17.9 kB |
build/deprecated/index.min.js |
451 B |
build/dom-ready/index.min.js |
324 B |
build/dom/index.min.js |
4.65 kB |
build/edit-post/classic-rtl.css |
578 B |
build/edit-post/classic.css |
578 B |
build/edit-post/index.min.js |
14.6 kB |
build/edit-post/style-rtl.css |
2.68 kB |
build/edit-post/style.css |
2.68 kB |
build/edit-site/index.min.js |
219 kB |
build/edit-site/style-rtl.css |
12.7 kB |
build/edit-site/style.css |
12.7 kB |
build/edit-widgets/index.min.js |
17.5 kB |
build/edit-widgets/style-rtl.css |
4.18 kB |
build/edit-widgets/style.css |
4.18 kB |
build/editor/index.min.js |
86.5 kB |
build/editor/style-rtl.css |
8.5 kB |
build/editor/style.css |
8.51 kB |
build/element/index.min.js |
4.83 kB |
build/escape-html/index.min.js |
537 B |
build/format-library/index.min.js |
8.07 kB |
build/format-library/style-rtl.css |
493 B |
build/format-library/style.css |
492 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/interactivity/debug.min.js |
16.3 kB |
build/interactivity/file.min.js |
447 B |
build/interactivity/image.min.js |
1.67 kB |
build/interactivity/index.min.js |
13 kB |
build/interactivity/navigation.min.js |
1.17 kB |
build/interactivity/query.min.js |
740 B |
build/interactivity/router.min.js |
2.79 kB |
build/interactivity/search.min.js |
618 B |
build/is-shallow-equal/index.min.js |
527 B |
build/keyboard-shortcuts/index.min.js |
1.3 kB |
build/keycodes/index.min.js |
1.46 kB |
build/list-reusable-blocks/index.min.js |
2.11 kB |
build/list-reusable-blocks/style-rtl.css |
851 B |
build/list-reusable-blocks/style.css |
851 B |
build/media-utils/index.min.js |
2.92 kB |
build/modules/importmap-polyfill.min.js |
12.2 kB |
build/notices/index.min.js |
948 B |
build/nux/index.min.js |
1.57 kB |
build/nux/style-rtl.css |
748 B |
build/nux/style.css |
744 B |
build/patterns/index.min.js |
6.46 kB |
build/patterns/style-rtl.css |
595 B |
build/patterns/style.css |
595 B |
build/plugins/index.min.js |
1.8 kB |
build/preferences-persistence/index.min.js |
2.06 kB |
build/preferences/index.min.js |
2.85 kB |
build/preferences/style-rtl.css |
710 B |
build/preferences/style.css |
712 B |
build/primitives/index.min.js |
809 B |
build/priority-queue/index.min.js |
1.52 kB |
build/private-apis/index.min.js |
1 kB |
build/react-i18n/index.min.js |
623 B |
build/react-refresh-entry/index.min.js |
9.47 kB |
build/react-refresh-runtime/index.min.js |
6.78 kB |
build/redux-routine/index.min.js |
2.7 kB |
build/reusable-blocks/index.min.js |
2.7 kB |
build/reusable-blocks/style-rtl.css |
256 B |
build/reusable-blocks/style.css |
256 B |
build/rich-text/index.min.js |
10.1 kB |
build/router/index.min.js |
1.93 kB |
build/server-side-render/index.min.js |
1.96 kB |
build/shortcode/index.min.js |
1.39 kB |
build/style-engine/index.min.js |
2.02 kB |
build/token-list/index.min.js |
582 B |
build/url/index.min.js |
3.74 kB |
build/vendors/inert-polyfill.min.js |
2.48 kB |
build/vendors/react-dom.min.js |
41.7 kB |
build/vendors/react.min.js |
4.03 kB |
build/viewport/index.min.js |
957 B |
build/warning/index.min.js |
249 B |
build/widgets/index.min.js |
7.11 kB |
build/widgets/style-rtl.css |
1.17 kB |
build/widgets/style.css |
1.17 kB |
build/wordcount/index.min.js |
1.02 kB |
Flaky tests detected in f083c83864dc8ee649b7e3c6d3ae4843a71b9f2f. 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/8371407234 đ Reported issues:
- #59899 in
/test/e2e/specs/interactivity/deferred-store.spec.ts
Thank you, @fabiankaegy!
What do you think about services that can be matched via URL? Do you think inserting them via the global inserter is a good option?
Hmmmm good point. I missed that. I had assumed (not tested well enough) that clicking the plus icon would still bring up the block picker.
How do you feed about solving this by adding scope: [ 'transform' ] to the variations?
It looks odd right now because it doesn't use the dropdown but instead shows all the icons which I think is way too much. But kind of nice to have the ability to switch manually
I think it would make sense to adjust this conditional here: https://github.com/WordPress/gutenberg/blob/599f3365232316242a2f92d8fdb5a05e0b0accaa/packages/block-editor/src/components/block-variation-transforms/index.js#L192 to limit it to maybe 8 or so before it just always switches to the select?
Currently, transformations in the Inspector panel don't scale well. @ntsekouras, is working to improve that in #46726. Once that PR is merged, we can add the `scope' to the variations.
Also separately, I feel like this PR potentially unlocks the Social Icon block to work on its own, without the Social Icons container:
That's quite interesting.
This feels nice. My one hesitation is a lack of understanding from this view on what I can do. Perhaps we need help text that makes it clearer? Even "Enter address" is unclear.
It looks odd right now because it doesn't use the dropdown but instead shows all the icons which I think is way too much. But kind of nice to have the ability to switch manually
I don't think this would work, as we're introducing the concept that a link relates to a social icon, but if we open up transforms, then we're breaking that relationship â as you can transform to a Facebook block, but have a Twitter link.
We could clear the link when transforming, but then again, with this new relationship, it's not a Facebook icon without a Facebook link.
That said, it seems nice to potentially explore a separate improvement to also auto-complete the https:// part of the URL. I.e. I'd love to be able to type in codepen.i and as soon as I type in the final o, it updates the whole to https://codepen.io.
Definitely doable.I am happy to follow up on this one.
Perhaps we need help text that makes it clearer? Even "Enter address" is unclear.
100%. A hint or help text below the input would be nice, and I would appreciate your help.
Definitely doable.I am happy to follow up on this one.
LinkControl has a isURLLike function which is pretty flexible and aims to detect possible URLs.
This is looking great, but I still would want to be able to add a Facebook icon with a dummy link for testing purposes. You also see this in patterns fairly often where the URL is set to # or something similar. I'm not necessarily saying that's good practice, but I just don't want that workflow/implementation to break.
@ndiego, that was also brought up in the issue . You should be able to use https://facebook.com/# like URLs for test content or patterns.
@ndiego, that was also https://github.com/WordPress/gutenberg/issues/56259#issuecomment-1843004307. You should be able to use https://facebook.com/# like URLs for test content or patterns.
That's fine with me personally. We just need to be comfortable with the fact that this will break things for some folks.
You can still manually and explicitly pick a variation, no? I.e. this is additive, not subtractive to what's in trunk correct?
I've switched the inner blocks appender to use "direct insertion", but yes, you can still insert variations manually via global inserter.
We just need to be comfortable with the fact that this will break things for some folks.
I hope we can mitigate that using a hint/help text.
Screencast
https://github.com/WordPress/gutenberg/assets/240569/6f68e0a2-56e7-49b5-a9c7-b137ed3b6f45
@jasmussen, @richtabor, do you have any ideas for the "help text" design and copy?
Can we show the list of transforms here?
I know it's a long list, but there's room.
I'm not sure about the added help text, suggesting that the only way you can manually insert is using the global inserter. It sounds more limiting than it is.
@jasmussen, Nik is working on the UI update for transformation in block info area - #57676. Enabling transformations shouldn't be a problem after that.
I thought we wanted to help text explaining that typing a URL will automatically transform into an Icon block variation.
It's not clear to me that needs to be shared. I'll defer to Rich if he has any input, but combined with the transforms this feels to me like a good place to start.
I'm a fan of this work. I think that there can be an inspector UI to go with this, to let you transform manually, e.g. for the mastodon cases. Though I also agree with @richtabor that we don't want that transforms UI at any cost, so it needs to be a good UI.
So to capture the use case of a manual transform, when we cannot detect the service, and in case the inspector transforms UI is a rabbit hole, I wonder, why is this dropdown empty?
I realize it'd be a long list. That could be the reason. But I wonder, could we show the grid of logos there?
@jasmussen, it seems that we don't want to allow transformations for this block (at least for now). Transforming Social A to Social B while retaining A's URL seems odd. This is my takeaway from Nik's latest comment: https://github.com/WordPress/gutenberg/pull/59303#pullrequestreview-1906324608. There's the same limitation for the Embed block, and it's quite similar to the Social Icon/Link.
Two items I would like to polish/resolve before we can land this PR:
- Better placeholder or help text. After inserting the placeholder variation, no hint entering the URL will automatically match the service.
- What should be done with services that can't be matched, e.g., Mastodon?
Feel free to include any items I'm missing.
The other option is to literally have a block for every social icon, like we have a block for every embed. That would make it match embed. Services would show up in search, and be greatly useful if in a future we allow you to insert a social icon without a container. Main next instinct then is to collapse the embeds and social icons in the inserter, otherwise it'll have huge emphasis; what do you think? CC: @WordPress/gutenberg-design for another check.
What should be done with services that can't be matched, e.g., Mastodon?
Perhaps we need a "Browse all" type control, which opens the inserter with all available icons? It's possible to see all the insertable blocks if one of the inner blocks is selected, but it's not very intuitive.
Perhaps we need a "Browse all" type control, which opens the inserter with all available icons? It's possible to see all the insertable blocks if one of the inner blocks is selected, but it's not very intuitive.
Worth a try, can we add just a "Browse" text button to the block toolbar? Or should it say "Replace"?
I am happy to experiment with a proposal. Would any of you be able to give me an example design?
I'd love to get a gut check by Rich when he gets a chance, but my thinking was this:
It could say "Replace" or "Browse", or even something else, though I'd recommend a single word.
I'd love to get a gut check by Rich when he gets a chance, but my thinking was this:
I like it, just with "Replace" at the end, like it is for the Image block.