Page List: Create a JS version for the editor #31670
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
|
Size Change: +3.36 kB (0%) Total Size: 1.07 MB
ℹ️ View Unchanged
|
annezazu
added
[Block] Navigation
|
👋 I'm going to work on reviving this as @georgeh is currently on leave. The I asked around and this PR is blocked on https://core.trac.wordpress.org/ticket/39037 which now has a patch. |
noisysocks
force-pushed
the
add/page-list-client-block
branch
from
5c8c21c
to
775355a
Compare
|
I rebased the PR. There's some work remaining which I'll track in the PR description. |
I looked further into this. |
noisysocks
requested review from
nerrad,
ntwb and
tellthemachines
as code owners
|
Marked this as ready for review. I think it's in pretty good shape, though I'm not 100% convinced that I haven't broken some Navigation block functionality. I could use help testing cc. @tellthemachines 😀 |
There was a problem hiding this comment.
Thanks for taking this on! It's working well in the editor for a small amount of pages, but performance starts to lag noticeably at > 200 pages. Is there anything we can do to improve matters when fetching the pages from the API?
You can test by running wp post generate --post_type=page --max_depth=4 --count=600 in the cli 😄
I'm also seeing a recurrent Warning: Encountered two children with the same key popping up on the console at about that amount of pages (I don't see it if there are only 10-20 pages).
On the front end, submenu icons and open on click don't work - I left a comment on that below.
packages/e2e-tests/specs/experiments/blocks/__snapshots__/navigation.test.js.snap
Show resolved
Hide resolved
TIL about
I added 600 pages and played around. I could see two areas where things were sluggish:
Give it another try. I think things are good enough now.
I'm not seeing this error... any clues? 😕 |
|
This is testing well for me. I didn't run into any bugs or error logs, I tried testing children and did not see any console log messages, tested with various levels and number of pages. One thing I did notice which was feedback I put in around the empty list, was a slight delay (flashing) of the "No pages found" message when loading the list. If possible do you think we can do a loading indicator while it is fetching (or nothing) and then display the results when complete? Here's a video that shows the flash, it is with around 100 pages. page-list-delay.mp4 |
|
@noisysocks Confirmed, I do see the loading indicator now and looks good. I'm pretty sure I had pulled the latest, but maybe I didn't build it 🤷♂️ I think it is in good shape 👍 |
andrewserong
changed the title
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.
Description
Closes #35632.
This replaces the
<ServerSideRender>in Page List's edit method with a client-side version. The advantage of rendering locally is that there is no lag after changing a block attribute (e.g. on the Navigation block).Kapture.2021-10-21.at.16.22.48.mp4
Checklist:
*.native.jsfiles for terms that need renaming or removal).