Add a mobile minimum size for form fields #13639

kjellr · 2019-02-01T15:35:15Z

On Safari for iOS, the browser automatically zooms into any form field that contains text with a font size less than 16px. When this occurs, users must manually zoom back out after dismissing the keyboard. This happens frequently in our interface, since many of our text fields use 13px text. It breaks up the flow, and makes editing feel very non-mobile-optimized.

We already have a $mobile-text-min-font-size variable, and use this to avoid this behavior in the block inserter:

gutenberg/packages/editor/src/components/inserter/style.scss

Lines 75 to 79 in ce864a6

    
           /* Fonts smaller than 16px causes mobile safari to zoom. */ 
        
           font-size: $mobile-text-min-font-size; 
        
           @include break-small { 
        
           	font-size: $default-font-size; 
        
           }

This PR expands that fix out to as many different form fields as I could find:

General form fields, defined in /edit-post/ (this covers most fields by itself)
Preformatted, Code, and HTML blocks
Form Token Field (used in the tags panel of the document sidebar)
URL Input field

⚠️ This worked fine in my testing, but since it effects a lot of fields, it could use a lot of testing!

In addition, the Code Editor extended off-screen on small screens. This PR adds a max-width to clean that up.

Screenshots

Before:

🎥 Screencast of the issue

After:

🎥 Screencast with this fix

cc @iamthomasbishop for some thoughts/testing too.

This implements our min-font size of 16px for form fields, in order to prevent zoom-in when Safari focuses on the fields.

This should fall back to the default, with the new minimum mobile font size.

… screens.

iamthomasbishop · 2019-02-01T20:03:17Z

Yes, thank you @kjellr ! Based on the videos above it looks right to my eyes, but wouldn't hurt to get other reviewers. Well done! 👏

gziolo

This code looks good to me but I haven't tested 👍

jorgefilipecosta

Works great I tested on a real device I was able to replicate the zoom issue on master, and on this PR the problem is fixed.
No noticeable changes happened while testing on the desktop.

…rnmobile/372-use-RichText-on-Title-block * 'master' of https://github.com/WordPress/gutenberg: (22 commits) Make the modal title styling consistent (#13669) Disable navigation block for text mode. (#12185) Fix: Linting problem in modal example code (#13671) Add myself as a code owner to the annotations (#13672) Add more reviewers to CODEOWNERS.md file (#13667) Plugin: Remove jQuery heartbeat-to-hooks proxying (#13576) Workflow: Add repository CODEOWNERS file (#13604) Add a mobile minimum size for form fields (#13639) Update edit-save documentation (#13578) Alt image setting (#13631) Fix: Allow years lower than 1970 in DateTime component. (#13602) Using addQueryArgs to generate Manage All Reusable Blocks link (#13653) Bump plugin version to 5.0.0-rc.1 (#13652) Update lodash to 4.17.10 (#13651) Refreshed PR (#9469) Set default values of the width and height input fields according to the actual image dimensions (#7687) 12647 fix css color picker (#12747) Remove "we" from messages (#13644) Fix: Font size picker max width on mobile (#13264) Fix/issue 12501 menu item aria label ...

@iamthomasbishop

