[HelpHub] [6.4] Site Editor > Navigation

[femkreations]

Article: https://wordpress.org/documentation/article/site-editor-navigation/

Updates for 6.4

• Unify the delete button style in the dropdown menu with red 52597
• Add the draft status to the navigation title 51967
• Navigation in Site View: Readd the edit button 52111
• Navigation: Fix sidebar title 52167
• Make the entire preview clickable in order to enter "edit" mode in focus mode 51973

General

• Convert all reusable blocks to a ‘regular block’.
• Update the changelog at the end of the article

Good first issues

If you are looking for simpler tasks, take a look at related good first issues:

• Check ALT attributes: [HelpHub][6.4][ALT]: Site Editor > Navigation #1292
• Check headings: [HelpHub][6.4][headings]: Site Editor > Navigation #1293
• Update screenshots: [HelpHub][6.4][screenshots]: Site Editor > Navigation #1294
• Update videos: [HelpHub][6.4][videos]: Site Editor > Navigation #1295

[github-actions]

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

[github-actions]

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

[zunaid321]

I would like to work on this.

[abhansnuk]

@femkreations I asked Zunaid if he and any of his colleagues could help with the end user docs during the sidelines of Dev Chat yesterday.
@zunaid321 information on how to proceed is in this post https://make.wordpress.org/docs/2023/10/25/call-for-volunteers-to-help-with-6-4-end-user-documentation/
It includes videos on how to update the information to study. Thanks for responding.

Zunaid if there are devs in your team looking for good first issues, there are some listed at the top of this ticket. Thanks.

[zunaid321]

Will be posting the updates for each changes, once by one.

[zunaid321]

Unify the delete button style in the dropdown menu with red WordPress/gutenberg#52597

In the recent site editor update, a clear change was made to the delete button in the drop-down menu. Now, it's got a bold red color to follow WP-Admin style rules for serious/destructive actions. The update also took away the button's border to make things look neat and keep a consistent style for actions that are important.

Delete Navigation:

Before:

After:

Delete Pattern:

Before:

After:

In the Pattern Management menu, if you made the pattern, you'll see "Delete." If it came with the theme, it'll say "Clear customizations." It's all good though—nothing gets messed up, and you can always go back to how things were.

Clear Customizations:

The purpose of these changes in the site editor is to make it look better and be more user-friendly.

[zunaid321]

Add the draft status to the navigation title WordPress/gutenberg#51967

Changes have been implemented regarding the (draft) status in the title of the Navigation area within the Site View sidebar. This enhancement ensures consistency by displaying the status in both the Navigation block and the Site View sidebar, providing users with a clear indication of the draft status for their navigation menus.

[zunaid321]

Navigation in Site View: Readd the edit button WordPress/gutenberg#52111

The Edit button has been reintegrated into the Navigation section header as part of a recent update to the Site View functionality. The removal of this button posed a challenge for customers aiming to enter focus mode with only one navigation on their website. The update addresses this concern by re-adding the Edit button to the wrapper's operations. Additionally, the button has been ensured to seamlessly open the canvas and navigate to the appropriate navigation post. This enhancement guarantees smooth functionality, especially for users managing a single navigation on their website.

[zunaid321]

Navigation: Fix sidebar title WordPress/gutenberg#52167

The sidebar title was fixed in the most recent version, improving the Navigation section in Patterns. This change ensures that the name of the navigation is accurately reflected in the title of the Navigation section. Readability has been enhanced by making direct references to the title prop.

[zunaid321]

Make the entire preview clickable in order to enter "edit" mode in focus mode WordPress/gutenberg#51973

With this latest update, the user experience has been greatly improved by adding an "edit" clickable feature to every view when it's in focus. An issue existed where the edit mode would only appear when clicking on actual blocks, even if the preview was full length. This correction makes the transition to change mode easier and more logical. Now, the window can be clicked anywhere. This modification is especially important for patterns and navigations with just one block, ensuring that users can access the edit mode without any problem at all. This update helps make focus editing more efficient and user-friendly.

Screen.Capture.on.2023-06-27.at.12-50-14.mp4

[zunaid321]

@femkreations @abhansnuk

I have added the changes above. Please do let me know if I need to make any changes or missed anything in particular.

[abhansnuk]

Hi @zunaid321 just a quick reply on one point, in core and docs, we don’t refer to ‘we’ to describe the community and WordPress. Could you update references to ‘we’ above please. Thanks so much and for your first draft too. A great ticket to start your docs contribution 😀.

I will mark this as ready for first review.

[zunaid321]

Thank you for the feedback @abhansnuk

I have made the necessary changes above. Please do check and let me know.

And I would like to show my gratitude to you for pushing me to contribute to the Docs Team! Happy to contribute!

[github-actions]

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

[abhansnuk]

Hi @zunaid321 I am not sure if your changes are saving, as I am still reading 'our', 'latest update' type references above? Thanks.

[zunaid321]

My apologies. That's weird. Can you please check now? @abhansnuk

[abhansnuk]

Great work on researching this topic to understand the changes, thanks @zunaid321. This text needs some tweaking to help the end user. Collaborating with Zunaid on this to be more in the same style as the existing page.

[zunaid321]

Unify the delete button style in the dropdown menu with red WordPress/gutenberg#52597

In the recent site editor update, a clear change was made to the delete button in the drop-down menu. Now, it's got a bold red color to follow WP-Admin style rules for serious/destructive actions. The update also took away the button's border to make things look neat and keep a consistent style for actions that are important.

Delete Navigation:

Before:

After:

Delete Pattern:

Before:

After:

In the Pattern Management menu, if you made the pattern, you'll see "Delete." If it came with the theme, it'll say "Clear customizations." It's all good though—nothing gets messed up, and you can always go back to how things were.

Clear Customizations:

The purpose of these changes in the site editor is to make it look better and be more user-friendly.

@abhansnuk I just re-wrote the text for this one. Can you please check and let me know if everything is okay?