Change the post template visually #28390
Closed
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
[Feature] Full Site Editing
[Type] Experimental
youknowriad
force-pushed
the
add/visual-change-template
branch
from
430664b
to
d058865
Compare
youknowriad
force-pushed
the
add/visual-change-template
branch
from
d058865
to
e48c1ee
Compare
|
Time to get some feedback about this. |
|
Size Change: +1.48 kB (0%) Total Size: 1.37 MB
ℹ️ View Unchanged
|
|
Taking a look now, but I think I'm doing it wrong:
|
|
@jasmussen mmm, this looks good to me. Weird that it doesn't work, I have the exact same thing. |
|
Oh (try a page, not a post) just in case. |
|
Okay I got it working, and I see this:
Don't be confused, all three templates are the same, so the preview is correct. This is a cool feature, big fan. My thoughts immediately go to: how do we implement this in a way that feels even more intuitive? The flow as is can probably be tweaked to make for a good V1 — white background, better thumbnail treatment, hand cursor when hovering a template, stronger active state, better "default" thumbnail — and I'd be happy to help with that. But in terms of the longer view, I would like to see if we can avoid the modal dialog altogether. I think of this in the same prespective as the preview dropdown resizing the canvas itself, rather than showing previews in a modal dialog. You are affecting the canvas, so you should affect the canvas, if that makes sense. @jameskoster has made some amazing designs for how that might work, and issue #27850 is full of good ideas, notably this one helps give a good overview of templates available, while making it clear that it's the entire layout you're switching out. But that design is probably a big step. A smaller interim step, towards that, might be this mockup:
Essentially we resize the canvas, and show the templates above the canvas with the active one selected. How hard would such a step be to accomplish? |
|
I don't like the "resize the canvas and show the template on top of it". What I don't like is the gymnastic it forces us to do in terms of CSS and potentially keyboard navigation/accessibility. I feel we can get very close to that using a full screen modal:
|
|
I rustled this together in the Inspector just to get an idea of how a full-screen modal might feel. With some design polishing I think it could work.
|
Would some of the fancy "flip" animations that Jay outlined, for example the first one on this comment, help address this? That animation, specifically, still feels like it manipulates the canvas itself, even if it does technically enter a modal. |
At this point, I don't know how we could achieve this animation. Using a modal basically mean rendering a new DOM tree in another place, and not reusing and animating the same element like that animation does. Maybe we could fake it somehow, but it's going to be difficult. |
|
FWIW this "flipping" or "zooming" animation will likely have many other applications, if we can get it right. IE zooming in and out of the template editor / template mosaic view. |
|
I'd be interested for @ItsJonQ to weigh in on any fancy animations involved in bringing up the modal, and how they might fit with the G2 components design language. |
|
Perhaps we can use an existing modal that users, everyone uses a lot?
Btw lets try and keep animations and other visual affects showing transitions between states to a minimum. It can cause strain on the eyes when things shift around. It is better to have an obvious UX/UI giving a clear direction so the user can see an obvious before and after. Just by looking at the UI. |
|
I shared an alternative design concept for this over in #27850 (comment) |
|
Closing this one for now. Some of this is being reused in #33770 |
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.
For block themes, this PR adds a modal to visually see the templates (Page templates) while changing it inside a modal.
Notes
Testing instructions
experimental-theme.jsonand by adding the corresponding html files.