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

Block Patterns: Load patterns from wordpress.org API #28800

Merged
merged 7 commits into from
May 20, 2021

Conversation

ryelle
Copy link
Contributor

@ryelle ryelle commented Feb 5, 2021

Description

As part of the WordPress.org pattern directory project, we want to load patterns remotely from WordPress.org — this PR is a first step to get there. It unregisters & removes the existing core patterns, and pulls down the patterns from an API on wordpress.org/patterns. These are the same patterns that were just added in #29973. With this change, patterns can be added or updated without needing to release new WordPress or Gutenberg versions.

Right now this preloads the patterns server-side, so functionally there should be no change to the editing experience. Eventually we'll want to load dynamically, client-side, so that authors can search & filter through all patterns on wordpress.org/patterns. See WordPress/pattern-directory#10

How has this been tested?

  • Add or edit a post
  • Open the inserter and look at the non-theme patterns
  • They should exist 🙂
  • Try to add a core pattern (ex: "Three columns with offset images")
  • It should add correctly

Note: The patterns are rendered as a classic blocks for now, that will be fixed with #28799 - leaving this PR in draft until then. This was fixed.

Note 2: There are two patterns - heading and quote - which currently add blockTypes support for the heading and quote blocks, respectively. we don't have a way of flagging that on the pattern directory yet, so they're registered without it. See WordPress/pattern-directory#33 (comment)

@ryelle ryelle added the [Feature] Pattern Directory The Pattern Directory, a place to find patterns label Feb 5, 2021
@ryelle ryelle self-assigned this Feb 5, 2021
@github-actions
Copy link

github-actions bot commented Feb 5, 2021

Size Change: 0 B

