Initialblockwiring

env.development

@@ -0,0 +1 @@
+RAZZLE_DEV_PROXY_API_PATH=http://localhost:8080/Plone2

packages/volto-relateditems-block/news/1.feature

@@ -0,0 +1 @@
+Implement Related Items Block @ghnire

packages/volto-relateditems-block/src/components/blocks/RelatedItems/Data.jsx

@@ -0,0 +1,32 @@
+import { BlockDataForm } from '@plone/volto/components';
+import { useIntl } from 'react-intl';
+
+const RelatedItemsData = (props) => {
+  const { data, block, onChangeBlock, blocksConfig, navRoot, contentType } =
+    props;
+  const intl = useIntl();
+  const schema = blocksConfig.relatedItems.blockSchema({
+    ...props,
+    intl,
+  });
+  return (
+    <BlockDataForm
+      schema={schema}
+      title={schema.title}
+      onChangeField={(id, value) => {
+        onChangeBlock(block, {
+          ...data,
+          [id]: value,
+        });
+      }}
+      onChangeBlock={onChangeBlock}
+      formData={data}
+      block={block}
+      blocksConfig={blocksConfig}
+      navRoot={navRoot}
+      contentType={contentType}
+    />
+  );
+};
+
+export default RelatedItemsData;

packages/volto-relateditems-block/src/components/blocks/RelatedItems/Edit.jsx

@@ -0,0 +1,23 @@
+import RelatedItemsView from './View';
+import { withBlockExtensions } from '@plone/volto/helpers';
+import { SidebarPortal } from '@plone/volto/components';
+import RelatedItemsData from './Data';
+
+const RelatedItemsEdit = (props) => {
+  const { data, blocksConfig, onChangeBlock, block, selected } = props;
+  return (
+    <>
+      <RelatedItemsView {...props} />
+      <SidebarPortal selected={selected}>
+        <RelatedItemsData
+          data={data}
+          block={block}
+          onChangeBlock={onChangeBlock}
+          blocksConfig={blocksConfig}
+        />
+      </SidebarPortal>
+    </>
+  );
+};
+
+export default withBlockExtensions(RelatedItemsEdit);

packages/volto-relateditems-block/src/components/blocks/RelatedItems/View.jsx

@@ -0,0 +1,19 @@
+import { UniversalLink } from '@plone/volto/components';
+
+const RelatedItemsView = (props) => {
+  const { data, content } = props;
+  return (
+    <div>
+      <h2>{data.title}</h2>
+      <ul>
+        {content.relatedItems.map((item) => (
+          <li key={item['@id']}>
+            <UniversalLink href={item['@id']}>{item.title}</UniversalLink>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default RelatedItemsView;

packages/volto-relateditems-block/src/components/blocks/RelatedItems/schema.js

@@ -0,0 +1,57 @@
+import { defineMessages } from 'react-intl';
+
+const messages = defineMessages({
+  relatedItemsBlock: {
+    id: 'Related Items',
+    defaultMessage: 'Related Items',
+  },
+  title: {
+    id: 'title',
+    defaultMessage: 'Title',
+  },
+  align: {
+    id: 'Alignment',
+    defaultMessage: 'Alignment',
+  },
+  size: {
+    id: 'Size',
+    defaultMessage: 'Size',
+  },
+  styleFieldset: {
+    id: 'Style',
+    defaultMessage: 'Style',
+  },
+});
+
+export const relatedItemsSchema = (props) => {
+  return {
+    title: props.intl.formatMessage(messages.relatedItemsBlock),
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: ['title'],
+      },
+      {
+        id: 'style',
+        title: 'Style',
+        fields: ['align', 'size'],
+      },
+    ],
+    properties: {
+      title: {
+        title: props.intl.formatMessage(messages.title),
+      },
+      align: {
+        title: props.intl.formatMessage(messages.align),
+        widget: 'align',
+        actions: ['left', 'right', 'center'],
+      },
+      size: {
+        title: props.intl.formatMessage(messages.size),
+        widget: 'image_size',
+      },
+    },
+    required: [],
+  };
+};

packages/volto-relateditems-block/src/index.js

@@ -1,4 +1,22 @@
+import linkIconSVG from '@plone/volto/icons/horizontal.svg';
+import RelatedItemsView from './components/blocks/RelatedItems/View';
+import RelatedItemsEdit from './components/blocks/RelatedItems/Edit';
+import { relatedItemsSchema } from './components/blocks/RelatedItems/schema';
+
 const applyConfig = (config) => {
+  config.blocks.blocksConfig.relatedItems = {
+    id: 'relatedItems',
+    title: 'Related items',
+    group: 'common',
+    icon: linkIconSVG,
+    view: RelatedItemsView,
+    edit: RelatedItemsEdit,
+    restricted: false,
+    mostUsed: false,
+    sidebarTab: 1,
+    blockSchema: relatedItemsSchema,
+  };
+
   return config;
 };