[Patterns] Separate sync status into a filter control #52303
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
kevin940726
added
the
[Feature] Patterns
kevin940726
force-pushed
the
try/patterns-pagination
branch
from
9791d0d
to
0c5a81a
Compare
|
Size Change: +1.22 kB (0%) Total Size: 1.42 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in 2ec62ae. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/5502420340
|
kevin940726
commented
Jul 5, 2023
Comment on lines
34
to
37
| description = __( 'Patterns that are kept in sync across your site.' ); // TODO | ||
| } else if ( type === TEMPLATE_PARTS ) { | ||
| title = TEMPLATE_PART_AREA_LABELS[ categoryId ]; | ||
| description = __( 'Patterns that are kept in sync across your site.' ); // TODO |
There was a problem hiding this comment.
We should update these descriptions 😅 . @SaxonF Any idea? 😆
|
The pagination is currently done client side as mentioned in the PR description above. @youknowriad Do you have any concerns about this approach? I can try to put up another draft PR implementing the server side solution if needed. |
kevin940726
requested review from
aaronrobertshaw,
SaxonF,
youknowriad and
glendaviesnz
|
Seems to work well - nice work! A couple of things with initial testing: Do we want the 
With a couple of hundred patterns loaded the |
|
@SaxonF I know this isn't properly designed yet, but just wondering if we need more distinction between left nav and the pattern list, it looks like an indistinct sea of black at the moment: |
|
This worked well for me. I am noticing some sluggishness, especially when the previews of the patterns are loading. When I try to do something else when this is happens it seems as though all interactions are blocked. For example, search for a pattern and let that load. Then clear the search and try immediately clicking on one of the "All/Synced/Standard" filters. You'll notice interaction is blocked until the previews of all the patterns are loaded. |
kevin940726
force-pushed
the
try/patterns-pagination
branch
from
5727a68
to
f8425d8
Compare
92 tasks
|
I think it's fine to start with client side pagination but I do remember some very old feedback that some folks had a very high number of reusable blocks (synced patterns). So I think ultimately, it's better to do server side pagination. There's also the question of the design, I know there are some concerns about the infinite scrolling but "load more" button is really not a great UX experience for most users. cc @jasmussen @mtias @SaxonF I think it's probably an opportunity to find a solution that works great in terms of UX once and for all, but I do expect the behavior to find its place in other pages... but also addresses the a11y concerns. One option could be to make this an a11y preference. |
If we can work out an elegant a11y solution my preference mid term would be infinite scroll + search + filters (e.g.by sync status, author, date etc) + sorting (name, modified date, created date etc). That combination would offer a nice mix to cover both browse and search tasks. This should be done on the server. In the short term though, we need something for 6.3 to minimise client-side performance issues. I doubt we'll get infinite scroll in a nice place before then, so we either enforce a limit of ~100 patterns on a page and rely on search to find older patterns, or we include a load more button. |
kevin940726
force-pushed
the
try/patterns-pagination
branch
from
ce40ee0
to
6951385
Compare
|
Is the main purpose of the PR the client side performance? Did we try / are we using |
The main bottleneck is rendering all the |
We've found that the initial rendering is the problem that causes freezing. After initial rendering there's not much "re-rendering" happening (there's some but not impactful), so we've built |
Thanks for the additional info! I was not aware of this finding. However, isn't this solution basically the same as infinite loading? Only that it automatically loads the next items without user interactions. I'm not familiar with the accessibility concerns of the infinite loading approach, but if it's not relevant here we can definitely give it a try! Another gotcha I failed to mention is that this screen allows editing and deleting items on the same page. If we pass in
I'm not familiar with the core-data internals to know how to fix this. But a general solution is to leverage optimistic update and do the re-fetching behind the scenes. Another potential solution is to disable invalidating the cache of the whole list since we only allow individual updates at the time. Maybe there's a quick solution already implemented somewhere that I'm not aware of though! |
|
Thanks @youknowriad, I switched it to use |
glendaviesnz
approved these changes
Jul 10, 2023
SaxonF
approved these changes
Jul 10, 2023
glendaviesnz
added
the
Backport to WP Beta/RC
tellthemachines
pushed a commit
that referenced
this pull request
Jul 10, 2023
Co-authored-by: Saxon Fletcher <saxonafletcher@gmail.com> Co-authored-by: Glen Davies <glen.davies@automattic.com>
tellthemachines
removed
the
Backport to WP Beta/RC
|
Manually cherry-picked into https://github.com/WordPress/gutenberg/tree/update/beta-4-second-round. |
tellthemachines
added a commit
that referenced
this pull request
Jul 11, 2023
* Post and Comment Template blocks: Change render_block_context priority to 1 (#52364) * Footnotes: fix lingering format boundary attr (#52439) * Footnotes: Fix incorrect anchor position in Firefox (#52425) * Scope CSS rules for the wp admin reset to js support only. (#52376) * Fix: Patterns & template parts: remove "apply globally" option from block settings (#52160) * Advanced styles panel: add an early return * Update index.js * Minor styling changes * Use array of features --------- Co-authored-by: George Mamadashvili <georgemamadashvili@gmail.com> * make the body of the editor minimmum viewport height so that smaller contents maintain clickability (#52406) * Patterns: Add renaming, duplication, and deletion options (#52270) * Patterns: Update manage pattern links to go to site editor if available (#52403) * [Patterns] Separate sync status into a filter control (#52303) Co-authored-by: Saxon Fletcher <saxonafletcher@gmail.com> Co-authored-by: Glen Davies <glen.davies@automattic.com> * Patterns: Add missing decoding entities processing in Patterns and Template/Parts pages (#52449) * Fix document title icon appearance (#52424) * Quote block: Add transform to paragraph (#51809) * Add ungroup transform as transform to p * Lint * Update test and snapshot. --------- Co-authored-by: Juan Aldasoro <juanfraa@gmail.com> * remove sidebar group descriptions (#52453) * Patterns: alternative grid layout to improve keyboard accessibility (#52357) * add sync tooltip (#52458) * Patterns: Update section heading levels (#52273) * Ensure that the unsaved title is not persisted when reopening the modal (#52473) * Iframe: avoid asset parsing & fix script localisation (#52405) * Iframe: avoid asset parsing & fix script localisation * Add e2e test for script localisation * Update descriptions (#52468) * Footnotes: show in inserter and placehold (#52445) * Footnotes: show in inserter and placehold * Fix placeholder block membrane; fix copy; add icon, label --------- Co-authored-by: Miguel Fonseca <150562+mcsf@users.noreply.github.com> * Fix: Focus loss on navigation link label editing on Firefox. (#52428) * Update tooltip (#52465) * Refactor, document, and fix image block deprecations (#52081) * Refactor, document, and fix image block deprecations * Fix v5 attributes & supports * Fix v1 & v2 deprecation tests * Rename deprecated test descriptions * Respect custom aspect ratio (#52286) * add image width and height via css inline style, update width and height attrs to be string * keep width and height as attributes too, keep the attributes as numbers * updates image fixtures * RichText/Footnotes: make getRichTextValues work with InnerBlocks.Content (#52241) * RichText/Footnotes: make getRichTextValues work with InnerBlocks.Content --------- Co-authored-by: Miguel Fonseca <150562+mcsf@users.noreply.github.com> * Footnotes: save numbering through the entity provider (#52423) * Footnotes: save numbering through the entity provider * Add sup so no styling is needed at all * Migrate old format * Restore old styles, fix nested attribute queries * Fix anchor selection * Migrate markup in entity provider instead * Fix tests * Fix typo * Fix comment --------- Co-authored-by: Miguel Fonseca <150562+mcsf@users.noreply.github.com> * Revert "Post editor: Require confirmation before removing Footnotes (#52277)" (#52486) This reverts commit e6426ea. * List block: Fix selected type option (#52472) * Library - make pattern title clickable (#51898) * Use button inside title * Remove href * Preserve roving tab index * Fix link colors to match trunk $gray-600 * Remove redundant var * Amend colors as per review * remove old files again --------- Co-authored-by: scruffian <ben@scruffian.com> * remove status icon (#52457) * Rename block theme activation nonce variable. (#52398) --------- Co-authored-by: Bernie Reiter <96308+ockham@users.noreply.github.com> Co-authored-by: Ella <4710635+ellatrix@users.noreply.github.com> Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com> Co-authored-by: Andrea Fercia <a.fercia@gmail.com> Co-authored-by: Carolina Nymark <myazalea@hotmail.com> Co-authored-by: George Mamadashvili <georgemamadashvili@gmail.com> Co-authored-by: Andrei Draganescu <me@andreidraganescu.info> Co-authored-by: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Co-authored-by: Kai Hao <kevin830726@gmail.com> Co-authored-by: Saxon Fletcher <saxonafletcher@gmail.com> Co-authored-by: Glen Davies <glen.davies@automattic.com> Co-authored-by: James Koster <james@jameskoster.co.uk> Co-authored-by: Rich Tabor <hi@richtabor.com> Co-authored-by: Juan Aldasoro <juanfraa@gmail.com> Co-authored-by: Miguel Fonseca <150562+mcsf@users.noreply.github.com> Co-authored-by: Jorge Costa <jorge.costa@developer.pt> Co-authored-by: Alex Lende <alex+github.com@lende.xyz> Co-authored-by: Héctor <27339341+priethor@users.noreply.github.com> Co-authored-by: Petter Walbø Johnsgård <petter@dekode.no> Co-authored-by: Dave Smith <getdavemail@gmail.com> Co-authored-by: scruffian <ben@scruffian.com> Co-authored-by: Peter Wilson <519727+peterwilsoncc@users.noreply.github.com>
|
@kevin940726, I noticed (while testing #53666) that the If the Patterns API doesn't support filtering, we should perform it outside the |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What and Why?
Part of #51948. Revamp the layout of the "My patterns" screen and refactor some code around it to better prepare for pagination in the future.
The goal is to limit the number of patterns rendered on screen so that users with many patterns (>100) won't get frozen or crash. This is a temporary solution until we decide which accessible pagination system to use.
How?
Worth noting that even though we only render at most 100 patterns at a time, we're still fetching all the patterns from the API. It's needed so that we can do client-side filtering and searching. In the future, we might decide to switch to server-side filtering and searching (#52396) once the API supports them.
Testing Instructions
Testing Instructions for Keyboard
Follow the same steps above. The grid list is using
<Composite>so that it should be able to navigate through arrow buttons. It's likely not accessible enough though, but that can be tackled in another PR.Screenshots or screencast
Kapture.2023-07-07.at.15.46.28.mp4