Content Editor experience

[kof]

As a builder, I want to let a customer edit text and images without giving them the full power of the builder.

Here is how it can work:

Step 1. Add Content Edit mode to the panel (similar to Preview button at the top panel).

• [x] Remove Style panel
• [x] At left show Pages, Navigator, Assets
• [ ] Disable Binding editing.
• [ ] Disable Canvas drag.
• [ ] Disable Tree drag.
• [ ] In the properties panel, show only Link and Img tag default properties (but not ID or Class), do not allow add new properties.
• [ ] Do not show/allow bindings.
• [ ] Disable copy/paste
• [ ] Add EditContent button
• [ ] Enable text editing functionality.

• [ ] Probably allow text editing in a single click instead of double click.

  Roll out without feature flag or public announcement.

Step 2. Add "content editor" Share link.

• [ ] Do some system rest API checks to not allow patching styles, props (only img and link are allowed)
• [ ] Free users can't share Content Edit Link
• [ ] All shared links from Free users must not have Content Edit mode

Roll out without feature flag or public announcement.

Step 3. Allow content Editors to upload and modify images

• [ ] Roll out without feature flag or public announcement.

Step 4. Introduce the EditableBlock component.

EditableBlock
   - Templates (Designers can add components within a controlled template area.)
     - Header
     - Article 
     - Anything 
  - Header Edited By user
  - Article Edited By user   
  - Article Edited By user   

• [ ] The content editor can copy components from the Templates area directly into the EditableBlock, making them immediate children of the EditableBlock (UI inspired by Notion or potentially with a “+” button at the bottom of each block, open for discussion).

• [ ] Component Reordering: Users can reorder components vertically within the EditableBlock. (Note: Dragging on the main canvas is not yet supported. Lack of main canvas dragging is acceptable in the editor at this stage.)

Roll out WITH public announcement.

After Step 5. Explore drag-and-drop functionality on the main canvas.

• [ ] This step requires careful planning to avoid complexity that may lead to extensive development cycles.

[MilanBgd]

I think this feature gonna make the difference for our clients!

[ComputerTechs]

Can't wait for this feature!

[Zmove]

Definitely in the top 5 most important feature to me, near support of CSS grid, CSS variables and animation engine. That will allow us to definitely quit webflow for webstudio

[natanexus]

Honestly, this is the only feature i need to definetly use webstudio for my clients

[Zmove]

About the component vs setting, I would vote for settings if you can add a way to distinguish editable components in the navigator (small icon, specific color, specific border, whatever).

I'm afraid that the component solution will over complexify the navigator. I'm not a big fan of a navigator not representing my DOM with plenty of "ghost" elements. It's ok for collections, but I would avoid this as much as possible

[kof]

@Zmove special colors/borders etc are also not easy to understand after there are more than 3 and we already have use cases for 3.

Ghost elements in the navigator are essentially components. They don't necessarily represent DOM elements and I don't see them as something to avoid but rather the opposite. Yes they may need some more distinctive marking but generally they are not bad. They add indentation to help see what they contain which is better than memorizing the meaning of many colors

[istarkov]

See top comment