@plone/volto 14.1.1 → 14.2.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Change Log
 
+## 14.2.0 (2022-01-04)
+
+### Feature
+
+- Allow `creatable` prop to be passed to `ArrayWidgets`, in case they don't have a vocabulary @giuliaghisini
+- Added initialBlocksFocus to blocks config, to set default focus on non-first block. @giuliaghisini
+
 ## 14.1.1 (2022-01-03)
 
 ### Internal

package/package.json

@@ -9,7 +9,7 @@
     }
   ],
   "license": "MIT",
-  "version": "14.1.1",
+  "version": "14.2.0",
   "repository": {
     "type": "git",
     "url": "git@github.com:plone/volto.git"

package/src/components/manage/Add/Add.jsx

@@ -308,6 +308,7 @@ class Add extends Component {
             ref={this.form}
             key="translated-or-new-content-form"
             schema={this.props.schema}
+            type={this.props.type}
             formData={{
               ...(blocksFieldname && {
                 [blocksFieldname]:

package/src/components/manage/Edit/Edit.jsx

@@ -259,6 +259,7 @@ class Edit extends Component {
         isEditForm
         ref={this.form}
         schema={this.props.schema}
+        type={this.props.content?.['@type']}
         formData={this.props.content}
         requestError={this.state.error}
         onSubmit={this.onSubmit}

package/src/components/manage/Form/Form.jsx

@@ -172,15 +172,31 @@ class Form extends Component {
         };
       }
     }
+
+    let selectedBlock = null;
+    if (
+      formData.hasOwnProperty(blocksLayoutFieldname) &&
+      formData[blocksLayoutFieldname].items.length > 0
+    ) {
+      selectedBlock = formData[blocksLayoutFieldname].items[0];
+
+      if (config.blocks?.initialBlocksFocus?.[this.props.type]) {
+        //Default selected is not the first block, but the one from config.
+        Object.keys(formData[blocksFieldname]).forEach((b_key) => {
+          if (
+            formData[blocksFieldname][b_key]['@type'] ===
+            config.blocks?.initialBlocksFocus?.[this.props.type]
+          ) {
+            selectedBlock = b_key;
+          }
+        });
+      }
+    }
     this.state = {
       formData,
       initialFormData: cloneDeep(formData),
       errors: {},
-      selected:
-        formData.hasOwnProperty(blocksLayoutFieldname) &&
-        formData[blocksLayoutFieldname].items.length > 0
-          ? formData[blocksLayoutFieldname].items[0]
-          : null,
+      selected: selectedBlock,
       multiSelected: [],
       isClient: false,
     };

package/src/components/manage/Multilingual/TranslationObject.jsx

@@ -106,6 +106,7 @@ const TranslationObject = ({
             key="translation-object-form"
             schema={schema}
             formData={translationObject}
+            type={translationObject['@type']}
             onSubmit={() => {
               /*do nothing*/
             }}

package/src/components/manage/Widgets/ArrayWidget.jsx

@@ -157,6 +157,7 @@ class ArrayWidget extends Component {
     ),
     onChange: PropTypes.func.isRequired,
     wrapped: PropTypes.bool,
+    creatable: PropTypes.bool, //if widget has no vocab and you want to be creatable
   };
 
   /**
@@ -176,6 +177,7 @@ class ArrayWidget extends Component {
     error: [],
     choices: [],
     value: null,
+    creatable: false,
   };
 
   /**
@@ -242,7 +244,23 @@ class ArrayWidget extends Component {
     const { SortableContainer } = this.props.reactSortableHOC;
     const Select = this.props.reactSelect.default;
     const SortableSelect =
-      this.props?.choices && !getVocabFromHint(this.props)
+      // It will be only createable if the named vocabulary is in the widget definition
+      // (hint) like:
+      // list_field_voc_unconstrained = schema.List(
+      //     title=u"List field with values from vocabulary but not constrained to them.",
+      //     description=u"zope.schema.List",
+      //     value_type=schema.TextLine(),
+      //     required=False,
+      //     missing_value=[],
+      // )
+      // directives.widget(
+      //     "list_field_voc_unconstrained",
+      //     AjaxSelectFieldWidget,
+      //     vocabulary="plone.app.vocabularies.PortalTypes",
+      // )
+      this.props?.choices &&
+      !getVocabFromHint(this.props) &&
+      !this.props.creatable
         ? SortableContainer(Select)
         : SortableContainer(CreatableSelect);
 

package/src/components/manage/Widgets/ArrayWidget.stories.jsx

@@ -119,6 +119,14 @@ Disabled.args = {
   disabled: true,
 };
 
+export const Creatable = WidgetStory.bind({ widget: ArrayWidget });
+Creatable.args = {
+  id: 'field-creatable',
+  title: 'Field with creatable',
+  description: 'Allows creation of new terms',
+  creatable: true,
+};
+
 const getOptionsGenerator = (count) => {
   const options = [];
   for (let i = 0; i < count; i = i + 1) {

package/src/config/Blocks.jsx

@@ -454,5 +454,12 @@ const blocksConfig = {
 const requiredBlocks = ['title'];
 
 const initialBlocks = {};
+const initialBlocksFocus = {}; //{Document:'title'}
 
-export { groupBlocksOrder, requiredBlocks, blocksConfig, initialBlocks };
+export {
+  groupBlocksOrder,
+  requiredBlocks,
+  blocksConfig,
+  initialBlocks,
+  initialBlocksFocus,
+};

package/src/config/index.js

@@ -26,6 +26,7 @@ import {
   requiredBlocks,
   blocksConfig,
   initialBlocks,
+  initialBlocksFocus,
 } from './Blocks';
 import { loadables } from './Loadables';
 
@@ -174,6 +175,7 @@ let config = {
     blocksConfig,
     groupBlocksOrder,
     initialBlocks,
+    initialBlocksFocus,
     showEditBlocksInBabelView: false,
   },
   addonRoutes: [],