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

Template Parts: Add an option to import widgets from the sidebars #45509

Merged
merged 20 commits into from
Dec 15, 2022

Conversation

Mamaduka
Copy link
Member

@Mamaduka Mamaduka commented Nov 3, 2022

What?

Resolves #39270.

PR introduces a new option to import sidebar widgets into a template part.

Note: This feature is only available for the block inspector and cannot be used in the template part focus mode. There it should be a part of the Template Inspector tab. I think we can do this separately as part of #36951.

Why?

See #39270.

How?

The previous sidebars are stored as a "theme mod" when a user switches to a block theme. The block theme will register fake sidebars and let WordPress do all the remapping for us. See WP-17979.

The new block inspector panel fetches these sidebars and displays them as import options. The sidebars with inactive status or without the widgets aren't displayed.

I've adapted the transformation method from the widget editor and had to add the @wordpress/widgets package as a site editor dependency to handle legacy widgets.

Todos

  • Support all theme variations that can use Template Parts. Does this feature make sense outside of the site editor?
  • Add a condition when the import option should be available. Currently, it's always displayed. I assume we only want this when the template part has no inner blocks (a blank slate).
  • Adjust text copy. Needs feedback
  • Adjust design. Needs feedback

Testing Instructions

  1. Active a classic theme.
  2. Insert widgets into the sidebars.
  3. Switch to the block theme.
  4. Open a template in the Site Editor.
  5. Add a new template part to the template.
  6. Import widgets.

Repeat the same steps with Classic Widget enabled.

Screenshots or screencast

CleanShot.2022-11-03.at.12.34.49.mp4

@codesandbox
Copy link

codesandbox bot commented Nov 3, 2022

CodeSandbox logoCodeSandbox logo  Open in CodeSandbox Web Editor | VS Code | VS Code Insiders

@Mamaduka Mamaduka self-assigned this Nov 3, 2022
@Mamaduka Mamaduka added [Type] Enhancement A suggestion for improvement. [Block] Template Part Affects the Template Parts Block labels Nov 3, 2022
@Mamaduka Mamaduka added the Needs Design Feedback Needs general design feedback. label Nov 3, 2022
@github-actions
Copy link

github-actions bot commented Nov 3, 2022

Size Change: +886 B (0%)

Total Size: 1.32 MB

