Mobile Gutenberg Design Audit: Pre-Beta Master Issue

[iamthomasbishop]

With the beta fast approaching, I am spending some time this week doing an audit of the current state of Mobile Gutenberg – primarily with a focus on UI and writing flow.

This list is broken down into categories, and will try to order based on importance in terms of user impact, but we can decide where to put them into the Main Project.

• Done: ✅
• In Progress: Things that are already underway.
• Must Have: Things that should be included in the February Beta.
• Nice to Have: Things that we should attempt to include in the February Beta.
• Proposals For Future: Things that are on my radar to improve or explore in terms of design.

Done

• Clean up styling on Inserter UI: Inserter UI #349 (PR: BottomSheet centered with maximum width. #600, Improve style of inserter UI #608 )
• Use Noto Serif everywhere: [WPAndroid] fonts are not the same as in iOS #419
• Pasting from top mobile editors should work well: Pasting external content #238
• Media selection and upload improvements: Image selection and upload #206
• Refine inner block margins: Refine inner block margins #547
• Clean up styling of starter paragraph block/placeholder: Clean up styling of starter paragraph block/placeholder #549
• Align text-label wording on block placeholders: Align text-label wording on block placeholders #592
• Make entire Bottom Sheet swipeable to dismiss: Make entire Bottom Sheet swipeable to dismiss #596
• [Android] Bottom Sheets: Inset table rows with icons to 72dp keyline: [Android] Bottom Sheets: Inset table rows with icons to 72dp keyline #597
• Inline Links UI: Use format-library for the formatting bar #275 (PR: Links UI using BottomSheet component #623)
• Prevent focus border from shifting block contents: Prevent focus border from shifting block contents #551 (PR Add border on Title when focused #622)
• Clean up styling of Title block (border, text color): Add border on Title when focused in order to match other block focus styles #540 (PR Add border on Title when focused #622)
• “Add new block” indicator not showing (iOS): iOS: “Add New Block” indicator not visible when using Inserter #543
• Update Inserter toggle icon style: Update Inserter toggle icon style #546
• Tablet layout visual refinements: Tablet layout visual refinements #604
• Remove all focus when tapping in empty canvas or hide keyboard button: Remove all focus when tapping in empty canvas or hide keyboard button #552
• Add ability to style text and add link on Image caption: Proposal: Add ability to style text and add link in Image caption #574
• Refine Page Break Block designs: Refine "Page Break" Block designs #618
• Add visual emphasis to focused images: Add visual emphasis to focused images #601 Being worked on in Design Audit – June 2019 #1163
• Add ability to add single new-line when typing Shift + Enter: Add ability to add single new-line when typing Shift + Enter #559

In Progress

• Refine Bottom Sheets transitions: Refine Bottom Sheets in/out transition #595
• Update design for Unsupported blocks: Update design for Unsupported blocks #479

Must Have

Nice to Have

• Add underline option to text-based blocks: Add underline option for text-based blocks #562
• Improve base typographic rhythm: Improve base typographic rhythm #550

Proposals For Future

• Add heavier weight of Noto Serif to the mix: Proposal: Add heavier weight of Noto Serif to the mix #561
• Future proposal: Add Justify options where text-alignments are supported: Add "Justify" to text-alignment options on blocks that support text-alignment - Jetpack/WordPress.com only #575

[mchowning]

After checking with @iamthomasbishop , closing this issue (but leaving open the unfinished sub-issues) since we are past the beta release now.