Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Optimize Editor Experience#7982

macolo started this conversation inGeneral
Aug 27, 2024· 7 comments· 11 replies
Discussion options

macolo
Aug 27, 2024
MaintainerSponsor

  • django CMS gives developers and editor's a lot of freedom to structure content and create layouts on the fly without requiring code changes.
  • This brings some complexity to the editor experience. I'd like to discuss if there are any editor pains currently and in what way the editor experience, including publishing processes, best practices, or other documentation and guidance, could be optimized.

Some ideas:

Copy & pasting

  • pain point: in long lists of elements, pasting into the containing element (parent) appends pasted element to the end of the list (i.e. farthest away from the containing elements settings menu button) making it hard to find the pasted element after successful paste action.
  • Possible solutions
    • copy & paste in the structure mode could support "paste after"
    • copy & paste in the structure mode could paste as first item (instead of last item), so it's closest to the button that initiated the paste action
    • pasted element could be highlighted for a short while

row / columns

  • pain points:
    • as I understand, row / columns elements are used in many installations
    • row / column elements are often needed as wrapping elements even if there is only one column, unnecessarily increasing the complexity of the structure mode, making it more difficult for editors to find elements they would like to reorder.
    • row / columns elements are difficult to configure, they have lots of options and the bootstrap concept is often not easy understood by editors
  • possible solutions
    • stop endorsing bootstrap-based website setups and come up with a css grid framework independent approach for columns / layouts. For example, in most layouts, 2-columns, 3-columns, 4-columns, 6-columns and a flexbox container is probably sufficient. What's a best practise to implement such a simplified column approach in django CMS?

In-text plugins

  • pain points:
    • they show up in the structure mode however cannot directly be edited (they have a lock icon). Dragging them to another location drags the parent text element with it. This looks counter-intuitive to me.
  • possible solutions:
    • remove in-text elements from the structure mode. They are still always accessible from inside the text element.
    • remove in-text element functionality altogether? It's mostly used for links and buttons. Links are solved natively in djangocms-text now and buttons are mostly block elements that could be added after a text element.
You must be logged in to vote

Replies: 7 comments 11 replies

Comment options

@macolo Interesting thoughts, here's my experience with our clients:

Copy/paste

Not really a big issue; I don't think any of our clients/editors have ever raised this.

Rows and Columns

The complexity is definitely an issue for our clients. When we template out articles/bios/services, etc., we remove the need for editors to get involved with rows and columns.

But on landing pages, we essentially have an empty template that leads to lots of questions/confusion for editors who don't use the system every week. We try to get around this by having an unpublished "/templates/" section in the sitemap where we have pre-built examples they can copy/paste/edit, but it's definitely fiddly.

We talked about building something that allowed you to create "Templates" in the plugin list when you click + to add a new element. Users could save existing row/column layouts as a "Template" and then re-use them later from the plugin list instead of using individual plugins. We never built it, but I'd happily outline our thoughts in more detail.

The other alternative as you say is to simplify it but my concern is that clients always manage to find a 5 column layout they need so how would that be built outside of the "standard" 2/3/4/6 column layouts?

In text plugins

I don't like these, so we discourage clients from embedding; they have link/button functionality in a separate plugin, so we encourage them to use that. When we switch over to tiptap we might hide it completely to stop them from doing it :)

You must be logged in to vote
2 replies
@macolo
Comment options

macoloAug 29, 2024
Maintainer AuthorSponsor

Good points@mj8arrett - I think re row / column complexity there are different aspects:

  1. creating column structures is complex: creating a template is probably in most cases left to a power user or the developers. The normal editors then copy and paste those structures.
  2. maintaining column structures is error-prone: dragging the wrong column content to the wrong place and normal editors are unable to recover from that in many cases.

I think@fsbraun approach below solves both problems for editors.

btw, the solution you describe, i.e. being able to create custom plugins on the fly (without coding) by creating templates is already available here:https://github.com/django-cms/djangocms-modules (not sure if it works yet in v4, however it's been working very well in v3)

@mj8arrett
Comment options

That's exactly what we were talking about; how did I not know about this?

Comment options

fsbraun
Aug 27, 2024
MaintainerSponsor

  • remove in-text element functionality altogether? It's mostly used for links and buttons. Links are solved natively in djangocms-text now and buttons are mostly block elements that could be added after a text element.

With djangocms-text you can specify white and blacklists for text-enabled plugins. I.e. you can install plugins and control which are available from within text fields. To disable them altogether, use the following setting:

TEXT_CHILDREN_ENABLED = FalseTEXT_CHILDREN_WHITELIST = ["NONE"]

(in future releases, this will just beTEXT_CHILDREN_ENABLED = False)

You must be logged in to vote
0 replies
Comment options

fsbraun
Aug 27, 2024
MaintainerSponsor

With respect to an improved editor experience and overview on the structure of plugin trees I have had the following thoughts for a while now:

  • Allow for some (not too strong)colour coding of wrapper elements, say, grid plugins, so it becomes easier to identify a grid structure. (Same for accordions etc.)
  • Allow for plugins to mark them asnot editable (i.e. double-clicking will not bring up a modal). They can be added/changed programmatically by a parent plugin. Example: A row plugin could manage its columns. A hero plugin could manage, say, three slots represented by three child plugins: an image, a header, and a body.

