Skip to content

Commit

Permalink
Add a mobile minimum size for form fields (WordPress#13639)
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
kjellr authored and jorgefilipecosta committed Feb 4, 2019
1 parent 609a42c commit fd2468d
Show file tree
Hide file tree
Showing 8 changed files with 37 additions and 6 deletions.
7 changes: 6 additions & 1 deletion packages/block-library/src/code/editor.scss
Original file line number Diff line number Diff line change
@@ -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;
}
Expand Down
7 changes: 6 additions & 1 deletion packages/block-library/src/html/editor.scss
Original file line number Diff line number Diff line change
@@ -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;
}
Expand Down
7 changes: 6 additions & 1 deletion packages/block-library/src/preformatted/theme.scss
Original file line number Diff line number Diff line change
@@ -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;
}
}
}
1 change: 0 additions & 1 deletion packages/components/src/form-token-field/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,6 @@
min-height: 24px;
background: inherit;
border: 0;
font-size: $default-font-size;
color: $dark-gray-800;
box-shadow: none;

Expand Down
1 change: 1 addition & 0 deletions packages/edit-post/src/components/text-editor/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down
7 changes: 6 additions & 1 deletion packages/edit-post/src/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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();
}
Expand Down
7 changes: 6 additions & 1 deletion packages/editor/src/components/post-text-editor/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
6 changes: 6 additions & 0 deletions packages/editor/src/components/url-input/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down

0 comments on commit fd2468d

Please sign in to comment.