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

[Patterns]: Pattern Directory Explorer #45237

Closed
wants to merge 15 commits into from

Conversation

ntsekouras
Copy link
Contributor

@ntsekouras ntsekouras commented Oct 24, 2022

What?

Resolves: #44611

Quick and dirty POC for adding a Pattern Directory Explorer. This will need much polishing but here it is to start addressing issues that come up and discuss. Check the below notes sections for some initial issues and know issues besides the obvious that takes some time to show results etc..

Pattern Directory Notes

  1. It seems there is no pagination supported in Pattern Directory. Ideally this needs to be handled there and integrate the pagination here.
  2. Another really important issue is that if we make any request to the PD, the eligible patterns to be inserted are subject to the allowedBlocks in the editor or a block. What this means is that we could fetch 10 patterns for example where none of them could be inserted.. We must find a way to make this work.. We could explore how we could integrate some of these data to the PD itself(something like blockTypes in combination with the allowedBlockTypes passed in the request). Not sure yet..
  3. We should match the PD order/orderBy params to show the same results.
  4. Are there any other PD APIs available, like favorite?
  5. How is localization is handled in PD? Both in pattern categories and pattern titles etc..
  6. I have noticed that in some patterns images cannot be loaded(403 errors).

Block editor Notes

  1. This might be impactful in terms of performance negatively. We need to measure and find a good implementation, as parsing patterns and then rendering them in Block Previews is expensive. We might consider custom caching, use of stores or even something related to this PR that uses screenshots of the patterns and is a very interesting idea.
  2. In my initial commit I also don't check the fetched patterns if they contain a block that is not allowed. We do that for the registered patterns and is also kind of expensive as we recursively check each pattern's block.
  3. Check to abort ongoing stale requests when needed..

Testing Instructions

  1. Open the patterns tab in the main inserter and then click the Pattern Directory button.
  2. Search some patterns or select categories and insert them..

Screenshots or screencast

Screen.Recording.2022-10-24.at.10.48.44.AM.mov

@ntsekouras ntsekouras added Needs Design Needs design efforts. [Feature] Patterns A collection of blocks that can be synced (previously reusable blocks) or unsynced [Feature] Pattern Directory The Pattern Directory, a place to find patterns labels Oct 24, 2022
@ntsekouras ntsekouras self-assigned this Oct 24, 2022
@github-actions
Copy link

github-actions bot commented Oct 24, 2022

Size Change: +1.74 kB (0%)

Total Size: 1.32 MB

Filename Size Change
build/block-editor/index.min.js 184 kB +1.63 kB (+1%)
build/block-editor/style-rtl.css 14.8 kB +15 B (0%)
build/block-editor/style.css 14.8 kB +15 B (0%)
build/core-data/index.min.js 16 kB +56 B (0%)
build/edit-site/index.min.js 64.9 kB +11 B (0%)
build/editor/index.min.js 44.1 kB +10 B (0%)
ℹ️ 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-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.13 kB
build/block-library/blocks/navigation/editor.css 2.14 kB
build/block-library/blocks/navigation/style-rtl.css 2.22 kB
build/block-library/blocks/navigation/style.css 2.2 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 376 B
build/block-library/blocks/page-list/editor.css 376 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 651 B
build/block-library/blocks/table/style.css 650 B
build/block-library/blocks/table/theme-rtl.css 157 B
build/block-library/blocks/table/theme.css 157 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 99 B
build/block-library/blocks/verse/style.css 99 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/index.min.js 198 kB
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 698 B
build/block-library/theme.css 703 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 203 kB
build/components/style-rtl.css 11.6 kB
build/components/style.css 11.6 kB
build/compose/index.min.js 12.3 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 7.69 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.71 kB
build/edit-navigation/index.min.js 16.2 kB
build/edit-navigation/style-rtl.css 4.12 kB
build/edit-navigation/style.css 4.13 kB
build/edit-post/classic-rtl.css 571 B
build/edit-post/classic.css 571 B
build/edit-post/index.min.js 34.6 kB
build/edit-post/style-rtl.css 7.45 kB
build/edit-post/style.css 7.44 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.46 kB
build/edit-widgets/style.css 4.47 kB
build/editor/style-rtl.css 3.69 kB
build/editor/style.css 3.68 kB
build/element/index.min.js 4.93 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.88 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/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.8 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.53 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/index.min.js 7.31 kB
build/widgets/style-rtl.css 1.18 kB
build/widgets/style.css 1.18 kB
build/wordcount/index.min.js 1.06 kB

