From 61b6a63cd6f10472eaac2f236df63bb38e680197 Mon Sep 17 00:00:00 2001 From: Kjell Reigstad <kjell@kjellr.com> Date: Mon, 4 Feb 2019 13:38:38 -0500 Subject: [PATCH] Add a mobile minimum size for form fields (#13639) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- packages/block-library/src/code/editor.scss | 7 ++++++- packages/block-library/src/html/editor.scss | 7 ++++++- packages/block-library/src/preformatted/theme.scss | 7 ++++++- packages/components/src/form-token-field/style.scss | 1 - packages/edit-post/src/components/text-editor/style.scss | 1 + packages/edit-post/src/style.scss | 7 ++++++- packages/editor/src/components/post-text-editor/style.scss | 7 ++++++- packages/editor/src/components/url-input/style.scss | 6 ++++++ 8 files changed, 37 insertions(+), 6 deletions(-) diff --git a/packages/block-library/src/code/editor.scss b/packages/block-library/src/code/editor.scss index 1f53d244794e4d..ec54fd99ad2bcf 100644 --- a/packages/block-library/src/code/editor.scss +++ b/packages/block-library/src/code/editor.scss @@ -1,8 +1,13 @@ .wp-block-code .editor-plain-text { font-family: $editor-html-font; - font-size: $text-editor-font-size; color: $dark-gray-800; + /* Fonts smaller than 16px causes mobile safari to zoom. */ + font-size: $mobile-text-min-font-size; + @include break-small { + font-size: $default-font-size; + } + &:focus { box-shadow: none; } diff --git a/packages/block-library/src/html/editor.scss b/packages/block-library/src/html/editor.scss index 44daf03dd370af..97d4b156aea79b 100644 --- a/packages/block-library/src/html/editor.scss +++ b/packages/block-library/src/html/editor.scss @@ -1,11 +1,16 @@ .wp-block-html .editor-plain-text { font-family: $editor-html-font; - font-size: $text-editor-font-size; color: $dark-gray-800; padding: 0.8em 1em; border: 1px solid $light-gray-500; border-radius: 4px; + /* Fonts smaller than 16px causes mobile safari to zoom. */ + font-size: $mobile-text-min-font-size; + @include break-small { + font-size: $default-font-size; + } + &:focus { box-shadow: none; } diff --git a/packages/block-library/src/preformatted/theme.scss b/packages/block-library/src/preformatted/theme.scss index 920ecf7de4238d..e0a221912e6203 100644 --- a/packages/block-library/src/preformatted/theme.scss +++ b/packages/block-library/src/preformatted/theme.scss @@ -1,7 +1,12 @@ .wp-block-preformatted { pre { font-family: $editor-html-font; - font-size: $text-editor-font-size; color: $dark-gray-800; + + /* Fonts smaller than 16px causes mobile safari to zoom. */ + font-size: $mobile-text-min-font-size; + @include break-small { + font-size: $text-editor-font-size; + } } } diff --git a/packages/components/src/form-token-field/style.scss b/packages/components/src/form-token-field/style.scss index 1080070a4ddafb..99fbc607c819aa 100644 --- a/packages/components/src/form-token-field/style.scss +++ b/packages/components/src/form-token-field/style.scss @@ -31,7 +31,6 @@ min-height: 24px; background: inherit; border: 0; - font-size: $default-font-size; color: $dark-gray-800; box-shadow: none; diff --git a/packages/edit-post/src/components/text-editor/style.scss b/packages/edit-post/src/components/text-editor/style.scss index 1a5980bc5e022c..e925344dc9e3a2 100644 --- a/packages/edit-post/src/components/text-editor/style.scss +++ b/packages/edit-post/src/components/text-editor/style.scss @@ -16,6 +16,7 @@ .edit-post-text-editor { width: 100%; + max-width: calc(100% - #{$grid-size-large * 2}); margin-left: $grid-size-large; margin-right: $grid-size-large; diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss index 90fac100e15eed..83f2a777454585 100644 --- a/packages/edit-post/src/style.scss +++ b/packages/edit-post/src/style.scss @@ -174,10 +174,15 @@ body.block-editor-page { select, textarea { font-family: $default-font; - font-size: $default-font-size; padding: 6px 8px; @include input-style__neutral(); + /* Fonts smaller than 16px causes mobile safari to zoom. */ + font-size: $mobile-text-min-font-size; + @include break-small { + font-size: $default-font-size; + } + &:focus { @include input-style__focus(); } diff --git a/packages/editor/src/components/post-text-editor/style.scss b/packages/editor/src/components/post-text-editor/style.scss index 4f6e9ac44ceb79..fd1c77195cc2fe 100644 --- a/packages/editor/src/components/post-text-editor/style.scss +++ b/packages/editor/src/components/post-text-editor/style.scss @@ -7,9 +7,14 @@ resize: none; overflow: hidden; font-family: $editor-html-font; - font-size: $text-editor-font-size; line-height: 150%; + /* Fonts smaller than 16px causes mobile safari to zoom. */ + font-size: $mobile-text-min-font-size; + @include break-small { + font-size: $text-editor-font-size; + } + &:hover, &:focus { border: $border-width solid $light-gray-500; diff --git a/packages/editor/src/components/url-input/style.scss b/packages/editor/src/components/url-input/style.scss index 64429e6d6c4e40..2c1662a4c2ed56 100644 --- a/packages/editor/src/components/url-input/style.scss +++ b/packages/editor/src/components/url-input/style.scss @@ -20,6 +20,12 @@ $input-size: 300px; margin-left: 0; margin-right: 0; + /* Fonts smaller than 16px causes mobile safari to zoom. */ + font-size: $mobile-text-min-font-size; + @include break-small { + font-size: $default-font-size; + } + &::-ms-clear { display: none; }