WordPress.org

Make WordPress Core

Opened 4 years ago

Closed 23 months ago

#34051 closed enhancement (maybelater)

Add a way to preview site in wider size in the Customizer

Reported by: Fab1en Owned by:
Milestone: Priority: normal
Severity: normal Version: 4.5
Component: Customize Keywords: needs-patch close
Focuses: ui, administration Cc:

Description

#31195 proposes to introduce a new UI in the customizer for previewing a site on different (smaller) device sizes. On top of that, that would be interesting to be able to preview a site on a wider size than the current display. This would be possible by adding scrollbars in the preview iframe.

Change History (8)

#1 @swissspidy
4 years ago

  • Milestone Awaiting Review deleted
  • Resolution set to duplicate
  • Status changed from new to closed

That's something #31195 already aims to cover by allowing to set different breakpoints. Let's keep the discussion there.

#2 @Fab1en
4 years ago

That was a specific demand from @folletto to create a separate ticket on this particular issue.

why not enable people that have medium size displays to preview their site on a wide display ? That's possible if you extend the size of the iframe and use scrollbars.

I agree. This is definitely something I'd go for, even if likely in a separate issue and discussion, because I'd still start with this UI and then work to achieve that.

#3 @celloexpressions
3 years ago

  • Keywords needs-patch added
  • Milestone set to Future Release
  • Resolution duplicate deleted
  • Status changed from closed to reopened
  • Version 4.4 deleted

Let's use this ticket to track the idea of implementing a way to force the preview to be larger than the available space after the initial device preview is implemented. Keeping this out of the scope of adding the initial UI in #31195 will help ensure we can get a first pass in for 4.5. This functionality is related, but distinct, and poses many more questions than are answered there.

A possible interaction for this would be to allow the three device buttons to be "unclicked" where the available space is used when no device is selected (and by default), but the selected device (including laptop/desktop) forces the preview size even if it's larger than what's available. This would also facilitate showing the device buttons on smaller screen sizes, but we'd need to make some decisions about how that would look.

#4 @SergeyBiryukov
3 years ago

  • Summary changed from Add a way to preview site in wider size in the Cutomizer to Add a way to preview site in wider size in the Customizer

#5 @celloexpressions
3 years ago

  • Version set to 4.5

I would be interested in any thoughts here now that we have the base UI in.

#6 @folletto
3 years ago

A basic approach for this would be to keep the same UI, with a slightly different underlying logic:

  1. It detects the current screen size.
  2. Turns on the right responsive size icon, matching he appropriate range screen-size (i.e. if I'm on mobile, mobile will be turned on).
  3. When a different icon is then clicked, it switches the resolution either wider (if on mobile) or narrower (if desktop, as it currently does) depending on the screen size.

I feel that this approach is the most contextual one while keeping the UI consistent across screens.

#7 @westonruter
2 years ago

  • Keywords close added

Users could accomplish this by zooming out in their browser. If there really needs to be a UI for this, it could potentially do a transform on window in the iframe. That being said, this seems like plugin territory so I'm suggesting close.

#8 @westonruter
23 months ago

  • Milestone Future Release deleted
  • Resolution set to maybelater
  • Status changed from reopened to closed
Note: See TracTickets for help on using tickets.