Block alignment controls: don't remount the block when alignments change #48209
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: +11 B (0%) Total Size: 1.33 MB
ℹ️ View Unchanged
|
tyxla
approved these changes
Feb 17, 2023
jsnajdr
force-pushed
the
fix/align-block-remount
branch
from
8cd0c25
to
fef8a6b
Compare
github-actions
bot
added
the
[Status] In Progress
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.
While reviewing and testing the changes in #47978, I noticed that the block edit component, like
QueryEdit, is mounted twice. There is initial mount, and then for some reason the component is unmounted and mounted again, resetting all local state. In particular, theQueryPlaceholdercomponent hasisStartingBlankstate that is set totruein effect, and never set back tofalse, and yet I was getting thefalsestate again.I tracked this behavior down to the
withToolbarControlsHOC for block alignment options. It has rendering code like:The
hasValidAlignmentsvalue is initiallyfalse, and then, after the edited post template is finished fetching from a REST endpoint, it becomestrue. Because the<BlockEdit />component get "re-parented", i.e., it's now in a different position in the tree, it's considered as different component and created from scratch.This PR fixes that by adding
key="edit", which helps React to identify the component and keep it alive during the re-parenting. Thiskey="edit"trick is already widely used in othereditor.BlockEditHOCs.How to test:
Add debugging code to
QueryEdit:and load a post with a query block. Instead of:
you should see just a single