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

Add command to navigate to site editor #66722

Open
wants to merge 9 commits into
base: trunk
Choose a base branch
from

Conversation

benazeer-ben
Copy link
Contributor

What?

Enhancement for the scenario mentioned in #61460

Why?

Currently there is no command option to go back to site editor from edit post or page views.

How?

Added command to navigate to Site Editor.

Testing Instructions

  • Open the WordPress Editor
  • Go to Posts or Pages in the WordPress admin.
  • Open a new or existing post/page to enter the block editor.
  • Open the Command Palette
  • Access the Command Palette by pressing Cmd + K on Mac or Ctrl + K on Windows, or via the menu if available.
  • In the Command Palette, look for a command labeled something like "Go to Site Editor".
  • Ensure that this command is listed among the available commands.
  • Execute the Command
  • Select the Go to Site Editor command from the Command Palette.
  • Confirm that executing the command redirects you to the Site Editor interface.

Screenshots or screencast

go-to-site-editor.mp4

Copy link

github-actions bot commented Nov 4, 2024

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: benazeer-ben <benazeer@git.wordpress.org>
Co-authored-by: richtabor <richtabor@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: annezazu <annezazu@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@github-actions github-actions bot added the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label Nov 4, 2024
Copy link

github-actions bot commented Nov 4, 2024

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @benazeer-ben! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

@up1512001 up1512001 added [Type] Enhancement A suggestion for improvement. [Package] Commands /packages/commands labels Nov 4, 2024
@annezazu
Copy link
Contributor

annezazu commented Nov 5, 2024

This works!

testing.command.mov

With that said, I wonder about the naming. Can we go with "Open the Site Editor" as that aligns with some of the "open" language outlined here #50407 ? I also am curious about the icon used and wonder if it should be something else:

Screenshot 2024-11-05 at 9 59 38 AM

@WordPress/gutenberg-design for any quick thoughts on the icon!

@richtabor
Copy link
Member

The command should also not be available when you're already in the Site Editor:

CleanShot 2024-11-05 at 14 11 56

@WordPress/gutenberg-design for any quick thoughts on the icon!

Let's just not use an icon, all commands don't need one.

Copy link
Contributor

@t-hamano t-hamano left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the PR!

One thing to note here is that classic themes don't have access to the site editor root, so we can't add this command in classic themes.

Here's an example of code to detect if it's a block theme:

const { getCurrentTheme, getPostType, canUser } = select( coreStore );
return {
isBlockBasedTheme: getCurrentTheme()?.is_block_theme,

We could add a similar code to the existing useSelect hook.

packages/editor/src/components/commands/index.js Outdated Show resolved Hide resolved
packages/editor/src/components/commands/index.js Outdated Show resolved Hide resolved
@jameskoster
Copy link
Contributor

Do we refer to the "Site Editor" anywhere else in the UI? I recognise it's a familiar term to wp community members, but otherwise we're introducing another name for the same thing. The wp-admin navigation refers to this section simply as "Editor" (under "Appearance"). The root panel is titled "Design".

The command should also not be available when you're already in the Site Editor:

I think the purpose is to go from the full screen editor (in either post or site editor) to the site editor root? This also suggests to me that the naming isn't quite right... "Site editor" means different things to different people.

@jasmussen
Copy link
Contributor

I'm still slightly partial to Site view and Edit view, though I recognize they haven't really caught on:

Previous version

Your point is valid enough. Another way to frame it, however, is: do we support aliases? If someone searches for "site editor" as a command, even if we chose not to surface the specific name in the palette, it would still be useful for fuzzy searching. We support aliases for blocks already, which is why all of these results show up in a search for "image":

Screenshot 2024-11-06 at 12 47 36

@t-hamano
Copy link
Contributor

t-hamano commented Nov 6, 2024

The term "Site Editor" is used in the following places, but I'm not sure if this term is official.

Site Editor Mobile Layout > Site Hub Tooltip Label

mobile-navigation

Site Editor > Page Screen > Welcome Guide

page-welcome-guide

Site Editor > Welcome Guide Area Label

aria-label-site-editor

benazeer-ben and others added 4 commits November 7, 2024 12:31
Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
@t-hamano
Copy link
Contributor

t-hamano commented Nov 16, 2024

@benazeer-ben Thanks for the update!

As mentioned in the comment, this command cannot be exposed to classic themes. Could you update this PR?

One more thing I noticed is that the site editor is not accessible to all users. As implemented here, the command should only be exposed if the user can create templates and it is a block theme.

@benazeer-ben
Copy link
Contributor Author

Thanks for that suggestion @t-hamano

Now the PR is updated with both the conditions.

@t-hamano t-hamano self-requested a review November 19, 2024 09:57
Copy link
Contributor

@t-hamano t-hamano left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

From a code perspective, I think it's ready to ship, but should the phrase "Open Site Editor" be allowed? I don't think the Command Palette currently lets us set alias labels.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository [Package] Commands /packages/commands [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

7 participants