Total Size: 1.62 MB

ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.12 kB 0 B
build/annotations/index.js 2.93 kB 0 B
build/api-fetch/index.js 2.42 kB 0 B
build/autop/index.js 2.28 kB 0 B
build/blob/index.js 673 B 0 B
build/block-directory/index.js 6.61 kB 0 B
build/block-directory/style-rtl.css 989 B 0 B
build/block-directory/style.css 990 B 0 B
build/block-editor/index.js 119 kB 0 B
build/block-editor/style-rtl.css 12.8 kB 0 B
build/block-editor/style.css 12.8 kB 0 B
build/block-library/blocks/archives/editor-rtl.css 61 B 0 B
build/block-library/blocks/archives/editor.css 60 B 0 B
build/block-library/blocks/audio/editor-rtl.css 58 B 0 B
build/block-library/blocks/audio/editor.css 58 B 0 B
build/block-library/blocks/audio/style-rtl.css 112 B 0 B
build/block-library/blocks/audio/style.css 112 B 0 B
build/block-library/blocks/block/editor-rtl.css 161 B 0 B
build/block-library/blocks/block/editor.css 161 B 0 B
build/block-library/blocks/button/editor-rtl.css 475 B 0 B
build/block-library/blocks/button/editor.css 474 B 0 B
build/block-library/blocks/button/style-rtl.css 601 B 0 B
build/block-library/blocks/button/style.css 600 B 0 B
build/block-library/blocks/buttons/editor-rtl.css 315 B 0 B
build/block-library/blocks/buttons/editor.css 315 B 0 B
build/block-library/blocks/buttons/style-rtl.css 375 B 0 B
build/block-library/blocks/buttons/style.css 375 B 0 B
build/block-library/blocks/calendar/style-rtl.css 208 B 0 B
build/block-library/blocks/calendar/style.css 208 B 0 B
build/block-library/blocks/categories/editor-rtl.css 84 B 0 B
build/block-library/blocks/categories/editor.css 83 B 0 B
build/block-library/blocks/categories/style-rtl.css 79 B 0 B
build/block-library/blocks/categories/style.css 79 B 0 B
build/block-library/blocks/code/style-rtl.css 90 B 0 B
build/block-library/blocks/code/style.css 90 B 0 B
build/block-library/blocks/columns/editor-rtl.css 190 B 0 B
build/block-library/blocks/columns/editor.css 190 B 0 B
build/block-library/blocks/columns/style-rtl.css 422 B 0 B
build/block-library/blocks/columns/style.css 422 B 0 B
build/block-library/blocks/cover/editor-rtl.css 643 B 0 B
build/block-library/blocks/cover/editor.css 645 B 0 B
build/block-library/blocks/cover/style-rtl.css 1.22 kB 0 B
build/block-library/blocks/cover/style.css 1.22 kB 0 B
build/block-library/blocks/embed/editor-rtl.css 486 B 0 B
build/block-library/blocks/embed/editor.css 486 B 0 B
build/block-library/blocks/embed/style-rtl.css 401 B 0 B
build/block-library/blocks/embed/style.css 400 B 0 B
build/block-library/blocks/file/editor-rtl.css 301 B 0 B
build/block-library/blocks/file/editor.css 300 B 0 B
build/block-library/blocks/file/frontend.js 771 B 0 B
build/block-library/blocks/file/style-rtl.css 255 B 0 B
build/block-library/blocks/file/style.css 255 B 0 B
build/block-library/blocks/freeform/editor-rtl.css 2.45 kB 0 B
build/block-library/blocks/freeform/editor.css 2.45 kB 0 B
build/block-library/blocks/gallery/editor-rtl.css 704 B 0 B
build/block-library/blocks/gallery/editor.css 705 B 0 B
build/block-library/blocks/gallery/style-rtl.css 1.06 kB 0 B
build/block-library/blocks/gallery/style.css 1.05 kB 0 B
build/block-library/blocks/group/editor-rtl.css 160 B 0 B
build/block-library/blocks/group/editor.css 160 B 0 B
build/block-library/blocks/group/style-rtl.css 57 B 0 B
build/block-library/blocks/group/style.css 57 B 0 B
build/block-library/blocks/heading/editor-rtl.css 129 B 0 B
build/block-library/blocks/heading/editor.css 129 B 0 B
build/block-library/blocks/heading/style-rtl.css 76 B 0 B
build/block-library/blocks/heading/style.css 76 B 0 B
build/block-library/blocks/home-link/style-rtl.css 259 B 0 B
build/block-library/blocks/home-link/style.css 259 B 0 B
build/block-library/blocks/html/editor-rtl.css 281 B 0 B
build/block-library/blocks/html/editor.css 281 B 0 B
build/block-library/blocks/image/editor-rtl.css 717 B 0 B
build/block-library/blocks/image/editor.css 716 B 0 B
build/block-library/blocks/image/style-rtl.css 481 B 0 B
build/block-library/blocks/image/style.css 485 B 0 B
build/block-library/blocks/latest-comments/style-rtl.css 281 B 0 B
build/block-library/blocks/latest-comments/style.css 282 B 0 B
build/block-library/blocks/latest-posts/editor-rtl.css 137 B 0 B
build/block-library/blocks/latest-posts/editor.css 137 B 0 B
build/block-library/blocks/latest-posts/style-rtl.css 523 B 0 B
build/block-library/blocks/latest-posts/style.css 522 B 0 B
build/block-library/blocks/legacy-widget/editor-rtl.css 557 B 0 B
build/block-library/blocks/legacy-widget/editor.css 557 B 0 B
build/block-library/blocks/list/style-rtl.css 63 B 0 B
build/block-library/blocks/list/style.css 63 B 0 B
build/block-library/blocks/media-text/editor-rtl.css 176 B 0 B
build/block-library/blocks/media-text/editor.css 176 B 0 B
build/block-library/blocks/media-text/style-rtl.css 492 B 0 B
build/block-library/blocks/media-text/style.css 489 B 0 B
build/block-library/blocks/more/editor-rtl.css 434 B 0 B
build/block-library/blocks/more/editor.css 434 B 0 B
build/block-library/blocks/navigation-link/editor-rtl.css 633 B 0 B
build/block-library/blocks/navigation-link/editor.css 634 B 0 B
build/block-library/blocks/navigation-link/style-rtl.css 94 B 0 B
build/block-library/blocks/navigation-link/style.css 94 B 0 B
build/block-library/blocks/navigation/editor-rtl.css 1.54 kB 0 B
build/block-library/blocks/navigation/editor.css 1.54 kB 0 B
build/block-library/blocks/navigation/style-rtl.css 1.78 kB 0 B
build/block-library/blocks/navigation/style.css 1.78 kB 0 B
build/block-library/blocks/nextpage/editor-rtl.css 395 B 0 B
build/block-library/blocks/nextpage/editor.css 395 B 0 B
build/block-library/blocks/page-list/editor-rtl.css 310 B 0 B
build/block-library/blocks/page-list/editor.css 311 B 0 B
build/block-library/blocks/page-list/style-rtl.css 233 B 0 B
build/block-library/blocks/page-list/style.css 233 B 0 B
build/block-library/blocks/paragraph/editor-rtl.css 157 B 0 B
build/block-library/blocks/paragraph/editor.css 157 B 0 B
build/block-library/blocks/paragraph/style-rtl.css 247 B 0 B
build/block-library/blocks/paragraph/style.css 248 B 0 B
build/block-library/blocks/post-author/editor-rtl.css 209 B 0 B
build/block-library/blocks/post-author/editor.css 209 B 0 B
build/block-library/blocks/post-author/style-rtl.css 183 B 0 B
build/block-library/blocks/post-author/style.css 184 B 0 B
build/block-library/blocks/post-comments-form/style-rtl.css 140 B 0 B
build/block-library/blocks/post-comments-form/style.css 140 B 0 B
build/block-library/blocks/post-comments/style-rtl.css 360 B 0 B
build/block-library/blocks/post-comments/style.css 359 B 0 B
build/block-library/blocks/post-content/editor-rtl.css 139 B 0 B
build/block-library/blocks/post-content/editor.css 139 B 0 B
build/block-library/blocks/post-excerpt/editor-rtl.css 73 B 0 B
build/block-library/blocks/post-excerpt/editor.css 73 B 0 B
build/block-library/blocks/post-excerpt/style-rtl.css 69 B 0 B
build/block-library/blocks/post-excerpt/style.css 69 B 0 B
build/block-library/blocks/post-featured-image/editor-rtl.css 338 B 0 B
build/block-library/blocks/post-featured-image/editor.css 338 B 0 B
build/block-library/blocks/post-featured-image/style-rtl.css 119 B 0 B
build/block-library/blocks/post-featured-image/style.css 119 B 0 B
build/block-library/blocks/post-title/style-rtl.css 60 B 0 B
build/block-library/blocks/post-title/style.css 60 B 0 B
build/block-library/blocks/preformatted/style-rtl.css 103 B 0 B
build/block-library/blocks/preformatted/style.css 103 B 0 B
build/block-library/blocks/pullquote/editor-rtl.css 183 B 0 B
build/block-library/blocks/pullquote/editor.css 183 B 0 B
build/block-library/blocks/pullquote/style-rtl.css 318 B 0 B
build/block-library/blocks/pullquote/style.css 318 B 0 B
build/block-library/blocks/query-loop/editor-rtl.css 98 B 0 B
build/block-library/blocks/query-loop/editor.css 97 B 0 B
build/block-library/blocks/query-loop/style-rtl.css 315 B 0 B
build/block-library/blocks/query-loop/style.css 317 B 0 B
build/block-library/blocks/query-pagination-numbers/editor-rtl.css 122 B 0 B
build/block-library/blocks/query-pagination-numbers/editor.css 121 B 0 B
build/block-library/blocks/query-pagination/editor-rtl.css 270 B 0 B
build/block-library/blocks/query-pagination/editor.css 262 B 0 B
build/block-library/blocks/query-pagination/style-rtl.css 168 B 0 B
build/block-library/blocks/query-pagination/style.css 168 B 0 B
build/block-library/blocks/query-title/editor-rtl.css 86 B 0 B
build/block-library/blocks/query-title/editor.css 86 B 0 B
build/block-library/blocks/query/editor-rtl.css 131 B 0 B
build/block-library/blocks/query/editor.css 132 B 0 B
build/block-library/blocks/quote/style-rtl.css 169 B 0 B
build/block-library/blocks/quote/style.css 169 B 0 B
build/block-library/blocks/rss/editor-rtl.css 201 B 0 B
build/block-library/blocks/rss/editor.css 202 B 0 B
build/block-library/blocks/rss/style-rtl.css 290 B 0 B
build/block-library/blocks/rss/style.css 290 B 0 B
build/block-library/blocks/search/editor-rtl.css 189 B 0 B
build/block-library/blocks/search/editor.css 189 B 0 B
build/block-library/blocks/search/style-rtl.css 359 B 0 B
build/block-library/blocks/search/style.css 362 B 0 B
build/block-library/blocks/separator/editor-rtl.css 99 B 0 B
build/block-library/blocks/separator/editor.css 99 B 0 B
build/block-library/blocks/separator/style-rtl.css 251 B 0 B
build/block-library/blocks/separator/style.css 251 B 0 B
build/block-library/blocks/shortcode/editor-rtl.css 512 B 0 B
build/block-library/blocks/shortcode/editor.css 512 B 0 B
build/block-library/blocks/site-logo/editor-rtl.css 440 B 0 B
build/block-library/blocks/site-logo/editor.css 441 B 0 B
build/block-library/blocks/site-logo/style-rtl.css 154 B 0 B
build/block-library/blocks/site-logo/style.css 154 B 0 B
build/block-library/blocks/social-link/editor-rtl.css 164 B 0 B
build/block-library/blocks/social-link/editor.css 165 B 0 B
build/block-library/blocks/social-links/editor-rtl.css 800 B 0 B
build/block-library/blocks/social-links/editor.css 799 B 0 B
build/block-library/blocks/social-links/style-rtl.css 1.32 kB 0 B
build/block-library/blocks/social-links/style.css 1.33 kB 0 B
build/block-library/blocks/spacer/editor-rtl.css 308 B 0 B
build/block-library/blocks/spacer/editor.css 308 B 0 B
build/block-library/blocks/spacer/style-rtl.css 48 B 0 B
build/block-library/blocks/spacer/style.css 48 B 0 B
build/block-library/blocks/table/editor-rtl.css 478 B 0 B
build/block-library/blocks/table/editor.css 478 B 0 B
build/block-library/blocks/table/style-rtl.css 485 B 0 B
build/block-library/blocks/table/style.css 485 B 0 B
build/block-library/blocks/tag-cloud/editor-rtl.css 118 B 0 B
build/block-library/blocks/tag-cloud/editor.css 118 B 0 B
build/block-library/blocks/tag-cloud/style-rtl.css 94 B 0 B
build/block-library/blocks/tag-cloud/style.css 94 B 0 B
build/block-library/blocks/template-part/editor-rtl.css 551 B 0 B
build/block-library/blocks/template-part/editor.css 550 B 0 B
build/block-library/blocks/term-description/editor-rtl.css 90 B 0 B
build/block-library/blocks/term-description/editor.css 90 B 0 B
build/block-library/blocks/text-columns/editor-rtl.css 95 B 0 B
build/block-library/blocks/text-columns/editor.css 95 B 0 B
build/block-library/blocks/text-columns/style-rtl.css 166 B 0 B
build/block-library/blocks/text-columns/style.css 166 B 0 B
build/block-library/blocks/verse/style-rtl.css 87 B 0 B
build/block-library/blocks/verse/style.css 87 B 0 B
build/block-library/blocks/video/editor-rtl.css 569 B 0 B
build/block-library/blocks/video/editor.css 570 B 0 B
build/block-library/blocks/video/style-rtl.css 169 B 0 B
build/block-library/blocks/video/style.css 169 B 0 B
build/block-library/common-rtl.css 1.26 kB 0 B
build/block-library/common.css 1.26 kB 0 B
build/block-library/editor-rtl.css 9.93 kB 0 B
build/block-library/editor.css 9.92 kB 0 B
build/block-library/index.js 147 kB 0 B
build/block-library/reset-rtl.css 506 B 0 B
build/block-library/reset.css 507 B 0 B
build/block-library/style-rtl.css 10.2 kB 0 B
build/block-library/style.css 10.3 kB 0 B
build/block-library/theme-rtl.css 692 B 0 B
build/block-library/theme.css 693 B 0 B
build/block-serialization-default-parser/index.js 1.29 kB 0 B
build/block-serialization-spec-parser/index.js 3.06 kB 0 B
build/blocks/index.js 47.1 kB 0 B
build/components/index.js 188 kB 0 B
build/components/style-rtl.css 16.2 kB 0 B
build/components/style.css 16.2 kB 0 B
build/compose/index.js 9.95 kB 0 B
build/core-data/index.js 12.1 kB 0 B
build/customize-widgets/index.js 43.2 kB 0 B
build/customize-widgets/style-rtl.css 1.38 kB 0 B
build/customize-widgets/style.css 1.38 kB 0 B
build/data-controls/index.js 829 B 0 B
build/data/index.js 7.23 kB 0 B
build/date/index.js 31.8 kB 0 B
build/deprecated/index.js 739 B 0 B
build/dom-ready/index.js 577 B 0 B
build/dom/index.js 4.62 kB 0 B
build/edit-navigation/index.js 13.6 kB 0 B
build/edit-navigation/style-rtl.css 2.82 kB 0 B
build/edit-navigation/style.css 2.82 kB 0 B
build/edit-post/classic-rtl.css 454 B 0 B
build/edit-post/classic.css 454 B 0 B
build/edit-post/index.js 335 kB 0 B
build/edit-post/style-rtl.css 6.8 kB 0 B
build/edit-post/style.css 6.79 kB 0 B
build/edit-site/index.js 25.6 kB 0 B
build/edit-site/style-rtl.css 4.76 kB 0 B
build/edit-site/style.css 4.75 kB 0 B
build/edit-widgets/index.js 292 kB 0 B
build/edit-widgets/style-rtl.css 3.46 kB 0 B
build/edit-widgets/style.css 3.47 kB 0 B
build/editor/index.js 38.4 kB 0 B
build/editor/style-rtl.css 3.92 kB 0 B
build/editor/style.css 3.91 kB 0 B
build/element/index.js 3.44 kB 0 B
build/escape-html/index.js 739 B 0 B
build/format-library/index.js 5.66 kB 0 B
build/format-library/style-rtl.css 637 B 0 B
build/format-library/style.css 639 B 0 B
build/hooks/index.js 1.76 kB 0 B
build/html-entities/index.js 627 B 0 B
build/i18n/index.js 3.73 kB 0 B
build/is-shallow-equal/index.js 710 B 0 B
build/keyboard-shortcuts/index.js 1.65 kB 0 B
build/keycodes/index.js 1.43 kB 0 B
build/list-reusable-blocks/index.js 2.06 kB 0 B
build/list-reusable-blocks/style-rtl.css 629 B 0 B
build/list-reusable-blocks/style.css 628 B 0 B
build/media-utils/index.js 3.08 kB 0 B
build/navigation/index.js 2.85 kB 0 B
build/notices/index.js 1.07 kB 0 B
build/nux/index.js 2.31 kB 0 B
build/nux/style-rtl.css 718 B 0 B
build/nux/style.css 716 B 0 B
build/plugins/index.js 1.99 kB 0 B
build/primitives/index.js 1.03 kB 0 B
build/priority-queue/index.js 791 B 0 B
build/react-i18n/index.js 923 B 0 B
build/redux-routine/index.js 2.82 kB 0 B
build/reusable-blocks/index.js 2.54 kB 0 B
build/reusable-blocks/style-rtl.css 225 B 0 B
build/reusable-blocks/style.css 225 B 0 B
build/rich-text/index.js 10.7 kB 0 B
build/server-side-render/index.js 1.64 kB 0 B
build/shortcode/index.js 1.68 kB 0 B
build/token-list/index.js 846 B 0 B
build/url/index.js 1.95 kB 0 B
build/viewport/index.js 1.28 kB 0 B
build/warning/index.js 1.13 kB 0 B
build/widgets/index.js 1.66 kB 0 B
build/wordcount/index.js 1.24 kB 0 B

