Design Audit – June 2019

[iamthomasbishop]

It's time for another round of audit on the current state of Mobile Gutenberg. We've made substantial progress in the past couple of months, so most of this is new, but there are a few things that are left-over from the last round or have been delegated to the future.

Note: this is an in-progress master issue. I will be creating/finding separate issues for each item and linking to those from this master issue.

This list is broken down into categories based on focus area, with a bias towards UI polish and writing flow of existing things. I will try to order based on approximate importance in terms of user impact. Each issue will need to be prioritized separately in the main project board.

All Blocks

• Selected blocks no longer have left/right borders on wide viewports Selected blocks no longer have left/right borders on wide viewports #1193
• Remove extra inner padding on text blocks Remove extra inner padding on text blocks #992
• (follow up to the above ^ one) Remove extra padding on Post Title Remove extra padding on Post Title #2021
• It's too easy to accidentally delete blocks It's too easy to accidentally delete blocks #1146
• [Android] Ensure Noto-Serif is properly applied to Headings [Android] Ensure Noto-Serif is properly applied to Headings #1147
• Refine border-radii on placeholder/unsupported blocks Refine border-radii on placeholder/unsupported blocks #999

Bottom Sheets

• Tapping "return" should dismiss sheet [Bottom Sheets] Tapping "return" should dismiss sheet #1164
• Improve text entry for long text in the image settings bottom sheet Image block: Improve text entry for long text in the image settings bottom sheet #922 (this should be approached from a Sheets/input component view)

Quick Toolbar

• Remove border-left from Quick Toolbar Remove border-left from Quick Toolbar #639

Inserter

• "Add New Block" indicator isn't shown when title field is focused "Add New Block" indicator isn't shown when title field is focused #632
• "Add new block" indicator should show in place of empty block instead of below it [Empty blocks] "Add new block" indicator should show in place of empty block instead of below it #1165 / [Empty blocks] Tiny refinement to "add new block" placement/flow #1177
• Refine "Add new block" indicator style Refine "Add new block" indicator style #1166
• Allow only 1 read-more block per post Read More Block: Don't allow multiple #1156
• Order blocks based on usage stats or content type [Block Library/Inserter] Order blocks based on usage stats or content type #1105

RichText Blocks

• Add underline option to text-based blocks: Add underline option for text-based blocks #562

Image block

• Add visual emphasis to focused images Add visual emphasis to focused images #601 (this was done to Video recently)
• Add description/title to Image selection sheets Add description/title to Image selection sheets #986
• Add GIF badge to GIFs in editor Add GIF badge to GIFs in editor #968
• Simplify media insertion flow Simplify media insertion flow #946
• Bring additional image settings into Image block

Video block

• [iOS] Videos added from media library don't load in the editor Videos added from media library don't load in the editor #1151
• Clean up video block styling [Video] Refine Video block scrim/play-pause button styling #1178

Quote block

• Can't hide keyboard reliably on Quote block Can't hide the keyboard when on Quote block (iOS) #1103
• [Quote] Tapping return at end of block doesn't create new block [Quote] Tapping return at end of block doesn't create new block #1104

List block

• Additional Empty line added when adding items List shows an empty editable extra line #954

Page Break Block

• Refine Page Break Block designs: Refine "Page Break" Block designs #618

Separator block

• Line should be styled to match designs (https://cloudup.com/ctkvab1tgA5)

Misc

• iOS - Display word, character count on overflow menu Action Sheet Display word, character count on overflow menu Action Sheet #506

Unsupported Blocks

• (Mostly Done) Update design for Unsupported blocks: Update design for Unsupported blocks #479

Next/Future

• Add additional sources to Image block Pexels and Giphy search not available form image block #720
• Allow easier setting of Featured Image [Proposal] Allow easier setting of Featured Image #1011
• Proposal: Add search to Inserter
• Try: Quick action gestures Try: Quick action gestures #1040
• Proposal: New "default" Quick Toolbar Proposal: New "default" Quick Toolbar #1020
• Try: Make Quick Toolbar styles feel more platform-specific Try: Make Quick Toolbar styles feel more platform-specific  #695
• Proposal: Collapse/expand top bar on scroll Collapse/expand top bar on scroll #614
• 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
• Improve base typographic rhythm: Improve base typographic rhythm #550 Will be updated with an upcoming new type scale
• [Try] Improve editor loading experience [Try] Improve editor loading experience #1179

Design Notes

• Should we switch to 16px padding on all dividers on sheets for consistency?

There are more issues that I've excluded from this list because they either aren't high priority at the moment, or are way off in the future. https://github.com/wordpress-mobile/gutenberg-mobile/issues/created_by/iamthomasbishop

[kyleaparker]

Closing in favour of #2656