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

Add Block Pattern Categories support #22164

Merged
merged 12 commits into from
May 15, 2020
Merged

Conversation

youknowriad
Copy link
Contributor

@youknowriad youknowriad commented May 7, 2020

closes #22141
closes #20816

Adds support for Block Pattern Categories:

  • Pattern Categories are registered using a separate API from block categories.
  • A Block Pattern can have multiple categories.

Todo

  • Performance when switching to the patterns tab.
  • Documentation

Testing instructions

  • You can open the inserter
  • Switch to the patterns tab
  • Make sure the patterns are organized per category
  • Make sure you can still search and insert patterns.

@youknowriad youknowriad added [Type] Feature New feature to highlight in changelogs. [Feature] Patterns A collection of blocks that can be synced (previously reusable blocks) or unsynced labels May 7, 2020
@youknowriad youknowriad self-assigned this May 7, 2020
@github-actions
Copy link

github-actions bot commented May 7, 2020

Size Change: +591 B (0%)

Total Size: 833 kB

Filename Size Change
build/annotations/index.js 3.62 kB -3 B (0%)
build/block-directory/index.js 6.59 kB -2 B (0%)
build/block-editor/index.js 105 kB +483 B (0%)
build/block-library/editor-rtl.css 7.19 kB -67 B (0%)
build/block-library/editor.css 7.19 kB -66 B (0%)
build/block-library/index.js 118 kB +649 B (0%)
build/block-library/style-rtl.css 7.48 kB -5 B (0%)
build/block-library/style.css 7.48 kB -3 B (0%)
build/block-serialization-default-parser/index.js 1.88 kB +1 B
build/components/index.js 182 kB -57 B (0%)
build/compose/index.js 6.67 kB -3 B (0%)
build/core-data/index.js 11.4 kB -12 B (0%)
build/data/index.js 8.42 kB -7 B (0%)
build/date/index.js 5.47 kB -4 B (0%)
build/dom-ready/index.js 569 B +1 B
build/dom/index.js 3.11 kB +10 B (0%)
build/edit-navigation/index.js 5.77 kB +171 B (2%)
build/edit-navigation/style-rtl.css 709 B +91 B (12%) ⚠️
build/edit-navigation/style.css 708 B +91 B (12%) ⚠️
build/edit-post/index.js 28.1 kB -72 B (0%)
build/edit-site/index.js 12 kB +12 B (0%)
build/edit-widgets/index.js 7.87 kB -601 B (7%)
build/editor/index.js 44.3 kB -7 B (0%)
build/format-library/index.js 7.63 kB +5 B (0%)
build/hooks/index.js 2.13 kB -2 B (0%)
build/i18n/index.js 3.56 kB -1 B
build/is-shallow-equal/index.js 711 B -1 B
build/keyboard-shortcuts/index.js 2.51 kB -3 B (0%)
build/keycodes/index.js 1.94 kB -1 B
build/list-reusable-blocks/index.js 3.13 kB +1 B
build/media-utils/index.js 5.29 kB -4 B (0%)
build/notices/index.js 1.79 kB -1 B
build/nux/index.js 3.4 kB -1 B
build/plugins/index.js 2.56 kB +3 B (0%)
build/primitives/index.js 1.5 kB +1 B
build/redux-routine/index.js 2.85 kB +3 B (0%)
build/rich-text/index.js 14.8 kB -4 B (0%)
build/server-side-render/index.js 2.68 kB -5 B (0%)
build/url/index.js 4.02 kB +2 B (0%)
build/wordcount/index.js 1.17 kB -1 B
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.02 kB 0 B
build/api-fetch/index.js 3.39 kB 0 B
build/autop/index.js 2.83 kB 0 B
build/blob/index.js 620 B 0 B
build/block-directory/style-rtl.css 764 B 0 B
build/block-directory/style.css 764 B 0 B
build/block-editor/style-rtl.css 10.8 kB 0 B
build/block-editor/style.css 10.8 kB 0 B
build/block-library/theme-rtl.css 683 B 0 B
build/block-library/theme.css 685 B 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/blocks/index.js 48.1 kB 0 B
build/components/style-rtl.css 17.1 kB 0 B
build/components/style.css 17 kB 0 B
build/data-controls/index.js 1.29 kB 0 B
build/deprecated/index.js 772 B 0 B
build/edit-post/style-rtl.css 12.2 kB 0 B
build/edit-post/style.css 12.2 kB 0 B
build/edit-site/style-rtl.css 5.22 kB 0 B
build/edit-site/style.css 5.22 kB 0 B
build/edit-widgets/style-rtl.css 4.69 kB 0 B
build/edit-widgets/style.css 4.69 kB 0 B
build/editor/editor-styles-rtl.css 425 B 0 B
build/editor/editor-styles.css 428 B 0 B
build/editor/style-rtl.css 5.07 kB 0 B
build/editor/style.css 5.08 kB 0 B
build/element/index.js 4.65 kB 0 B
build/escape-html/index.js 733 B 0 B
build/format-library/style-rtl.css 502 B 0 B
build/format-library/style.css 502 B 0 B
build/html-entities/index.js 622 B 0 B
build/list-reusable-blocks/style-rtl.css 226 B 0 B
build/list-reusable-blocks/style.css 226 B 0 B
build/nux/style-rtl.css 616 B 0 B
build/nux/style.css 613 B 0 B
build/priority-queue/index.js 789 B 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.28 kB 0 B
build/viewport/index.js 1.84 kB 0 B
build/warning/index.js 1.14 kB 0 B