compressed-size-action

Base automatically changed from master to trunk March 1, 2021 15:45
@ryelle ryelle force-pushed the try/remote-block-patterns branch from 4571c1b to c41f48d Compare April 21, 2021 19:37
'init',
'admin_init',
Copy link
Contributor Author

Choose a reason for hiding this comment

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

I don't think this should change, but if I leave it as init, I get this error when running the unit tests:

Fatal error: Uncaught Error: Class 'Spy_REST_Server' not found in /var/www/html/wp-includes/rest-api.php:509

This was happening locally and in the PR's unit test action.

Copy link
Contributor

Choose a reason for hiding this comment

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

Would it be worth using a more restrictive hook so that the API call isn't being made on admin screens that don't use patterns? In WordPress.com, where we use a similar approach to load patterns from an API endpoint we decided to use the current_screen hook and check for is_block_editor or gutenberg_is_edit_site_page() so that we only call the endpoint on views that need it.

Copy link
Contributor

Choose a reason for hiding this comment

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

@andrewserong has a good point on employing a more restrictive hook, Before we used an API call it didn't matter, but now it does. Also, we're prefetching a lot of data in the Gutenberg editors. Shouldn't this be treated the same way?

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 data isn't used the same way as the other prefetched data - it's not used in gutenberg directly, it's only used on the server-side to register patterns. Once the pattern directory is more dynamic, and block patterns are registered in JS, we can switch to something more like the other prefetched endpoints.

