Show patterns in inserter for non-root level insert destinations #28459
Conversation
Size Change: +1.06 kB (0%) Total Size: 1.37 MB
|
Filename | Size | Change |
---|---|---|
build/a11y/index.js |
1.14 kB | 0 B |
build/api-fetch/index.js |
3.4 kB | 0 B |
build/autop/index.js |
2.84 kB | 0 B |
build/blob/index.js |
665 B | 0 B |
build/block-directory/style-rtl.css |
1.01 kB | 0 B |
build/block-directory/style.css |
1.01 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 |
103 B | 0 B |
build/block-library/blocks/audio/style.css |
103 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/buttons/editor-rtl.css |
227 B | 0 B |
build/block-library/blocks/buttons/editor.css |
227 B | 0 B |
build/block-library/blocks/buttons/style-rtl.css |
297 B | 0 B |
build/block-library/blocks/buttons/style.css |
297 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 |
421 B | 0 B |
build/block-library/blocks/columns/style.css |
421 B | 0 B |
build/block-library/blocks/cover/editor-rtl.css |
392 B | 0 B |
build/block-library/blocks/cover/editor.css |
393 B | 0 B |
build/block-library/blocks/cover/style-rtl.css |
1.25 kB | 0 B |
build/block-library/blocks/cover/style.css |
1.25 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 |
375 B | 0 B |
build/block-library/blocks/embed/style.css |
375 B | 0 B |
build/block-library/blocks/file/editor-rtl.css |
199 B | 0 B |
build/block-library/blocks/file/editor.css |
198 B | 0 B |
build/block-library/blocks/file/style-rtl.css |
248 B | 0 B |
build/block-library/blocks/file/style.css |
248 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 |
679 B | 0 B |
build/block-library/blocks/gallery/editor.css |
679 B | 0 B |
build/block-library/blocks/gallery/style-rtl.css |
1.07 kB | 0 B |
build/block-library/blocks/gallery/style.css |
1.06 kB | 0 B |
build/block-library/blocks/group/editor-rtl.css |
318 B | 0 B |
build/block-library/blocks/group/editor.css |
317 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/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 |
477 B | 0 B |
build/block-library/blocks/image/style.css |
478 B | 0 B |
build/block-library/blocks/latest-comments/editor-rtl.css |
159 B | 0 B |
build/block-library/blocks/latest-comments/editor.css |
158 B | 0 B |
build/block-library/blocks/latest-comments/style-rtl.css |
269 B | 0 B |
build/block-library/blocks/latest-comments/style.css |
269 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/list/editor-rtl.css |
65 B | 0 B |
build/block-library/blocks/list/editor.css |
65 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 |
191 B | 0 B |
build/block-library/blocks/media-text/editor.css |
191 B | 0 B |
build/block-library/blocks/media-text/style-rtl.css |
535 B | 0 B |
build/block-library/blocks/media-text/style.css |
532 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 |
392 B | 0 B |
build/block-library/blocks/navigation-link/editor.css |
394 B | 0 B |
build/block-library/blocks/navigation-link/style-rtl.css |
704 B | 0 B |
build/block-library/blocks/navigation-link/style.css |
702 B | 0 B |
build/block-library/blocks/navigation/editor-rtl.css |
1.38 kB | 0 B |
build/block-library/blocks/navigation/editor.css |
1.37 kB | 0 B |
build/block-library/blocks/navigation/style-rtl.css |
171 B | 0 B |
build/block-library/blocks/navigation/style.css |
171 B | 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/paragraph/editor-rtl.css |
109 B | 0 B |
build/block-library/blocks/paragraph/editor.css |
109 B | 0 B |
build/block-library/blocks/paragraph/style-rtl.css |
273 B | 0 B |
build/block-library/blocks/paragraph/style.css |
273 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 |
249 B | 0 B |
build/block-library/blocks/post-comments-form/style.css |
249 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-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 |
100 B | 0 B |
build/block-library/blocks/post-featured-image/style.css |
100 B | 0 B |
build/block-library/blocks/preformatted/style-rtl.css |
63 B | 0 B |
build/block-library/blocks/preformatted/style.css |
63 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 |
316 B | 0 B |
build/block-library/blocks/pullquote/style.css |
316 B | 0 B |
build/block-library/blocks/query-loop/editor-rtl.css |
90 B | 0 B |
build/block-library/blocks/query-loop/editor.css |
89 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/editor-rtl.css |
159 B | 0 B |
build/block-library/blocks/query/editor.css |
160 B | 0 B |
build/block-library/blocks/quote/editor-rtl.css |
61 B | 0 B |
build/block-library/blocks/quote/editor.css |
61 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 |
165 B | 0 B |
build/block-library/blocks/search/editor.css |
165 B | 0 B |
build/block-library/blocks/search/style-rtl.css |
342 B | 0 B |
build/block-library/blocks/search/style.css |
344 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 |
236 B | 0 B |
build/block-library/blocks/separator/style.css |
236 B | 0 B |
build/block-library/blocks/shortcode/editor-rtl.css |
504 B | 0 B |
build/block-library/blocks/shortcode/editor.css |
504 B | 0 B |
build/block-library/blocks/site-logo/editor-rtl.css |
201 B | 0 B |
build/block-library/blocks/site-logo/editor.css |
201 B | 0 B |
build/block-library/blocks/site-logo/style-rtl.css |
117 B | 0 B |
build/block-library/blocks/site-logo/style.css |
117 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 |
711 B | 0 B |
build/block-library/blocks/social-links/editor.css |
712 B | 0 B |
build/block-library/blocks/social-links/style-rtl.css |
1.37 kB | 0 B |
build/block-library/blocks/social-links/style.css |
1.37 kB | 0 B |
build/block-library/blocks/spacer/editor-rtl.css |
302 B | 0 B |
build/block-library/blocks/spacer/editor.css |
302 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/subhead/editor-rtl.css |
99 B | 0 B |
build/block-library/blocks/subhead/editor.css |
99 B | 0 B |
build/block-library/blocks/subhead/style-rtl.css |
80 B | 0 B |
build/block-library/blocks/subhead/style.css |
80 B | 0 B |
build/block-library/blocks/table/editor-rtl.css |
489 B | 0 B |
build/block-library/blocks/table/editor.css |
489 B | 0 B |
build/block-library/blocks/table/style-rtl.css |
386 B | 0 B |
build/block-library/blocks/table/style.css |
386 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 |
680 B | 0 B |
build/block-library/blocks/template-part/editor.css |
679 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/editor-rtl.css |
62 B | 0 B |
build/block-library/blocks/verse/editor.css |
62 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 |
504 B | 0 B |
build/block-library/blocks/video/editor.css |
503 B | 0 B |
build/block-library/blocks/video/style-rtl.css |
193 B | 0 B |
build/block-library/blocks/video/style.css |
193 B | 0 B |
build/block-library/common-rtl.css |
1.01 kB | 0 B |
build/block-library/common.css |
1.01 kB | 0 B |
build/block-library/editor-rtl.css |
9.06 kB | 0 B |
build/block-library/editor.css |
9.05 kB | 0 B |
build/block-library/theme-rtl.css |
748 B | 0 B |
build/block-library/theme.css |
748 B | 0 B |
build/block-serialization-default-parser/index.js |
1.88 kB | 0 B |
build/block-serialization-spec-parser/index.js |
3.06 kB | 0 B |
build/components/style-rtl.css |
15.5 kB | 0 B |
build/components/style.css |
15.5 kB | 0 B |
build/compose/index.js |
11.2 kB | 0 B |
build/data-controls/index.js |
830 B | 0 B |
build/date/index.js |
31.8 kB | 0 B |
build/deprecated/index.js |
769 B | 0 B |
build/dom-ready/index.js |
571 B | 0 B |
build/dom/index.js |
4.93 kB | 0 B |
build/edit-navigation/style-rtl.css |
938 B | 0 B |
build/edit-navigation/style.css |
944 B | 0 B |
build/edit-post/index.js |
306 kB | 0 B |
build/edit-site/index.js |
24 kB | 0 B |
build/editor/style-rtl.css |
3.89 kB | 0 B |
build/editor/style.css |
3.89 kB | 0 B |
build/element/index.js |
4.62 kB | 0 B |
build/escape-html/index.js |
735 B | 0 B |
build/format-library/index.js |
6.77 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 |
2.27 kB | 0 B |
build/html-entities/index.js |
623 B | 0 B |
build/i18n/index.js |
3.56 kB | 0 B |
build/is-shallow-equal/index.js |
699 B | 0 B |
build/keycodes/index.js |
1.93 kB | 0 B |
build/list-reusable-blocks/index.js |
3.14 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 |
5.32 kB | 0 B |
build/notices/index.js |
1.85 kB | 0 B |
build/nux/index.js |
3.41 kB | 0 B |
build/nux/style-rtl.css |
731 B | 0 B |
build/nux/style.css |
727 B | 0 B |
build/primitives/index.js |
1.42 kB | 0 B |
build/priority-queue/index.js |
789 B | 0 B |
build/redux-routine/index.js |
2.84 kB | 0 B |
build/reusable-blocks/index.js |
2.92 kB | 0 B |
build/server-side-render/index.js |
2.76 kB | 0 B |
build/shortcode/index.js |
1.7 kB | 0 B |
build/token-list/index.js |
1.27 kB | 0 B |
build/url/index.js |
3.02 kB | 0 B |
build/viewport/index.js |
1.86 kB | 0 B |
build/warning/index.js |
1.14 kB | 0 B |
build/wordcount/index.js |
1.22 kB | 0 B |
This works as advertised and as I would expect! |
const patternsAllowed = filter( patterns, ( { content } ) => { | ||
const blocks = parse( content ); | ||
return every( blocks, ( { name } ) => | ||
canInsertBlockType( state, name, rootClientId ) | ||
); | ||
} ); |
Addison-Stavlo
Jan 25, 2021
Contributor
I wonder if checking every block of every pattern could be a bit cumbersome if we are running a large amount of available patterns? 🤔 While it seems the most accurate way to handle this decision, I wonder if just whitelisting the blocks that should allow patterns as children would make more sense as it would be a much more simple check. Is there a need to check every block, or do all parent blocks that should allow patterns support all the same children used in patterns?
I wonder if checking every block of every pattern could be a bit cumbersome if we are running a large amount of available patterns?
david-szabo97
Jan 26, 2021
Author
Member
Yep, I was thinking about how we could make this better perf-wise. createSelector
takes care of memorizing, but parsing the content of every pattern every time we select a different block is definitely cumbersome. Note, the check here only checks for the first level of blocks which means inner blocks aren't checked. Which makes sense to me.
So far my idea is to precompute the allowed patterns for each block. Then we can save it somewhere and just load it when the block editor is opened.
I'm not sure yet 🤔
Yep, I was thinking about how we could make this better perf-wise. createSelector
takes care of memorizing, but parsing the content of every pattern every time we select a different block is definitely cumbersome. Note, the check here only checks for the first level of blocks which means inner blocks aren't checked. Which makes sense to me.
So far my idea is to precompute the allowed patterns for each block. Then we can save it somewhere and just load it when the block editor is opened.
I'm not sure yet
david-szabo97
Jan 26, 2021
Author
Member
Also, reworking the selector to memoize by block type rather than client id should be a great save as well.
Also, reworking the selector to memoize by block type rather than client id should be a great save as well.
} | ||
|
||
const patternsAllowed = filter( patterns, ( { content } ) => { | ||
const blocks = parse( content ); |
youknowriad
Jan 26, 2021
Contributor
Parsing is a heavy operation and doing on a selector (which is actually the bottleneck for redux applications) is something we should consider very carefully. Did you notice any impact on the performance of the patterns tab? Do we have any measures about that tab?
Parsing is a heavy operation and doing on a selector (which is actually the bottleneck for redux applications) is something we should consider very carefully. Did you notice any impact on the performance of the patterns tab? Do we have any measures about that tab?
david-szabo97
Jan 26, 2021
Author
Member
So far it's adding up +100ms to the loading of the inserter each time I select an element with a different parent. Local dev installation with TT1B theme. In production, it will be a bit faster but way too much either way, and don't forget my dev machine is probably beefier than the average users'. This is definitely unacceptable if we have more patterns.
Was there any exploration about memoizing/implementing a cache for parse
?
So far it's adding up +100ms to the loading of the inserter each time I select an element with a different parent. Local dev installation with TT1B theme. In production, it will be a bit faster but way too much either way, and don't forget my dev machine is probably beefier than the average users'. This is definitely unacceptable if we have more patterns.
Was there any exploration about memoizing/implementing a cache for parse
?
david-szabo97
Jan 26, 2021
Author
Member
Just pushed a commit which creates a selector for parsed patterns. Now the parsing is only done once. So only the first open of the inserter is affected.
Just pushed a commit which creates a selector for parsed patterns. Now the parsing is only done once. So only the first open of the inserter is affected.
cf4521e
to
cd0c727
Fixes #25915
Description
Allow inserting patterns in containers as well.
How has this been tested?
Columns
, choose 50 / 50Paragraph
into the first column with some random textParagraph
blockColumn
block of theParagraph
Screenshots
Screen.Recording.2021-01-25.at.16.04.30.mov
Types of changes
New feature (non-breaking change which adds functionality)
Checklist: