Content Mode

[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).

• Remove Style panel
• 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 editing (text editing in binded instances too).
• Disable copy/paste
• Add EditContent button
• Enable text editing functionality.
• Probably allow text editing in a single click instead of double click in Edit Mode.
• Make edit styles (i.e. show "text" cursor on editable text)

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 2.5 Add combo for modes

• - Switch preview, design, content using combo like switch
• - Padding right at menu is not ok (feat: Reorder items in the build menu #4484)
• - Order Design/Build/Preview (feat: Reorder items in the build menu #4484)
• - Rename modes (Visible Text initially)
• - Do not reset to preview automatically (feat: Reorder items in the build menu #4484)
• - Button zone (feat: Plus button hover polygon and menu icons #4487)

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.) (Done at feat: Allow delete/reorder Content Block children in Content mode #4483)

• Allow delete block children (_done at feat: Allow delete/reorder Content Block children in Content mode #4483)

• Alt click to insert before (done at feat: Add alt click (insert before) to editable block #4479 )

• Meta Icons in Menu (now BoxIcon is hardcoded) (feat: Plus button hover polygon and menu icons #4487)

• Allow delete descendants of editable block children ????

• Make text more readable about deletion - toasts texts.

• Change Icon for editable template https://www.figma.com/design/sfCE7iLS0k25qCxiifQNLE/%F0%9F%93%9A-Webstudio-Library?node-id=10054-1724&t=fUa78q94ZNOOlm8J-4 (feat: Change Block/Template icon #4486)

• - Editable Block => Content Block chore: Rename editable block component #4489

• - Plain tree, show only Content Blocks @TrySound

• - Alt converts + Icon to Delete icon. Inside menu we are writing ALT. Menu minWidth is not enough, max too. feat: Transform Plus button to Minus in case of Alt button is pressed #4490

• - Content Block without Templates is just wrapper which makes internal elements visible in navigation panel feat: Transform Plus button to Minus in case of Alt button is pressed #4490

• - Fix bug that after adding element it's not hoverable for like 500ms feat: Transform Plus button to Minus in case of Alt button is pressed #4490

• - Fix bug that cursor TEXT is not applied to newly created elements in editable block feat: Transform Plus button to Minus in case of Alt button is pressed #4490

• - Fix bug that something strange is happening with collapsed style when adding first template fix: Collapsed state was incorrectly calculated in some cases.  #4492

• - Publish not working @istarkov feat: Content Block publish component generator #4495

• - Menu height 24px @kof

• - Default texts https://discord.com/channels/955905230107738152/1115982879651016814/1312810680834850907 feat: Add initial text to the Content Block #4498

• - Section ?

• - When clicking "Content Block" in the navigator, nothing is scrolled into view. Only when clicking on the children. It's an existing bug with scroll to display:contents fix: Scroll to display contents elements. #4519

• - Content mode can publish. With can Publish checkbox feat: Add "can publish" to content editors #4530

• - When a mode like "Content" is selected in share links, it's odd that clone and copy are checked and blue. always was for every regime fix: When a mode like "Content" is selected in share links, it's odd that clone and copy are checked and blue #4526

• - When inserting a template instance, it should be selected automatically. Currently, the previously selected instance stays selected. fix: Scroll to display contents elements. #4519

• - Disable project settings edit feat: Allow page clone in Content Edit mode #4531

• - Allow page clone feat: Allow page clone in Content Edit mode #4531

• - Change menu button on modern variant feat: Add new button mode switch button #4532

• - Do not show Editable block you can edit in preview fix: Do not show empty content blocks in preview mode #4533

• - Toggle always between preview and current mode feat: Add new button mode switch button #4532

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.
• Show rich text subcomponents settings & style panel during text edit i.e. link inside rich text

Steps | Issues from @johnsicili

• (just noting) Seems odd to have the right panel when the majority of the time it just consumes valuable space. I don't have ideas right now. Maybe in the future we'll add link and image editing in canvas and can do without right panel for clients
• - (known issue) Links are hard to edit when adding them inline
• - I don't love image dimension fields exposed because I often reduce the dimensions to better optimize. But if they replace the image then I guess it doesn't matter.
• - They can edit text content on XML. IDK if this is a problem.
• - Add info about publishing permissions to tooltip (e.g., Can publish with this permission)
• - Disable Show toggle

Steps from @kof

• - Decide Content or Content Edit in share dialog?

[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

[kof]

• decide how we mark properties that are available in content editing mode
  ps: We dont do that, for now there is stub because we dont have components