In 89045a6, I updated the code here to use the current_screen approach for loading pattern content, but left the unregistration on init, to match what's happening in core now.

@ryelle ryelle marked this pull request as ready for review April 21, 2021 22:54
Copy link
Contributor

@StevenDufresne StevenDufresne left a comment

Choose a reason for hiding this comment

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

Great. This seems as simple as it looks.

Is there any value in leaving in the $new_core_block_patterns and merge in new ones from the API as a fallback to limit the scope of this change as we work on the directory?

require __DIR__ . '/block-patterns/' . $core_block_pattern . '.php'
);
$request = new WP_REST_Request( 'GET', '/__experimental/pattern-directory/patterns' );
$request->set_param( 'keyword', 11 ); // 11 is the ID for "core".
Copy link
Contributor

Choose a reason for hiding this comment

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

Just noting that without the comment this would be impossible to understand since the keyword ID lives outside of this project. Additionally, if any changes happen in the directory, this would return incorrect patterns. I think for now it's ok, but if core patterns maintain priority in the future, we may want to consider a different approach to loading core patterns that doesn't rely on a hard coded id.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

That's why I left the comment 🙂

This really is a "for now" kind of feature — to move the management of these core patterns into the block pattern directory. The longer-term plan is for a more dynamic search UI that fetches from the API on the client side (like the block directory), any prioritization would happen on the API side, so Gutenberg wouldn't need to be aware of this category at all.