compressed-size-action

@jasmussen
Copy link
Contributor

Nice! Thanks for working on this. Here's a gif showing the patterns tab and buttons:

explorer

First off, I can't get the connection to work, not sure why that is. But I'm having some local env issues, that might be it.

The other thing, there should not be two buttons, there should be only a single button, which we can call "Explore patterns" at the bottom. This button opens the pattern directory in the modal. We do not need to show any of the locally bundled patterns at all in this modal, as they are all visible from the inserter tab.

@ntsekouras
Copy link
Contributor Author

First off, I can't get the connection to work, not sure why that is. But I'm having some local env issues, that might be it.

@jasmussen you'll have to give it some time because it makes requests to fetch the pattern categories and then the patterns (there is no pagination so it fetches 100) and then parse them and render them (not 100 but 10, but still..) 😓 . Eventually there will be loaders to indicated the above.. Please let me know if there are no results after waiting..

The other thing, there should not be two buttons,

Yes, I know. I just have it there for now to compare UIs easier. It will be removed in the end.

@jasmussen
Copy link
Contributor

Please let me know if there are no results after waiting..

I let it sit for a few minutes, and kept getting the "No results", but with an endless stream of console errors:

Screenshot 2022-10-24 at 12 44 41

@ntsekouras
Copy link
Contributor Author

That's really weird @jasmussen... There are other errors for me that do not affect all the patterns and the results(403 for some images), but not like the ones you have.. 🤔 .

Also for the record there are no patterns in PD with test 😄 . Try something like heading.

@ryelle
Copy link
Contributor

ryelle commented Oct 24, 2022

Yay for browsing the pattern directory from the editor 🎉

I poked around a bit (once I fixed the $request issue mentioned). It feels very slow and a bit clunky - hopefully if that's an API issue, we can sort it out with some of the suggestions you've made.

Regarding your pattern directory notes… the current API is a proxy to the REST endpoint for the patterns CPT, so any query you can do on posts/pages/etc we can probably make happen in this API. For example, patterns by the wordpressdotorg user. If you need anything specific, an issue in pattern-directory would be best.

I've added an issue about the pagination. WordPress/pattern-directory#529

Are there any other PD APIs available, like favorite?

Not currently, but it can be added. You'll need to ask for the user's wporg username, like on the Plugins screen (/wp-admin/plugin-install.php?tab=favorites), and we can respond back with that user's favorite patterns. Added an issue WordPress/pattern-directory#531

How is localization is handled in PD? Both in pattern categories and pattern titles etc..

The API layer in core should pass along the site's locale when fetching patterns, so you should see translated pattern titles and content. The category slugs stay the same. It's possible to get translated category names by using the underlying pattern API directly, but I don't think it's possible with the core endpoints yet. Added an issue WordPress/pattern-directory#530

Here's browsing the directory from a Spanish site:
Screen Shot 2022-10-24 at 5 51 05 PM

We should match the PD order/orderBy params to show the same results.

On WordPress.org we order by date or by number of favorites, is that what you mean here?

I have noticed that in some patterns images cannot be loaded(403 errors).

I wonder if you're hitting this issue WordPress/pattern-directory#488 — are the 403s from rawpixel?

@ironprogrammer
Copy link
Contributor

