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

Site Editor: Add Library for Template Parts & Patterns Management #51078

Merged
merged 73 commits into from
Jun 21, 2023

Conversation

aaronrobertshaw
Copy link
Contributor

@aaronrobertshaw aaronrobertshaw commented May 30, 2023

Fixes: #50028

Related:

What?

Introduces an admin section "Library" for managing template parts and patterns.

🤖 Generated by Copilot at e08f66f

This pull request introduces a new feature for block patterns that can be saved and synced across the site. It renames the existing Reusable block block type to Pattern and adds a source property to distinguish core and user patterns. It also adds compatibility for WordPress 6.3 by loading custom files and extending the REST API. It updates the block editor, the edit site, and the block library packages to support the new feature. It modifies the documentation, the tests, and the labels to reflect the new terminology.

Important Notes

Pattern categorization was explored via a new taxonomy in #51144 however given the tight timeframe before 6.3's beta, we've removed that in favour of initially displaying all patterns in the "Your Patterns" category.

There is currently no pagination for the "Your Patterns" category.

It's possible we may get the above approved as "blessed" tasks however for the time being the current state of this PR should be an MVP we can land for 6.3.

Why?

See #50028 for discussion and history.

How?

  • Builds upon the work done in Reusable blocks: Rename to 'Patterns' and add option to also add a non-synced Pattern #51144 which renames Reusable Blocks to Patterns and allows user-created non-synced patterns. It also extends the the wp_block CPT to add custom post meta
  • A new attribute has been added to the pattern items returned by the REST controller to facilitate filtering of core patterns
  • Adds new PostSyncStatus component to allow changing whether a user created pattern is synced or not
  • Adds change-case and remove-accents dependencies to the site editor package so pattern filtering can match the block editor inserter
  • New AddNewPattern and CreatePatternModal components added to allow pattern creation in the site editor library
  • Removes old template part creation from AddNewTemplate
  • Updates CreateTemplatePartModal to be consistent with the patterns modal
  • Improves sidebar and navigation for mobile viewports
  • Updates PageLibrary adding new hooks and components to combine display of template parts and patterns
  • Tweaks the path for PageMain to render PageLibrary
  • Adds custom class support to the site editor's Page component to aid styling
  • Adds suffix support to sidebar navigation items
  • Adds new sidebar navigation screens for the Library and Patterns
  • Updates the main sidebar navigation screen to navigate to the library path
  • Removes the old template part sidebar navigation screen
  • Updates the sidebar navigation screen to accept a custom backPath prop
  • Updates routing in site editor's sidebar
  • Updates sync-state-with-url hooks to work with the Library or set wp_block entity from URL params
  • Adds setReusableBlock action in the edit-site store
  • Updates the get-is-list-page.js util to include Library pages
  • Adds debounced input hook for pattern filtering purposes

🤖 Generated by Copilot at e08f66f

  • Rename the Reusable block block type to Pattern and update the labels and titles of the inserter tabs, menu items, and modal dialogs to reflect the new terminology (link, link, link, link, link, link, link, link, link, link, link, link)
  • Add the source property to the block patterns schema and response and register the core patterns with the core source for WordPress 6.3 compatibility (link, link, link)
  • Add custom fields support to the wp_block post type and register the wp_block_sync_status meta field to store the sync status of a pattern for WordPress 6.3 compatibility (link)
  • Add the PostSyncStatus component to the post status sidebar panel to display the sync status of a pattern and allow toggling it (link, link)
  • Add the setReusableBlock action to the edit site store to set a reusable block (or pattern) in the store (link)
  • Add a condition to the block block edit function to check if the block is an unsynced pattern and replace its blocks with cloned blocks to avoid editing the original pattern content (link, link, link)
  • Add the code that clicks the sync toggle input in the create reusable block modal to enable syncing the pattern with the original content (link, link)
  • Add the change-case and remove-accents dependencies to the edit site package to use them for converting the pattern titles to kebab case for the slug (link, link)
  • Remove the gutenberg_load_remote_block_patterns and related functions from the WordPress 6.2 compatibility file and move them to the WordPress 6.3 compatibility file with some modifications (link, link)
  • Add the custom block patterns controller and functions files to the load file for WordPress 6.3 compatibility (link, link)

