List block design review

[iamthomasbishop]

While giving the latest alpha of WPAndroid (alpha-165), I noticed a few things that could use some refinement. Because I was previously out for ~5 weeks, I'm not sure which/if any are in progress or fixed. With that said, here are the things that jumped out at me (and some redlines from the original block design for reference):

(above: proposed block design)

(left: current implementation, right: proposed)

Visual refinements

• List items don't have vertical spacing between – there should be 10pt between items
• Left edge of list should be aligned left to 16pt keyline (aligned flush left of inner block)
• Bullet (unordered lists) should be 6pt
• Space between bullet and text should be 10pt (total text inset == 32pt)
• It appears that on unordered lists, the bullet is 1-2pt below center
• Line-height on items should be 24pt
• Top-level bullets should be same color as text
• Nested items' list-style-type should be circle

Bugs

• Crash on switching to / creating of ordered list
• Hitting return twice doesn't escape block + create next one
• If you tap into a nested list item, then hit return, the last character gets included in the return to the next line

Side note: I think on Android, there might be a regression on inner block padding, where there's too much padding along the top and bottom edges of inner blocks – something we fixed previously?

cc @SergioEstevao @etoledom @hypest

[hypest]

Moving to next milestone.

[koke]

@SergioEstevao @daniloercoli how hard would you say this is? I like the improvements but I have no idea if this is a trivial change or a week-long one, and with everything else in the backlog I wouldn't put a lot of time into this right now.

[SergioEstevao]

@SergioEstevao @daniloercoli how hard would you say this is? I like the improvements but I have no idea if this is a trivial change or a week-long one, and with everything else in the backlog I wouldn't put a lot of time into this right now.

So in iOS I already addressed some of the spacing issues. Another part of them will be sorted with the improvements/fixes I'm doing on the nested lists. I will say to wait for those to be merged and then reevaluate again.

[daniloercoli]

Aztec on Android does already provide a way to customize paddings and margins. We can set those custom settings in the wrapper and refine the UI.

[SergioEstevao]

@iamthomasbishop I think we already address all these issues, are you still seeing any of those in the current builds?

So I tested this again on Android and while it looks all the bugs/crashes are solved but I think that only some of the visual refinements were addressed. I marked above the ones that I think are sorted.

On iOS it looks all the visual refinements were addressed except for the bullet character on the second level, we have a pending PR for it in Aztec iOS but we decided to postpone it until android implemented it too.

[geriux]

Closing since the List block was improved when migrating to inner blocks, so the UI is now unified in both platforms.