Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[GlobalStep] Gallery’s Preview is inconsistent with its final appearance #1899

Closed
wptester9845 opened this issue Feb 12, 2020 · 4 comments
Closed
Labels

Comments

@wptester9845
Copy link

wptester9845 commented Feb 12, 2020

Description

When adding a Gallery to a post with many pictures and then turning the number of columns up will have no affect on how the Gallery is displayed in the preview of the post. It was observed that while in portrait mode a maximum of two columns were displayed and in landscape mode a maximum of four columns were displayed.
After the post is published it will still be displayed according to the selected settings.

Reproduction Rate

4/4 100%

Expected behavior

The Preview should accurately reflect the final appearance of the post.

Actual behavior

The Preview does not reflect how the post will look after being published.

Steps to reproduce the behavior

  1. Install WordPress 14.2
  2. Log in to an account.
  3. Open the Post Editor.
  4. Add a Gallery block.
  5. Press “Add Media”.
  6. Press “WordPress Media Library”.
  7. Add more than 8 pictures.
Tested on the following

Samsung Galaxy Note 8 (7.1.1)
iPhone XR (12.0.1)

Please see the attached screenshots for more information

Screenshot of the Post Editor

Screenshot of the Post viewed in the Reader

Submitted by:

Luis Pimenta

@peril-wordpress-mobile
Copy link

Fails
🚫

Please add a type label to this issue. e.g. '[Type] Enhancement'

🚫 Please add a feature label to this issue. e.g. 'Stats'

Generated by 🚫 dangerJS

@mkevins
Copy link
Contributor

mkevins commented Feb 18, 2020

Hi @wptester9845 👋 ,

Thanks for reporting your observation. The behavior you have described is intentional: since the block editor on mobile is rendered in a narrow viewport, the maximum number of columns displayed is limited to 2 (or 4) depending on the width of the device. However, your experience with this new feature is a signal that we will consider for UX improvements in future iterations. Perhaps we can introduce an indication to convey this difference in how the block is displayed when the viewport is narrow. cc: @iamthomasbishop

In the meantime, you may find it useful to use the Post Preview found in the post menu ( button in the upper right corner) -> "Preview", as this may give a more accurate view of how the post will look when published.

@iamthomasbishop
Copy link
Contributor

@mkevins That's correct, the behavior is intentional. There were a few key considerations that informed this approach, but above all, we tried to strike a balance between ease of editing and flexibility with regards to viewport width. A couple of details worth noting:

  • For "portrait" mode, we are essentially following the same behavior as Core Gutenberg (web) in very narrow viewports, which shows at most 2 columns. This provides enough space to show the overlay UI (movers, remove button, and most challengingly, the caption) despite limited space. This is the primary orientation that users use the editor in, and aligns well with Core/web.

  • For landscape, we placed a bit tighter constraints than Core/web in order to allow easier editing/re-arranging of Gallery image cells. For example, if you place more than 4 cells horizontally next to each other, even on landscape, this makes displaying and interacting with the UI a challenge.

We could try displaying 5 and 6 across, although I would caution against doing this because while it may make the connection between editor and output clearer, it will be at the expense of the editing experience, and may only partially solve the problem. In any case, I'm open to exploring alternative approaches that will solve for both ease of use and scalability, while also aligning with Core Gutenberg (and native patterns) 😄

On a separate/personal note, I would honestly prefer that the web followed this logic as well, because editing a caption on a tiny cell is nearly impossible (especially on landscape with the software keyboard taking up ~2/3 of the screen). But that's another battle 🤷‍♂

@pinarol
Copy link
Contributor

pinarol commented Jul 28, 2020

Closing this since what we have currently is an intended behavior. But I should mention we'll start to support full/wide width alignment options soon which will enable us to display more columns.

@pinarol pinarol closed this as completed Jul 28, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

5 participants