-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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
Conversation
Size Change: +591 B (0%) Total Size: 833 kB
ℹ️ View Unchanged
|
packages/block-editor/src/components/inserter/block-patterns.js
Outdated
Show resolved
Hide resolved
packages/block-editor/src/components/inserter/block-patterns.js
Outdated
Show resolved
Hide resolved
Should we have an "All" category that also serves as a catch if a category is not registered? |
Added 👍 good call |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looking good!
packages/block-editor/src/components/inserter/block-patterns.js
Outdated
Show resolved
Hide resolved
if ( ! pattern.categories || ! pattern.categories.length ) { | ||
return Infinity; |
There was a problem hiding this comment.
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.
packages/block-editor/src/components/inserter/block-patterns.js
Outdated
Show resolved
Hide resolved
packages/block-editor/src/components/inserter/block-patterns.js
Outdated
Show resolved
Hide resolved
There was a problem hiding this 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, |
There was a problem hiding this comment.
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.
878c879
to
ac3ae5b
Compare
Anyone for a ✅ here |
* 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' ) ) ); |
There was a problem hiding this comment.
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' ) ) ); |
There was a problem hiding this comment.
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( |
There was a problem hiding this comment.
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.
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)
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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
.
There was a problem hiding this comment.
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
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Related: #22417
closes #22141
closes #20816
Adds support for Block Pattern Categories:
Todo
Testing instructions