Full Site Editing: Introduce a template editing mode inside the post editor #26355
Conversation
youknowriad
added
the
[Type] Technical Prototype
|
Size Change: +1.61 kB (0%) Total Size: 1.19 MB
ℹ️ View Unchanged
|
youknowriad
force-pushed
the
try/post-title-block
branch
from
f174617
to
3cccd77
Compare
youknowriad
changed the title
There was a problem hiding this comment.
Nice one!
In terms of feature this is already interesting. It also highlights some of the current problems with FSE, like how long it takes for certain template blocks to load.
In terms of implementation, there are things we can revise, but I know this is still just a draft. :)
packages/edit-post/src/components/header/template-zoom-toggle/index.js
Outdated
Show resolved
Hide resolved
youknowriad
force-pushed
the
try/post-title-block
branch
from
7d58ed5
to
c6823a3
Compare
|
@noahtallen @Addison-Stavlo and others. The last commit here c233dbf is I believe a good refactoring for the findTemplate adhoc function that is used right now in edit-site package. It might deserve to extract it from this PR to see how possible it is to use that new selector for edit-site as well. |
|
I also noticed that trying to resolve a template for an "auto-draft" post or page results in the 404 template being returned. I'm not sure this is expected to me, It seems like a bug in how the template resolution work? |
|
This is a cool PR! This could be how most people will edit templates, or create new ones. As for how this might work, I need to think about this some more, but because of the work that needs to be done to make this happen, I wanted to take a stab at mocking up my first instinct, which is that editing templates in this way could work a little bit like how "master slides" (the equivalent of templates) are edited in Keynote:
To translate that to the block editor:
Following that instinct, here's my first draft. First, click to edit the template:
Now you're editing the template, and you have to press "Done" before you are allowed to publish:
I'm not feeling all of the ingredients, and I would think this could use some iteration. Notably I'm not sure it's clear enough that you switched "modes". However I think that the flow is right, and for the purposes of testing this out further in the PR, I think this might work as a V1. One additional question, and perhaps also relevant in a larger FSE context: should the post content become locked / un-editable in this mode? Let me know what you think. |
|
@jasmussen I agree that this is a good starting point and you raise some good questions. Let's try some of it and see how it feels. |
youknowriad
force-pushed
the
try/post-title-block
branch
from
721937b
to
a9b9483
Compare
|
@jasmussen I implemented a first iteration of that flow, I'm certain that it's buggy but I'd appreciate some feedback :) |
|
Alright, this is cool. This is what I see:
As you can see, I can't actually exit that mode without making a change. But other than that, I feel like this is generally a good and relatively basic way to explore this feature. 👍 👍 Small nitpicks:
It bugs me the link isn't the same blue as my "Modern" theme color :D I know that's not part of this PR, but it always stands out to me.
Showing this snackbar was a good instinct! I think we can reduce the text a bit. How about:
|
|
I think we may need a "cancel" link next to "done" instead of allowing to return from the save when there are no changes. |
youknowriad
force-pushed
the
try/post-title-block
branch
from
689dbf9
to
d2bc4a3
Compare
youknowriad
requested review from
ajitbohra,
chrisvanpatten,
mkaz,
nerrad,
spacedmonkey,
talldan and
TimothyBJacobs
as code owners
In that case I'd change the "Done" label to say "Apply". |
So the "draft" thing shouldn't happen. I had this early in the PR but now it solved. That said, the freezing when loading the template in the templates UI is also happening to me when editing the template in the site editor, it doesn't seem specific to this PR. I believe we should remove that listing entirely at some point, it was just an early thing where we didn't have any UI to access templates. |
|
@jasmussen One small thought... I'm wondering if we could get away with a single button rather than the Apply/Cancel. Looking back at the Keynote example, couldn't we just have a single "Done" button? It would never be disabled, and behave differently based on whether there are changes or not:
|
Yes I think that'd be ideal. This seems fine as a starting point, it lets us validate some of the ideas and test it out. For round 2, I'd love to see a single done button, and perhaps the locking of post content when editing templates, and maybe even bringing in this template tool from the site editor, in place of the centered text label currently there:
|
| ); | ||
| return ( | ||
| <> | ||
| <Button onClick={ () => setIsEditingTemplate( false ) } isTertiary> |
There was a problem hiding this comment.
Should it else undo all unsaved changes applied to the template?
When the editor gets into a dirty state and I click Cancel then I see some strange dot icon applied on top of the Publish button.
There was a problem hiding this comment.
I'm not sure, I think it's something we should try and adapt.
To me, the problem is that "review changes" has been collapsed into almost nothingness:
I feel like this list should be expanded by default, redesigned if need be, but be a key part of the experience of editing templates, not something we bury:
I don't see the point in this being hidden at all, to be honest. And when visible, you just uncheck your changes when you press Done. |
|
Agreed @jasmussen. Another option is to simply undo until you're back to the original state, which raises another question (probably beyond this PR) – is the undo action aware of this state change, as it is in Keynote? If not, should it be? |
Yep, undo is a very important ingredient. One thing I will add though, which is why it's so important to show that list of changes by default, not collapsed, is that you may accidentally make a change without knowing you did, so you don't know to undo. By showing it in that expanded list, it makes you aware of it. |
|
I'm going to open a separate PR for the "EntititiesSavedState" component and make it expanded by default. |
|
Awesome. Followup question: does it need to be able to collapse at all? IMO: no. |
|
@jasmussen I don't know, we can try whatever you like :P |
|
@youknowriad would it be possible to add the site editing context (or at least the css classes) when you switch to template editing? That way we'll inherit the changes in #27271 which make interacting with template parts more transparent. |
|
@jameskoster I didn't know about that change, looking at it now, and as implemented right now, it is an ad-hoc CSS. I believe this is better addressed with an explicit setting on the block-editor package. I like keeping the PRs small and focused. I shall explore that separately. |
youknowriad
changed the title
This PR explores the addition of a template editing mode right inside the "post editor". Allowing users to zoom-out to the template level.
Todo