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;
 		}