Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Gutenberg] Avoid sending HTML to the editor when closing #20657

Merged
merged 1 commit into from
May 12, 2023

Conversation

fluiddot
Copy link
Contributor

@fluiddot fluiddot commented May 10, 2023

Sending the HTML when closing the editor was causing the editor to recreate all blocks. Some of these blocks might be executing logic during their initialization that would be affected by the editor closing process. This in combination with destroying/deallocating the editor and the libraries used (like Reanimated), might be the cause of the following issues:

I couldn't verify the above as I'm not able to reproduce them. Hence, we'd need to check in production if any of those issues are solved by this change.

To test:
This change can only be tested by incorporating logs into the React Native code.

  1. Apply the following patch in the editor:
diff --git forkSrcPrefix/packages/block-library/src/paragraph/edit.native.js forkDstPrefix/packages/block-library/src/paragraph/edit.native.js
index 98662ba21c88410e8eb6291e18399ef979933f8a..f6963d277386f84097100298b75c52cd0b04b95c 100644
--- forkSrcPrefix/packages/block-library/src/paragraph/edit.native.js
+++ forkDstPrefix/packages/block-library/src/paragraph/edit.native.js
@@ -9,7 +9,7 @@ import {
 	RichText,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { useCallback } from '@wordpress/element';
+import { useCallback, useEffect } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 
 const name = 'core/paragraph';
@@ -25,6 +25,10 @@ function ParagraphBlock( {
 	clientId,
 	parentBlockAlignment,
 } ) {
+	useEffect( () => {
+		console.log( `Paragraph block ${ clientId } mounted` );
+		return () => console.log( `Paragraph block ${ clientId } unmounted` );
+	}, [] );
 	const isRTL = useSelect( ( select ) => {
 		return !! select( blockEditorStore ).getSettings().isRTL;
 	}, [] );
  1. Build the app and connect it to your local Metro server.
  2. Create a post/page.
  3. Add a Paragraph block with some text.
  4. Close the editor and save the post/page.
  5. Open the post again.
  6. Observe in the console that the message Paragraph block ${ clientId } mounted is printed.
  7. Close the editor.
  8. Observe in the console that the message Paragraph block ${ clientId } unmounted is NOT printed.

NOTE: Previously, when closing the editor blocks were being unmounted and mounted.

Regression Notes

  1. Potential unintended areas of impact
    This change is very specific so I don't foresee any unintended areas that could be impacted.

  2. What I did to test those areas of impact (or what existing automated tests I relied on)
    N/A

  3. What automated tests I added (or what prevented me from doing so)
    N/A

PR submission checklist:

  • I have completed the Regression Notes.
  • I have considered adding unit tests for my changes.
  • I have considered adding accessibility improvements for my changes.
  • I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

UI Changes testing checklist:

  • Portrait and landscape orientations.
  • Light and dark modes.
  • Fonts: Larger, smaller and bold text.
  • High contrast.
  • VoiceOver.
  • Languages with large words or with letters/accents not frequently used in English.
  • Right-to-left languages. (Even if translation isn’t complete, formatting should still respect the right-to-left layout)
  • iPhone and iPad.
  • Multi-tasking: Split view and Slide over. (iPad)

@fluiddot fluiddot added the Gutenberg Editing and display of Gutenberg blocks. label May 10, 2023
@fluiddot fluiddot added this to the 22.4 milestone May 10, 2023
@fluiddot fluiddot self-assigned this May 10, 2023
@wpmobilebot
Copy link
Contributor

wpmobilebot commented May 10, 2023

Jetpack Alpha📲 You can test the changes from this Pull Request in Jetpack Alpha by scanning the QR code below to install the corresponding build.
App NameJetpack Alpha Jetpack Alpha
ConfigurationRelease-Alpha
Build Numberpr20657-3fb86e0
Version22.2
Bundle IDcom.jetpack.alpha
Commit3fb86e0
App Center Buildjetpack-installable-builds #4714
Automatticians: You can use our internal self-serve MC tool to give yourself access to App Center if needed.

@wpmobilebot
Copy link
Contributor

wpmobilebot commented May 10, 2023

WordPress Alpha📲 You can test the changes from this Pull Request in WordPress Alpha by scanning the QR code below to install the corresponding build.
App NameWordPress Alpha WordPress Alpha
ConfigurationRelease-Alpha
Build Numberpr20657-3fb86e0
Version22.2
Bundle IDorg.wordpress.alpha
Commit3fb86e0
App Center BuildWPiOS - One-Offs #5685
Automatticians: You can use our internal self-serve MC tool to give yourself access to App Center if needed.

@fluiddot fluiddot marked this pull request as ready for review May 10, 2023 14:36
@fluiddot fluiddot requested review from SiobhyB and geriux May 10, 2023 14:37
@fluiddot
Copy link
Contributor Author

fluiddot commented May 10, 2023

For reference, I noticed when testing that the React Native root component is not being unmounted when closing the editor. This behavior differs from Android where the root component is unmounted. This potential issue is not being introduced in this PR as it also happens in trunk.

UPDATE: I created this issue as a follow-up on this.

Copy link
Contributor

@SiobhyB SiobhyB left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, I went through the outlined test and also performed a quick smoke test using the Jetpack build to confirm no obvious side effects after closing a post. 👏 👏 👏

@fluiddot fluiddot merged commit 647f5ff into trunk May 12, 2023
23 checks passed
@fluiddot fluiddot deleted the gutenberg/fix/prevent-editor-update-on-closing branch May 12, 2023 08:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Gutenberg Editing and display of Gutenberg blocks.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants