Overhaul the "Collaborators can edit this element" system

The ability to control what a client can edit and what they cannot is a crucial part of any site design- but in Webflow it needs an overhaul.

Key things it needs;

  1. The ability to allow/deny editing of elements hierarchically, so that the setting cascades (see notes for approach)

  2. Make it easier for designers to see what is editable by collaborators, and what is not.

  3. Allow the ability to prevent editing of CMS-bound items. Currently the "Collaborators can Edit" option is gone on CMS-bound items, which leads to editing catastrophes, as in...

  4. Never allow editing of elements which are bound through a CMS Reference Field. Users don't cannot tell they are e.g. renaming ALL blue shoes to red, rather than changing THIS pair to red. Make them do it in the Collection page instead, where they can change the item Referenced.

Details, and some ideas on approach;

Make the control of elements that are editable-by-collaborators hierarchical & cascading

There are a lot of ways to do this, but I think the best and easiest way to implement this is to add a new "grouping" virtual element to the element hierarchy.

The Page would default to everything non-editable, but the designer can add new "editable area" nodes to the hierarchy, and drag in whatever contents they want.

Likewise, if you add a right-click menu to the element hierarchy pane, you could right click on any element, and "make this area editable by collaborators", which would wrap it in one of the groups.

You could have as many groups as you want, so designers can choose exactly which regions are editable, including everything inside BODY if they want to.

That grouping element would not actually render as any kind of HTML element, it's just a grouping indicator to govern editor behavior.

This simplifies things tremendously, both on the cascading/resetting problem, and on designers being able to see and control what's editable.

That kind of virtual grouping element would be very helpful too for things like secured page parts that should only display when you are logged in ( with the upcoming membership & auth feature ).

Also described here;
https://wishlist.webflow.com/ideas/WEBFLOW-I-4550

And discussed here;
https://discourse.webflow.com/t/limiting-collaborator-editing/68348

Add a visual indication of editable/non-editable

Easiest way here is also in the Element Hierarchy- color code items to indicate that they are editable by collaborators. That visualization can be switched on/off by a button at the top of the element hierarchy pane.

The grouping indicator helps with this, but highlighting editable elements directly in the tree is much more helpful so the designer can spot them.

Note that only editable elements matter, e.g. images, text, and rich text elements. Elements like DIVs don't need indication.

Ideally, if "view editable items by collaborator" is switched on, that indication would also appear in the main WYSIWYG editor window as well, so you can see visually which parts of the page are editable.

Allow the ability to prevent editing of CMS-bound items

Currently the "Collaborators can Edit" option disappears for CMS-bound items, which leads to editing catastrophes, as in...

Never allow editing of elements which are bound through a CMS Reference Field

Catastrophic, when users make a text edit here and don't know the impacts.

https://discourse.webflow.com/t/limiting-collaborator-editing/68348/16?u=memetican


  • Michael Wells
  • May 26 2022