Filename Size Change
build/block-library/index.min.js 197 kB +771 B (0%)
build/edit-post/index.min.js 34.7 kB +40 B (0%)
build/edit-site/index.min.js 63.6 kB +33 B (0%)
build/widgets/index.min.js 7.27 kB +42 B (+1%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 993 B
build/annotations/index.min.js 2.78 kB
build/api-fetch/index.min.js 2.27 kB
build/autop/index.min.js 2.15 kB
build/blob/index.min.js 487 B
build/block-directory/index.min.js 7.16 kB
build/block-directory/style-rtl.css 1.04 kB
build/block-directory/style.css 1.04 kB
build/block-editor/content-rtl.css 2.71 kB
build/block-editor/content.css 2.71 kB
build/block-editor/default-editor-styles-rtl.css 403 B
build/block-editor/default-editor-styles.css 403 B
build/block-editor/index.min.js 181 kB
build/block-editor/style-rtl.css 14.7 kB
build/block-editor/style.css 14.6 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 138 B
build/block-library/blocks/audio/theme.css 138 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 84 B
build/block-library/blocks/avatar/style.css 84 B
build/block-library/blocks/block/editor-rtl.css 305 B
build/block-library/blocks/block/editor.css 305 B
build/block-library/blocks/button/editor-rtl.css 485 B
build/block-library/blocks/button/editor.css 485 B
build/block-library/blocks/button/style-rtl.css 532 B
build/block-library/blocks/button/style.css 532 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 84 B
build/block-library/blocks/categories/editor.css 83 B
build/block-library/blocks/categories/style-rtl.css 100 B
build/block-library/blocks/categories/style.css 100 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 406 B
build/block-library/blocks/columns/style.css 406 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 612 B
build/block-library/blocks/cover/editor.css 613 B
build/block-library/blocks/cover/style-rtl.css 1.57 kB
build/block-library/blocks/cover/style.css 1.56 kB
build/block-library/blocks/embed/editor-rtl.css 293 B
build/block-library/blocks/embed/editor.css 293 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 138 B
build/block-library/blocks/embed/theme.css 138 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 253 B
build/block-library/blocks/file/style.css 254 B
build/block-library/blocks/file/view.min.js 353 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 984 B
build/block-library/blocks/gallery/editor.css 988 B
build/block-library/blocks/gallery/style-rtl.css 1.55 kB
build/block-library/blocks/gallery/style.css 1.55 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 654 B
build/block-library/blocks/group/editor.css 654 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 76 B
build/block-library/blocks/heading/style.css 76 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 829 B
build/block-library/blocks/image/editor.css 828 B
build/block-library/blocks/image/style-rtl.css 627 B
build/block-library/blocks/image/style.css 630 B
build/block-library/blocks/image/theme-rtl.css 137 B
build/block-library/blocks/image/theme.css 137 B
build/block-library/blocks/latest-comments/style-rtl.css 298 B
build/block-library/blocks/latest-comments/style.css 298 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 266 B
build/block-library/blocks/media-text/editor.css 263 B
build/block-library/blocks/media-text/style-rtl.css 507 B
build/block-library/blocks/media-text/style.css 505 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 716 B
build/block-library/blocks/navigation-link/editor.css 715 B
build/block-library/blocks/navigation-link/style-rtl.css 115 B
build/block-library/blocks/navigation-link/style.css 115 B
build/block-library/blocks/navigation-submenu/editor-rtl.css 299 B
build/block-library/blocks/navigation-submenu/editor.css 299 B
build/block-library/blocks/navigation/editor-rtl.css 2.15 kB
build/block-library/blocks/navigation/editor.css 2.16 kB
build/block-library/blocks/navigation/style-rtl.css 2.23 kB
build/block-library/blocks/navigation/style.css 2.21 kB
build/block-library/blocks/navigation/view-modal.min.js 2.81 kB
build/block-library/blocks/navigation/view.min.js 447 B
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 363 B
build/block-library/blocks/page-list/editor.css 363 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 174 B
build/block-library/blocks/paragraph/editor.css 174 B
build/block-library/blocks/paragraph/style-rtl.css 279 B
build/block-library/blocks/paragraph/style.css 281 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 501 B
build/block-library/blocks/post-comments-form/style.css 501 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 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 586 B
build/block-library/blocks/post-featured-image/editor.css 584 B
build/block-library/blocks/post-featured-image/style-rtl.css 318 B
build/block-library/blocks/post-featured-image/style.css 318 B
build/block-library/blocks/post-navigation-link/style-rtl.css 153 B
build/block-library/blocks/post-navigation-link/style.css 153 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 282 B
build/block-library/blocks/post-template/style.css 282 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-title/style-rtl.css 100 B
build/block-library/blocks/post-title/style.css 100 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 135 B
build/block-library/blocks/pullquote/editor.css 135 B
build/block-library/blocks/pullquote/style-rtl.css 326 B
build/block-library/blocks/pullquote/style.css 325 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 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 440 B
build/block-library/blocks/query/editor.css 440 B
build/block-library/blocks/quote/style-rtl.css 213 B
build/block-library/blocks/quote/style.css 213 B
build/block-library/blocks/quote/theme-rtl.css 223 B
build/block-library/blocks/quote/theme.css 226 B
build/block-library/blocks/read-more/style-rtl.css 132 B
build/block-library/blocks/read-more/style.css 132 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 409 B
build/block-library/blocks/search/style.css 406 B
build/block-library/blocks/search/theme-rtl.css 114 B
build/block-library/blocks/search/theme.css 114 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 234 B
build/block-library/blocks/separator/style.css 234 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 474 B
build/block-library/blocks/shortcode/editor.css 474 B
build/block-library/blocks/site-logo/editor-rtl.css 490 B
build/block-library/blocks/site-logo/editor.css 490 B
build/block-library/blocks/site-logo/style-rtl.css 203 B
build/block-library/blocks/site-logo/style.css 203 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 184 B
build/block-library/blocks/social-link/editor.css 184 B
build/block-library/blocks/social-links/editor-rtl.css 674 B
build/block-library/blocks/social-links/editor.css 673 B
build/block-library/blocks/social-links/style-rtl.css 1.4 kB
build/block-library/blocks/social-links/style.css 1.39 kB
build/block-library/blocks/spacer/editor-rtl.css 332 B
build/block-library/blocks/spacer/editor.css 332 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 457 B
build/block-library/blocks/table/editor.css 457 B
build/block-library/blocks/table/style-rtl.css 636 B
build/block-library/blocks/table/style.css 635 B
build/block-library/blocks/table/theme-rtl.css 184 B
build/block-library/blocks/table/theme.css 184 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 404 B
build/block-library/blocks/template-part/editor.css 404 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/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 691 B
build/block-library/blocks/video/editor.css 694 B
build/block-library/blocks/video/style-rtl.css 179 B
build/block-library/blocks/video/style.css 179 B
build/block-library/blocks/video/theme-rtl.css 139 B
build/block-library/blocks/video/theme.css 139 B
build/block-library/classic-rtl.css 162 B
build/block-library/classic.css 162 B
build/block-library/common-rtl.css 1.05 kB
build/block-library/common.css 1.05 kB
build/block-library/editor-elements-rtl.css 75 B
build/block-library/editor-elements.css 75 B
build/block-library/editor-rtl.css 11.7 kB
build/block-library/editor.css 11.7 kB
build/block-library/elements-rtl.css 54 B
build/block-library/elements.css 54 B
build/block-library/reset-rtl.css 478 B
build/block-library/reset.css 478 B
build/block-library/style-rtl.css 12.4 kB
build/block-library/style.css 12.4 kB
build/block-library/theme-rtl.css 716 B
build/block-library/theme.css 721 B
build/block-serialization-default-parser/index.min.js 1.13 kB
build/block-serialization-spec-parser/index.min.js 2.83 kB
build/blocks/index.min.js 50.4 kB
build/components/index.min.js 204 kB
build/components/style-rtl.css 11.7 kB
build/components/style.css 11.7 kB
build/compose/index.min.js 12.3 kB
build/core-data/index.min.js 15.9 kB
build/customize-widgets/index.min.js 11.7 kB
build/customize-widgets/style-rtl.css 1.41 kB
build/customize-widgets/style.css 1.41 kB
build/data-controls/index.min.js 663 B
build/data/index.min.js 8.14 kB
build/date/index.min.js 32.1 kB
build/deprecated/index.min.js 518 B
build/dom-ready/index.min.js 336 B
build/dom/index.min.js 4.74 kB
build/edit-navigation/index.min.js 16.2 kB
build/edit-navigation/style-rtl.css 4.14 kB
build/edit-navigation/style.css 4.15 kB
build/edit-post/classic-rtl.css 571 B
build/edit-post/classic.css 571 B
build/edit-post/style-rtl.css 7.49 kB
build/edit-post/style.css 7.48 kB
build/edit-site/style-rtl.css 9.08 kB
build/edit-site/style.css 9.08 kB
build/edit-widgets/index.min.js 16.8 kB
build/edit-widgets/style-rtl.css 4.48 kB
build/edit-widgets/style.css 4.49 kB
build/editor/index.min.js 44.1 kB
build/editor/style-rtl.css 3.69 kB
build/editor/style.css 3.68 kB
build/element/index.min.js 4.72 kB
build/escape-html/index.min.js 548 B
build/experiments/index.min.js 882 B
build/format-library/index.min.js 7.2 kB
build/format-library/style-rtl.css 598 B
build/format-library/style.css 597 B
build/hooks/index.min.js 1.66 kB
build/html-entities/index.min.js 454 B
build/i18n/index.min.js 3.79 kB
build/is-shallow-equal/index.min.js 535 B
build/keyboard-shortcuts/index.min.js 1.79 kB
build/keycodes/index.min.js 1.86 kB
build/list-reusable-blocks/index.min.js 2.13 kB
build/list-reusable-blocks/style-rtl.css 865 B
build/list-reusable-blocks/style.css 865 B
build/media-utils/index.min.js 2.94 kB
build/notices/index.min.js 977 B
build/nux/index.min.js 2.07 kB
build/nux/style-rtl.css 775 B
build/nux/style.css 771 B
build/plugins/index.min.js 1.95 kB
build/preferences-persistence/index.min.js 2.23 kB
build/preferences/index.min.js 1.35 kB
build/primitives/index.min.js 960 B
build/priority-queue/index.min.js 1.59 kB
build/react-i18n/index.min.js 702 B
build/react-refresh-entry/index.min.js 8.44 kB
build/react-refresh-runtime/index.min.js 7.31 kB
build/redux-routine/index.min.js 2.75 kB
build/reusable-blocks/index.min.js 2.26 kB
build/reusable-blocks/style-rtl.css 283 B
build/reusable-blocks/style.css 283 B
build/rich-text/index.min.js 10.7 kB
build/server-side-render/index.min.js 2.09 kB
build/shortcode/index.min.js 1.52 kB
build/style-engine/index.min.js 1.51 kB
build/token-list/index.min.js 650 B
build/url/index.min.js 3.7 kB
build/vendors/inert-polyfill.min.js 2.48 kB
build/vendors/react-dom.min.js 41.8 kB
build/vendors/react.min.js 4.02 kB
build/viewport/index.min.js 1.09 kB
build/warning/index.min.js 280 B
build/widgets/style-rtl.css 1.21 kB
build/widgets/style.css 1.21 kB
build/wordcount/index.min.js 1.06 kB

compressed-size-action

@jasmussen
Copy link
Contributor

Nice one. How can I best help or provide feedback?

Thanks for including a video. It sounds like you don't have to do the widget importing before switching to a new block theme, is that right?

The term "Import" makes it sound one-way. But what if I sneakily rememberd the URL of the widget editor, and added new blocks there, would they appear in the template part mapped to the area? Not suggesting this is a good flow, just wondering if we can learn anything from the navigation block here, in terms of how it handles classic menus and importing. I.e. is there a way for the entire "import" panel to disappear once you've imported all widget areas?

@jameskoster
Copy link
Contributor

Thanks for working on this.

My first thought is that the import functionality seems a bit too prominent, but I don't have a better suggestion right now.

The UI could do with some help text to explain what is going on. "Select sidebar" may not be the best language – not all widget areas are sidebars.

The term "Import" makes it sound one-way

I think it probably should be one-way? Syncing a template part with a widget area sounds like a potential can of worms :D I agree, it would probably be best for the import UI to disappear after a successful import.

Adding the Needs Design label as I think this needs a little more exploration to get the UX right.

@jameskoster jameskoster added the Needs Design Needs design efforts. label Nov 3, 2022
@Mamaduka
Copy link
Member Author

Mamaduka commented Nov 3, 2022

@jasmussen, any feedback is more than welcome. For example, does the panel design look okay?

It sounds like you don't have to do the widget importing before switching to a new block theme, is that right?

That's correct. No action is required before switching themes.

The term "Import" makes it sound one-way.

Yes, the import is one-directional. As a result, the template part won't be in sync with the imported sidebar. But if you add more widgets to the sidebar, the following import will contain those widgets.

is there a way for the entire "import" panel to disappear once you've imported all widget areas?

I also put a similar item on the PR's to-do list. I think the option should be only visible for the blank template part.

The UI could do with some help text to explain what is going on. "Select sidebar" may not be the best language – not all widget areas are sidebars.

@jameskoster, you're right! I was just using REST API terminology here.

@jameskoster
Copy link
Contributor

I think the option should be only visible for the blank template part.

That was my initial thought as well. The 'import' UI might be better placed in the placeholder:

Screenshot 2022-11-03 at 11 11 58

@Mamaduka
Copy link
Member Author

Mamaduka commented Nov 3, 2022

The 'import' UI might be better placed in the placeholder

If I remember correctly, Navigation's "Import classic menu" changed places from Placeholder -> Block Toolbar -> Inspector Controls (as part of the general menu dropdown).

I'm not against the idea, but we should probably see if the same placement logic applies here as well.

@jasmussen
Copy link
Contributor

My first thought is that the import functionality seems a bit too prominent, but I don't have a better suggestion right now.

Yes, the import is one-directional. As a result, the template part won't be in sync with the imported sidebar. But if you add more widgets to the sidebar, the following import will contain those widgets.

I also put a similar item on the PR's to-do list. I think the option should be only visible for the blank template part.

I think there are some dots we can connect here!

The thing is: if you have unimported widgets, it seems okay that the UI is very prominent. Especially if we can hide it entirely once you've imported widgets.

I imagine there's a challenge there: do we delete widgets once they are imported as blocks? Or do we leave them, and what then happens if you add a new widget to an area: does the importer appear again? And if it does, does it then import only new widgets, or all widgets once again?

Of course we'll want to lean towards the simplest solution in all of this. But it would be nice if we could hide the import control upon successful import.

@jameskoster
Copy link
Contributor

The thing is: if you have unimported widgets, it seems okay that the UI is very prominent

Only for empty template parts though, right? I don't think we should surface the import interface this prominently when you've selected an existing template part.

Or do we leave them, and what then happens if you add a new widget to an area: does the importer appear again? And if it does, does it then import only new widgets, or all widgets once again?

I don't think it needs to be so complex. The 'import' should merely be a shortcut to pull blocks from a widget area into an empty template part. The two things remain entirely disconnected.

If we wanted to keep them connected (not my preference) then I would consider an entirely different approach: surface widget areas in the Inserter as template part variations. No 'importing'.

@carolinan
Copy link
Contributor

I assume we only want this when the template part has no inner blocks (a blank slate).

Do you not think it may be common to want to import widget areas to footer template parts which already has blocks? Like updating a default footer instead of needing to create a new.

@jameskoster
Copy link
Contributor

Yes that's a fair point. It should probably be possible to repeat the process somehow. Though in that particular use case I would question whether the imported widget areas need to be template parts in their own right, considering they're being placed inside one?

The current implementation still feels way too prominent to me though, given how infrequent this task will be performed in the grand scheme of things. It's generally going to be a one-time thing per widget area, and as above it's not even guaranteed that the imported widget areas need to remain synchronised. That really depends on things like how the classic theme was set up, and what kind of widget area you're migrating.

A different approach entirely – as @Mamaduka suggests – would be to do something like the Navigation block, whereby you insert a "Widget Area" block (which is possible only if widget areas already exist), and via the Inspector select which area you want to display:

Screenshot 2022-11-03 at 13 28 43

It makes some sense conceptually seeing as both blocks are offering a migratory path from legacy functionality.

The unique thing with widget areas is that they really make no sense unless some already exist at the site. In the world of full-block themes their functionality replaced entirely by the Template Part paradigm, and crossing those streams feels a bit troublesome to me.

@Mamaduka
Copy link
Member Author

Mamaduka commented Nov 3, 2022

Using widget areas was initially suggested by @noisysocks as one of the options (#39270 (comment)).

I personally like the idea of importing the blocks and forgetting about sidebars/widget areas 😄

@jameskoster
Copy link
Contributor

I personally like the idea of importing the blocks and forgetting about sidebars/widget areas 😄

On balance that is my preference as well. Let's explore the design a bit more.

@jameskoster
Copy link
Contributor

Here's a potential design:

tp.mp4

When widget areas exist, The Template Part placeholder provides an option to migrate them into the new template part. The description outlines that a new template part will be created when you migrate which hopefully clarifies the unidirectional nature of the action.

To satisfy the flow @carolinan mentioned above you'd simply repeat the process: Insert a Template Part block, and select the widget area you want to migrate.

I think this seems reasonable, but keen to hear thoughts!

@annezazu annezazu mentioned this pull request Nov 7, 2022
57 tasks
@noisysocks
Copy link
Member

I still need to test the new branch, but I think the current legacy widget transformations will ignore 3rd-party widgets.

Ah, damn, yeah that's a really good point.

Does getPossibleBlockTransformations work without registering the Legacy Widgets block? If I remember correctly, some internal functions use block-type checks.

It won't work, no. getPossibleBlockTransformations will look through the registered blocks to gather the list of possible transforms.

Copy link
Member

@noisysocks noisysocks left a comment

Choose a reason for hiding this comment

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

Let's get this in for now.

I don't love that we're duplicating the transformWidgetToBlock code and that we're always registering Legacy Widget even though it's hidden and/or won't function properly. But this seems to be the most practical approach for now and the changes are minimal meaning they don't preclude us from changing the approach in the future.

Thanks for your patience while we've worked through the details of this and explored different ideas 😅 And nice work!!

@Mamaduka
Copy link
Member Author

Thanks for testing and reviews, @noisysocks!

@Mamaduka Mamaduka merged commit 1e6538b into trunk Dec 15, 2022
@Mamaduka Mamaduka deleted the try/template-parts-import-widgets branch December 15, 2022 05:11
@github-actions github-actions bot added this to the Gutenberg 14.9 milestone Dec 15, 2022
dmsnell pushed a commit that referenced this pull request Dec 15, 2022
…5509)

* Template Part: Introduce an option to import widgets
* Only display active sidebars with widgets as options
* Use the sidebar name as the new template part title
* Support legacy widgets
* Prefix imported template parts to avoid name collision
* Add missing docblock
* Update labels
* Move settings into the advanced inspector controls panel
* Update API response for sidebars and mark them as 'inactive'
* A minor design adjustments
* Fix the rendering order bug
* Transform legacy widgets before importing
* Avoid hardcoding names of the blocks with wildcard transformations
* Skip 'wp_inactive_widgets' widget area
* Use 'HStack'
* Allow overriding Legacy Widget block settings during registration
* Override only supports settings
* Improve spacing
* Add the legacy widget to the post editor

Co-authored-by: Robert Anderson <[email protected]>
@burnuser
Copy link

Had a problem with first try (even with fresh WP install) and Gutenberg 14.9 and 14.9.1
1.) Twenty Sixteen with existing sidebar and footer widgets => change to Twenty Twenty Two => installing Gutenberg => Site-Editor => new template part => no import option
2.) Only after going back to Twenty Sixteen, changing something in the sidebar and change again to Twenty Twenty Two, the import option is there (and works)

