Spacing fixes for sections and views (#65)

src/config/settings.js

@@ -1,5 +1,14 @@
 export const updateSettingsConfig = (config) => {
   config.settings.navDepth = 2;
+
+  config.settings.fullWidthBlockTypes = [
+    'hero',
+    'nsw_section',
+    'nsw_inPageAlert',
+    'nsw_announcementBar',
+    'form',
+    ...(config.settings.fullWidthBlockTypes || []),
+  ];
 };
 
 export default updateSettingsConfig;

src/customizations/volto-form-block/components/FormView.jsx

@@ -80,12 +80,7 @@ const FormView = ({
         </Message>
       ) : (
         // TODO: The original component has a `loading` state. Is this needed here?
-        <form
-          id={id}
-          className="nsw-form nsw-container"
-          onSubmit={onSubmit}
-          method="post"
-        >
+        <form id={id} className="nsw-form" onSubmit={onSubmit} method="post">
           {data.static_fields?.map((field) => {
             return (
               <Field

src/customizations/volto/components/theme/View/DefaultView.jsx

@@ -22,21 +22,7 @@ const messages = defineMessages({
   },
 });
 
-// TODO: Have both of these as config.settings options to allow customisation.
-const fullWidthBlockTypes = [
-  'hero',
-  'nsw_section',
-  'nsw_inPageAlert',
-  'nsw_announcementBar',
-  'form',
-];
-const coreContentBlockTypes = [
-  'text',
-  'description',
-  'image',
-  'video',
-  'slate',
-];
+const fullWidthContentBlocks = ['form'];
 
 const sectionFields = [
   'sectionType',
@@ -51,6 +37,17 @@ const getCoreContentGroupedLayout = (blocksInLayout, blocksData) => {
     return [];
   }
 
+  const coreContentBlockTypes = Object.keys(config.blocks.blocksConfig).filter(
+    (blockId) => {
+      if (fullWidthContentBlocks.includes(blockId)) {
+        return true;
+      } else if (config.settings.fullWidthBlockTypes.includes(blockId)) {
+        return false;
+      }
+      return true;
+    },
+  );
+
   return blocksInLayout?.reduce((result, currentBlockId) => {
     // Handles the messy case where a block is not in the layout
     //    but is stored. This is a rare case, but it happens.
@@ -81,11 +78,7 @@ const getCoreContentGroupedLayout = (blocksInLayout, blocksData) => {
           sectionFields.map((k) => [k, currentBlock?.[k]]),
         );
 
-        if (
-          currentBlockSectionData.sectionType === 'sameAsPrevious' ||
-          JSON.stringify(previousBlockSectionData) ===
-            JSON.stringify(currentBlockSectionData)
-        ) {
+        if (currentBlockSectionData.sectionType === 'sameAsPrevious') {
           previousBlockOrGroup.push(currentBlockId);
           result.splice(result.length - 1, 1, previousBlockOrGroup);
         } else {
@@ -151,25 +144,83 @@ const BlocksLayout = ({ content, location }) => {
     blocksData,
   );
 
+  const blocksNeedSections = Object.values(blocksData).some(
+    (blockData) =>
+      _blockNeedsSection(blockData) ||
+      config.settings.fullWidthBlockTypes.includes(blockData['@type']),
+  );
+
+  // Below block of code is all needed for `hideTopPadding?`
+  const breadcrumbStartDepth = useSelector(
+    (state) => state.nswSiteSettings?.data?.breadcrumb_start_depth,
+  );
+  const siteDepth = useSelector(
+    (state) => state.nswSiteSettings?.data?.site_depth,
+  );
+  const breadcrumbsHidden =
+    location.pathname === '/' || siteDepth < breadcrumbStartDepth;
+  const hideTopPadding =
+    config.settings.fullWidthBlockTypes.includes(
+      blocksData[blocksInLayout[0]]?.['@type'],
+    ) === breadcrumbsHidden;
+
   return (
     <div id="page-document">
       <div className="nsw-layout">
         <div
           className="nsw-layout__main"
-          style={
-            fullWidthBlockTypes.includes(
-              blocksData[blocksInLayout[0]]?.['@type'],
+          style={{
+            // XOR operation, not sure of a nicer way of doing it in JS
+            paddingBlockStart: hideTopPadding ? 0 : null,
+            paddingBlockEnd: config.settings.fullWidthBlockTypes.includes(
+              blocksData[blocksInLayout.length]?.['@type'],
             )
-              ? { paddingBlockStart: '0' }
-              : null
-          }
+              ? '0'
+              : null,
+          }}
         >
           {groupedBlocksLayout.map((blockIdOrGroup, index) => {
             if (blockIdOrGroup instanceof Array) {
               const blockGroup = blockIdOrGroup; // Rename it just to make the code more readable
-              if (_blockNeedsSection(blocksData?.[blockGroup[0]])) {
+              if (blocksNeedSections) {
                 const blockWithSectionData = blocksData?.[blockGroup[0]];
                 const sectionColour = getSectionColour(blockWithSectionData);
+                if (_blockNeedsSection(blockWithSectionData)) {
+                  return (
+                    <Section
+                      key={index}
+                      padding={blockWithSectionData.sectionspacing}
+                      isBox={blockWithSectionData.sectionType === 'box'}
+                      colour={sectionColour}
+                      shouldInvert={blockWithSectionData.sectioninvert}
+                    >
+                      {blockGroup.map((blockId) => {
+                        // Copy pasted from below. Should really make this a function!
+                        const blockData = blocksData?.[blockId];
+                        const blockType = blockData?.['@type'];
+                        const Block =
+                          config.blocks.blocksConfig[blockType]?.['view'] ||
+                          null;
+                        return Block !== null ? (
+                          <Block
+                            key={blockId}
+                            id={blockId}
+                            properties={content}
+                            data={blocksData[blockId]}
+                            path={getBaseUrl(location?.pathname || '')}
+                          />
+                        ) : (
+                          <div key={blockId}>
+                            {intl.formatMessage(messages.unknownBlock, {
+                              block: blockType,
+                            })}
+                          </div>
+                        );
+                      })}
+                    </Section>
+                  );
+                }
+
                 return (
                   <Section
                     key={index}
@@ -249,7 +300,7 @@ const BlocksLayout = ({ content, location }) => {
                 </div>
               );
             }
-            return fullWidthBlockTypes.includes(blockType) ? (
+            return config.settings.fullWidthBlockTypes.includes(blockType) ? (
               <Block
                 key={blockId}
                 id={blockId}

src/customizations/volto/components/theme/View/EventView.jsx

@@ -0,0 +1,121 @@
+/**
+ * EventView view component.
+ * @module components/theme/View/EventView
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { hasBlocksData, flattenHTMLToAppURL } from '@plone/volto/helpers';
+import { Image, Grid } from 'semantic-ui-react';
+import RenderBlocks from '@plone/volto/components/theme/View/RenderBlocks';
+import { EventDetails } from '@plone/volto/components';
+
+const EventTextfieldView = ({ content }) => (
+  <React.Fragment>
+    {content.title && <h1 className="documentFirstHeading">{content.title}</h1>}
+    {content.description && (
+      <p className="documentDescription">{content.description}</p>
+    )}
+    {content.image && (
+      <Image
+        className="document-image"
+        src={content.image.scales.thumb.download}
+        floated="right"
+      />
+    )}
+    {content.text && (
+      <div
+        dangerouslySetInnerHTML={{
+          __html: flattenHTMLToAppURL(content.text.data),
+        }}
+      />
+    )}
+  </React.Fragment>
+);
+
+/**
+ * EventView view component class.
+ * @function EventView
+ * @params {object} content Content object.
+ * @returns {string} Markup of the component.
+ */
+const EventView = (props) => {
+  const { content } = props;
+
+  return (
+    <div id="page-document" className="view-wrapper event-view nsw-container">
+      <div className="nsw-layout">
+        <div className="nsw-layout__main">
+          <Grid>
+            <Grid.Column width={7} className="mobile hidden">
+              {hasBlocksData(content) ? (
+                <RenderBlocks {...props} />
+              ) : (
+                <EventTextfieldView {...props} />
+              )}
+            </Grid.Column>
+            <Grid.Column width={5} className="mobile hidden">
+              <EventDetails content={content} />
+            </Grid.Column>
+            <Grid.Column width={12} only="mobile">
+              {hasBlocksData(content) ? (
+                <>
+                  <RenderBlocks
+                    {...props}
+                    content={{
+                      ...content,
+                      blocks_layout: {
+                        items: props.content.blocks_layout.items.slice(0, 1),
+                      },
+                    }}
+                  />
+                  <EventDetails content={content} display_as="div" />
+                  <RenderBlocks
+                    {...props}
+                    content={{
+                      ...content,
+                      blocks_layout: {
+                        items: props.content.blocks_layout.items.slice(1),
+                      },
+                    }}
+                  />
+                </>
+              ) : (
+                <EventTextfieldView {...props} />
+              )}
+            </Grid.Column>
+          </Grid>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+/**
+ * Property types.
+ * @property {Object} propTypes Property types.
+ * @static
+ */
+EventView.propTypes = {
+  content: PropTypes.shape({
+    title: PropTypes.string,
+    description: PropTypes.string,
+    text: PropTypes.shape({
+      data: PropTypes.string,
+    }),
+    attendees: PropTypes.arrayOf(PropTypes.string).isRequired,
+    contact_email: PropTypes.string,
+    contact_name: PropTypes.string,
+    contact_phone: PropTypes.string,
+    end: PropTypes.string.isRequired,
+    event_url: PropTypes.string,
+    location: PropTypes.string,
+    open_end: PropTypes.bool,
+    recurrence: PropTypes.any,
+    start: PropTypes.string.isRequired,
+    subjects: PropTypes.arrayOf(PropTypes.string).isRequired,
+    whole_day: PropTypes.bool,
+  }).isRequired,
+};
+
+export default EventView;