🎉 I'm confirming that @ryelle's fix to class-gutenberg-rest-pattern-directory-controller-6-2.php:27 resolves the fatal that @anton-vlasenko identified here, and the patterns load in "Explore all patterns" (not testing the other "Pattern Directory" button, per @jasmussen's comment here).

@ntsekouras
Copy link
Contributor Author

Thanks for the help @anton-vlasenko , @ryelle , @ironprogrammer !

On WordPress.org we order by date or by number of favorites, is that what you mean here?

Yes, because I noticed that the results are not the same between this PR and the PD.

I have noticed that in some patterns images cannot be loaded(403 errors).

I wonder if you're hitting this issue WordPress/pattern-directory#488 — are the 403s from rawpixel?

Yes, it seems like this would be it.

In general the pagination issue is the most important one for me to be implemented in Pattern Directory. Thanks for creating the issue.

@ntsekouras
Copy link
Contributor Author

Another really important issue is that if we make any request to the PD, the eligible patterns to be inserted are subject to the allowedBlocks in the editor or a block. What this means is that we could fetch 10 patterns for example where none of them could be inserted.. We must find a way to make this work.. We could explore how we could integrate some of these data to the PD itself(something like blockTypes in combination with the allowedBlockTypes passed in the request). Not sure yet..

@ryelle
Copy link
Contributor

ryelle commented Oct 25, 2022

In general the pagination issue is the most important one for me to be implemented in Pattern Directory. Thanks for creating the issue.

Pagination should now work as it does in other REST API endpoints, though per_page still defaults to 100 (so the existing API usage is consistent). I also removed the forced order/orderBy, so the API returns sorted by newest first (like the pattern dir homepage), or you can use orderby=favorite_count to mirror the "Popular" sorting option.

@ryelle
Copy link
Contributor

ryelle commented Oct 25, 2022

I realized the core endpoint (/wp-json/wp/v2/pattern-directory/patterns/) didn't pass those pagination & order parameters through to api.w.org, so I've opened a PR #45293 to add support for pagination to the local site's pattern API.

@annezazu annezazu mentioned this pull request Nov 1, 2022
57 tasks
@ntsekouras ntsekouras force-pushed the try/pattern-directory-explorer branch 2 times, most recently from fb90096 to 483e227 Compare November 12, 2022 15:22
@ntsekouras ntsekouras force-pushed the try/pattern-directory-explorer branch from 4211ca2 to 2ac509a Compare January 9, 2023 07:47
@github-actions
Copy link

github-actions bot commented Jan 9, 2023

Flaky tests detected in 8c4ba67.
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/3872690013
📝 Reported issues:

@ntsekouras
Copy link
Contributor Author

@ntsekouras Checking in on the status of this one. Is it still something you're working on? I came in to test and it's working well so far. Happy to chip in or help test anything new. 👍

@apeatling since the PD part is merged, I updated this PR. Reviews and testing would be helpful, yes :) .

Noting that I noticed this behavior:

I'm testing the GB PR and it seems can fetch patterns with more blocks, if we also provide the search param, ex:

https://api.wordpress.org/patterns/1.0/?search=image&allowed_blocks[]=core/heading&allowed_blocks[]=core/gallery

@apeatling apeatling self-requested a review January 12, 2023 00:09
Copy link
Contributor

@apeatling apeatling left a comment

Choose a reason for hiding this comment

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

Did a quick first pass on the UI, I'll have some more feedback. Two things I noticed so far:

  1. It would be great to automatically select the "Featured" category rather than having nothing selected when the modal first pops up.
  2. When I insert a pattern the notice in the bottom left covers the exact spot where the "Explore all patterns" button is, meaning I'm hindered when trying to go back and add another pattern. It would be good to move these notices above the button, or remove them more quickly if the insertion sidebar is opened.

Screenshot 2023-01-11 at 4 04 19 PM

@jasmussen
Copy link
Contributor

or remove them more quickly if the insertion sidebar is opened.

A sidebar, but I've noticed these linger for a very very long time. I'd love to reduce the time they stay on screen.

@apeatling
Copy link
Contributor

A sidebar, but I've noticed these linger for a very very long time. I'd love to reduce the time they stay on screen.

Agree -- the messages are usually short so no need for them to linger.

@apeatling
Copy link
Contributor

@jasmussen I've opened a PR to half the snackbar display time in #47199.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Pattern Directory The Pattern Directory, a place to find patterns [Feature] Patterns A collection of blocks that can be synced (previously reusable blocks) or unsynced Needs Design Needs design efforts.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Patterns: Connect "Explore" to pattern directory
8 participants