Copy link
Contributor

Choose a reason for hiding this comment

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

Can we make that 11 be a variable with a good name like $core_keyword_id = 11 and also have that comment?

Copy link
Contributor

Choose a reason for hiding this comment

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

How come the param named keyword is a number? I would expect a string for keyword ...

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's a taxonomy on wp.org/patterns. Is that a problem? I was trying to make the least changes to the wp.org api, but this could probably be updated if so. cc @iandunn

Copy link
Member

Choose a reason for hiding this comment

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

It's been awhile, but if I'm reading everything correctly, I think we could rename the keyword param to keyword_id (or maybe plural), and it'd only effect WP_REST_Pattern_Directory_Controller::get_items().

On the API side it's pattern-categories, and get_items() maps between the two.

Using a slug would be nice, but IIRC the REST API only accepts IDs, unless we add custom code. I haven't checked that, though.

Either way, IMO it's best to be practical in this case. As long as variable names and other easily updated things are clear, I think that's good enough. No need to get bogged down over something small.

@priethor priethor mentioned this pull request Apr 23, 2021
22 tasks
Copy link
Contributor

@andrewserong andrewserong left a comment

Choose a reason for hiding this comment

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

Hi there, I hope you don't mind the drive-by commenting, but I thought I'd add a couple of tiny comments based on some experiences building a similar feature into a plugin in WordPress.com, that I thought could be relevant. Feel to disregard, of course! And I'm very excited and curious to see how the patterns directory integration progresses 🙂

