feat(object): variable types

dev-test/config.yml

@@ -268,6 +268,20 @@ collections: # A list of collections the CMS should be able to edit
             fields:
               - { label: 'Image', name: 'image', widget: 'image' }
               - { label: 'File', name: 'file', widget: 'file' }
+      - label: Typed Object
+        name: typed_object
+        widget: object
+        types:
+          - name: copy
+            widget: object
+            fields:
+              - { name: text, widget: string }
+          - name: infographic
+            widget: object
+            fields:
+              - { name: caption, widget: string }
+              - { name: image, widget: image }
+              - { name: overlay, widget: image }
   - name: pages # a nested collection
     label: Pages
     label_singular: 'Page'

packages/decap-cms-app/src/extensions.js

@@ -18,7 +18,6 @@ import DecapCmsWidgetFile from 'decap-cms-widget-file';
 import DecapCmsWidgetSelect from 'decap-cms-widget-select';
 import DecapCmsWidgetMarkdown from 'decap-cms-widget-markdown';
 import DecapCmsWidgetList from 'decap-cms-widget-list';
-import DecapCmsWidgetObject from 'decap-cms-widget-object';
 import DecapCmsWidgetRelation from 'decap-cms-widget-relation';
 import DecapCmsWidgetBoolean from 'decap-cms-widget-boolean';
 import DecapCmsWidgetMap from 'decap-cms-widget-map';
@@ -48,7 +47,7 @@ CMS.registerWidget([
   DecapCmsWidgetSelect.Widget(),
   DecapCmsWidgetMarkdown.Widget(),
   DecapCmsWidgetList.Widget(),
-  DecapCmsWidgetObject.Widget(),
+  DecapCmsWidgetList.ObjectWidget(),
   DecapCmsWidgetRelation.Widget(),
   DecapCmsWidgetBoolean.Widget(),
   DecapCmsWidgetMap.Widget(),

packages/decap-cms-widget-list/src/ListControl.js

@@ -749,3 +749,18 @@ export default class ListControl extends React.Component {
     }
   }
 }
+
+export class ObjectControlWrapper extends React.Component {
+  render() {
+    if (this.props.field.get('required') === false || this.props.field.get('types')) {
+      return (
+        <ListControl
+          {...this.props}
+          onChange={e => this.props.onChange(e.get(0))}
+          value={List([this.props.value].filter(Boolean))}
+        />
+      );
+    }
+    return <ObjectControl {...this.props} />;
+  }
+}

packages/decap-cms-widget-list/src/index.js

@@ -1,6 +1,6 @@
 import DecapCmsWidgetObject from 'decap-cms-widget-object';
 
-import controlComponent from './ListControl';
+import controlComponent, { ObjectControlWrapper } from './ListControl';
 import schema from './schema';
 
 const previewComponent = DecapCmsWidgetObject.previewComponent;
@@ -15,5 +15,14 @@ function Widget(opts = {}) {
   };
 }
 
-export const DecapCmsWidgetList = { Widget, controlComponent, previewComponent };
+function ObjectWidget(opts = {}) {
+  return {
+    name: 'object',
+    controlComponent: ObjectControlWrapper,
+    previewComponent,
+    ...opts,
+  };
+}
+
+export const DecapCmsWidgetList = { Widget, controlComponent, previewComponent, ObjectWidget };
 export default DecapCmsWidgetList;

website/content/docs/beta-features.md

@@ -312,9 +312,9 @@ Supports all of the [`slug` templates](/docs/configuration-options#slug) and:
 * `{{media_folder}}` The global `media_folder`.
 * `{{public_folder}}` The global `public_folder`.
 
-## List Widget: Variable Types
+## List/Object Widget: Variable Types
 
-Before this feature, the [list widget](/docs/widgets/#list) allowed a set of fields to be repeated, but every list item had the same set of fields available. With variable types, multiple named sets of fields can be defined, which opens the door to highly flexible content authoring (even page building) in Decap CMS.
+Before this feature, the [list widget](/docs/widgets/#list) and [object widget](/docs/widget/#object) allowed a set of fields to be repeated, but every item had the same set of fields available. With variable types, multiple named sets of fields can be defined, which opens the door to highly flexible content authoring (even page building) in Decap CMS.
 
 **Note: this feature does not yet support default previews and requires [registering a preview template](/docs/customization#registerpreviewtemplate) in order to show up in the preview pane.**