Hello Apostrophe CMS Wizards
I was reading the tutorial found here: https://apostrophecms.org/docs/tutorials/getting-started/layout-widgets.html
It says:
An alternative to
contextualOnly,skipInitialModallets you skip the widget manager modal when the widget is created (likecontextualOnly) but preserves the Edit UI for later use. This is useful for widgets that have secondary configuration, like setting a background color.
This is EXACTLY the kind of functionality that I want to expose for my users. I have already built a much more complex version of the code found in the gist above, but the simpler version still has the same error that I am experiencing so I am including the code for that here.
Essentially, I want to have an editing dialog for my custom layout widget that allows them to change the background color, decide whether or not to add a background image, decide how that background image is displayed, all without having to touch code.
The Problem
After saving the changes to my custom widget, you are unable to make changes to what is inside my widget's areas. Instead, it spits out an error telling you that You were unable to take control of the document.
You can get the wanted functionality back if you refresh the page, but obviously that is not ideal.
What am I missing here?
Example Code
You'll notice that the code below is only slightly modified example code for the tutorial page above.
Here is the simple widget's widget.html file:
<div class="two-column">
<div class="column-left">
{{ apos.area(data.widget, 'areaLeft', {
widgets: {
'apostrophe-images': {}
}
}) }}
</div>
<div class="column-right">
{{ apos.area(data.widget, 'areaRight', {
widgets: {
'apostrophe-images': {}
}
}) }}
</div>
</div>
and here is the simple widget's index.js file:
module.exports = {
extend: 'apostrophe-widgets',
label: 'Double Content',
skipInitialModal: true,
addFields: [
{
name: 'areaLeft',
type: 'area',
label: 'Left Area',
contextual: true
},
{
name: 'areaRight',
type: 'area',
label: 'Right Area',
contextual: true
}
]
};
UPDATE 1
As suggested, I cloned this repo and modified the One Column widget to match the setup mentioned above. For completeness, I've included my changes to the code here. I've made no other changes to the repo's code.
module.exports = {
extend: 'apostrophe-widgets',
label: 'One Column',
// contextualOnly: true, // removed
skipInitialModal:true, // added
addFields: [
{
name: 'one',
type: 'area',
contextual:true, // added
}
]
};
RESULT
Still have the same problem.
If it helps, the version of ApostropheCMS used in the repo above is: 2.58.0
Look at this
I'm new here, so actually embedding images here is not allowed, but this should still work. Have a look:
UPDATE 2
With the new update, everything appears to have been fixed!
