[HelpHub] How to use the View feature

[femkreations]

Article: https://wordpress.org/documentation/article/how-to-use-the-preview-function/

Update for 6.3

• Display device icon on "preview" and "view" buttons 50218

Update for 6.2

• Rename view to Preview. 45074

General

• Make sure all screenshots are relevant to the latest version
• Make sure videos, if any, are up to date
• Add ALT tags for the images
• Make sure the headings are in sentence case
• Convert all reusable blocks to a ‘regular block’.
• Update the changelog at the end of the article

[zzap]

Heads up @WordPress/docs-issues-coordinators, we have a new issue open. Time to use 'em labels.

[github-actions]

Heads up @femkreations @atachibana - the "user documentation" label was applied to this issue.

[github-actions]

Heads up @zzap @femkreations - the "block editor" label was applied to this issue.

[mujuonly]

I would like to work on this.

[femkreations]

@mujuonly The task has been assigned to you. Thank you

[mujuonly]

Screen.Recording.2023-04-03.at.10.57.37.PM.mov

Video showing the Preview feature:

Preview drop down menu in the Site Editor

Mobile view

Tablet view

Desktop view

Preview drop down menu in the WordPress Block Editor

Preview in the Site Editor

Preview in the WordPress Block Editor

Changelog
Updated 2023-04-03
Added updated screenshots and content for 6.2.
Added ALT tags for the images
Added updated video to show the feature

[tuhsao]

Hi! I'm brand new, but would like to work on this if possible. Thank you!

[femkreations]

Hi @tuhsao Thank you for picking this task. I've assigned this to you

[tuhsao]

Hi, I've edited the text accordingly and replaced the images and videos for 6.2 with the ones provided above. I cropped the video provided so that it does not display any personal tabs/windows, but let me know if you would prefer the original video and I can change it. As for 6.3, I can make the screenshots and videos this weekend and add them in, I just figured I would at least post what I have now so that HelpHub is up-to-date for the time being. Please let me know if I'm off-track on anything since this is my first issue!

How to use the Preview feature

The Preview button is available in the top toolbar in the WordPress Block Editor and Site Editor. It’s used to preview what your post, page, or site looks like with the current changes applied.

In the WordPress Block Editor, click the Save button in the top toolbar to keep your changes as a draft of the post or page you’re working on. If you’re in the Site Editor, click the Save button in the top toolbar to keep the changes you made to your site and the templates you’re working on.

Now click the Preview button to see how your changes look on the front end for the post or page or for the site.

ALT: Preview in the WordPress Block Editor ALT: Preview in the WordPress Site Editor

When you click Preview, it will display a drop-down menu with various options to preview the page, post, or site as shown below:

ALT: Preview drop-down menu in the Block Editor

Desktop: By default, the Desktop preview will be selected. You can preview how your page, post, or site will look on a desktop screen.

ALT: Desktop preview

Tablet: When this preview is selected, you will see how the page/post or your site will look on a tablet.

ALT: Tablet preview

Mobile: When this preview is selected, you will see how the page/post or your site will look on a mobile device.

ALT: Mobile preview

Preview in new tab: When selected, WordPress will open the page/post or the site in a new tab on your browser.

In the Site Editor, you will see the following drop-down menu with the options Desktop, Tablet, Mobile, and View site which will open the site in a new tab on your browser.

ALT: Preview drop-down menu in the Site Editor

https://github.com/WordPress/Documentation-Issue-Tracker/assets/141173419/a810d6ca-f48c-49f3-bb04-2044dab1d47f
ALT: Video showing the Preview feature

Changelog

• Updated 2023-08-04
• Renamed View feature as Preview
• Updated images and videos for 6.2

[tuhsao]

Hi, sorry for the delay! I've replaced the screenshots and videos in my previous post with ones that are up-to-date with 6.3. Please let me know if there's anything I missed. Thanks!

How to use the Preview feature

The Preview button is available in the top toolbar in the WordPress Block Editor and Site Editor. It’s used to preview what your post, page, or site looks like with the current changes applied.

In the WordPress Block Editor, click the Save button in the top toolbar to keep your changes as a draft of the post or page you’re working on. If you’re in the Site Editor, click the Save button in the top toolbar to keep the changes you made to your site and the templates you’re working on.

Now click the Preview button to see how your changes look on the front end for the post or page or for the site.

ALT: Preview in the WordPress Block Editor ALT: Preview in the WordPress Site Editor

When you click Preview, it will display a drop-down menu with various options to preview the page, post, or site as shown below:

ALT: Preview drop-down menu in the Block Editor

Desktop: By default, the Desktop preview will be selected. You can preview how your page, post, or site will look on a desktop screen.

ALT: Desktop preview

Tablet: When this preview is selected, you will see how the page/post or your site will look on a tablet.

ALT: Tablet preview

Mobile: When this preview is selected, you will see how the page/post or your site will look on a mobile device.

ALT: Mobile preview

Preview in new tab: When selected, WordPress will open the page/post or the site in a new tab on your browser.

In the Site Editor, you will see the following drop-down menu with the options Desktop, Tablet, Mobile, and View site which will open the site in a new tab on your browser.

ALT: Preview drop-down menu in the Site Editor

https://github.com/WordPress/Documentation-Issue-Tracker/assets/141173419/f595bab1-29d9-41a9-894a-3040de5859de
ALT: Video showing the Preview feature

Changelog

• Updated 2023-08-09
• Renamed View feature as Preview
• Updated images and videos for 6.3

[github-actions]

Heads up @docs-reviewers - the "[Status] Review" label was applied to this issue.