On Safari for iOS, the browser automatically zooms into any form field that contains text with a font size less than `16px`. When this occurs, users must manually zoom back out after dismissing the keyboard. This happens frequently in our interface, since many of our text fields use `13px` text. It breaks up the flow, and makes editing feel _very_ non-mobile-optimized. We already have a [`$mobile-text-min-font-size` variable](https://github.com/WordPress/gutenberg/blob/286317c8e61b1a2922243875fe1f98c868d7859b/assets/stylesheets/_variables.scss#L15), and use this to avoid this behavior in the block inserter: https://github.com/WordPress/gutenberg/blob/ce864a6f9aff4eea9b4bd3994b2cf4bae30105cb/packages/editor/src/components/inserter/style.scss#L75-L79 This PR expands that fix out to as many different form fields as I could find: - General form fields, defined in `/edit-post/` (this covers most fields by itself) - Preformatted, Code, and HTML blocks - Form Token Field (used in the tags panel of the document sidebar) - URL Input field ⚠️ _This worked fine in my testing, but since it effects a lot of fields, it could use a lot of testing!_ In addition, the Code Editor extended off-screen on small screens. This PR adds a `max-width` to clean that up. ## Screenshots Before: 🎥 [**Screencast of the issue**](https://cloudup.com/cf1VqxNV5LN) ![ios-zoom-old](https://user-images.githubusercontent.com/1202812/52131756-93f03700-260b-11e9-83de-d03fb5a84a09.gif) <img width="376" alt="screen shot 2019-02-01 at 10 16 56 am" src="https://user-images.githubusercontent.com/1202812/52131610-2e03af80-260b-11e9-83d1-15c66590f62a.png"> After: 🎥 [**Screencast with this fix**](https://cloudup.com/cRQNYsDRsmx) ![ios-zoom](https://user-images.githubusercontent.com/1202812/52131874-f0535680-260b-11e9-9ad8-6ede81e21b60.gif) <img width="375" alt="screen shot 2019-02-01 at 10 02 16 am" src="https://user-images.githubusercontent.com/1202812/52131615-322fcd00-260b-11e9-88af-5407e32388ee.png"> --- cc @iamthomasbishop for some thoughts/testing too.

@iamthomasbishop

On Safari for iOS, the browser automatically zooms into any form field that contains text with a font size less than `16px`. When this occurs, users must manually zoom back out after dismissing the keyboard. This happens frequently in our interface, since many of our text fields use `13px` text. It breaks up the flow, and makes editing feel _very_ non-mobile-optimized. We already have a [`$mobile-text-min-font-size` variable](https://github.com/WordPress/gutenberg/blob/286317c8e61b1a2922243875fe1f98c868d7859b/assets/stylesheets/_variables.scss#L15), and use this to avoid this behavior in the block inserter: https://github.com/WordPress/gutenberg/blob/ce864a6f9aff4eea9b4bd3994b2cf4bae30105cb/packages/editor/src/components/inserter/style.scss#L75-L79 This PR expands that fix out to as many different form fields as I could find: - General form fields, defined in `/edit-post/` (this covers most fields by itself) - Preformatted, Code, and HTML blocks - Form Token Field (used in the tags panel of the document sidebar) - URL Input field ⚠️ _This worked fine in my testing, but since it effects a lot of fields, it could use a lot of testing!_ In addition, the Code Editor extended off-screen on small screens. This PR adds a `max-width` to clean that up. ## Screenshots Before: 🎥 [**Screencast of the issue**](https://cloudup.com/cf1VqxNV5LN) ![ios-zoom-old](https://user-images.githubusercontent.com/1202812/52131756-93f03700-260b-11e9-83de-d03fb5a84a09.gif) <img width="376" alt="screen shot 2019-02-01 at 10 16 56 am" src="https://user-images.githubusercontent.com/1202812/52131610-2e03af80-260b-11e9-83d1-15c66590f62a.png"> After: 🎥 [**Screencast with this fix**](https://cloudup.com/cRQNYsDRsmx) ![ios-zoom](https://user-images.githubusercontent.com/1202812/52131874-f0535680-260b-11e9-9ad8-6ede81e21b60.gif) <img width="375" alt="screen shot 2019-02-01 at 10 02 16 am" src="https://user-images.githubusercontent.com/1202812/52131615-322fcd00-260b-11e9-88af-5407e32388ee.png"> --- cc @iamthomasbishop for some thoughts/testing too.

kjellr added 6 commits February 1, 2019 09:21

Adjust base font size for most form fields.

4df45ff

This implements our min-font size of 16px for form fields, in order to prevent zoom-in when Safari focuses on the fields.

Implement mobile min font size for preformatted, code, and HTML fields.

e2f4ce9

Remove font size for form-token-field

6b2fc86

This should fall back to the default, with the new minimum mobile font size.

Implement mobile min-font size for URL input field.

ea2d4b9

Implement mobile min-font size for text editor mode.

02f5e3b

Make sure code editor doesn't extend beyond the screen edges on small…

8d50ab6

… screens.

kjellr added [Feature] Blocks Overall functionality of blocks Mobile Web Viewport sizes for mobile and tablet devices [Feature] Code Editor Handling the code view of the editing experience labels Feb 1, 2019

kjellr self-assigned this Feb 1, 2019

kjellr requested review from jasmussen and a team February 1, 2019 15:35

kjellr mentioned this pull request Feb 1, 2019

Post author dropdown: add accessible-autocomplete #7385

Closed

4 tasks

gziolo approved these changes Feb 4, 2019

View reviewed changes

gziolo added this to the 5.1 (Gutenberg) milestone Feb 4, 2019

jorgefilipecosta approved these changes Feb 4, 2019

View reviewed changes

jorgefilipecosta merged commit fd2468d into master Feb 4, 2019

jorgefilipecosta deleted the update/mobile-min-font-sizes branch February 4, 2019 18:38

This was referenced Feb 18, 2019

Bump plugin version to 5.1.0-rc.1 #13908

Merged

Bump plugin version to 5.1.0 #13960

Merged

This was referenced Jul 16, 2024

[Snyk] Upgrade @wordpress/postcss-plugins-preset from 1.6.0 to 5.1.0 WontonSam/woocommerce-admin#124

Open

[Snyk] Upgrade @wordpress/base-styles from 3.6.0 to 5.1.0 WontonSam/woocommerce-admin#127

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add a mobile minimum size for form fields #13639

Add a mobile minimum size for form fields #13639

kjellr commented Feb 1, 2019

iamthomasbishop commented Feb 1, 2019

gziolo left a comment •

edited

Loading

jorgefilipecosta left a comment

	/* Fonts smaller than 16px causes mobile safari to zoom. */
	font-size: $mobile-text-min-font-size;
	@include break-small {
	font-size: $default-font-size;
	}

Add a mobile minimum size for form fields #13639

Add a mobile minimum size for form fields #13639

Conversation

kjellr commented Feb 1, 2019

Screenshots

iamthomasbishop commented Feb 1, 2019

gziolo left a comment • edited Loading

Choose a reason for hiding this comment

jorgefilipecosta left a comment

Choose a reason for hiding this comment

gziolo left a comment •

edited

Loading