Testing Instructions

  1. Load the site editor and navigate to the Library via the sidebar navigation
  2. Ensure you can navigate between pattern categories and navigate back to appropriate screens
  3. Confirm that the correct Template Parts are displayed in the top Template Part categories i.e. Headers, Footers, and Uncategorized.
  4. Ensure your current theme's patterns show in categories below the template parts (e.g. for TT3, there'll be three categories Featured, Posts, and Footers. Yes, currently there'll be some overlap in categories. Each category for TT3 will have a single pattern.)
  5. Via the sidebar nav screen's + button create a template part
  6. There should be no core patterns displayed in any category.
  7. Your user created patterns (including reusable blocks should be included under a Custom Patterns category
  8. Create some synced patterns (formerly reusable blocks) and some unsyced patterns. This can be done via the + button next to the Library navigation screens title or by selecting blocks in the Block Editor and choosing "create a pattern" from the block toolbar's more menu.
  9. After creating some patterns make sure that the synced blocks are displayed together in a section above the unsynced patterns.
  10. Synced patterns should have a highlighted icon beside their name
  11. Confirm that Template Parts and your user created patterns can be edited and saved
  12. Ensure that theme supplied patterns cannot be edited
  13. Navigate back to Your Patterns and delete one of your patterns
  14. Ensure the category counts in the sidebar navigation are still correct
  15. Try filtering patterns in a category and that they are filtered as expected
  16. Load the site editor on mobile and give the navigation a thorough test

Testing Instructions for Keyboard

  1. Load the site editor and tab through to the Library sidebar navigation option and hit enter or space
  2. Tab through the Library navigation screen and confirm access to the "Create a Pattern" dropdown which offers options to create a template part or pattern
  3. Create both a template part and pattern, ensuring you can tab through the modal form fields, update as desired and save
  4. Tab through into the block editor and update the template part/pattern before saving
  5. Confirm you can tab back to the "Open Navigation" button and that pressing enter reopens the sidebar navigation
  6. Hit tab until you reach the "Back" button and hit enter
  7. You should be back in the Library, on the category previously selected
  8. Tab through other categories and hit enter to display that categories patterns
  9. Tab through to the Library page's "Search patterns" input and try filtering the displayed patterns
  10. Navigate back to the sidebar navigation and select a theme pattern category e.g. "Featured". Tab back into the library can confirm you cannot select or edit those patterns
  11. Navigate back to the sidebar navigation and select "Your Patterns", tab through to the patterns, selecting one and pressing enter. You should be taken to the editor for that pattern.
  12. Navigate back to the library category, this time tab through until you get to a pattern's "Actions" dropdown. Press enter to see the available actions, there should only be one to delete the pattern. Select that and confirm the pattern was deleted.
  13. Confirm you can also tab through to the "Manage all reusable blocks" nav item and that it will take you through to the wp-admin page for the wp_block CPT.

Screenshots or screencast

Screen.Recording.2023-06-16.at.3.46.59.pm.mp4

@aaronrobertshaw aaronrobertshaw self-assigned this May 30, 2023
@aaronrobertshaw aaronrobertshaw force-pushed the try/site-editor-library branch from 443dedf to 8c29a7a Compare May 30, 2023 05:50
@github-actions
Copy link

github-actions bot commented May 30, 2023

Size Change: +6.47 kB (0%)

Total Size: 1.42 MB

Filename Size Change
build/edit-site/index.min.js 79.3 kB +5.84 kB (+8%) 🔍
build/edit-site/style-rtl.css 12.2 kB +315 B (+3%)
build/edit-site/style.css 12.2 kB +319 B (+3%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 955 B
build/annotations/index.min.js 2.69 kB
build/api-fetch/index.min.js 2.29 kB
build/autop/index.min.js 2.1 kB
build/blob/index.min.js 451 B
build/block-directory/index.min.js 6.99 kB
build/block-directory/style-rtl.css 1.02 kB
build/block-directory/style.css 1.02 kB
build/block-editor/content-rtl.css 4.22 kB
build/block-editor/content.css 4.22 kB
build/block-editor/default-editor-styles-rtl.css 381 B
build/block-editor/default-editor-styles.css 381 B
build/block-editor/index.min.js 197 kB
build/block-editor/style-rtl.css 14.9 kB
build/block-editor/style.css 14.9 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 126 B
build/block-library/blocks/audio/theme.css 126 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 305 B
build/block-library/blocks/block/editor.css 305 B
build/block-library/blocks/button/editor-rtl.css 584 B
build/block-library/blocks/button/editor.css 582 B
build/block-library/blocks/button/style-rtl.css 624 B
build/block-library/blocks/button/style.css 623 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 409 B
build/block-library/blocks/columns/style.css 409 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 647 B
build/block-library/blocks/cover/editor.css 650 B
build/block-library/blocks/cover/style-rtl.css 1.61 kB
build/block-library/blocks/cover/style.css 1.6 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 159 B
build/block-library/blocks/details/style.css 159 B
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 126 B
build/block-library/blocks/embed/theme.css 126 B
build/block-library/blocks/file/editor-rtl.css 316 B
build/block-library/blocks/file/editor.css 316 B
build/block-library/blocks/file/interactivity.min.js 395 B
build/block-library/blocks/file/style-rtl.css 269 B
build/block-library/blocks/file/style.css 270 B
build/block-library/blocks/file/view.min.js 375 B
build/block-library/blocks/freeform/editor-rtl.css 2.58 kB
build/block-library/blocks/freeform/editor.css 2.58 kB
build/block-library/blocks/gallery/editor-rtl.css 947 B
build/block-library/blocks/gallery/editor.css 952 B
build/block-library/blocks/gallery/style-rtl.css 1.53 kB
build/block-library/blocks/gallery/style.css 1.53 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 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 336 B
build/block-library/blocks/html/editor.css 337 B
build/block-library/blocks/image/editor-rtl.css 834 B
build/block-library/blocks/image/editor.css 833 B
build/block-library/blocks/image/interactivity.min.js 1.34 kB
build/block-library/blocks/image/style-rtl.css 1.34 kB
build/block-library/blocks/image/style.css 1.34 kB
build/block-library/blocks/image/theme-rtl.css 126 B
build/block-library/blocks/image/theme.css 126 B
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 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 712 B
build/block-library/blocks/navigation-link/editor.css 711 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 296 B
build/block-library/blocks/navigation-submenu/editor.css 295 B
build/block-library/blocks/navigation/editor-rtl.css 2.35 kB
build/block-library/blocks/navigation/editor.css 2.36 kB
build/block-library/blocks/navigation/interactivity.min.js 978 B
build/block-library/blocks/navigation/style-rtl.css 2.21 kB
build/block-library/blocks/navigation/style.css 2.2 kB
build/block-library/blocks/navigation/view-modal.min.js 2.78 kB
build/block-library/blocks/navigation/view.min.js 438 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 401 B
build/block-library/blocks/page-list/editor.css 401 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 508 B
build/block-library/blocks/post-comments-form/style.css 508 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 588 B
build/block-library/blocks/post-featured-image/editor.css 586 B
build/block-library/blocks/post-featured-image/style-rtl.css 319 B
build/block-library/blocks/post-featured-image/style.css 319 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 314 B
build/block-library/blocks/post-template/style.css 314 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 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 335 B
build/block-library/blocks/pullquote/style.css 335 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 450 B
build/block-library/blocks/query/editor.css 449 B
build/block-library/blocks/quote/style-rtl.css 222 B
build/block-library/blocks/quote/style.css 222 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 149 B
build/block-library/blocks/rss/editor.css 149 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 178 B
build/block-library/blocks/search/editor.css 178 B
build/block-library/blocks/search/style-rtl.css 587 B
build/block-library/blocks/search/style.css 584 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 531 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 323 B
build/block-library/blocks/shortcode/editor.css 323 B
build/block-library/blocks/site-logo/editor-rtl.css 754 B
build/block-library/blocks/site-logo/editor.css 754 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.43 kB
build/block-library/blocks/social-links/style.css 1.42 kB
build/block-library/blocks/spacer/editor-rtl.css 348 B
build/block-library/blocks/spacer/editor.css 348 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 433 B
build/block-library/blocks/table/editor.css 433 B
build/block-library/blocks/table/style-rtl.css 645 B
build/block-library/blocks/table/style.css 644 B
build/block-library/blocks/table/theme-rtl.css 146 B
build/block-library/blocks/table/theme.css 146 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 403 B
build/block-library/blocks/template-part/editor.css 403 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/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 174 B
build/block-library/blocks/video/style.css 174 B
build/block-library/blocks/video/theme-rtl.css 126 B
build/block-library/blocks/video/theme.css 126 B
build/block-library/classic-rtl.css 179 B
build/block-library/classic.css 179 B
build/block-library/common-rtl.css 1.1 kB
build/block-library/common.css 1.1 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.1 kB
build/block-library/elements-rtl.css 54 B
build/block-library/elements.css 54 B
build/block-library/index.min.js 199 kB
build/block-library/interactivity/runtime.min.js 2.69 kB
build/block-library/interactivity/vendors.min.js 8.2 kB
build/block-library/reset-rtl.css 478 B
build/block-library/reset.css 478 B
build/block-library/style-rtl.css 13.5 kB
build/block-library/style.css 13.5 kB
build/block-library/theme-rtl.css 686 B
build/block-library/theme.css 691 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 50.9 kB
build/commands/index.min.js 14.9 kB
build/commands/style-rtl.css 827 B
build/commands/style.css 827 B
build/components/index.min.js 240 kB
build/components/style-rtl.css 11.8 kB
build/components/style.css 11.8 kB
build/compose/index.min.js 12 kB
build/core-commands/index.min.js 2.12 kB
build/core-data/index.min.js 15.7 kB
build/customize-widgets/index.min.js 11.9 kB
build/customize-widgets/style-rtl.css 1.46 kB
build/customize-widgets/style.css 1.45 kB
build/data-controls/index.min.js 640 B
build/data/index.min.js 8.25 kB
build/date/index.min.js 40.4 kB
build/deprecated/index.min.js 451 B
build/dom-ready/index.min.js 324 B
build/dom/index.min.js 4.63 kB
build/edit-post/classic-rtl.css 544 B
build/edit-post/classic.css 545 B
build/edit-post/index.min.js 33.9 kB
build/edit-post/style-rtl.css 7.58 kB
build/edit-post/style.css 7.57 kB
build/edit-widgets/index.min.js 16.8 kB
build/edit-widgets/style-rtl.css 4.53 kB
build/edit-widgets/style.css 4.53 kB
build/editor/index.min.js 44.6 kB
build/editor/style-rtl.css 3.58 kB
build/editor/style.css 3.58 kB
build/element/index.min.js 4.8 kB
build/escape-html/index.min.js 537 B
build/format-library/index.min.js 7.63 kB
build/format-library/style-rtl.css 554 B
build/format-library/style.css 553 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/is-shallow-equal/index.min.js 527 B
build/keyboard-shortcuts/index.min.js 1.64 kB
build/keycodes/index.min.js 1.84 kB
build/list-reusable-blocks/index.min.js 2.13 kB
build/list-reusable-blocks/style-rtl.css 836 B
build/list-reusable-blocks/style.css 836 B
build/media-utils/index.min.js 2.9 kB
build/notices/index.min.js 948 B
build/plugins/index.min.js 1.77 kB
build/preferences-persistence/index.min.js 1.84 kB
build/preferences/index.min.js 1.24 kB
build/primitives/index.min.js 943 B
build/priority-queue/index.min.js 1.52 kB
build/private-apis/index.min.js 939 B
build/react-i18n/index.min.js 615 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.7 kB
build/reusable-blocks/index.min.js 2.38 kB
build/reusable-blocks/style-rtl.css 243 B
build/reusable-blocks/style.css 243 B
build/rich-text/index.min.js 10.7 kB
build/router/index.min.js 1.77 kB
build/server-side-render/index.min.js 1.94 kB
build/shortcode/index.min.js 1.39 kB
build/style-engine/index.min.js 1.42 kB
build/token-list/index.min.js 582 B
build/url/index.min.js 3.57 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 958 B
build/warning/index.min.js 268 B
build/widgets/index.min.js 7.16 kB
build/widgets/style-rtl.css 1.15 kB
build/widgets/style.css 1.16 kB
build/wordcount/index.min.js 1.02 kB

compressed-size-action

@github-actions
Copy link

github-actions bot commented May 30, 2023

Flaky tests detected in ea08bb0.
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/5331833101
📝 Reported issues:

@aaronrobertshaw aaronrobertshaw force-pushed the try/site-editor-library branch from 4dc29d5 to fd5f025 Compare June 2, 2023 06:30
@aaronrobertshaw aaronrobertshaw changed the title [WIP] Site Editor: Add Library page for Template Parts and Patterns [WIP] Site Editor: Add Library for Template Parts & Patterns Management Jun 7, 2023
@aaronrobertshaw aaronrobertshaw force-pushed the try/site-editor-library branch 3 times, most recently from 8e640c3 to fca8f9d Compare June 13, 2023 08:19
@aaronrobertshaw aaronrobertshaw force-pushed the try/site-editor-library branch 2 times, most recently from fabeda3 to e5b1ab7 Compare June 16, 2023 02:42
@aaronrobertshaw aaronrobertshaw added [Feature] Patterns A collection of blocks that can be synced (previously reusable blocks) or unsynced [Block] Template Part Affects the Template Parts Block [Package] Edit Site /packages/edit-site [Feature] Site Editor Related to the overarching Site Editor (formerly "full site editing") [Type] Enhancement A suggestion for improvement. [Type] Feature New feature to highlight in changelogs. labels Jun 16, 2023
Comment on lines +180 to +187
showSidebar
? { opacity: 1, display: 'block' }
: {
opacity: 0,
transitionEnd: {
display: 'none',
},
}
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Instead of completely avoiding rendering the sidebar, we simply hide it here, so that some routing syncing logic in the sidebar can still apply in some senerios.

Original explanation: #51558 (comment)

Comment on lines +54 to +60
// Go back in history if we came from the library page.
// Otherwise push a stack onto the history.
if ( location.state?.backPath === '/library' ) {
history.back();
} else {
history.push( { path: '/library' } );
}
Copy link
Contributor Author

Choose a reason for hiding this comment

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

The reason we have to do this instead of leveraging NavigatorToParentButton is because this tree isn't wrapped in the NavigatorProvider context, nor is it under the /library subtree of the NavigatorScreen, so navigator.goBack() won't work here.

Original explanation: #51558 (comment)

Comment on lines +4 to +5
import removeAccents from 'remove-accents';
import { noCase } from 'change-case';
Copy link
Contributor Author

Choose a reason for hiding this comment

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

These dependencies were added to the edit-site package to mirror the block editor's filtering in the inserter. Given the dependencies were already within the overall project we didn't see it as a blocker to add them here.

*
* @return {Array} Filtered item list.
*/
export const searchItems = ( items = [], searchInput = '', config = {} ) => {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

It would have been nice to be able to reuse the util functions from the block editor however our filtering needs in the library ended up differing to the point it was easier to bring these in and update as required given the short time to 6.3.

When the dust settles we might be able to find some common ground and extract a shared util.


// If we aren't filtering on search terms, matching on category is satisfactory.
// If we are, then we need more than a category match.
const threshold = onlyFilterByCategory ? 0 : 1;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This "threshold" for the search enabled us to avoid having to loop all patterns etc first to filter by category before then repeating that to filter by search terms.

@aaronrobertshaw aaronrobertshaw changed the title [WIP] Site Editor: Add Library for Template Parts & Patterns Management Site Editor: Add Library for Template Parts & Patterns Management Jun 16, 2023
@aaronrobertshaw aaronrobertshaw force-pushed the try/site-editor-library branch from 8495e13 to 7b58fde Compare June 19, 2023 09:04
@talldan
Copy link
Contributor

talldan commented Jun 21, 2023

I've pushed some accessibility fixes. Here's a quick summary:

  • Added a basic focus style for each pattern in a listing
  • The pattern list uses a roving tab index, but the action menus for each user created pattern introduce an additional tab stop that interferes with the keyboard navigation. To solve this I've made it so that action menus can't be tabbed to, and instead implemented a delete keyboard shortcut for keyboard users (that's the only functionality the menu offers). There's an aria-description that explains it, which might be a bit wordy. I've also added a confirm dialog for deleting patterns so that it isn't easy to do accidentally.
  • The pattern lists didn't have particularly descriptive aria-labels (it just said 'Pattern list'). I've instead made it read 'Synced patterns' and 'Standard patterns'. This is somewhat duplicating the heading, but I think it makes it clearer if you're tabbing between focusables and not reading text using a screen reader.
  • The pattern lists were announcing the wrong list length. This is because each pattern (GridItem component) was outputting multiple DOM elements into the root of the list. I've taken a slightly heavy handed approach and marked some parts of the pattern as aria-hidden to fix this. This should be ok, as those parts are non-interactive and don't provide any information that isn't already announced.

Some of this could definitely do with improvement, but I believe I've cleared any blockers that I can see from my testing.

One small thing that could still be improved is to add a header at the top of each view to say which category is being shown, but I think that might require some discussion.

Copy link
Contributor

@talldan talldan left a comment

Choose a reason for hiding this comment

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

I think this is looking good. I'm going to merge this, so that it's in for 6.3, and we can continue to make small improvements and fixes to it.

@getdave
Copy link
Contributor

getdave commented Jun 22, 2023

@aaronrobertshaw I think this PR has removed a feature which added the Navigation Menu to the Template Part sidebar #51492.

Are you able to reinstate that change?

@talldan
Copy link
Contributor

talldan commented Jun 23, 2023

@getdave @scruffian Sorry about that! Does it look like those features were re-instated correctly by #51825?

@getdave
Copy link
Contributor

getdave commented Jun 23, 2023

Easily done. Lots of changes around that code recently 👍

@jameskoster
Copy link
Contributor

@aaronrobertshaw I think this change may have wiped out the Manage all template parts link from the Library panel:

@aaronrobertshaw
Copy link
Contributor Author

@jameskoster the design we were working from omitted that "manage all" link. However, things have evolved on a few fronts since then where a manage all link was added for custom patterns given the possibility the custom patterns might be limited to the latest 100 or something.

I'll get a PR up to reinstate a manage all template parts link.

sethrubenstein pushed a commit to pewresearch/gutenberg that referenced this pull request Jul 13, 2023
…rdPress#51078)

* Add placeholder Library page

* Add placeholder Library nav screen

* Use placeholder library page and nav screen

* Add dodgy placeholder display for patterns or template parts

* Temporarily add category type and name to query params

* Try displaying patterns and template parts

* Highlight active category nav item

* Add placeholder dropdown for deleting patterns

* Try making pattern previews clickable

* Add placeholder create pattern modal and action

* Add category select to create pattern modal

* Remove the library url params when existing library

* Fix pattern styles not loading on fresh reload of Library page (WordPress#51114)

* Hook up template part preview to existing edit page

This also adds a temporary hack to the sidebar-navigation-screen so the back button from the existing template part editing will return to the previously selected category in the library.

* Fix template part pattern display in library

* Try retrieving user created patterns from wp_block CPT

* Update now user created patterns have category arrays

* Update user created patterns based of new meta wp_block property

* Remove new template part screen as it was covered by pattern screen

* Allow user created patterns to be clicked on

* Fix typos

* Fix classnames

* Hook up reusable block editing

* Try adding delete for user patterns

* Add snackbar notices for user-created pattern deletion

* Hook up pattern creation modal

* Make new patterns return to correct category

* Try updating the Library to use pattern category taxonomy

* Fix theme pattern display in Grid

* Fix selected pattern category detection

* Use invalidateResolution to clear taxonomy cache

Not sure if this will be better than manual counts as we'll likely still need to get userPatterns back to collect an Uncategorized group.

* Include uncategorized reusable block patterns in Library

* Make pattern category selection option and add sync toggle

* Separate display of synced/unsynced patterns

* Add placeholder search control.

* Update to use new Page components added along with Table

* Fix private apis imports

* style changes to library

* copy change

* svg colour

* add template part and pattern dialog

* fix template part modal close

* Try filtering of patterns in library

* search input patterns style

* responsive pattern grid

* Use only default block pattern categories

The removal of the pattern category taxonomy changes will be done once that related PR has been updated.

* Fix Library routing in mobile (WordPress#51558)

* Remove obselete TODO comments

* Use extracted useDebouncedInput hook

* Fix clicking browser's back button in edit mode from the Library (WordPress#51566)

* Rename Your Patterns to Custom patterns

* Remove arrow functions for internal Grid components

* Fix linting error

* Add dependencies to package-lock.json

* Update core pattern filtering

* Consolidate and reuse constants

* Clean up comments and unused styles

* Rename manage all link for custom patterns

* Remove `wp_block` property from post meta for patterns

* Update conversion of reusable block to pattern after sync_status moved

* Rename setReusableBlock to setEditedEntity

* Improve wording

* Add aria description for pattern action menu

* Refactor filtering out duplicate patterns by name

* Add focus style for patterns

* Add empty pattern placeholder

* Fix tests and converter flow

* Tweak focused placeholder styles

* Make the action menu unfocusable and use a keyboard shortcut for deletion

* Add confirm step for deleting

* Add a more descriptive aria-description

* Ensure pattern lists are announced with the correct number of items

* Improve labelling of pattern lists

---------

Co-authored-by: Glen Davies <[email protected]>
Co-authored-by: Daniel Richards <[email protected]>
Co-authored-by: Saxon Fletcher <[email protected]>
Co-authored-by: Kai Hao <[email protected]>
Co-authored-by: Kai Hao <[email protected]>
@Mamaduka
Copy link
Member

I just discovered that the "Template Parts for Classic themes" e2e test has been removed and never added back. These tests are there to catch the regressions and shouldn't be discarded this easily.

@aaronrobertshaw
Copy link
Contributor Author

I just discovered that the "Template Parts for Classic themes" e2e test has been removed and never added back. These tests are there to #48343 and shouldn't be discarded this easily.

Agreed 👍

It was removed as the page itself had been removed, as noted in #51078 (comment). When I reinstated the page, I missed this spec as that was removed in a separate commit. Apologies, I'll try adding it back and updating if required.

@aaronrobertshaw
Copy link
Contributor Author

A PR reinstating the spec is available: #52780

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 [Feature] Patterns A collection of blocks that can be synced (previously reusable blocks) or unsynced [Feature] Site Editor Related to the overarching Site Editor (formerly "full site editing") [Package] Edit Site /packages/edit-site [Type] Enhancement A suggestion for improvement. [Type] Feature New feature to highlight in changelogs.
Projects
No open projects
Development

Successfully merging this pull request may close these issues.

Library: enable ability to create & classify a pattern library alongside reusable blocks