image

You must be logged in to vote
5 replies
@macolo
Comment options

macoloAug 28, 2024
Maintainer AuthorSponsor

Yes, I think that would be a great idea. I wonder how this could work on a code level, maybe something like the following.

pseudocode example (do not use):

HeroPluginModel(CMSPlugin):   border_size = models.IntegerField()   # the image can live on the parent model   hero_image = FilerImageField(null=True, blank=True, related_name="hero_image")      # we want to have two subareas where we give the editor more power over its contents   hero_header = SubPluginField(plugin_class=ContainerPlugin, title="Hero Header", allowed_child_plugin_classes=(         "TextPlugin",      ),       default_content=(         "TextPlugin": {            "title": "Here goes the text..."         }    ))   # in the body, everything is allowed   hero_body = SubPluginField(plugin_class=ContainerPlugin, title="Hero Message")HeroPlugin(CMSPluginBase, CMSPluginWithChildren)   model = HeroPluginModel
@fsbraun
Comment options

fsbraunAug 28, 2024
MaintainerSponsor

Here's the code from the above example (no highlighting and no disabled edit so far - that has to go into the core). It comes from djangocms-frontend's new component interface expected to be part of djangocms-frontend 2.0 and to be used for the next installment of our website:

from djangocms_frontend.contrib.component.components import CMSFrontendComponentfrom djangocms_frontend.contrib.component.components import componentsfrom djangocms_frontend.contrib.image.fields import ImageFormField@components.registerclass Hero(CMSFrontendComponent):    class Meta:        name = _("Hero")        render_template = "components/hero.html"        allow_children = True        slots = [            ("title", _("Hero title")),            ("message", _("Hero message")),        ]    title = forms.CharField(required=True)    message = forms.CharField(required=True)    hero_image = ImageFormField(required=False)
@fsbraun
Comment options

fsbraunSep 8, 2024
MaintainerSponsor

#7989 Will allow plugins (say columns, but also slots in custom components) to mark themselves as not editable and thereby disable the edit modal for them.

@fsbraun
Comment options

fsbraunSep 8, 2024
MaintainerSponsor

PS: It does not include a color coding but would allow apps to add their css to thecms_toolbar.py to add let say shading for an immutable plugin.

@fsbraun
Comment options

fsbraunSep 8, 2024
MaintainerSponsor

Here's an example with columns not being editable
image

Comment options

jrief
Aug 30, 2024
Collaborator

I for instance created a special mixin class which can be added to any component. It adds an extra checkbox to hide that component when rendered. In the structure editor, this component then is styled as shown here:

Screenshot 2024-08-31 at 00 00 34
You must be logged in to vote
3 replies
@fsbraun
Comment options

fsbraunSep 8, 2024
MaintainerSponsor

Hi@jrief ! How did you add the style to the structure board drag item?

@jrief
Comment options

jriefSep 8, 2024
Collaborator

Adding thismixin class to any plugin, adds an extra Boolean field to that plugin in order to optionally hide it. Very useful while developing a CMS page.

@fsbraun
Comment options

fsbraunSep 8, 2024
MaintainerSponsor

OK, you just render the corresponding styles into the document body in edit mode. 👍 That's also a nice way of doing it.

Comment options

jrief
Aug 30, 2024
Collaborator

I also would like to recap my discussion from 2017 added to the discussion board in June:#7969

You must be logged in to vote
0 replies
Comment options

Here are a few small usability issues that I noticed whilst getting used to the django-cms UI.

If you add a plugin in the structure editor that has no extra configuration it shows you this modal. It would be nice if this modal did not show in this situation.

image

Also, if you are adding a child plugin to another plugin and it only has one available option you still get prompted to select a plugin. It would be nice if in this situation the only available plugin was just added.
image

I think combining these two UI tweaks would make for quite a nice experience, although I admit those two combined is probably an edge case.

You must be logged in to vote
0 replies
Comment options

possible solutions
stop endorsing bootstrap-based website setups and come up with a css grid framework independent approach for columns / layouts. For example, in most layouts, 2-columns, 3-columns, 4-columns, 6-columns and a flexbox container is probably sufficient. What's a best practise to implement such a simplified column approach in django CMS?

@macolo Do you think we should move to something like Tailwind as that is mostly a de-facto standard now or do we go with a generic solution without endorsing a specific framework?

You must be logged in to vote
1 reply
@mj8arrett
Comment options

I think we need to be independent of any specific framework as, in agencies, there could be others already in use. For example, we have many bootstrap sites so adopting tailwind would be a major headache for us.

We’ve discussed internally how to make rows and columns more user friendly and I think it can be done independently of the framework used.

Happy to look at this in the new year. Maybe a use case for an ai based script which is something I am interested to look at as part of a wider project.

Sign up for freeto join this conversation on GitHub. Already have an account?Sign in to comment
Category
General
6 participants
@macolo@vinitkumar@jrief@CarwynNelson@fsbraun@mj8arrett

[8]ページ先頭

©2009-2025 Movatter.jp