Site Editor Hub: Simplify #61579
Open
Site Editor Hub: Simplify #61579
+132
−300
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
youknowriad
added
the
[Type] Technical Prototype
|
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 Unlinked AccountsThe following contributors have not linked their GitHub and WordPress.org accounts: @dereksmart. Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases. If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
youknowriad
commented
May 10, 2024
| isTransparent={ | ||
| isResizableFrameOversized | ||
| } | ||
| /> | ||
| <SidebarContent routeKey={ routeKey }> | ||
| { areas.sidebar } | ||
| </SidebarContent> |
There was a problem hiding this comment.
I think we can probably simplify more here in terms of styles and classes.
youknowriad
commented
May 10, 2024
| onClick={ () => setCanvasMode( 'view' ) } | ||
| > | ||
| <SiteIcon className="edit-site-layout__view-mode-toggle-icon" /> | ||
| </Button> |
There was a problem hiding this comment.
The other good thing here is that this makes the header identical to the post editor and unifying this button is now possible.
|
Size Change: -484 B (-0.03%) Total Size: 1.74 MB
ℹ️ View Unchanged
|
|
Quick note that I tried to use WP playground to test this but I can't see the icon when I'm in the canvas to get a better sense of it: icon.missing.mov |
|
@annezazu looks like a bug, let me check. |
|
Thank you! Here's a little before/after video to show the differences: before.after.pr.icon.movHere's the prior PR afaik that animated this: #48886 I do think some level of magic and polish is lost with this animation gone. Thinking ahead to more personalization efforts with the admin redesign, I imagine this same site "hub" will continue to play a big role to orient folks and some level of animation will go a long way to convey a smoothness and cohesiveness of the experience. |
|
I agree that the animation is nice but what I'm saying is that the way it's implemented today (keeping the same DOM element) is way too complex for what it adds and unless we find a better way to do it, it's not worth it. An example of this is the distraction free bug here #60875 I think "view transitions" would be perfect here. They already work on Chromium browsers (Chrome, Edge) but not yet in Safari and Firefox. It can be done as a progressive enhancement though. |
|
I pushed a quick prototype for view transitions in Chrome. You can see now in Chrome that the "site icon" is animated. The animation is slightly different than what we have in trunk (I believe we can make it similar to trunk if we really want to) but I'm really excited about this. It's huge improvement over the gymnastic we need to do in our code base to implement animations today. Also for site hub specifically, it can be acceptable to leverage this as a progressive enhancement: works on Chromium browsers (more than 71% of all users) while giving up on the hub animation for the rest for now and keeping the simplicity of our code base and fixing the distraction free mode bug. |
youknowriad
force-pushed
the
update/refactor-site-editor-hub
branch
from
dd733dc
to
1af9916
Compare
|
Tested again and it doesn't feel very smooth or polished compared to before: site.hub.animatino.movThis is especially the case when returning to the overall navigation where the site icon zooms in almost too much. When entering the canvas, it feels delayed. I'm not sure if there's a way to make it more seamless while still getting the benefits of this PR as I definitely want to see this bug resolved #60875. As is though, this PR isn't quite there. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What and Why?
Currently the site editor renders a "hub" with a site logo, site title and some actions. That hub is persistent and rendered as "fixed" on top of everything.
I think the main reason it's implemented that way is to be able to animate the site logo with go in and out of view mode. That said, I personally believe this is way too complex to accommodate for a small animation.
So this PR is kind of a provocation, how simple can it be if we don't have to implement the animation of the logo. It's not necessarily meant to be merged but at least I want to raise this discussion.
Also, coincidentally, this fixes #60875
Let me know what you think.