3
3
*/
4
4
import { __ } from '@wordpress/i18n' ;
5
5
import { addFilter } from '@wordpress/hooks' ;
6
+ import { Fragment } from '@wordpress/element' ;
6
7
import { PanelBody } from '@wordpress/components' ;
7
8
import { createHigherOrderComponent } from '@wordpress/compose' ;
8
9
import { store as blocksStore } from '@wordpress/blocks' ;
@@ -25,22 +26,44 @@ function AutoInsertingBlocksControl( props ) {
25
26
Object . keys ( block . autoInsert ) . includes ( props . blockName )
26
27
) ;
27
28
29
+ // Group by block name prefix (before the slash).
30
+ const groupedAutoInsertedBlocks = autoInsertedBlocksForCurrentBlock . reduce (
31
+ ( acc , block ) => {
32
+ const [ prefix ] = block . name . split ( '/' ) ;
33
+ if ( ! acc [ prefix ] ) {
34
+ acc [ prefix ] = [ ] ;
35
+ }
36
+ acc [ prefix ] . push ( block ) ;
37
+ return acc ;
38
+ } ,
39
+ { }
40
+ ) ;
41
+
28
42
return (
29
43
< InspectorControls >
30
44
< PanelBody title = { __ ( 'Plugins' ) } initialOpen = { true } >
31
- { autoInsertedBlocksForCurrentBlock . map ( ( block ) => {
45
+ { Object . keys ( groupedAutoInsertedBlocks ) . map ( ( vendor ) => {
32
46
return (
33
- < div
34
- key = { block . name }
35
- className = "block-editor-block-card"
36
- >
37
- < BlockIcon icon = { block . icon } />
38
- < div className = "block-editor-block-card__content" >
39
- < h2 className = "block-editor-block-card__title" >
40
- { block . title }
41
- </ h2 >
42
- </ div >
43
- </ div >
47
+ < Fragment key = { vendor } >
48
+ < h3 > { vendor } </ h3 >
49
+ { groupedAutoInsertedBlocks [ vendor ] . map (
50
+ ( block ) => {
51
+ return (
52
+ < div
53
+ key = { block . name }
54
+ className = "block-editor-block-card"
55
+ >
56
+ < BlockIcon icon = { block . icon } />
57
+ < div className = "block-editor-block-card__content" >
58
+ < h2 className = "block-editor-block-card__title" >
59
+ { block . title }
60
+ </ h2 >
61
+ </ div >
62
+ </ div >
63
+ ) ;
64
+ }
65
+ ) }
66
+ </ Fragment >
44
67
) ;
45
68
} ) }
46
69
</ PanelBody >
0 commit comments