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

Writing and contentOnly modes #60021

Open
6 of 7 tasks
Tracked by #66499
SaxonF opened this issue Mar 20, 2024 · 31 comments
Open
6 of 7 tasks
Tracked by #66499

Writing and contentOnly modes #60021

SaxonF opened this issue Mar 20, 2024 · 31 comments
Assignees
Labels
[Feature] Site Editor Related to the overarching Site Editor (formerly "full site editing") [Feature] Write mode [Type] Overview Comprehensive, high level view of an area of focus often with multiple tracking issues

Comments

@SaxonF
Copy link
Contributor

SaxonF commented Mar 20, 2024

Brief

Editing in Gutenberg can be complicated for non technical users partly because of how challenging it can be navigating/selecting the block tree (going down and up the tree), and how granular editing is. We are enhancing the zoomed out view which helps to alleviate some complexity when composing pages by emphasizing sections and not their inner blocks, but editing still remains a challenge. A prime example is the act of editing a site's navigation.

Visual

simple-mode.mp4

Tasks

@SaxonF SaxonF added the [Type] Enhancement A suggestion for improvement. label Mar 20, 2024
@jordesign jordesign added the [Feature] Synced Patterns Related to synced patterns (formerly reusable blocks) label Mar 20, 2024
@bacoords
Copy link
Contributor

I'm a big fan of this - it can bring synced patterns into a place similar to say ACF Blocks where the control over content editing is granular and anything non-editable is purely stripped away. There's probably a bunch of group blocks in these patterns but we don't have to see them in this view 👌 because they're not editable.

A few philosophical thoughts that are just my opinion as a user/developer:

  • The BlockToolbar and InspectorControls for innerBlocks should function exactly as they would normally- except everything non-editable should be stripped away. I believe that's what I'm seeing here but wanted to reiterate it because of the comment about the "alt text". I would not add that to the block toolbar if it's not on the block toolbar normally. That sort of consistent behavior (and taking what we have and just stripping away what is locked) is key for education and future extensibility (custom block extensions from developers that modify controls/toolbar)
  • Having a list view of blocks inside the Pattern in InspectorControls seems antithetical (why not have it in the List view?) but I understand it's a design we're seeing in templates as well, so maybe that's what it is.
  • Eventually tying the "Simple" content editing mode to user roles would be amazing.

@mikemcalister
Copy link

This is excellent. Even as an advanced user, I can see the benefit of hopping into the simple mode to make some quick changes without being inundated with UI. This is also starting to feel more like the simplified interface many are anticipating.

Agree with all of Brian's points, especially being able to eventually tie it to user roles. I'm also excited to see a simplified experience for the navigation. Honestly, it feels like that should be the default experience for navigation editing.

The only thing I'm not sure about is tying it to the zoomed out view. If users are editing content, editing text, etc., it may be fatiguing doing it on a zoomed out view. I see why it would be tied to it, but just want to call that out.

@richtabor
Copy link
Member

and open inspector by default when switching into this mode.

I'm not sure about forcing the Inspector open. For instance, when inserting patterns, the Inserter + Patterns category sidebar + the Inspector makes the canvas much too tight to lean into composing. That's why I wanted to explore #59963 (perhaps it can re-open the Inspector when disengaged as well).

I'm also not confident in direct inline canvas editing when zoomed out. It may feel more intuitive to try having fields associated with content, that are exposed in the content-only view, like you're thinking for the Image block alt-text—but for any content attributes (much like Block Connections may end up like).

I would also think the standard List View could be leveraged on the left, rather than a mode-specific list view.

@bacoords
Copy link
Contributor

I'm also not confident in direct inline canvas editing when zoomed out. It may feel more intuitive to try having fields associated with content, that are exposed in the content-only view, like you're thinking for the Image block alt-text—but for any content attributes (much like Block Connections may end up like).

If users are going to start editing actual content in InspectorControls text input fields, we're really negating the entire premise of a visual editor and introducing a new (old) paradigm (with all associated baggage for users/educators). Feels like a really second-class experience to be typing text into a input form field when we have a functional block editor. (Though I agree with the point about the zoomed out view both @richtabor and @mikemcalister seem to be making.)

