Patterns: merge unsynced into inserter patterns tab and add paging and filtering#54007
Conversation
|
Size Change: +1.79 kB (0%) Total Size: 1.51 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in 8b94003. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/6178947022
|
dc0b60e to
f432bc2
Compare
f432bc2 to
fda3f16
Compare
|
@glendaviesnz one issue I noticed, unsure if it's related to this PR: If you click the "Explore all patterns" button, the modal doesn't include any patterns. |
|
@glendaviesnz a final question: is the pagination UI part of this PR? It looks a little rough. I can adjust that tomorrow if need be. |
The modal shows patterns for me @jameskoster: explore-all.mp4Do you see any errors in the console when you load the modal? |
yeh, and it turned out that opening that panel by default was not great for keyboard accessibility, so have added back the All category for now and differentiated the |
or if we get this tested and signed off today it will be merged into the main categories PR and paging could be adjusted there. |
kevin940726
left a comment
There was a problem hiding this comment.
Looking pretty good! Just a couple of minor suggestions and none are blockers! 💯
| // If the sync filter changes, we need to select the "All" category to avoid | ||
| // showing a confusing no results screen. | ||
| useEffect( () => { | ||
| if ( patternSyncFilter && patternSyncFilter !== previousSyncFilter ) { | ||
| setSelectedCategory( initialCategory?.name ); | ||
| } | ||
| }, [ | ||
| patternSyncFilter, | ||
| previousSyncFilter, | ||
| patternSourceFilter, | ||
| initialCategory?.name, | ||
| ] ); |
There was a problem hiding this comment.
Nit: Could we rewrite this without the useEffect? Or even better if we could pass setSelectedCategory down and call it when the sync filter changes.
There was a problem hiding this comment.
yeh it would be nice to do that, but had a look and plumbing through the onCategorySelect method from modal.js file and using that causes the whole component tree to rerender and the modal gets closed. But would be great to refactor this component tree at some point to allow away for these changes to be handled in the relevant event handlers
| // If the sync filter changes, we need to select the "All" category to avoid | ||
| // showing a confusing no results screen. | ||
| useEffect( () => { | ||
| if ( patternSyncFilter && patternSyncFilter !== previousSyncFilter ) { | ||
| onSelectCategory( allPatternsCategory, patternSourceFilter ); | ||
| } | ||
| }, [ | ||
| patternSyncFilter, | ||
| previousSyncFilter, | ||
| onSelectCategory, | ||
| patternSourceFilter, | ||
| ] ); |
There was a problem hiding this comment.
Nit: Same here. Could we directly set the state in the render phase to avoid an extra render? Never mind if it's not possible though!
|
This was merged with some failing tests, but is going into a feature branch which needs rebasing to get the failing tests resolved, so failing tests will be sorted on that branch prior to merging to trunk. |
What?
Merges the synced patterns tab into the main patterns tab and adds an
All patternscategory and paging and filtering in the patterns inserter tab and patterns explorer.Why?
Currently it is confusing that synced patterns are in a separate tab, and also causes performance issues because patterns are not paged.
How?
This PR was part of a group of PRs that were merged back into #53835 before being merged into trunk. This PR was branched off #53933.
A full list of the PRs involved in this work can be found here.
Testing Instructions
All patternstab shows all patterns and that paging at the bottom of the tab worksMy patternssource filter is selected that aSync type filterappears at the top of the patterns list and works as expectedAllScreenshots or screencast
patterns-final.mp4