Title: modal – Make WordPress Test

---

#  Tag Archives: modal

 [  ](https://profiles.wordpress.org/ryan/) [Ryan Boren](https://profiles.wordpress.org/ryan/)
6:44 pm _on_ August 15, 2015     
Tags: [chrome ( 28 )](https://make.wordpress.org/test/tag/chrome/),
[desktop ( 26 )](https://make.wordpress.org/test/tag/desktop/), [editor ( 30 )](https://make.wordpress.org/test/tag/editor/),
[links ( 4 )](https://make.wordpress.org/test/tag/links/), [macos ( 29 )](https://make.wordpress.org/test/tag/macos/),
modal   

# 󠀁[Editor, Links: Link to an existing post via the links modal](https://make.wordpress.org/test/2015/08/15/editor-links-link-to-an-existing-post-via-the-links-modal/)󠁿

In the editor, link existing text to an existing post.

  [](https://make.wordpress.org/test/2015/08/15/editor-links-link-to-an-existing-post-via-the-links-modal/screen-shot-2015-08-15-at-1-35-06-pm/#main)
Highlight the text to link.   [](https://make.wordpress.org/test/2015/08/15/editor-links-link-to-an-existing-post-via-the-links-modal/screen-shot-2015-08-15-at-1-35-12-pm/#main)
Head over to the link button in the editor toolbar.   [](https://make.wordpress.org/test/2015/08/15/editor-links-link-to-an-existing-post-via-the-links-modal/screen-shot-2015-08-15-at-1-35-17-pm/#main)
Click the link icon. 
  [](https://make.wordpress.org/test/2015/08/15/editor-links-link-to-an-existing-post-via-the-links-modal/screen-shot-2015-08-15-at-1-35-22-pm/#main)
I often accidentally start my search in the URLURL A specific web address of a website
or web page on the Internet, such as a website’s URL www.wordpress.org field at 
the top. Instead, go down to the Search field and type in the beginning of the title
of the post we want to link.   [](https://make.wordpress.org/test/2015/08/15/editor-links-link-to-an-existing-post-via-the-links-modal/screen-shot-2015-08-15-at-1-35-32-pm/#main)
Click the first result.   [](https://make.wordpress.org/test/2015/08/15/editor-links-link-to-an-existing-post-via-the-links-modal/screen-shot-2015-08-15-at-1-35-38-pm/#main)
Click Add Link   [](https://make.wordpress.org/test/2015/08/15/editor-links-link-to-an-existing-post-via-the-links-modal/screen-shot-2015-08-15-at-1-35-43-pm/#main)
Link made. Click the link to bring up the inline link toolbar and verify the link.
[](https://make.wordpress.org/test/2015/08/15/editor-links-link-to-an-existing-post-via-the-links-modal/screen-shot-2015-08-15-at-1-35-47-pm/#main)
Done.

[#chrome](https://make.wordpress.org/test/tag/chrome/), [#desktop](https://make.wordpress.org/test/tag/desktop/),
[#editor](https://make.wordpress.org/test/tag/editor/), [#links](https://make.wordpress.org/test/tag/links/),
[#macos](https://make.wordpress.org/test/tag/macos/), [#modal](https://make.wordpress.org/test/tag/modal/)

 * [Login to Reply](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fmake.wordpress.org%2Ftest%2F2015%2F08%2F15%2Feditor-links-link-to-an-existing-post-via-the-links-modal%2F%23respond&locale=en_US)

 [  ](https://profiles.wordpress.org/ryan/) [Ryan Boren](https://profiles.wordpress.org/ryan/)
11:04 pm _on_ July 2, 2015     
Tags: [16434 ( 6 )](https://make.wordpress.org/test/tag/16434/),
[4.3 ( 18 )](https://make.wordpress.org/test/tag/4-3/), [beta ( 19 )](https://make.wordpress.org/test/tag/beta/),
[chrome ( 28 )](https://make.wordpress.org/test/tag/chrome/), [iOS ( 64 )](https://make.wordpress.org/test/tag/ios/),
[macos ( 29 )](https://make.wordpress.org/test/tag/macos/), [media ( 30 )](https://make.wordpress.org/test/tag/media/),
modal, [options ( 5 )](https://make.wordpress.org/test/tag/options/), [phablet ( 50 )](https://make.wordpress.org/test/tag/phablet/),
[settings ( 3 )](https://make.wordpress.org/test/tag/settings/), [site-icons ( 8 )](https://make.wordpress.org/test/tag/site-icons/),
[web ( 51 )](https://make.wordpress.org/test/tag/web/)   

# 󠀁[Changing site icon, 4.3-beta1-33054, iPhone 6+](https://make.wordpress.org/test/2015/07/02/changing-site-icon-4-3-beta1-33054-iphone-6/)󠁿

Cropping is broken. For [#16434](https://core.trac.wordpress.org/ticket/16434).

  [](https://make.wordpress.org/test/2015/07/02/changing-site-icon-4-3-beta1-33054-iphone-6/image-168/#main)
Tap Update Site Icon   [](https://make.wordpress.org/test/2015/07/02/changing-site-icon-4-3-beta1-33054-iphone-6/image-169/#main)
Tap the 3rd image. I want to make sure I’m not selecting something already cropped,
which is hard to determine from the modal. I know after some trial and error that
the first image is already cropped.   [](https://make.wordpress.org/test/2015/07/02/changing-site-icon-4-3-beta1-33054-iphone-6/image-170/#main)
Tap Set as Site Icon 
  [](https://make.wordpress.org/test/2015/07/02/changing-site-icon-4-3-beta1-33054-iphone-6/image-171/#main)
Busted

Macnchrome too.

[⌊Screen Shot 2015-07-02 at 6.05.13 PM⌉⌊Screen Shot 2015-07-02 at 6.05.13 PM⌉[

#16434, [#4-3](https://make.wordpress.org/test/tag/4-3/), [#beta](https://make.wordpress.org/test/tag/beta/),
[#chrome](https://make.wordpress.org/test/tag/chrome/), [#ios](https://make.wordpress.org/test/tag/ios/),
[#macos](https://make.wordpress.org/test/tag/macos/), [#media](https://make.wordpress.org/test/tag/media/),
[#modal](https://make.wordpress.org/test/tag/modal/), [#options](https://make.wordpress.org/test/tag/options/),
[#phablet](https://make.wordpress.org/test/tag/phablet/), [#settings](https://make.wordpress.org/test/tag/settings/),
[#site-icons](https://make.wordpress.org/test/tag/site-icons/), [#web](https://make.wordpress.org/test/tag/web/)

 * [Login to Reply](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fmake.wordpress.org%2Ftest%2F2015%2F07%2F02%2Fchanging-site-icon-4-3-beta1-33054-iphone-6%2F%23respond&locale=en_US)

 [  ](https://profiles.wordpress.org/ryan/) [Ryan Boren](https://profiles.wordpress.org/ryan/)
10:54 pm _on_ June 19, 2015     
Tags: [chrome ( 28 )](https://make.wordpress.org/test/tag/chrome/),
[desktop ( 26 )](https://make.wordpress.org/test/tag/desktop/), [macos ( 29 )](https://make.wordpress.org/test/tag/macos/),
[media ( 30 )](https://make.wordpress.org/test/tag/media/), modal, [web ( 51 )](https://make.wordpress.org/test/tag/web/)

# 󠀁[Image size in the Image Details modal, Mac and Chrome](https://make.wordpress.org/test/2015/06/19/image-size-in-the-image-details-modal-mac-and-chrome/)󠁿

I don’t know why I see an image Size selector on some sites but not others.

  [](https://make.wordpress.org/test/2015/06/19/image-size-in-the-image-details-modal-mac-and-chrome/screen-shot-2015-06-19-at-3-10-40-pm/#main)
This site has Size   [](https://make.wordpress.org/test/2015/06/19/image-size-in-the-image-details-modal-mac-and-chrome/screen-shot-2015-06-19-at-3-04-47-pm/#main)
This site does not

[#chrome](https://make.wordpress.org/test/tag/chrome/), [#desktop](https://make.wordpress.org/test/tag/desktop/),
[#macos](https://make.wordpress.org/test/tag/macos/), [#media](https://make.wordpress.org/test/tag/media/),
[#modal](https://make.wordpress.org/test/tag/modal/), [#web](https://make.wordpress.org/test/tag/web/)

 * [Login to Reply](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fmake.wordpress.org%2Ftest%2F2015%2F06%2F19%2Fimage-size-in-the-image-details-modal-mac-and-chrome%2F%23respond&locale=en_US)

 [  ](https://profiles.wordpress.org/ryan/) [Ryan Boren](https://profiles.wordpress.org/ryan/)
7:24 pm _on_ June 13, 2015     
Tags: [editor ( 30 )](https://make.wordpress.org/test/tag/editor/),
[media ( 30 )](https://make.wordpress.org/test/tag/media/), modal, [toolbar ( 12 )](https://make.wordpress.org/test/tag/toolbar/),
touch, [web ( 51 )](https://make.wordpress.org/test/tag/web/)   

# 󠀁[The Top 5 Impediments to Flow on Touch Devices](https://make.wordpress.org/test/2015/06/13/the-top-5-impediments-to-flow-on-touch-devices/)󠁿

Behold, a listicle.

### 1. The Media Modal

### 󠀁[⌊mobile-media-modal⌉⌊mobile-media-modal⌉󠀁[

The media modal has a number of issues on touch devices, particularly phones, including
the use of tabs and sidebars. For details see [The Media Modal and Sidebars on Phones](https://make.wordpress.org/test/2015/06/13/the-media-modal-and-sidebars-on-phones/).

[#30154 – Improve Media Modal UI at small-screen sizes](https://core.trac.wordpress.org/ticket/30154)

### 2. The Editor

  [](https://make.wordpress.org/test/2015/06/13/the-top-5-impediments-to-flow-on-touch-devices/image-107/#main)
[](https://make.wordpress.org/test/2015/06/13/the-top-5-impediments-to-flow-on-touch-devices/image-108/#main)

Update: [#31247](https://core.trac.wordpress.org/ticket/31247), Scrolling and zooming
is frustrating on iOSiOS The operating system used on iPhones and iPads., was fixed
on July 1st of 2015.

Scroll up to add media. Scroll down to preview, save, publish. Up and down. Up and
down. [Press This](https://make.wordpress.org/test/tag/press-this/) addressed this
with its redesign in 4.2. Lessons learned there could be applied to post-new.php.

[The Location of Add Media on Phones](https://make.wordpress.org/test/2015/05/27/the-location-of-add-media-on-phones/)

[#29989 – Hide Media Buttons on small screens](https://core.trac.wordpress.org/ticket/29989)

Fixed: The editor has a very annoying scrolling problem on iOS. Fixing that would
go a long way toward improving usability on iOS devices.

[#31247 -Scrolling and zooming is frustrating on iOS](https://core.trac.wordpress.org/ticket/31247)

### 3. Menu dismissal in the toolbar

[⌊image40-576x1024⌉⌊image40-576x1024⌉[

Update: This was [fixed](https://core.trac.wordpress.org/ticket/29906) on July 3rd
of 2015.

I like the toolbar on phones better than on desktop, except for the lingering desktop
biasDesktop bias Patterns and interfaces that work in desktop interfaces don't always
work on mobile. UI elements triggered by mouse hover, opening in new windows, dragging
into bookmarks bars, drag-and-drop, and auto-focusing search input fields are examples
of desktop bias. [https://make.wordpress.org/test/tag/desktop-bias/](https://make.wordpress.org/test/tag/desktop-bias/)
that defies touch expectations when tapping menu icons. In the image above, tapping
the dashboard icon traverses a link to the dashboard instead of dismissing the menu.

[#29906 – Submenus can’t be dismissed on mobile.](https://core.trac.wordpress.org/ticket/29906)

### 4. Submenus in the toolbar and admin menu

  [](https://make.wordpress.org/test/2015/06/13/the-top-5-impediments-to-flow-on-touch-devices/image33/#main)
[](https://make.wordpress.org/test/2015/06/13/the-top-5-impediments-to-flow-on-touch-devices/image36/#main)

Submenus are awkward on touch devices. The expectation on touch is that tapping 
a menu item takes you to the tapped thing and closes the menu. With WP, tapping 
in the admin menu subtly opens a submenu. The menu remains open. I often don’t notice
the submenu open because I’ve already shifted my gaze to look at the right side 
of the screen. Losing submenus would benefit touch navigation. Further, losing them
on desktop (like wordpress.comWordPress.com An online implementation of WordPress
code that lets you immediately access a new WordPress environment to publish your
content. WordPress.com is a private company owned by Automattic that hosts the largest
multisite in the world. This is arguably the best place to start blogging if you
have never touched WordPress before. [https://wordpress.com/](https://wordpress.com/)
does) reduces the overwhelming feeling new user experience when first confronting
wp-admin. This is something I’d like to experiment with in a feature pluginFeature
Plugin A plugin that was created with the intention of eventually being proposed
for inclusion in WordPress Core. See [Features as Plugins](https://make.wordpress.org/core/handbook/about/release-cycle/features-as-plugins/).

[Site Switching on the Make Network](https://make.wordpress.org/test/2015/06/13/site-switching-on-the-make-network-iphone-6/)

### 5. Column truncation

[⌊IMG_2919⌉⌊IMG_2919⌉[

 

Update: This was [fixed](https://core.trac.wordpress.org/ticket/32395) on July 9th
of 2015.

Our current strategy for dealing with list tables on narrow screens is to just chop
off columns. Not good.

[#32395 – Truncation is not a good strategy for responsive list tables](https://core.trac.wordpress.org/ticket/32395)

[#29991 – Comment action links are quite cramped on small screens](https://core.trac.wordpress.org/ticket/29991)

[#29995 – Username is cut off on the user list table on small screens](https://core.trac.wordpress.org/ticket/29995)

[#editor](https://make.wordpress.org/test/tag/editor/), [#media](https://make.wordpress.org/test/tag/media/),
[#modal](https://make.wordpress.org/test/tag/modal/), [#toolbar](https://make.wordpress.org/test/tag/toolbar/),
[#touch](https://make.wordpress.org/test/tag/touch/), [#web](https://make.wordpress.org/test/tag/web/)

 * [Login to Reply](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fmake.wordpress.org%2Ftest%2F2015%2F06%2F13%2Fthe-top-5-impediments-to-flow-on-touch-devices%2F%23respond&locale=en_US)

 [  ](https://profiles.wordpress.org/ryan/) [Ryan Boren](https://profiles.wordpress.org/ryan/)
4:24 pm _on_ June 13, 2015     
Tags: [desktop-bias ( 2 )](https://make.wordpress.org/test/tag/desktop-bias/),
[iOS ( 64 )](https://make.wordpress.org/test/tag/ios/), [media ( 30 )](https://make.wordpress.org/test/tag/media/),
modal, [phablet ( 50 )](https://make.wordpress.org/test/tag/phablet/), [web ( 51 )](https://make.wordpress.org/test/tag/web/)

# 󠀁[The media modal and sidebars on phones](https://make.wordpress.org/test/2015/06/13/the-media-modal-and-sidebars-on-phones/)󠁿

Neither the iOSiOS The operating system used on iPhones and iPads. app nor the Android
app support proper galleries, yet. They support uploading and publishing multiple
individual files but not creating galleries. Our media modal is the only outlet 
for gallery creation on phones. Our [image flow](https://make.wordpress.org/design/tag/image-flow/)
effort is redesigning the media modal. Meanwhile, I experience the following sight
every day, over and over. I present it to promote [continuous empathy](https://make.wordpress.org/test/glossary/#continuous-empathy)
and remind ourselves what we’re working to resolve.

[⌊mobile-media-modal⌉⌊mobile-media-modal⌉[

That sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used
by WordPress themes to display information that is not a part of the main content.
It is not always a vertical column on the side. It can be a horizontal rectangle
below or above the content area, footer, header, or any where in the theme. is lingering
[desktop bias](https://make.wordpress.org/test/glossary/#desktop-bias).

[#desktop-bias](https://make.wordpress.org/test/tag/desktop-bias/), [#ios](https://make.wordpress.org/test/tag/ios/),
[#media](https://make.wordpress.org/test/tag/media/), [#modal](https://make.wordpress.org/test/tag/modal/),
[#phablet](https://make.wordpress.org/test/tag/phablet/), [#web](https://make.wordpress.org/test/tag/web/)

 * [Login to Reply](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fmake.wordpress.org%2Ftest%2F2015%2F06%2F13%2Fthe-media-modal-and-sidebars-on-phones%2F%23respond&locale=en_US)

 [  ](https://profiles.wordpress.org/ryan/) [Ryan Boren](https://profiles.wordpress.org/ryan/)
12:01 am _on_ April 22, 2015     
Tags: captioned-galleries, [captions ( 3 )](https://make.wordpress.org/test/tag/captions/),
[forked-flow ( 3 )](https://make.wordpress.org/test/tag/forked-flow/), [galleries ( 3 )](https://make.wordpress.org/test/tag/galleries/),
[iOS ( 64 )](https://make.wordpress.org/test/tag/ios/), [media ( 30 )](https://make.wordpress.org/test/tag/media/),
[mobile ( 12 )](https://make.wordpress.org/test/tag/mobile/), modal, [new-tab-window ( 3 )](https://make.wordpress.org/test/tag/new-tab-window/),
[phablet ( 50 )](https://make.wordpress.org/test/tag/phablet/), [post-flow ( 2 )](https://make.wordpress.org/test/tag/post-flow/),
[preview ( 6 )](https://make.wordpress.org/test/tag/preview/), [publish ( 2 )](https://make.wordpress.org/test/tag/publish/),
[vizrec ( 3 )](https://make.wordpress.org/test/tag/vizrec/), [web ( 51 )](https://make.wordpress.org/test/tag/web/)

# 󠀁[Publish a captioned gallery, iPhone 6+, Portrait](https://make.wordpress.org/test/2015/04/22/publish-a-captioned-gallery-iphone-6-portrait/)󠁿

WP 4.2-RC3-32249 and iOSiOS The operating system used on iPhones and iPads. 8.3.

  [](https://make.wordpress.org/test/2015/04/22/publish-a-captioned-gallery-iphone-6-portrait/img_1237/#main)
Start on logged in front page. Tap + in the toolbar.   [](https://make.wordpress.org/test/2015/04/22/publish-a-captioned-gallery-iphone-6-portrait/img_1238/#main)
Tap Post.   [](https://make.wordpress.org/test/2015/04/22/publish-a-captioned-gallery-iphone-6-portrait/img_1239/#main)
Loading indicator. 
  [](https://make.wordpress.org/test/2015/04/22/publish-a-captioned-gallery-iphone-6-portrait/img_1240/#main)
Tap title input.   [](https://make.wordpress.org/test/2015/04/22/publish-a-captioned-gallery-iphone-6-portrait/img_1241/#main)
Type title in fly up keyboard.   [](https://make.wordpress.org/test/2015/04/22/publish-a-captioned-gallery-iphone-6-portrait/img_1242/#main)
Tap Done to dismiss the keyboard.   [](https://make.wordpress.org/test/2015/04/22/publish-a-captioned-gallery-iphone-6-portrait/img_1243/#main)
Tap Add Media.   [](https://make.wordpress.org/test/2015/04/22/publish-a-captioned-gallery-iphone-6-portrait/img_1244/#main)
Opens in Media lib [2]. The dismiss button is missing [1]. Tap Upload Files.   [](https://make.wordpress.org/test/2015/04/22/publish-a-captioned-gallery-iphone-6-portrait/img_1245/#main)
The dismiss button is back. Tap Select Files.   [](https://make.wordpress.org/test/2015/04/22/publish-a-captioned-gallery-iphone-6-portrait/img_1248/#main)
Tap Irie Plank Image Feed.   [](https://make.wordpress.org/test/2015/04/22/publish-a-captioned-gallery-iphone-6-portrait/img_1249/#main)
Tap images to include in the gallery and then tap Done.   [](https://make.wordpress.org/test/2015/04/22/publish-a-captioned-gallery-iphone-6-portrait/img_1250/#main)
After a pause where nothing seems to be happening, upload progress is shown. The
resulting screen is a known mess [4].   [](https://make.wordpress.org/test/2015/04/22/publish-a-captioned-gallery-iphone-6-portrait/img_1251/#main)
Tap Insert Media to show the flowFlow Flow is the path of screens and interactions
taken to accomplish a task. It’s an experience vector. Flow is also a feeling. It’s
being unselfconscious and in the zone. Flow is what happens when difficulties are
removed and you are freed to pursue an activity without forming intentions. You 
just do it. selector dropdown. [8]   [](https://make.wordpress.org/test/2015/04/22/publish-a-captioned-gallery-iphone-6-portrait/img_1252/#main)
Tap Create Gallery.   [](https://make.wordpress.org/test/2015/04/22/publish-a-captioned-gallery-iphone-6-portrait/img_1253/#main)
Tap Create a new gallery.   [](https://make.wordpress.org/test/2015/04/22/publish-a-captioned-gallery-iphone-6-portrait/img_1254/#main)
Tap a caption field.   [](https://make.wordpress.org/test/2015/04/22/publish-a-captioned-gallery-iphone-6-portrait/img_1255/#main)
Cursor wonkiness.   [](https://make.wordpress.org/test/2015/04/22/publish-a-captioned-gallery-iphone-6-portrait/img_1256/#main)
Get a caption focused, type in caption text.   [](https://make.wordpress.org/test/2015/04/22/publish-a-captioned-gallery-iphone-6-portrait/img_1257/#main)
Tap around doing more captions.   [](https://make.wordpress.org/test/2015/04/22/publish-a-captioned-gallery-iphone-6-portrait/img_1258/#main)
Discover cursor bugs.   [](https://make.wordpress.org/test/2015/04/22/publish-a-captioned-gallery-iphone-6-portrait/img_1259/#main)
Repeat for each image. Curse at bad scrolling, keyboard juggling, and focus panning
that burn a lot of taps. [3]   [](https://make.wordpress.org/test/2015/04/22/publish-a-captioned-gallery-iphone-6-portrait/img_1260/#main)
Captioning done. Tap Insert Gallery.   [](https://make.wordpress.org/test/2015/04/22/publish-a-captioned-gallery-iphone-6-portrait/img_1261/#main)
Arrive back at the editor with the keyboard up and obscuring the content. At a glance,
I can’t confirm the gallery was added correctly. Tap Done to dismiss the keyboard.
[](https://make.wordpress.org/test/2015/04/22/publish-a-captioned-gallery-iphone-6-portrait/img_1262/#main)
The inserted gallery is now evident. A big cursor blinks along the left side of 
the gallery. Scroll down to spot check the captions.   [](https://make.wordpress.org/test/2015/04/22/publish-a-captioned-gallery-iphone-6-portrait/img_1263/#main)
The keyboard oft gets in the way when trying to scroll the editor. Tap Done to dismiss
the keyboard and then scroll down some more to find Preview [5].   [](https://make.wordpress.org/test/2015/04/22/publish-a-captioned-gallery-iphone-6-portrait/img_1265/#main)
Tap Preview.   [](https://make.wordpress.org/test/2015/04/22/publish-a-captioned-gallery-iphone-6-portrait/img_1266/#main)
A new browser window opens…   [](https://make.wordpress.org/test/2015/04/22/publish-a-captioned-gallery-iphone-6-portrait/img_1267/#main)
and loads the post. Post looks good. Tap the browser page switcher thingy in the
bottom right.   [](https://make.wordpress.org/test/2015/04/22/publish-a-captioned-gallery-iphone-6-portrait/img_1268/#main)
Find the edit post page from the list of pages. This can be daunting if you have
a lot of things open, particularly with multiple WP pages [6]. Tap the edit post
page once you find it. Don’t dismiss the preview window.   [](https://make.wordpress.org/test/2015/04/22/publish-a-captioned-gallery-iphone-6-portrait/img_1271/#main)
You’re back in the edit window. Make some edits. Tap Preview. Nothing happens. Apparently
nothing anyway. If you left the preview window open it is being reloaded out of 
site whenever you click Preview [6]. Sometimes clicking Preview in this state causes
a cursor glitch in the region of the publish box disclosure triangle.   [](https://make.wordpress.org/test/2015/04/22/publish-a-captioned-gallery-iphone-6-portrait/img_1269/#main)
Preview exhibiting the cursor glitch.   [](https://make.wordpress.org/test/2015/04/22/publish-a-captioned-gallery-iphone-6-portrait/img_1270/#main)
It doesn’t always glitch. Sometimes it quietly noops.   [](https://make.wordpress.org/test/2015/04/22/publish-a-captioned-gallery-iphone-6-portrait/img_1272/#main)
If the keyboard is in your way after all of that, tap Done to dismiss. Okay, here
goes. Tap Publish and see a misaligned progress indicator.   [](https://make.wordpress.org/test/2015/04/22/publish-a-captioned-gallery-iphone-6-portrait/img_1273/#main)
Editor reloads with a post published notification at the top. Tap View post in the
notification.   [](https://make.wordpress.org/test/2015/04/22/publish-a-captioned-gallery-iphone-6-portrait/img_1274/#main)
Post looks good. Tap the site title to get back to the front page.   [](https://make.wordpress.org/test/2015/04/22/publish-a-captioned-gallery-iphone-6-portrait/img_1275/#main)
Back at the front page.

Bulleted flow:

 * Start on logged in front page.
 * Tap + in the toolbar.
 * Tap Post.
 * Tap title input.
 * Type title in fly up keyboard.
 * Tap Done to dismiss the keyboard. Page updates with permalink info. [7]
 * Tap Add Media
 * Opens in Media lib [2]. The dismiss button is missing [1]. Tap Upload Files.
 * The dismiss button is back. Tap Select Files.
 * Tap Irie Plank Image Feed.
 * Tap images to select.
 * Tap Done.
 * After a pause where nothing seems to be happening, upload progress is shown. 
   The resulting screen is a known mess [4].
 * Tap Insert Media to show the flow selector dropdown. [8]
 * Tap Create Gallery.
 * Tap Create a new gallery.
 * Tap a caption field.
 * Type in caption text.
 * Tap another caption field.
 * Type in caption text.
 * Repeat for each image. Curse at bad scrolling, keyboard juggling, and focus panning
   that burn a lot of taps. [3]
 * Tap Insert Gallery.
 * Arrive back at the editor with the keyboard up and obscuring the content. At 
   a glance, I can’t confirm the gallery was added correctly. Tap Done to dismiss
   the keyboard.
 * The inserted gallery is now evident. A big cursor blinks along the left side 
   of the gallery.
 * Scroll down to spot check the captions.
 * Scroll down some more to find Preview [5].
 * Tap Preview.
 * A new browser window opens to the post page.
 * Post looks good. Tap the browser page switcher thingy in the bottom right.
 * Find the edit post page from the list of pages. This can be daunting if you have
   a lot of things open, particularly with multiple WP pages [6].
 * Tap the edit post page once you find it. Don’t dismiss the preview window.
 * You’re back in the edit window. Make some edits. Tap Preview. Nothing happens.
   Apparently nothing anyway. If you left the preview window open it is being reloaded
   out of site whenever you click Preview [6]. Sometimes clicking Preview in this
   state causes a cursor glitch in the region of the publish box disclosure triangle.
 * If the keyboard is in your way after all of that, tap Done to dismiss.
 * Here goes. Tap Publish.
 * Misaligned loading indicator spins. Editor reloads with a post published notification
   at the top.
 * Tap View post in the notification.
 * Post looks good. Tap the site title to get back to the front page.

Notes:

[1] The dismiss button is often missing from the media modal. This seems to be particular
to the Media Library view. Dismiss never disappears if you stay on Upload Files.
Bringing the modal up more than once may be needed to trigger this. Moving from 
the Media Library view to the Upload Files view restores the dismiss button, but
tapping the dismiss button does nothing but hide the dismiss button again.

[2] Media modal scrolling in media lib view often gets stuck. The page beneath the
modal seems to be hijacking swipes. I’ve developed the habit of giving a 15 second-
ish cooldown when swiping gets stuck. The next swipe after the cooldown typical 
goes to the modal and normal scrolling is restored for awhile.

[3] Scrolling while editing captions is very awkward. The cursor often detaches 
from the caption field and seemingly joins the editor lying beneath the modal. The
cursor isn’t always in the caption field. Especially with the last row of images,
the cursor often shows below the caption field. Typing places the text in correctly
in the caption field but the cursor is outside the field. The jittery focus pan 
that happens when a caption is tapped into is disconcerting. Overall, captioning
is irksome and difficult.

[4] The image flow effort will eventually remove that awkward sidebarSidebar A sidebar
in WordPress is referred to a widget-ready area used by WordPress themes to display
information that is not a part of the main content. It is not always a vertical 
column on the side. It can be a horizontal rectangle below or above the content 
area, footer, header, or any where in the theme. from mobile. Should we pursue an
interim solution that removes the sidebar from the production media modal since 
image flow is a couple release out?

[5] I often tap View Post just below the title when I want to preview. View Post
shows the last published changes, however, not your in editor revisionsRevisions
The WordPress revisions system stores a record of each saved draft or published 
update. The revision system allows you to see what changes were made in each revision
by dragging a slider (or using the Next/Previous buttons). The display indicates
what has changed in each revision.. Preview is the button I really want but it is
farther from the editor than View Post and often gets forgotten.

[6] Mobile should never open things in new browser windows. This is a desktop biasDesktop
bias Patterns and interfaces that work in desktop interfaces don't always work on
mobile. UI elements triggered by mouse hover, opening in new windows, dragging into
bookmarks bars, drag-and-drop, and auto-focusing search input fields are examples
of desktop bias. [https://make.wordpress.org/test/tag/desktop-bias/](https://make.wordpress.org/test/tag/desktop-bias/)
that falls apart on mobile. Modal preview would be better on mobile.

[7] My permalink has the slug flow-loopLoop The Loop is PHP code used by WordPress
to display posts. Using The Loop, WordPress processes each post to be displayed 
on the current page, and formats it according to how it matches specified criteria
within The Loop tags. Any HTML or PHP code in the Loop will be processed on each
post. [https://codex.wordpress.org/The_Loop](https://codex.wordpress.org/The_Loop)-
2 instead of flow-loop because I trashed an earlier draft due to interface frustrations.
My frustrated bail out is later met with slug consequences. Ugh.

[8] The flow selector dropdown doesn’t dismiss with outside taps.

[#captioned-galleries](https://make.wordpress.org/test/tag/captioned-galleries/),
[#captions](https://make.wordpress.org/test/tag/captions/), [#forked-flow](https://make.wordpress.org/test/tag/forked-flow/),
[#galleries](https://make.wordpress.org/test/tag/galleries/), [#ios](https://make.wordpress.org/test/tag/ios/),
[#media](https://make.wordpress.org/test/tag/media/), [#mobile](https://make.wordpress.org/test/tag/mobile/),
[#modal](https://make.wordpress.org/test/tag/modal/), [#new-tab-window](https://make.wordpress.org/test/tag/new-tab-window/),
[#phablet](https://make.wordpress.org/test/tag/phablet/), [#post-flow](https://make.wordpress.org/test/tag/post-flow/),
[#preview](https://make.wordpress.org/test/tag/preview/), [#publish](https://make.wordpress.org/test/tag/publish/),
[#vizrec](https://make.wordpress.org/test/tag/vizrec/), [#web](https://make.wordpress.org/test/tag/web/)

 * [Login to Reply](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fmake.wordpress.org%2Ftest%2F2015%2F04%2F22%2Fpublish-a-captioned-gallery-iphone-6-portrait%2F%23respond&locale=en_US)

 [  ](https://profiles.wordpress.org/ryan/) [Ryan Boren](https://profiles.wordpress.org/ryan/)
7:57 pm _on_ March 11, 2015     
Tags: [iOS ( 64 )](https://make.wordpress.org/test/tag/ios/),
modal, [scroll-bleed ( 6 )](https://make.wordpress.org/test/tag/scroll-bleed/), 
[web ( 51 )](https://make.wordpress.org/test/tag/web/)   

# 󠀁[Modal Scrolling on iOS](https://make.wordpress.org/test/2015/03/11/modal-scrolling-on-ios/)󠁿

All of our modals have problems with scrolling on iOSiOS The operating system used
on iPhones and iPads.. The page behind the modal scrolls when you swipe. Bleed through
of the page beneath and sometimes stacked scrolling make for a frustrating experience.
A few months ago, we made a big improvement to modal scrolling with the [fix](https://core.trac.wordpress.org/changeset/30707)
for [#29909](https://core.trac.wordpress.org/ticket/29909).

[Ticket 29909: Scrolling beneath modals bad experience on mobile](https://core.trac.wordpress.org/ticket/29909)

[Changeset 30707: Prevent scrolling beneath modals on mobile devices by removing overflow from #wpwrap when a modal is open.](https://core.trac.wordpress.org/changeset/30707)

That was the end of the scroll issues on Android. iOS has not been so straightforward.
Recently, scrolling issues with the theme details modal were fixed by setting –webkit–
overflow–scrolling to touch.

[Ticket 31381: The theme details modal has scrolling and toolbar problems on iPhone 6 and 6+](https://core.trac.wordpress.org/ticket/31381)

The attachment details modal, link modal, [session expired log in modal](https://make.wordpress.org/test/2015/03/05/scroll-bleed-through-in-the-session-expired-log-in-modal-iphone-5/),
and [plugin details modal](https://make.wordpress.org/test/2015/02/13/scroll-bleed-through-and-scroll-position-loss-view-plugin-details-iphone-6/)
still have scrolling issues on iOS. Here’s a visual surveyVisual survey A visual
survey is a collection of screenshots for a like set of screens or interfaces, such
as all list table screens or all toolbar incarnations across various devices. These
screens are not presented in the context of a particular flow. [https://make.wordpress.org/test/tag/visual-survey/](https://make.wordpress.org/test/tag/visual-survey/)
of these modals on an iPhone 6+.

  [](https://make.wordpress.org/test/2015/03/11/modal-scrolling-on-ios/img_0764/#main)
Attachment details modal as accessed from the media library grid view. The images
glimpsed at the bottom should not be there. That is scroll bleedScroll bleed Sometimes
when scrolling a modal such as the media modal on touch devices, the scrolling bleeds
through to the page beneath the modal. Instead of scrolling the modal, the page 
beneath scrolls. Sometimes the scrolling nests and sometimes the page beneath grabs
scrolling all for itself. Android doesn't usually have this problem, but iOS triggers
it often. [https://make.wordpress.org/test/tag/scroll-bleed/](https://make.wordpress.org/test/tag/scroll-bleed/)
of the media lib beneath. I can reliably trigger this every time by scrolling down
to the bottom of the modal and then scrolling back up. Each scroll up swipe invokes
bleed through.   [](https://make.wordpress.org/test/2015/03/11/modal-scrolling-on-ios/img_0765/#main)
Link modal as accessed from the editor. Swiping anywhere on the screen causes the
page beneath the modal to scroll.   [](https://make.wordpress.org/test/2015/03/11/modal-scrolling-on-ios/img_3307-577x1024/#main)
Session expired log in modal as seen when your session expires. Swiping scrolls 
the page beneath. 
  [](https://make.wordpress.org/test/2015/03/11/modal-scrolling-on-ios/img_0766/#main)
PluginPlugin A plugin is a piece of software containing a group of functions that
can be added to a WordPress website. They can extend functionality or add new features
to your WordPress websites. WordPress plugins are written in the PHP programming
language and integrate seamlessly with WordPress. These can be free in the WordPress.
org Plugin Directory [https://wordpress.org/plugins/](https://wordpress.org/plugins/)
or can be cost-based plugin from a third-party. details modal as accessed from plugins.
php. Each swipe scrolls both the modal and the page beneath. Thus, each swipe results
in elastic bounce back of the underlying page. Bounce, bounce, bounce goes the admin
bar.

Screencast of the Link Modal on an iPhone 5 running iOS 8.2. The effect is even 
more disconcerting on the larger screen of an iPhone 6+ because more of the page
behind the modal is exposed.

[https://make.wordpress.org/test/files/2015/03/Link-Modal-Scroll-Bleed-on-an-iPhone-5.mp4](https://make.wordpress.org/test/files/2015/03/Link-Modal-Scroll-Bleed-on-an-iPhone-5.mp4)

[#ios](https://make.wordpress.org/test/tag/ios/), [#modal](https://make.wordpress.org/test/tag/modal/),
[#scroll-bleed](https://make.wordpress.org/test/tag/scroll-bleed/), [#web](https://make.wordpress.org/test/tag/web/)

 * [Login to Reply](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fmake.wordpress.org%2Ftest%2F2015%2F03%2F11%2Fmodal-scrolling-on-ios%2F%23respond&locale=en_US)

 [  ](https://profiles.wordpress.org/ryan/) [Ryan Boren](https://profiles.wordpress.org/ryan/)
4:18 pm _on_ March 2, 2015     
Tags: modal, [themes ( 4 )](https://make.wordpress.org/test/tag/themes/),
[visual-survey ( 17 )](https://make.wordpress.org/test/tag/visual-survey/)   

# 󠀁[Theme Details Modal Survey](https://make.wordpress.org/test/2015/03/02/theme-details-modal-survey/)󠁿

A visual surveyVisual survey A visual survey is a collection of screenshots for 
a like set of screens or interfaces, such as all list table screens or all toolbar
incarnations across various devices. These screens are not presented in the context
of a particular flow. [https://make.wordpress.org/test/tag/visual-survey/](https://make.wordpress.org/test/tag/visual-survey/)
of the theme details modal on multiple devices while testing [#31381](https://core.trac.wordpress.org/ticket/31381).

  [](https://make.wordpress.org/test/2015/03/02/theme-details-modal-survey/img_0690/#main)
iPhone 6+, Portrait, Active theme   [](https://make.wordpress.org/test/2015/03/02/theme-details-modal-survey/img_0691/#main)
iPhone 6+, Portrait, Inactive theme   [](https://make.wordpress.org/test/2015/03/02/theme-details-modal-survey/img_0692/#main)
iPhone 6+, Landscape, Active theme 
  [](https://make.wordpress.org/test/2015/03/02/theme-details-modal-survey/img_0693/#main)
iPhone 6+, Landscape, Inactive theme   [](https://make.wordpress.org/test/2015/03/02/theme-details-modal-survey/img_3303/#main)
iPhone 5, Portrait, Active theme   [](https://make.wordpress.org/test/2015/03/02/theme-details-modal-survey/img_3304/#main)
iPhone 5, Portrait, Inactive theme   [](https://make.wordpress.org/test/2015/03/02/theme-details-modal-survey/screenshot_2015-03-02-09-51-20/#main)
Nexus 5, Portrait, Active theme   [](https://make.wordpress.org/test/2015/03/02/theme-details-modal-survey/screenshot_2015-03-02-09-51-25/#main)
Nexus 5, Portrait, Inactive theme   [](https://make.wordpress.org/test/2015/03/02/theme-details-modal-survey/screen-shot-2015-03-02-at-9-52-02-am/#main)
Macnchrome, Active theme   [](https://make.wordpress.org/test/2015/03/02/theme-details-modal-survey/screen-shot-2015-03-02-at-9-52-07-am/#main)
Macnchrome, Active theme

[#modal](https://make.wordpress.org/test/tag/modal/), [#themes](https://make.wordpress.org/test/tag/themes/),
[#visual-survey](https://make.wordpress.org/test/tag/visual-survey/)

 * [Login to Reply](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fmake.wordpress.org%2Ftest%2F2015%2F03%2F02%2Ftheme-details-modal-survey%2F%23respond&locale=en_US)

 [  ](https://profiles.wordpress.org/ryan/) [Ryan Boren](https://profiles.wordpress.org/ryan/)
3:02 pm _on_ February 10, 2015     
Tags: [chrome ( 28 )](https://make.wordpress.org/test/tag/chrome/),
[desktop ( 26 )](https://make.wordpress.org/test/tag/desktop/), [macos ( 29 )](https://make.wordpress.org/test/tag/macos/),
[media ( 30 )](https://make.wordpress.org/test/tag/media/), modal, [web ( 51 )](https://make.wordpress.org/test/tag/web/)

# 󠀁[Damaged Image Details modal, Macnchrome, 4.2-alpha-31392](https://make.wordpress.org/test/2015/02/10/damaged-image-details-modal-macnchrome-4-2-alpha-31392/)󠁿

Noticed this today.

  [](https://make.wordpress.org/test/2015/02/10/damaged-image-details-modal-macnchrome-4-2-alpha-31392/screen-shot-2015-02-10-at-9-01-05-am/#main)
Click the edit icon.   [](https://make.wordpress.org/test/2015/02/10/damaged-image-details-modal-macnchrome-4-2-alpha-31392/screen-shot-2015-02-10-at-8-58-45-am/#main)
This doesn’t look right. Dismiss and click the edit icon again.   [](https://make.wordpress.org/test/2015/02/10/damaged-image-details-modal-macnchrome-4-2-alpha-31392/screen-shot-2015-02-10-at-8-58-55-am/#main)
More shown this time.

[#chrome](https://make.wordpress.org/test/tag/chrome/), [#desktop](https://make.wordpress.org/test/tag/desktop/),
[#macos](https://make.wordpress.org/test/tag/macos/), [#media](https://make.wordpress.org/test/tag/media/),
[#modal](https://make.wordpress.org/test/tag/modal/), [#web](https://make.wordpress.org/test/tag/web/)

 * [Login to Reply](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fmake.wordpress.org%2Ftest%2F2015%2F02%2F10%2Fdamaged-image-details-modal-macnchrome-4-2-alpha-31392%2F%23respond&locale=en_US)

 [  ](https://profiles.wordpress.org/ryan/) [Ryan Boren](https://profiles.wordpress.org/ryan/)
7:21 pm _on_ October 20, 2014     
Tags: [desktop-bias ( 2 )](https://make.wordpress.org/test/tag/desktop-bias/),
[media ( 30 )](https://make.wordpress.org/test/tag/media/), modal   

# 󠀁[Eliminating the sidebar in the media modal](https://make.wordpress.org/test/2014/10/20/eliminating-the-sidebar-in-the-media-modal/)󠁿

  [](https://make.wordpress.org/test/2014/10/20/eliminating-the-sidebar-in-the-media-modal/img_2937/#main)
Media modal with sidebarSidebar A sidebar in WordPress is referred to a widget-ready
area used by WordPress themes to display information that is not a part of the main
content. It is not always a vertical column on the side. It can be a horizontal 
rectangle below or above the content area, footer, header, or any where in the theme.
exposed, iPhone 5   [](https://make.wordpress.org/test/2014/10/20/eliminating-the-sidebar-in-the-media-modal/screenshot_2014-10-20-12-10-08/#main)
Media modal with sidebar exposed, Nexus 5

Killing the sidebar in the mobile media modal seems the key to opening up a good
design. Start there and ask questions about selection, particularly multi-select,
and access to image detail views that feature full-width, easy-to-discern images.
Selection and image views are the two most important things. They need to be readily
accessible, and they must flowFlow Flow is the path of screens and interactions 
taken to accomplish a task. It’s an experience vector. Flow is also a feeling. It’s
being unselfconscious and in the zone. Flow is what happens when difficulties are
removed and you are freed to pursue an activity without forming intentions. You 
just do it.. Do we use a selection toggle like the media library’s grid view does?
Are image views accessible during multi-select? The media library’s grid view does
not make image views accessible during bulk selection, but interfaces like G+ make
them accessible with a tap. Should the default action be selection or image detail
view? Does this change in different flows? The primary multi-select flow is uploading
images from the camera roll, which will likely use the selection mechanism provided
by the Android and iOSiOS The operating system used on iPhones and iPads. file choosers.
How does this affect our multi-select approach within the media modal?Gallery/camera
roll interfaces are not the same as a modal inserting images and galleries into 
a post. How much can we borrow from these interfaces? Mobile, multi-select, access
to big images. These must be solved in a flowful way.

The media library grid view avoids a sidebar via an attachment details modal.

  [](https://make.wordpress.org/test/2014/10/20/eliminating-the-sidebar-in-the-media-modal/img_2938/#main)
Decently sized image on top.   [](https://make.wordpress.org/test/2014/10/20/eliminating-the-sidebar-in-the-media-modal/img_2939/#main)
Swipe up to scroll down to the details.

Grid view handles multi-select via a toggle button.

  [](https://make.wordpress.org/test/2014/10/20/eliminating-the-sidebar-in-the-media-modal/screenshot_2014-10-20-14-03-25/#main)
[](https://make.wordpress.org/test/2014/10/20/eliminating-the-sidebar-in-the-media-modal/screenshot_2014-10-20-14-03-32/#main)

During multi-select, image detail views are unavailable. The G+ app on Kitkat handles
this with an overlay on the image thumbnails.

  [](https://make.wordpress.org/test/2014/10/20/eliminating-the-sidebar-in-the-media-modal/screenshot_2014-10-20-14-07-49/#main)
The multi-select toggle requires digging in a menu.   [](https://make.wordpress.org/test/2014/10/20/eliminating-the-sidebar-in-the-media-modal/screenshot_2014-10-20-14-07-53/#main)
Tap the overlays to see a big image.   [](https://make.wordpress.org/test/2014/10/20/eliminating-the-sidebar-in-the-media-modal/screenshot_2014-10-20-14-08-02/#main)
Selection is preserved in image view with the top-left overlay.

A mockup of the media modal with sidebar eliminated.

 

[#desktop-bias](https://make.wordpress.org/test/tag/desktop-bias/), [#media](https://make.wordpress.org/test/tag/media/),
[#modal](https://make.wordpress.org/test/tag/modal/)

 * [Login to Reply](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fmake.wordpress.org%2Ftest%2F2014%2F10%2F20%2Feliminating-the-sidebar-in-the-media-modal%2F%23respond&locale=en_US)

# Post navigation

[← Older posts](https://make.wordpress.org/test/tag/modal/page/2/?output_format=md)