[Mobile] - List V2 - List Style Type #42703
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
- List Item - Add support for list type for both ordered and standard icon. - List - Avoid passing the start prop on Mobile
geriux
added
[Status] In Progress
|
Size Change: +7 B (0%) Total Size: 1.26 MB
ℹ️ View Unchanged
|
geriux
added
the
Mobile App - Automation
added 7 commits
July 27, 2022 18:09
geriux
removed
the
Mobile App - Automation
4 tasks
derekblank
approved these changes
Jul 29, 2022
There was a problem hiding this comment.
Ok this is looking good! I tried my best to break the list style types, but couldn't. Summary of the test cases I tried:
Builds:
iOS: pr19116-1d883ed, iPhone SE
Android: pr16962-faca4cd, Galaxy S20
TC 1: Indentation
- Android 🟢
- iOS 🟢
TC 2: Indentation and Ordered Lists
- Indentation with ordered lists
- Android 🟢
- iOS 🟢
- List style type icon changes to number
- Android 🟢
- iOS 🟢
- Reverse order
- Android 🟢
- iOS 🟢
- Starting value
- Android 🟢
- iOS 🟢
TC 3: Font Size
- Android 🟢
- iOS 🟢
TC 4: Background and text colors
- Android 🟢
- iOS 🟢
I also verified the HTML changes in the web with each test. Code looks great as well.
Approving, LGTM! Nice work! 🚀
geriux
pushed a commit
that referenced
this pull request
Aug 3, 2022
* Mobile - BlockList - Only render ListEmptyComponent at root level * Mobile - Register ListItem block * ListItem block - Export IdentUI to share it with Mobile * Mobile - Export useRefEffect * List V2 - Make it compatible with mobile by passing two props to their inner blocks and selecting a native TagName * Mobile - ListItem block - Add native variant * List V2 - Add style prop for mobile * Mobile - ListItem block - Add color customization support * Mobile - ListItem - Pass style instead of specific values to prevent other data like fontSize/lineHeight * Mobile - Add List V2 feature flag * [Mobile] - List V2 - List Style Type (#42703) * Mobile - List V2: - List Item - Add support for list type for both ordered and standard icon. - List - Avoid passing the start prop on Mobile * Mobile - ListStyleType - Fix default color * Mobile - ListItem - Add margin for parent list * Mobile - ListItem - Check if there's a default font size from the theme * Mobile - ListItem - Add deleteEnter for RichText * Mobile - ListItem - Remove unneeded theme fontSize parsing * Mobile - ListItem - Fix list margins * Mobile - ListItem - Fix margins * Mobile - Global styles - Parse font sizes * Mobile - List Style - Use theme.json font size as a default if its a block based theme * Mobile - Update CHANGELOG * Mobile - List Block V2 - Unit tests * Mobile - BlockList - Fix appender * Mobile - RichText - Add container width prop * Mobile - List V2 - Fix issue on Android where the font size / line-height updates weren't showing correctly due to issues with the views layout * List V2 - Move TagName to its own file with both web and native variant * Mobile - Update RichText snapshots
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.
Follow up of #42702
Gutenberg Mobile-> List V2 Support wordpress-mobile/gutenberg-mobile#5054WordPress iOS-> Gutenberg - Add list block v2 flag wordpress-mobile/WordPress-iOS#19116WordPress Android-> [Gutenberg] Add List Block V2 flag wordpress-mobile/WordPress-Android#16962What?
This PR adds the custom styling for the List V2 block, since we are not using Aztec's formatting for lists we are doing it on the React side.
Why?
Instead of changing Aztec to work with Lists using inner blocks, now the logic for displaying the list type, ordered lists, and indentation will be handled within the ListItem block.
How?
It introduces a new
ListStyleTypecomponent that will handle the logic for the icon/ordered lists, as well as including three different icons for indentations, Circle, Circle outline, and Square.It supports setting a starting number for ordered lists and the reverse setting.
There's also a change where we parse the
theme.jsondata and Global Styles, sometimes font sizes are not in pixels so we need to parse them so we don't have to do it every time we need one of those values.Testing Instructions
Precondition: A site with the Gutenberg 13.8 plugin.
NOTE: Once the flag is enabled sometimes the new List block won't be shown the first time the editor is opened, so if you still see the old version without inner blocks, close the editor and open it again.
Test case 1 - Test different levels of indentation
Test case 2 - Test different levels of indentation and ordered lists
reverseoptionTest case 3 - Set a different font size
Test case 4 - Set some background and text colors
Screenshots or screencast
Test case 1 - Test different levels of indentation
Test case 2 - Test different levels of indentation and ordered lists
Test case 3 - Set a different font size
Test case 4 - Set some background and text colors