'init',
'admin_init',
Copy link
Contributor

Choose a reason for hiding this comment

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

Would it be worth using a more restrictive hook so that the API call isn't being made on admin screens that don't use patterns? In WordPress.com, where we use a similar approach to load patterns from an API endpoint we decided to use the current_screen hook and check for is_block_editor or gutenberg_is_edit_site_page() so that we only call the endpoint on views that need it.

'core/' . $core_block_pattern,
require __DIR__ . '/block-patterns/' . $core_block_pattern . '.php'
);
$request = new WP_REST_Request( 'GET', '/__experimental/pattern-directory/patterns' );
Copy link
Contributor

Choose a reason for hiding this comment

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

Another issue we ran into over in WordPress.com was calling the endpoint on every request for the admin page. We decided to guard the call behind a wp_cache_get check and then wp_cache_set the results from the API endpoint for a period of time so that each admin page request doesn't fire off an external API call.

Copy link
Member

Choose a reason for hiding this comment

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

I would also recommend using some caching around rest_do_request() in this case, a transient makes sense to me. I don't consider this to be a blocker for merge though.

Copy link
Member

Choose a reason for hiding this comment

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

Should we do the caching in the actual endpoint around the API call to pattern directory? I think we'd want to avoid this returning different data from the endpoint?

