Custom Block & add stretch class in block wrapper

CHANGELOG.md

@@ -4,8 +4,19 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [0.1.29](https://github.com/eea/volto-forests-theme/compare/0.1.28...0.1.29)
+
+- Prettier fix [`fccfd6f`](https://github.com/eea/volto-forests-theme/commit/fccfd6f35ad1f525127c7eb22f8f3dc124daa423)
+- Lint fix MD [`7a5d5bb`](https://github.com/eea/volto-forests-theme/commit/7a5d5bba075ded2c5b02562db7a3ab31a2f3133c)
+- Document customization [`2eb3624`](https://github.com/eea/volto-forests-theme/commit/2eb36241380c8077a4f5a0614d395f3b22b745bd)
+- Customized block container cleanup [`6907ae2`](https://github.com/eea/volto-forests-theme/commit/6907ae2f199a844b36bf2e171dc8e89d3a4b8a98)
+- Custom Block & add stretch class in block wrapper [`7755c15`](https://github.com/eea/volto-forests-theme/commit/7755c157dab2a0a2e222c4440547b192daeda97d)
+
 #### [0.1.28](https://github.com/eea/volto-forests-theme/compare/0.1.27...0.1.28)
 
+> 9 December 2021
+
+- Develop [`#38`](https://github.com/eea/volto-forests-theme/pull/38)
 - fallback for window.env [`f9ddb2d`](https://github.com/eea/volto-forests-theme/commit/f9ddb2ddb8fbe060ec498f9f3dbd346859ed4895)
 - Don't show header-image-content in Data catalogue [`3d2704f`](https://github.com/eea/volto-forests-theme/commit/3d2704fff57124f7bc80ba915add1d6e67331d18)
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-forests-theme",
-  "version": "0.1.28",
+  "version": "0.1.29",
   "description": "@eeacms/volto-forests-theme: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

src/components/theme/DefaultViewWide/DefaultViewWide.jsx

@@ -56,14 +56,6 @@ const DefaultViewWide = (props) => {
       <BodyClass className={`document_wide_view`} />
 
       <Grid columns="equal" className="zero-margin">
-        {/* {renderPortletManager('plone.leftcolumn', 2, { ...props })}
-      <Grid.Column
-        style={{ position: 'static' }}
-        tablet={12}
-        largeScreen={6}
-        widescreen={6}
-        computer={8}
-      > */}
         {hasBlocksData(content) ? (
           <div id="page-document" className="ui container">
             <Helmet title={content.title} />
@@ -82,23 +74,13 @@ const DefaultViewWide = (props) => {
                   path={getBaseUrl(location?.pathname || '')}
                 />
               ) : (
-                //   <div key={block}>
-                //     {intl.formatMessage(messages.unknownBlock, {
-                //       block: content[blocksFieldname]?.[block]?.['@type'],
-                //     })}
-                //   </div>
                 ''
               );
             })}
             <div id="forest-metadata-slot">{''}</div>
           </div>
         ) : (
           <Container id="page-document">
-            {/* <Helmet title={content.title} />
-      <h1 className="documentFirstHeading">{content.title}</h1>
-      {content.description && (
-        <p className="documentDescription">{content.description}</p>
-      )} */}
             {content.image && (
               <Image
                 className="document-image"

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

@@ -0,0 +1,216 @@
+import React from 'react';
+import EditBlock from './Edit';
+import { DragDropList } from '@plone/volto/components';
+import { getBlocks } from '@plone/volto/helpers';
+import {
+  addBlock,
+  insertBlock,
+  changeBlock,
+  deleteBlock,
+  moveBlock,
+  mutateBlock,
+  nextBlockId,
+  previousBlockId,
+} from '@plone/volto/helpers';
+import EditBlockWrapper from './EditBlockWrapper';
+import { setSidebarTab } from '@plone/volto/actions';
+import { useDispatch } from 'react-redux';
+import { useDetectClickOutside } from '@plone/volto/helpers';
+import config from '@plone/volto/registry';
+
+const BlocksForm = (props) => {
+  const {
+    pathname,
+    onChangeField,
+    properties,
+    onChangeFormData,
+    selectedBlock,
+    multiSelected,
+    onSelectBlock,
+    allowedBlocks,
+    showRestricted,
+    title,
+    description,
+    metadata,
+    manage,
+    children,
+    isMainForm = true,
+    blocksConfig = config.blocks.blocksConfig,
+    editable = true,
+  } = props;
+
+  const blockList = getBlocks(properties);
+
+  const dispatch = useDispatch();
+
+  const ClickOutsideListener = () => {
+    onSelectBlock(null);
+    dispatch(setSidebarTab(0));
+  };
+
+  const ref = useDetectClickOutside({
+    onTriggered: ClickOutsideListener,
+    triggerKeys: ['Escape'],
+    // Disabled feature for now https://github.com/plone/volto/pull/2389#issuecomment-830027413
+    disableClick: true,
+    disableKeys: !isMainForm,
+  });
+
+  const handleKeyDown = (
+    e,
+    index,
+    block,
+    node,
+    {
+      disableEnter = false,
+      disableArrowUp = false,
+      disableArrowDown = false,
+    } = {},
+  ) => {
+    const isMultipleSelection = e.shiftKey;
+    if (e.key === 'ArrowUp' && !disableArrowUp) {
+      onFocusPreviousBlock(block, node, isMultipleSelection);
+      e.preventDefault();
+    }
+    if (e.key === 'ArrowDown' && !disableArrowDown) {
+      onFocusNextBlock(block, node, isMultipleSelection);
+      e.preventDefault();
+    }
+    if (e.key === 'Enter' && !disableEnter) {
+      onAddBlock(config.settings.defaultBlockType, index + 1);
+      e.preventDefault();
+    }
+  };
+
+  const onFocusPreviousBlock = (
+    currentBlock,
+    blockNode,
+    isMultipleSelection,
+  ) => {
+    const prev = previousBlockId(properties, currentBlock);
+    if (prev === null) return;
+
+    blockNode.blur();
+
+    onSelectBlock(prev, isMultipleSelection);
+  };
+
+  const onFocusNextBlock = (currentBlock, blockNode, isMultipleSelection) => {
+    const next = nextBlockId(properties, currentBlock);
+    if (next === null) return;
+
+    blockNode.blur();
+
+    onSelectBlock(next, isMultipleSelection);
+  };
+
+  const onMutateBlock = (id, value) => {
+    const newFormData = mutateBlock(properties, id, value);
+    onChangeFormData(newFormData);
+  };
+
+  const onInsertBlock = (id, value) => {
+    const [newId, newFormData] = insertBlock(properties, id, value);
+    onChangeFormData(newFormData);
+    return newId;
+  };
+
+  const onAddBlock = (type, index) => {
+    if (editable) {
+      const [id, newFormData] = addBlock(properties, type, index);
+      onChangeFormData(newFormData);
+      return id;
+    }
+  };
+
+  const onChangeBlock = (id, value) => {
+    const newFormData = changeBlock(properties, id, value);
+    onChangeFormData(newFormData);
+  };
+
+  const onDeleteBlock = (id, selectPrev) => {
+    const previous = previousBlockId(properties, id);
+
+    const newFormData = deleteBlock(properties, id);
+    onChangeFormData(newFormData);
+
+    onSelectBlock(selectPrev ? previous : null);
+  };
+
+  const onMoveBlock = (dragIndex, hoverIndex) => {
+    const newFormData = moveBlock(properties, dragIndex, hoverIndex);
+    onChangeFormData(newFormData);
+  };
+
+  const defaultBlockWrapper = ({ draginfo }, editBlock, blockProps) => (
+    <EditBlockWrapper draginfo={draginfo} blockProps={blockProps}>
+      {editBlock}
+    </EditBlockWrapper>
+  );
+
+  const editBlockWrapper = children || defaultBlockWrapper;
+
+  return (
+    <div className="blocks-form" ref={ref}>
+      <fieldset className="invisible" disabled={!editable}>
+        <DragDropList
+          childList={blockList}
+          onMoveItem={(result) => {
+            const { source, destination } = result;
+            if (!destination) {
+              return;
+            }
+            const newFormData = moveBlock(
+              properties,
+              source.index,
+              destination.index,
+            );
+            onChangeFormData(newFormData);
+            return true;
+          }}
+        >
+          {(dragProps) => {
+            const { child, childId, index } = dragProps;
+            const blockProps = {
+              allowedBlocks,
+              showRestricted,
+              block: childId,
+              data: child,
+              handleKeyDown,
+              id: childId,
+              formTitle: title,
+              formDescription: description,
+              index,
+              manage,
+              onAddBlock,
+              onInsertBlock,
+              onChangeBlock,
+              onChangeField,
+              onDeleteBlock,
+              onFocusNextBlock,
+              onFocusPreviousBlock,
+              onMoveBlock,
+              onMutateBlock,
+              onSelectBlock,
+              pathname,
+              metadata,
+              properties,
+              blocksConfig,
+              selected: selectedBlock === childId,
+              multiSelected: multiSelected?.includes(childId),
+              type: child['@type'],
+              editable,
+            };
+            return editBlockWrapper(
+              dragProps,
+              <EditBlock key={childId} {...blockProps} />,
+              blockProps,
+            );
+          }}
+        </DragDropList>
+      </fieldset>
+    </div>
+  );
+};
+
+export default BlocksForm;