Add Announcement block to the project

frontend/src/components/blocks/Announcement/AnnouncementEdit.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { BlockDataForm, SidebarPortal } from '@plone/volto/components';
+
+import ButtonBlockSchema from './schema';
+import AnnouncementView from './AnnouncementView';
+
+const ButtonEdit = (props) => {
+  const { block, onChangeBlock, data = {}, selected } = props;
+  const schema = ButtonBlockSchema(props);
+
+  return (
+    <>
+      <AnnouncementView {...props} mode="edit" />
+
+      <SidebarPortal selected={selected}>
+        <BlockDataForm
+          key={Object.keys(data?.cards || {}).length}
+          schema={schema}
+          onChangeField={(id, value) => {
+            onChangeBlock(block, {
+              ...data,
+              [id]: value,
+            });
+          }}
+          formData={data}
+        />
+      </SidebarPortal>
+    </>
+  );
+};
+
+export default ButtonEdit;

frontend/src/components/blocks/Announcement/AnnouncementView.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import './less/Announcement.less';
+
+const ButtonView = ({ data, mode = 'view' }) => {
+  return (
+    <div className="AnnouncementBlock">
+      <div className="message">
+        {data.Title && <h3>{data.Title}</h3>}
+        {data.Text && <p>{data.Text}</p>}
+      </div>
+    </div>
+  );
+};
+export default ButtonView;

frontend/src/components/blocks/Announcement/index.js

@@ -0,0 +1,26 @@
+import aheadSVG from '@plone/volto/icons/ahead.svg';
+
+import AnnouncementView from './AnnouncementView';
+import AnnouncementEdit from './AnnouncementEdit';
+
+const installAnnouncementBlock = (config) => {
+  config.blocks.blocksConfig.announcementBlock = {
+    id: 'announcementBlock',
+    title: 'Announcement',
+    icon: aheadSVG,
+    group: 'common',
+    view: AnnouncementView,
+    edit: AnnouncementEdit,
+    restricted: false,
+    mostUsed: false,
+    sidebarTab: 1,
+    security: {
+      addPermission: [],
+      view: [],
+    },
+  };
+
+  return config;
+};
+
+export default installAnnouncementBlock;

frontend/src/components/blocks/Announcement/less/Announcement.less

@@ -0,0 +1,26 @@
+.AnnouncementBlock {
+  background-color: yellow;
+  position: relative;
+  width: 100vw;
+  left: 50%;
+  right: 50%;
+  margin-right: -50vw;
+  margin-left: -50vw;
+  text-align: center;
+  height: 150px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  .message{
+    margin-left: 40px !important;
+    margin-right: 40px !important;
+
+    h3, p {
+      margin: 0 !important;
+    }
+    p:nth-child(2) {
+      margin-top: 15px !important;
+    }
+  }
+}

frontend/src/components/blocks/Announcement/schema.js

@@ -0,0 +1,43 @@
+import { defineMessages } from 'react-intl';
+
+const messages = defineMessages({
+  Announcement: {
+    id: 'Announcement',
+    defaultMessage: 'Announcement',
+  },
+});
+
+const AnnouncementSchema = ({
+  onChangeBlock,
+  intl,
+  data,
+  openObjectBrowser,
+}) => ({
+  title: intl.formatMessage(messages.Announcement),
+  fieldsets: [
+    {
+      id: 'default',
+      fields: ['Title', 'Text'],
+      title: 'Default',
+    },
+  ],
+
+  properties: {
+    Title: {
+      title: 'Announcement title',
+    },
+    Text: {
+      title: 'Announcement text',
+    },
+    // linkHref: {
+    //   title: 'Call to action',
+    //   widget: 'object_browser',
+    //   mode: 'link',
+    //   selectedItemAttrs: ['Title', 'Description'],
+    //   allowExternals: true,
+    // },
+  },
+  required: [],
+});
+
+export default AnnouncementSchema;

frontend/src/components/blocks/Listing/less/HomepageSliderTemplate.less

@@ -1,4 +1,5 @@
 .block.listing.homepagesliderview {
+  margin-bottom: 0px !important;
   height: auto;
   min-height: 500px;
   max-height: 900px;
@@ -301,3 +302,7 @@
 .view-editview .block-editor-listing{
   width: fit-content !important;
 }
+
+.view-editview p.items-preview{
+  display:none;
+}

frontend/src/components/blocks/index.js

@@ -16,6 +16,7 @@ import installVideoPageBlock from './VideoPageBlock';
 import installDiscreetText from './DiscreetText';
 import installPreviewCollectionBlock from './PreviewCollection';
 import installInpageLinkBlock from './InpageLink';
+import installAnnouncementBlock from './Announcement';
 
 import { compose } from 'redux';
 
@@ -41,6 +42,7 @@ const installBlocks = (config) => {
     installDiscreetText,
     installPreviewCollectionBlock,
     installInpageLinkBlock,
+    installAnnouncementBlock,
   )(config);
 };