Mobile - Supporting List block V2

[geriux]

Description

This issue highlights the needed work to support the new List block (V2), this is a general view of the first tasks to tackle but there might be other ones.

• Add a feature flag in the main apps and Gutenberg to use the new format. Like we did for the Quote block.
  • Feature flag: WPiOS
  • Feature flag: WPAndroid
• Add the feature flag in the block editor settings endpoint, use as reference the same we did for Quote V2.
• Add list-item block to the block registration. packages/block-library/src/index.native.js
• Add list-item block native variant, since it will require quite a few changes so it'll be difficult to share with the Web code.
• Make small changes in edit.js for mobile.
• Check the focus functionality overall and ensure it works correctly as well as block navigation within a List
• Add use-ref-effect hook in mobile import packages/compose/src/index.native.js
• Add custom implementation for the list type icon, since we won't be using Aztec's styling for lists (In progress @geriux)
• Add custom implementation for ordered lists since we can't use the built-in implementation of Aztec. This has to include supporting the reverse and start options.
• Add support for color/fontSize customization.

The feature branch is: rnmobile/list-v2

• [Mobile] List V2 Support #42702

To enable V2 of the block you could apply this patch:

diff --git a/packages/block-library/src/list/index.js b/packages/block-library/src/list/index.js
index bef6b6558..4bcb8b437 100644
--- a/packages/block-library/src/list/index.js
+++ b/packages/block-library/src/list/index.js
@@ -42,7 +42,7 @@ const settingsV1 = {
 	deprecated,
 };
 
-let settings = settingsV1;
+let settings = settingsV2;
 if ( process.env.IS_GUTENBERG_PLUGIN ) {
 	settings = window?.__experimentalEnableListBlockV2
 		? settingsV2

[ellatrix]

Anything I can do to help?

[derekblank]

To start, I'm working on testing @geriux 's changes so far, with a focus on switching between posts created on web and then mobile (and then vice versa) to note the HTML markup changes are all working ok.

[fluiddot]

Anything I can do to help?

Hey @ellatrix, thank you very much for offering your help 🙇. In relation to the following item:

Add the feature flag in the block editor settings endpoint, use as reference the same we did for Quote V2.

We'd really appreciate it if you could help us with adding a flag to the block editor settings endpoint, very similar to how it was done for the Quote v2. This will help us to know when we have to enable the List v2 in the native version and control the version via the backend. Let us know if you have any questions or concerns, thanks 🙇 !

[ellatrix]

@fluiddot Done in #42697.

[geriux]

@fluiddot Done in #42697.

Thank you so much!

[fluiddot]

@fluiddot Done in #42697.

Awesome, thank you so much @ellatrix for helping us on this ❤️ , I really appreciate it 🙇 .

[ellatrix]

No worries! What's next?

[derekblank]

@geriux I've opened draft PRs for the feature flag in WordPressKit-iOS and WordPress-FluxC-Android, also linked above. Outside of normal code review, we just need to update the Gutenberg ref, too. Can you confirm which ref we should use at this point? Or, let me know if there's anything else needed to do first before we can update the Gutenberg ref.

[geriux]

No worries! What's next?

We are wrapping up the implementation and we will begin testing, as of now all of the tasks are done unless any bugs come up. Once the PRs are ready for review we'll add you as a reviewer as there are some small changes needed to share some of the code with the web editor.

Thanks for the help!

[geriux]

@geriux I've opened draft PRs for the feature flag in WordPressKit-iOS and WordPress-FluxC-Android, also linked above. Outside of normal code review, we just need to update the Gutenberg ref, too. Can you confirm which ref we should use at this point? Or, let me know if there's anything else needed to do first before we can update the Gutenberg ref.

Awesome! Thanks!

Let's use this reference of this PR, since it has all of the latest changes, so we can test it on devices. We will need to generate the bundles though.

[geriux]

Quick update, the main PR is now ready for review and for one last round of testing. 🎉

[ellatrix]

I'll have a look for the web side.