Improve @plone/types - Block*Props - Widgets (#5876)

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 &&