Skip to content

Conversation

@Rishit30G
Copy link
Contributor

@Rishit30G Rishit30G commented Mar 13, 2025

What?

Closes #65918

Why?

This PR covers the following things mentioned in the issue by @afercia :

  • Move 'Preview in a new tab' to the top bar. It should be clearly distinguished from 'View Post' and make clear it's a tool to see your live changes, even the ones that aren't saved yet.

  • Overall, I'd like to propose to make the right part of the top bar an area that only contains controls related to the save / preview / publish / view editorial flow. Those are logically related features that should stay together while the device emulation tools are more a design tool.

  • On a published post, when there are no live changes, 'Preview in a new tab' should be (accessibly) disabled because there's no live changes to see. In this scenario, only 'View Post' should be enabled.

  • Rename 'Preview in a new tab' to make more clear it shows your changes e.g. 'Preview changes'. It's not a case that this is what Classic Editor always did for published posts:

How?

This PR introduces a new PostPreviewChanges component, separate from the device emulator (view), to show live editor changes without saving. It also includes component refactoring to accommodate this update.

Testing Instructions

  • Edit a published post.
  • Make some changes to the content and let your changes unsaved.
  • Click on 'Preview changes'
  • Observe in the new tab that opens, you can check the published version and the 'live changes' version.
  • Observe 'Preview changes' is placed outside the device emulation menu and it's on the top level control in the top bar.

Screenshots or screencast

Screen.Recording.2025-03-13.at.3.46.52.PM.mov

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Package] Editor /packages/editor [Type] Enhancement A suggestion for improvement.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Rethink the View (device emulation), Preview, and View Post UI

2 participants