@@ -84,7 +84,7 @@ public function get_items_permissions_check( $request ) { // phpcs:ignore Variab
* @return WP_Error|WP_REST_Response Response object on success, or WP_Error object on failure.
*/
public function get_items( $request ) {
$query_args = array();
$query_args = array( 'per_page' => 100 );
Copy link
Member

Choose a reason for hiding this comment

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

Since Gutenberg is the primary consumer of the api.wordpress.org/patterns/ API, could this be made the default of the API instead of passing it?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Removed - f57bafa

I haven't updated the wporg api yet.

@StevenDufresne
Copy link
Contributor

@iandunn @dd32 It may be an obvious question but are there any last-minute hesitations on the API side that need to be considered?

@dd32
Copy link
Member

dd32 commented May 18, 2021

@StevenDufresne The only major concern regarding the API is to ensure that we have proper caching on the endpoints (both on WordPress.org, and within Core for anything that is called on every editor load) before the Gutenberg release is included in a WordPress release.

I've left some comments on a few things I'd like to change, but they're not blockers for merge, but would preferably be taken into account.

@draganescu
Copy link
Contributor

I tested this and it does not seem to break or make any difference other than for me the patterns' previews loaded slower.

@priethor
Copy link
Contributor

The pattern previews loaded slower for me as well (although I understand they shouldn't as patterns are preloaded server-side), which sometimes results in a visual glitch when there are many patterns in a category and once the previews finish loading:

Grabacion.de.pantalla.2021-05-18.a.las.13.49.02.mov

I can't reproduce it consistently on local environments, but on Gutenberg.run it happens every time, both in Chrome and Firefox.

@draganescu
Copy link
Contributor

@youknowriad if this is merged as a Gutenberg experiment until it gets fixed, can it still land in 5.8? Or does it have to be merged as a feature now?

@youknowriad
Copy link
Contributor

Historically, features need to land as stable and in Core (not just the plugin) before the feature freeze to make it to the WordPress release. While I'm really excited about this feature, late features always make me nervous so I'm wondering whether it's wiser to defer until 5.9 to give it time to mature. How confident are you all about its current state?

@ryelle ryelle force-pushed the try/remote-block-patterns branch from dd3e594 to f57bafa Compare May 18, 2021 20:31
@ryelle
Copy link
Contributor Author

ryelle commented May 18, 2021

The only major concern regarding the API is to ensure that we have proper caching on the endpoints (both on WordPress.org, and within Core for anything that is called on every editor load) before the Gutenberg release is included in a WordPress release.

Caching still needs to be enabled on wp.org (see WordPress/pattern-directory#99). I added an hour transient cache for the pattern request from the editor, will that work?

The pattern previews loaded slower for me as well (although I understand they shouldn't as patterns are preloaded server-side), which sometimes results in a visual glitch when there are many patterns in a category and once the previews finish loading

Does that happen on trunk? This PR isn't touching any of the query blocks, so I'm not sure why that would happen here. They also shouldn't be loading any slower… the only change here is server-side, it shouldn't affect the loading once the patterns are set into __experimentalBlockPatterns. I've switched back and forth between the branch & trunk, and I don't see a significant difference.

While I'm really excited about this feature, late features always make me nervous so I'm wondering whether it's wiser to defer until 5.9 to give it time to mature. How confident are you all about its current state?

This was intended to lay some groundwork for more dynamic block patterns, and make it easier to manage the core patterns. There shouldn't be any functionality change in gutenberg, it should just swap out the pattern files for the same data from an API. I think the only outlying issue is the perceived slowness. If @draganescu or @priethor could re-test, maybe the issue was how out-of-date the branch was.

@tellyworth
Copy link
Contributor

How confident are you all about its current state?

The API side is solid enough. For this PR it only ever needs to return the core patterns, which it does already. That can easily be cached (or even made static) on the server side for performance.

Getting this in to 5.8 means two things: core patterns can then be improved and updated independent of the Gutenberg and WP release cycles. And, since this PR contains the basic core of the necessary editor-side code, adding support for third-party patterns in 5.9 will become easier.

Defering this patch to 5.9 means that wide testing of remotely-fetched core patterns doesn't start until the 5.9 beta cycle, and that probably pushes work on third-party patterns to the next release cycle after that.

Copy link
Contributor

@draganescu draganescu left a comment

Choose a reason for hiding this comment

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

Yes, tested again and the perceived speed is greatly improved. Given that it does minimal changes and the we can improve caching in subsequent PRs.

@youknowriad
Copy link
Contributor

@ryelle @tellyworth sounds good to me, I'll defer this to you all on this.

@youknowriad
Copy link
Contributor

Does it mean we need a follow-up trac ticket to remove the bundled patterns from there as well? (probably before next Tuesday)

@youknowriad youknowriad force-pushed the try/remote-block-patterns branch from e48faf8 to 1ae9b70 Compare May 19, 2021 17:59
@youknowriad
Copy link
Contributor

The e2e failure here sounds legit. (adding patterns). Anyone to take a look?

@ryelle
Copy link
Contributor Author

ryelle commented May 19, 2021

yeah, I can fix it.

@ryelle ryelle requested review from ajitbohra, nerrad and ntwb as code owners May 19, 2021 19:43
bazza pushed a commit to WordPress/wordpress.org that referenced this pull request May 19, 2021
This bumps the max patterns returned in a query to 100, which should be enough to return all patterns, since we have a relatively low number for now.

See WordPress/gutenberg#28800 (comment)



git-svn-id: https://meta.svn.wordpress.org/sites/trunk@10986 74240141-8908-4e6f-9713-ba540dce6ec7
@noisysocks noisysocks force-pushed the try/remote-block-patterns branch from 0c57f1a to bf4af7a Compare May 20, 2021 00:42
@noisysocks
Copy link
Member

I rebased this to see if it fixes E2E failures.

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.

Works when I test locally! 👍

@noisysocks noisysocks merged commit 57f7791 into trunk May 20, 2021
@noisysocks noisysocks deleted the try/remote-block-patterns branch May 20, 2021 02:17
noisysocks added a commit that referenced this pull request May 20, 2021
@noisysocks
Copy link
Member

I just noticed this introduces some PHP warnings which appear on pages without a block editor. I've fixed them in #32025.

ramonjd added a commit to ramonjd/gutenberg that referenced this pull request May 26, 2021
… to patterns directory to fetch and then register patterns.

This commit provides filters to opt out of:
1. removing core patterns, in case Gutenberg users want to use Core patterns
2. adding Gutenberg patterns
3. loading core patterns from remote source
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
Projects
None yet
Development

Successfully merging this pull request may close these issues.