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

[HelpHub] How to use the View feature #702

Open
8 tasks
femkreations opened this issue Mar 6, 2023 · 11 comments
Open
8 tasks

[HelpHub] How to use the View feature #702

femkreations opened this issue Mar 6, 2023 · 11 comments
Assignees
Labels
6.2 Changes in 6.2 release 6.3 Changes in 6.3 release block editor Gutenberg related issues good first issue Good for newcomers high priority [Status] Review Issue in review tracking issue Use to track a series of related issues. user documentation (HelpHub) Improvements or additions to end-user documentation

Comments

@femkreations
Copy link
Collaborator

femkreations commented Mar 6, 2023

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
Copy link
Member

zzap commented Mar 6, 2023

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

@femkreations femkreations added user documentation (HelpHub) Improvements or additions to end-user documentation block editor Gutenberg related issues medium priority 6.2 Changes in 6.2 release labels Mar 6, 2023
@github-actions
Copy link

github-actions bot commented Mar 6, 2023

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

@github-actions
Copy link

github-actions bot commented Mar 6, 2023

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

@femkreations femkreations added the good first issue Good for newcomers label Mar 14, 2023
@mujuonly
Copy link
Contributor

mujuonly commented Apr 1, 2023

I would like to work on this.

@femkreations
Copy link
Collaborator Author

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

@mujuonly
Copy link
Contributor

mujuonly commented Apr 3, 2023

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

Video showing the Preview feature:

Image

Preview drop down menu in the Site Editor

Image

Mobile view

Image

Tablet view

Image

Desktop view

Image

Preview drop down menu in the WordPress Block Editor

Image

Preview in the Site Editor

Image

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

@hannaw93 hannaw93 removed their assignment Apr 5, 2023
@femkreations femkreations added 6.3 Changes in 6.3 release high priority and removed medium priority labels Jul 19, 2023
@Leonardus-Nugraha Leonardus-Nugraha added the tracking issue Use to track a series of related issues. label Jul 25, 2023
@tuhsao
Copy link

tuhsao commented Aug 2, 2023

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

@femkreations
Copy link
Collaborator Author

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

@tuhsao
Copy link

tuhsao commented Aug 5, 2023

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.

Image showing the location of the Preview button in the WordPress Block Editor ALT: Preview in the WordPress Block Editor Image showing the location of the Preview button in the WordPress Site 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:

Image showing the drop-down menu of the Preview button in the Block Editor

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.

Image displaying the desktop preview ALT: Desktop preview

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

Image displaying the tablet preview 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.

Image displaying the mobile preview 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.

Image showing the drop-down menu of the Preview button in the Site Editor 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
Copy link

tuhsao commented Aug 10, 2023

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.

Image showing the location of the Preview button in the WordPress Block Editor ALT: Preview in the WordPress Block Editor Image showing the location of the Preview button in the WordPress Site 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:

Image showing the drop-down menu of the Preview button in the Block Editor

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.

Image displaying the desktop preview ALT: Desktop preview

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

Image displaying the tablet preview 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.

Image displaying the mobile preview 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.

Image showing the drop-down menu of the Preview button in the Site Editor

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

@zzap zzap added [Status] Review Issue in review and removed [Status] Review Issue in review labels Sep 18, 2023
@github-actions
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
6.2 Changes in 6.2 release 6.3 Changes in 6.3 release block editor Gutenberg related issues good first issue Good for newcomers high priority [Status] Review Issue in review tracking issue Use to track a series of related issues. user documentation (HelpHub) Improvements or additions to end-user documentation
Projects
Status: In Progress
Development

No branches or pull requests

6 participants