Edit a child widget from its parent widget's modal only

Question

I have a widget that has an Area available to add several other widgets within it as children. Is it possible to make it so a user can only edit the child widgets from within the editing modal of the parent widget and not from within the webpage itself?

I'd like this to happen because no matter where I position the editing controls for the child widgets (upper-left, lower-right, etc.) the editing controls obscure the child widgets entirely and thus make them unusable when while user is logged in. I figure a good solution would be to only allow the user to edit the child widgets from the parent modal, but I cannot seem to figure out how this is done.

I know the ContextualOnly parameter allows for the direct opposite of what I am asking, in that it removes the ability to edit a widget from the modal interface, and SkipInitialModal is obviously not the answer either, am I missing something?

I suppose another solution would be to wrangle the controls via CSS, perhaps even removing the controls via display:none, but I'd like to avoid overwriting Apostrophe's CSS for as long as I can, if possible.

Any thoughts?

Answer 1

I figured it out. You can add { edit:false } to the widget configuration to disable the editing interface yet keep it turned on in the modal. Here is a snippet from my widget.html file as an example.

<div class="navigation-section__links">
    {{
        apos.area(data.widget, 'navigationLinks',{
            widgets:{
                "navigation-link":{
                    edit:false
                }
            }
        })
    }}
</div>

I found it accidentally by studying the sample code in the documentation tutorials. Hope this helps someone in the future.