@Mamaduka
Copy link
Member Author

Thanks for contributing, @burnuser!

Do you mind creating a new issue with reproduction steps?

@burnuser
Copy link

#47003

@femkreations femkreations added the Needs User Documentation Needs new user documentation label Feb 1, 2023
pento pushed a commit to WordPress/wordpress-develop that referenced this pull request Feb 3, 2023
When switching to a block theme, classic sidebars were orphaned and their widgets remapping to the `'wp_inactive_widgets'` sidebar . This changeset preserves the sidebars and their widgets, providing a migration path to a block theme without losing the widgets.

Classic sidebars are now:

* Stored in a new theme mod called `'wp_classic_sidebars'`;
* Restored to the `$wp_registered_sidebars` global variable when the `'widgets_init'` action fires (via a new internal function called `_wp_block_theme_register_classic_sidebars()`);
* And marked as `'inactive'` when interacting with sidebars REST API endpoint.

References:
* [WordPress/gutenberg#45509 Gutenberg PR 45509] which adds an option for importing widgets from sidebars into template parts.

Follow-up to [50995], [6334].

Props mamaduka, audrasjb, hellofromTonya, ironprogrammer, jameskoster, joen, matveb, mukesh27, noisysocks, poena, youknowriad.
Fixes #57531.

git-svn-id: https://develop.svn.wordpress.org/trunk@55200 602fd350-edb4-49c9-b593-d223f7449a82
markjaquith pushed a commit to markjaquith/WordPress that referenced this pull request Feb 3, 2023
When switching to a block theme, classic sidebars were orphaned and their widgets remapping to the `'wp_inactive_widgets'` sidebar . This changeset preserves the sidebars and their widgets, providing a migration path to a block theme without losing the widgets.

Classic sidebars are now:

* Stored in a new theme mod called `'wp_classic_sidebars'`;
* Restored to the `$wp_registered_sidebars` global variable when the `'widgets_init'` action fires (via a new internal function called `_wp_block_theme_register_classic_sidebars()`);
* And marked as `'inactive'` when interacting with sidebars REST API endpoint.

References:
* [WordPress/gutenberg#45509 Gutenberg PR 45509] which adds an option for importing widgets from sidebars into template parts.

Follow-up to [50995], [6334].

Props mamaduka, audrasjb, hellofromTonya, ironprogrammer, jameskoster, joen, matveb, mukesh27, noisysocks, poena, youknowriad.
Fixes #57531.
Built from https://develop.svn.wordpress.org/trunk@55200


git-svn-id: http://core.svn.wordpress.org/trunk@54733 1a063a9b-81f0-0310-95a4-ce76da25c4cd
github-actions bot pushed a commit to platformsh/wordpress-performance that referenced this pull request Feb 3, 2023
When switching to a block theme, classic sidebars were orphaned and their widgets remapping to the `'wp_inactive_widgets'` sidebar . This changeset preserves the sidebars and their widgets, providing a migration path to a block theme without losing the widgets.

Classic sidebars are now:

* Stored in a new theme mod called `'wp_classic_sidebars'`;
* Restored to the `$wp_registered_sidebars` global variable when the `'widgets_init'` action fires (via a new internal function called `_wp_block_theme_register_classic_sidebars()`);
* And marked as `'inactive'` when interacting with sidebars REST API endpoint.

References:
* [WordPress/gutenberg#45509 Gutenberg PR 45509] which adds an option for importing widgets from sidebars into template parts.

Follow-up to [50995], [6334].

Props mamaduka, audrasjb, hellofromTonya, ironprogrammer, jameskoster, joen, matveb, mukesh27, noisysocks, poena, youknowriad.
Fixes #57531.
Built from https://develop.svn.wordpress.org/trunk@55200


git-svn-id: https://core.svn.wordpress.org/trunk@54733 1a063a9b-81f0-0310-95a4-ce76da25c4cd
@bph bph added the Needs Dev Note Requires a developer note for a major WordPress release cycle label Feb 8, 2023
@bph bph mentioned this pull request Feb 8, 2023
47 tasks
VenusPR added a commit to VenusPR/Wordpress_Richard that referenced this pull request Mar 9, 2023
When switching to a block theme, classic sidebars were orphaned and their widgets remapping to the `'wp_inactive_widgets'` sidebar . This changeset preserves the sidebars and their widgets, providing a migration path to a block theme without losing the widgets.

Classic sidebars are now:

* Stored in a new theme mod called `'wp_classic_sidebars'`;
* Restored to the `$wp_registered_sidebars` global variable when the `'widgets_init'` action fires (via a new internal function called `_wp_block_theme_register_classic_sidebars()`);
* And marked as `'inactive'` when interacting with sidebars REST API endpoint.

References:
* [WordPress/gutenberg#45509 Gutenberg PR 45509] which adds an option for importing widgets from sidebars into template parts.

Follow-up to [50995], [6334].

Props mamaduka, audrasjb, hellofromTonya, ironprogrammer, jameskoster, joen, matveb, mukesh27, noisysocks, poena, youknowriad.
Fixes #57531.
Built from https://develop.svn.wordpress.org/trunk@55200


git-svn-id: http://core.svn.wordpress.org/trunk@54733 1a063a9b-81f0-0310-95a4-ce76da25c4cd
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Template Part Affects the Template Parts Block Needs Dev Note Requires a developer note for a major WordPress release cycle Needs User Documentation Needs new user documentation [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Provide a pathway to migrate widgets to block themes