feat: allow plugins to disable their edit modal

[fsbraun]

Description

As discussed in #7982, some plugins' configuration might not be edited. Examples are:

• Column plugins (in many cases)
• Slot-like plugins which do not have their own configuration

This PR allows plugins to mark themselves as non-editable by setting

• edit_disabled class property of the plugin class, or by setting
• edit_disabled instance property on the plugin instance (potentially dynamically)

If either is set, the structure board will not offer the edit button, and double-clicking the plugin on the page or in the structure view will not open the edit modal.

Finally, if the plugin instance has a add_structureboard_classes property, those classes will be added to the drag item in the structure board. This can be used to style plugins in the structure board dynamically. Styles would need to be added in a custom cms_toolbar.py.

Example

This PR does not include the grey text color. I included this to show which plugins do not have edit modals:

• No pencil button
• Double-click does not do anything

Related resources

• #7982
• #...

Checklist

• [x] I have opened this pull request against develop-4
• [ ] I have added or modified the tests when changing logic
• [ ] I have followed the conventional commits guidelines to add meaningful information into the changelog
• [ ] I have read the contribution guidelines and I have joined the channel #pr-reviews on our Discord Server to find a “pr review buddy” who is going to review my pull request.

[macolo]

@fsbraun nice! I thought a bit about this and have two use cases:

1. would dragging a edit_disabled plugin outside the controlling parent still be possible, e.g. can an editor (accidentally?) destroy a parent-child complex designed by a developer so that it becomes unusable, especially as the controlling parent plugin template (probably?) counts on the existence of specific child plugins in a specific order?

2. dragging a edit_disabled plugin inside the controlling parent, e.g. changing the order of its child plugins. This might cause a similar issue, the controlling parent's template might expect the controlled children to be in a specific order?

In summary, would it make sense to also disallow direct drag & drop for edit_disabled plugins?

Of course, dragging them via a parent plugin should always be possible, as the whole complex can be dragged to another position in the placeholder, can be cut or copied and pasted elsewhere.

[fsbraun]

@macolo Draging is still fully controlled by allowed_parents and allowed_children. This means I could change the order of columns or move a column to a different row. But I should not be able to drag a column into something else than a row.

Indeed, the parent plugin cannot rely on the existence or order of child plugins. Any management code must be flexible and say recreate a missing child if needed, or might want to merge if there are several children, say, for a single slot. Disabling dragging alone would not solve this issue: There is also pasting or adding plugins.

PS: The custom component construct does ignore the order of the child plugins.

[fsbraun]

@macolo I have now implemented drag-disabling in principle (CSS and JS side). Shall we go for another plugin option that disables drag for child plugins? It would also need to disable add and paste. Something like child_edit_disabled...

[sourcery-ai[bot]]

Reviewer's Guide by Sourcery

This pull request introduces the ability to disable the edit modal for plugins. This is achieved by adding an 'edit_disabled' property to the plugin class or instance. Additionally, it allows adding custom classes to the drag item in the structure board via the 'add_structureboard_classes' property.

Sequence diagram for plugin edit interaction with disabled editing

sequenceDiagram
    actor User
    participant UI
    participant Plugin
    participant Editor

    User->>UI: Double clicks plugin
    UI->>Plugin: Check edit_disabled status
    alt edit_disabled is true
        Plugin-->>UI: Editing disabled
        UI-->>User: No action
    else edit_disabled is false
        Plugin-->>UI: Editing allowed
        UI->>Editor: Open edit modal
        Editor-->>User: Show edit interface
    end

Class diagram showing plugin edit configuration changes

classDiagram
    class Plugin {
        +edit_disabled: bool
        +add_structureboard_classes: string
        +allow_children: bool
        +disable_child_plugins: bool
        +get_plugin_class()
    }

    class PluginInstance {
        +edit_disabled: bool
        +add_structureboard_classes: string
    }

    Plugin <|-- PluginInstance

    note for Plugin "New properties added:
edit_disabled and
add_structureboard_classes"

    note for PluginInstance "Can override class-level
edit_disabled setting"

State diagram for plugin edit states

stateDiagram-v2
    [*] --> Normal
    Normal --> EditDisabled: edit_disabled=true
    Normal --> Editable: edit_disabled=false

    state Editable {
        [*] --> Ready
        Ready --> EditModal: Double click
        EditModal --> Ready: Close modal
    }

    state EditDisabled {
        [*] --> NoEdit
        NoEdit --> NoEdit: Double click (no effect)
    }

File-Level Changes

Change	Details	Files
Added the ability to disable the edit modal for plugins.	Added 'edit_disabled' property to the plugin class or instance to disable the edit modal. Modified the drag item template to not render the edit button if the plugin is not editable. Modified the plugin javascript to prevent opening the edit modal on double click if the plugin is not editable. Modified the plugin rendering to add a class to the plugin container if the plugin is not editable. Modified the structure board javascript to not allow dragging of disabled plugins. Modified the structure board styles to not show the drag handle for disabled plugins.	cms/templates/cms/toolbar/dragitem.html cms/static/cms/js/modules/cms.plugins.js cms/plugin_rendering.py cms/static/cms/js/modules/cms.structureboard.js cms/static/cms/sass/components/_structureboard.scss cms/templates/cms/toolbar/toolbar_with_structure.html
Added the ability to add custom classes to the drag item in the structure board.	Added 'add_structureboard_classes' property to the plugin instance to add custom classes to the drag item.	cms/templates/cms/toolbar/dragitem.html

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an issue from a review comment by replying to it. You can also reply to a review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull request title to generate a title at any time. You can also comment @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in the pull request body to generate a PR summary at any time exactly where you want it. You can also comment @sourcery-ai summary on the pull request to (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the pull request to resolve all Sourcery comments. Useful if you've already addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull request to dismiss all existing Sourcery reviews. Especially useful if you want to start fresh with a new review - don't forget to comment @sourcery-ai review to trigger a new review!
• Generate a plan of action for an issue: Comment @sourcery-ai plan on an issue to generate a plan of action for it.

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.