Improve @plone/types - Block*Props - Widgets

packages/types/news/5876.feature

@@ -0,0 +1 @@
+Improve @plone/types - Block*Props and Widgets @sneridagh

packages/types/src/blocks/index.d.ts

@@ -111,4 +111,8 @@ export interface BlockEditProps {
   path: string;
   className: string;
   style: Record<`--${string}`, string>;
+  content: Content;
+  history: History;
+  location: Location;
+  token: string;
 }

packages/types/src/config/Blocks.d.ts

@@ -20,7 +20,6 @@ export interface BlocksConfigData {
   listing: BlockConfigBase;
   video: BlockConfigBase;
   toc: BlockConfigBase;
-  hero: BlockConfigBase;
   maps: BlockConfigBase;
   html: BlockConfigBase;
   table: BlockConfigBase;
@@ -116,6 +115,7 @@ export interface BlockConfigBase {
    */
   // TODO: Improve extensions shape
   extensions?: Record<string, BlockExtension>;
+  blocksConfig?: Partial<BlocksConfigData>;
 }
 
 export type BlockExtension = (

packages/types/src/config/Widgets.d.ts

@@ -1,7 +1,95 @@
-export type WidgetsConfig =
-  | {
-      [key: string]: {
-        [key: string]: React.ComponentType;
-      };
-    }
-  | { defaultWidget: React.ComponentType };
+export interface WidgetsConfig {
+  default: React.ComponentType;
+  id: {
+    schema: React.ComponentType;
+    subjects: React.ComponentType;
+    query: React.ComponentType;
+    recurrence: React.ComponentType;
+    remoteUrl: React.ComponentType;
+    id: React.ComponentType;
+    site_logo: React.ComponentType;
+  };
+  widget: {
+    textarea: React.ComponentType;
+    datetime: React.ComponentType;
+    date: React.ComponentType;
+    password: React.ComponentType;
+    file: React.ComponentType;
+    align: React.ComponentType;
+    buttons: React.ComponentType;
+    url: React.ComponentType;
+    internal_url: React.ComponentType;
+    email: React.ComponentType;
+    array: React.ComponentType;
+    token: React.ComponentType;
+    query: React.ComponentType;
+    query_sort_on: React.ComponentType;
+    querystring: React.ComponentType;
+    object_browser: React.ComponentType;
+    object: React.ComponentType;
+    object_list: React.ComponentType;
+    vocabularyterms: React.ComponentType;
+    image_size: React.ComponentType;
+    select_querystring_field: React.ComponentType;
+    autocomplete: React.ComponentType;
+    color_picker: React.ComponentType;
+    select: React.ComponentType;
+  };
+  vocabulary: {
+    'plone.app.vocabularies.Catalog': React.ComponentType;
+  };
+  factory: {
+    'Relation List': React.ComponentType;
+    'Relation Choice': React.ComponentType;
+  };
+  choices: React.ComponentType;
+  type: {
+    boolean: React.ComponentType;
+    array: React.ComponentType;
+    object: React.ComponentType;
+    datetime: React.ComponentType;
+    date: React.ComponentType;
+    password: React.ComponentType;
+    number: React.ComponentType;
+    integer: React.ComponentType;
+    id: React.ComponentType;
+  };
+  views: {
+    getWidget: React.ComponentType;
+    default: React.ComponentType;
+    id: {
+      file: React.ComponentType;
+      image: React.ComponentType;
+      relatedItems: React.ComponentType;
+      subjects: React.ComponentType;
+    };
+    widget: {
+      array: React.ComponentType;
+      boolean: React.ComponentType;
+      choices: React.ComponentType;
+      date: React.ComponentType;
+      datetime: React.ComponentType;
+      description: React.ComponentType;
+      email: React.ComponentType;
+      file: React.ComponentType;
+      image: React.ComponentType;
+      password: React.ComponentType;
+      relation: React.ComponentType;
+      relations: React.ComponentType;
+      richtext: React.ComponentType;
+      string: React.ComponentType;
+      tags: React.ComponentType;
+      textarea: React.ComponentType;
+      title: React.ComponentType;
+      url: React.ComponentType;
+      internal_url: React.ComponentType;
+      object: React.ComponentType;
+    };
+    vocabulary: {};
+    choices: React.ComponentType;
+    type: {
+      array: React.ComponentType;
+      boolean: React.ComponentType;
+    };
+  };
+}

packages/volto/news/5876.feature

@@ -0,0 +1 @@
+Match props passed to the BlockView if reused from the BlockEdit @sneridagh

packages/volto/src/components/manage/Add/Add.jsx

@@ -394,6 +394,10 @@ class Add extends Component {
               this.setState({ formSelected: 'addForm' });
             }}
             global
+            // Properties to pass to the BlocksForm to match the View ones
+            history={this.props.history}
+            location={this.props.location}
+            token={this.props.token}
           />
           {this.state.isClient &&
             createPortal(

packages/volto/src/components/manage/Blocks/Block/BlocksForm.jsx

@@ -48,6 +48,9 @@ const BlocksForm = (props) => {
     blocksConfig = config.blocks.blocksConfig,
     editable = true,
     direction = 'vertical',
+    history,
+    location,
+    token,
   } = props;
 
   const blockList = getBlocks(properties);
@@ -271,6 +274,11 @@ const BlocksForm = (props) => {
               editable,
               showBlockChooser: selectedBlock === childId,
               detached: isContainer,
+              // Properties to pass to the BlocksForm to match the View ones
+              content: properties,
+              history,
+              location,
+              token,
             };
             return editBlockWrapper(
               dragProps,

packages/volto/src/components/manage/Edit/Edit.jsx

@@ -333,6 +333,10 @@ class Edit extends Component {
           this.setState({ formSelected: 'editForm' });
         }}
         global
+        // Properties to pass to the BlocksForm to match the View ones
+        history={this.props.history}
+        location={this.props.location}
+        token={this.props.token}
       />
     );
 

packages/volto/src/components/manage/Form/Form.jsx

@@ -719,6 +719,10 @@ class Form extends Component {
               showRestricted={this.props.showRestricted}
               editable={this.props.editable}
               isMainForm={this.props.editable}
+              // Properties to pass to the BlocksForm to match the View ones
+              history={this.props.history}
+              location={this.props.location}
+              token={this.props.token}
             />
             {this.state.isClient &&
               this.state.sidebarMetadataIsAvailable &&