@richtabor
Copy link
Member

If users are going to start editing actual content in InspectorControls text input fields, we're really negating the entire premise of a visual editor and introducing a new (old) paradigm (with all associated baggage for users/educators). Feels like a really second-class experience to be typing text into a input form field when we have a functional block editor.

There's a balance.

If you're zoomed out (in this mode), I wouldn't expect to be able to edit tiny text. Instead I'd expect a clear indication of what I can edit, from a top-down view. Sure, when not in this view, granular controls like we have now are great.

@richtabor
Copy link
Member

richtabor commented Mar 22, 2024

Related to #59249, as it enables zoom out mode to select top-level blocks only. Could use more testing.

@richtabor
Copy link
Member

@SaxonF is the next step to explore turning on contentOnly for top-level blocks (same logic as #59249) when zoomed out is engaged?

@aurooba
Copy link
Member

aurooba commented Mar 22, 2024

I'm also not confident in direct inline canvas editing when zoomed out. It may feel more intuitive to try having fields associated with content, that are exposed in the content-only view, like you're thinking for the Image block alt-text—but for any content attributes (much like Block Connections may end up like).

What happens to Rich Text? What happens if you want to add a link, bold something, etc? Are we bringing back the TinyMCE editor for this scenario?

It makes sense that you shouldn't edit tiny text. Maybe clicking on something you can edit inline zooms you back in?


Overall this is awesome. I agree with both Brian and Mike's points. And this is such amazing progress in the right direction! 😊 and thank you for the walkthrough video, super helpful!

@fabiankaegy
Copy link
Member

Just wanted to share these two relevant issues:

Regarding the conversation about fields becoming editable in the sidebar only. I think there is a clear difference between the zoomed-out mode and the regular content editing where content-only locking also is used. I feel strongly that we should not move to a sidebar editing experience for the regular mode. For that, I think what we have today for inline & toolbar settings works. But we need to extend it to also support certain sidebar features as outlined in #57911
The zoomed out mode is a different story any I'm glad we are experimenting with different options here :)

@richtabor
Copy link
Member

richtabor commented Mar 30, 2024

The zoomed out mode is a different story any I'm glad we are experimenting with different options here :)

Agreed. My thought was along if zoom out and content only were the same experience—as you wouldn't expect to select and edit granularly while zoomed out. At this point I'm not thinking zoom out and content only are to be combined.

@SaxonF
Copy link
Contributor Author

SaxonF commented Mar 31, 2024

Makes sense to me. Zoom can be treated as its own thing .

@talldan
Copy link
Contributor

talldan commented Apr 3, 2024

I'm testing out some changes to contentOnly mode in #60412 along these lines.

@jhmonroe
Copy link

jhmonroe commented Jul 26, 2024

(Like synced pattern overrides #59607) content-only editing does not work with the Details block at all. :-(

See attached, when content-only is applied to a group containing the details block, there is no way to edit the first line (coded as summary instead of paragraph or heading) of the detail block

Screen Shot 2024-07-25 at 11 38 36 PM

@mtias
Copy link
Member

mtias commented Aug 8, 2024

I think we need to rename this set of features, maybe by making it the default "pattern editing" experience and calling it that.

@fabiankaegy
Copy link
Member

@mtias when you say rename do you mean the actual code reference (blockEditingMode) or end user facing references?

I don’t think we currently showcase the name content only anywhere in the UI.

But the blockEditingMode is a public API that is used for more things than just patterns.

The newer preview template mode that now exists for all users in block themes inside the post editor uses that feature under the hood. I know of many custom blocks that use this feature.

I’m concerned that renaming would cause more confusion and breaking changes. And personally am not too sure what problem renaming it would actually solve.

@jasmussen
Copy link
Contributor

My read: it's only for anything user-facing. There isn't much, if any, UI yet, but we've been needing to build that out for a long while: how do you enable it, how do you disable it, what's its relationship with locking, etc. I tentatively think there's a good idea hidden in the idea of patterns being inserted in this state by default. Conceptually it's similar to synced patterns with overrides—these are just not synced, it's just patterns with overrides. That would let us use the same "detach" interface. All of this would need an exploration, but knowing that we'd not have to call it "contentOnly" or "Content only" would be useful in those explorations, even if under the hood the props name stayed the same.

@mtias
Copy link
Member

mtias commented Aug 9, 2024

@fabiankaegy yeah, I mean in terms of how we refer to it when we discuss iterations and the evolution of the related features—"Content only" is a bit clunky and doesn't capture the breadth of the experience behind it. We tend to get stuck with the naming of some of the underlying props and then that goes directly into the general user updates and communications we put out, which is not ideal.

@bacoords
Copy link
Contributor

I think we need to rename this set of features, maybe by making it the default "pattern editing" experience and calling it that.

Perhaps before we get another round of renaming features- which comes with the side effects of making our content out-dated, making it harder to refer to features in training materials, and just increasing general community frustration- it would be worth generating an issue that provides some sort of end vision for what these disparate features (block locking, contentOnly, template locking, pattern overrides, etc) are hoping to look like as a complete & coherent "feature" inside of WordPress. As @fabiankaegy mentioned, pattern editing is only one use for this, but versions of it are also used in custom blocks, with the block bindings API, with CPTs with templateLock, etc.

Once an actual vision for where these features are headed, for what end-users might be expected to do with them, is articulated, then I think the naming should be addressed.

@noisysocks
Copy link
Member

I think something like this is really important to improving the experience for new users. Right now it's overwhelming when you're dropped into the site editor and have full control of everything straight away—we need a gentler on-ramp.

In general I'd love to see deeper design explorations of how this and #50739 could be combined into an interface that helps an inexperienced user build a new page from scratch using patterns and contentOnly editing.

Apply contentOnly to all sections when zoomed out, and open inspector by default when switching into this mode. This mode becomes more of a "simple editing" mode.

I don't think it makes sense to be able to edit the content, even in contentOnly mode, while zoomed out. The text will be very small. I think it would work better to have a mechanism where, from zoomed out mode, you click on a section to zoom in on it and then edit the content (using contentOnly) within that section. Clicking outside the section could zoom back out.

The end result would look something like below.

One thought I had while watching the mockup is that the List View on the right could in theory be merged with the List View on the left. The combined List View would contain all of the sections and then, nested within them, the editable blocks of content that are in that section. That frees up the right sidebar for something else, or gives us more horizontal space for the pattern inserter to be opened as well.

I think this mockup was also put together before we implemented the current behaviour of flashing the outlines of blocks that are editable when the container is contentOnly locked. That would work well for this use case.

@getdave
Copy link
Contributor

getdave commented Aug 30, 2024

I've experimented with the content only drill down in this experimental PR.

@noisysocks
Copy link
Member

noisysocks commented Sep 3, 2024

👋 Going to work on a v0 of this with @getdave and @richtabor behind an experimental flag.

For the first pass, I'm picturing:

@noisysocks noisysocks self-assigned this Sep 3, 2024
@youknowriad
Copy link
Contributor

As we start gaining clarify of where we want to take this. I've updated the issue and added a todo list at the end. This will serve as an overview issue for all the needed follow-ups for this new select tool.

@bacoords
Copy link
Contributor

@youknowriad Would also love to see if this issue could be included in the scope. Allowing theme devs to tie contentonly editing to a user role/cap would be a big win:

#65503

@youknowriad
Copy link
Contributor

youknowriad commented Sep 20, 2024

Hi! I can see how that can be useful for site builders to control the experience of the clients. To be honest, I think it's a bit early for that though, we're not even sure what's the ideal contentonly experience is. I think we should first focus on the experience itself but if we get to a point where we're satisfied, I think it's definitely something we can consider.

That said, I'm adding it to the todo list.

@richtabor
Copy link
Member

Consider implementing the possibility to "focus" a section in the "select" mode to fine tune its content. Like a double click to enter "advanced" mode but only focused on the current section.

I'm not thinking this is necessary, at least in the current implementation. Perhaps something to explore in the future.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Site Editor Related to the overarching Site Editor (formerly "full site editing") [Feature] Write mode [Type] Overview Comprehensive, high level view of an area of focus often with multiple tracking issues
Projects
Status: In Dev
Status: 🏈 Punted to 6.7
Development

No branches or pull requests