compressed-size-action

lib/client-assets.php Outdated Show resolved Hide resolved
lib/client-assets.php Outdated Show resolved Hide resolved
lib/client-assets.php Outdated Show resolved Hide resolved
lib/patterns/its-time.php Outdated Show resolved Hide resolved
@mtias
Copy link
Member

mtias commented May 7, 2020

Should we have an "All" category that also serves as a catch if a category is not registered?

@youknowriad
Copy link
Contributor Author

Should we have an "All" category that also serves as a catch if a category is not registered?

Added 👍 good call

Copy link
Contributor

@mcsf mcsf left a comment

Choose a reason for hiding this comment

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

Looking good!

Comment on lines +130 to +129
if ( ! pattern.categories || ! pattern.categories.length ) {
return Infinity;
Copy link
Contributor

Choose a reason for hiding this comment

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

This can be moved above the indexedCategories assignment.

Copy link
Member

@gziolo gziolo left a comment

Choose a reason for hiding this comment

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

This is looking real good 😃

__experimentalBlockPatternCategories,
} = select( 'core/block-editor' ).getSettings();
return {
patterns: __experimentalBlockPatterns,
Copy link
Member

Choose a reason for hiding this comment

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

For consistency it would be better to use patterns and patternCategories or both of them prefixed with block. I guess the shorter one is enough in this context.

@youknowriad
Copy link
Contributor Author

Anyone for a ✅ here

@youknowriad youknowriad merged commit a105007 into master May 15, 2020
@youknowriad youknowriad deleted the add/pattern-categories branch May 15, 2020 12:29
@github-actions github-actions bot added this to the Gutenberg 8.2 milestone May 15, 2020
* Register default pattern categories if not registered in Core already.
*/
if ( class_exists( 'WP_Block_Pattern_Categories_Registry' ) ) {
register_block_pattern_category( 'text', array( 'label' => __( 'Text', 'gutenberg' ) ) );
Copy link
Member

Choose a reason for hiding this comment

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

Maybe _x() would be useful to set context?

*/
if ( class_exists( 'WP_Block_Pattern_Categories_Registry' ) ) {
register_block_pattern_category( 'text', array( 'label' => __( 'Text', 'gutenberg' ) ) );
register_block_pattern_category( 'hero', array( 'label' => __( 'Hero', 'gutenberg' ) ) );
Copy link
Member

Choose a reason for hiding this comment

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

_x() would be especially useful for this case IMO. Could be very confusing for translators.

/>
) : (
<BlockPatternPlaceholder key={ pattern.name } />
const indexedCategories = Object.fromEntries(
Copy link
Member

Choose a reason for hiding this comment

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

Object.fromEntries is newer than the wp-polyfill polyfill provides. It's not polyfilled for Internet Explorer.

image

TypeError: Object doesn't support property or method 'fromEntries'
   at Anonymous function (http://192.168.1.162:8888/wp-content/plugins/gutenberg/build/block-editor/index.js?ver=cfa28e6fe47f5d29787baf4893617371:20456:5)
   at Anonymous function (http://192.168.1.162:8888/wp-content/plugins/gutenberg/build/block-editor/index.js?ver=cfa28e6fe47f5d29787baf4893617371:20467:7)
   at Anonymous function (http://192.168.1.162:8888/wp-content/plugins/gutenberg/build/block-editor/index.js?ver=cfa28e6fe47f5d29787baf4893617371:20466:5)
   at mountMemo (http://192.168.1.162:8888/wp-includes/js/dist/vendor/react-dom.js?ver=16.9.0:15807:3)
   at HooksDispatcherOnMountInDEV.useMemo (http://192.168.1.162:8888/wp-includes/js/dist/vendor/react-dom.js?ver=16.9.0:16029:9)
   at useMemo (http://192.168.1.162:8888/wp-includes/js/dist/vendor/react.js?ver=16.9.0:1680:3)
   at BlockPatternsPerCategories (http://192.168.1.162:8888/wp-content/plugins/gutenberg/build/block-editor/index.js?ver=cfa28e6fe47f5d29787baf4893617371:20465:3)
   at renderWithHooks (http://192.168.1.162:8888/wp-includes/js/dist/vendor/react-dom.js?ver=16.9.0:15246:3)
   at mountIndeterminateComponent (http://192.168.1.162:8888/wp-includes/js/dist/vendor/react-dom.js?ver=16.9.0:17480:5)
   at beginWork$1 (http://192.168.1.162:8888/wp-includes/js/dist/vendor/react-dom.js?ver=16.9.0:18624:9)

Copy link
Contributor

Choose a reason for hiding this comment

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

Oh, TIL. fromEntries was my suggestion, and I didn't stop to think it was a recent addition.

Copy link
Contributor

Choose a reason for hiding this comment

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

@youknowriad, we can replace this directly with lodash.fromPairs.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

yes, that's what I did in #22410

Copy link
Member

Choose a reason for hiding this comment

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

Related: #22417

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Patterns A collection of blocks that can be synced (previously reusable blocks) or unsynced [Type] Feature New feature to highlight in changelogs.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Categorizing Patterns Block Pattern: Categories
7 participants