@eeacms/volto-eea-website-policy 1.0.2 → 1.0.3

package/CHANGELOG.md

@@ -4,6 +4,8 @@ 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).
 
+### [1.0.3](https://github.com/eea/volto-eea-website-policy/compare/1.0.2...1.0.3) - 16 November 2022
+
 ### [1.0.2](https://github.com/eea/volto-eea-website-policy/compare/1.0.1...1.0.2) - 16 November 2022
 
 #### :nail_care: Enhancements

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-website-policy",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "@eeacms/volto-eea-website-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/components/Blocks/LayoutSettings/LayoutSettingsEdit.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { EditSchema } from '@eeacms/volto-eea-website-policy/components/Blocks/LayoutSettings/schema';
+import { BlockDataForm, SidebarPortal } from '@plone/volto/components';
+import LayoutSettingsView from '@eeacms/volto-eea-website-policy/components/Blocks/LayoutSettings/LayoutSettingsView';
+import '@eeacms/volto-eea-website-policy/components/Blocks/LayoutSettings/edit.less';
+
+const LayoutSettingsEdit = (props) => {
+  const schema = EditSchema();
+  return (
+    <>
+      <h3>Page layout settings</h3>
+      <LayoutSettingsView {...props} />
+      <SidebarPortal selected={props.selected}>
+        {props.selected && (
+          <BlockDataForm
+            title={schema.title}
+            schema={schema}
+            formData={props.data}
+            onChangeField={(id, value) => {
+              props.onChangeBlock(props.block, {
+                ...props.data,
+                [id]: value,
+              });
+            }}
+          />
+        )}
+      </SidebarPortal>
+    </>
+  );
+};
+
+export default LayoutSettingsEdit;

package/src/components/Blocks/LayoutSettings/LayoutSettingsView.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { BodyClass } from '@plone/volto/helpers';
+import { getVoltoStyles } from '@eeacms/volto-eea-website-policy/components/Blocks/schema-utils';
+import cx from 'classnames';
+
+const LayoutSettingsView = (props) => {
+  const classNames = getVoltoStyles(props.data);
+  return <BodyClass className={cx(classNames)} />;
+};
+
+function propsAreEqual(prevProps, nextProps) {
+  return prevProps.data === nextProps.data;
+}
+
+export default React.memo(LayoutSettingsView, propsAreEqual);

package/src/components/Blocks/LayoutSettings/edit.less

@@ -0,0 +1,4 @@
+#page-edit .block-editor-layoutSettings,
+#page-add .block-editor-layoutSettings {
+  display: none;
+}

package/src/components/Blocks/LayoutSettings/index.js

@@ -0,0 +1,24 @@
+import codeSVG from '@plone/volto/icons/code.svg';
+import LayoutSettingsView from './LayoutSettingsView';
+import LayoutSettingsEdit from './LayoutSettingsEdit';
+import BlockSettingsSchema from '@plone/volto/components/manage/Blocks/Block/Schema';
+
+export default (config) => {
+  config.blocks.blocksConfig.layoutSettings = {
+    id: 'layoutSettings',
+    title: 'Layout settings',
+    icon: codeSVG,
+    group: 'common',
+    view: LayoutSettingsView,
+    edit: LayoutSettingsEdit,
+    schema: BlockSettingsSchema,
+    restricted: ({ properties }) => {
+      return !!properties['@type'];
+    },
+    mostUsed: true,
+    blockHasOwnFocusManagement: true,
+    sidebarTab: 1,
+  };
+
+  return config;
+};

package/src/components/Blocks/LayoutSettings/schema.js

@@ -0,0 +1,31 @@
+import imageNarrowSVG from '@eeacms/volto-eea-website-policy/components/Blocks/icons/image-narrow.svg';
+import imageFitSVG from '@plone/volto/icons/image-fit.svg';
+import imageWideSVG from '@plone/volto/icons/image-wide.svg';
+
+export const ALIGN_INFO_MAP = {
+  narrow_view: [imageNarrowSVG, 'Narrow width'],
+  container_view: [imageFitSVG, 'Container width'],
+  wide_view: [imageWideSVG, 'Wide width'],
+};
+
+export const EditSchema = () => {
+  return {
+    title: 'Page layout settings',
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: ['layout_size'],
+      },
+    ],
+    required: [],
+    properties: {
+      layout_size: {
+        widget: 'style_align',
+        title: 'Layout size',
+        actions: Object.keys(ALIGN_INFO_MAP),
+        actionsInfoMap: ALIGN_INFO_MAP,
+      },
+    },
+  };
+};

package/src/components/Blocks/schema-utils.js

@@ -0,0 +1,16 @@
+export const getVoltoStyles = (props) => {
+  // return an object with same key and value for cx class setting
+  const styles = props ? props : {};
+  const output = {};
+  for (const [key, value] of Object.entries(styles)) {
+    if (key === '@type') {
+      continue;
+    }
+    if (styles[key] === true) {
+      output[key] = key;
+    } else {
+      output[value] = value;
+    }
+  }
+  return output;
+};

package/src/components/Blocks/schema.js

@@ -4,7 +4,7 @@ import imageFitSVG from '@plone/volto/icons/image-fit.svg';
 import imageWideSVG from '@plone/volto/icons/image-wide.svg';
 import imageFullSVG from '@plone/volto/icons/image-full.svg';
 
-const ALIGN_INFO_MAP = {
+export const ALIGN_INFO_MAP = {
   narrow_width: [imageNarrowSVG, 'Narrow width'],
   container_width: [imageFitSVG, 'Container width'],
   wide_width: [imageWideSVG, 'Wide width'],

package/src/index.js

@@ -1,6 +1,7 @@
 import { runtimeConfig } from '@plone/volto/runtime_config';
 import installCallout from '@plone/volto-slate/editor/plugins/Callout';
 import installContextNavigationBlock from '@eeacms/volto-eea-website-policy/components/Blocks/ContextNavigation';
+import installLayoutSettingsBlock from '@eeacms/volto-eea-website-policy/components/Blocks/LayoutSettings';
 import { addStylingFieldsetSchemaEnhancer } from '@eeacms/volto-eea-website-policy/components/Blocks/schema';
 
 const applyConfig = (config) => {
@@ -110,11 +111,18 @@ const applyConfig = (config) => {
   }
 
   // Custom blocks
+  // context navigation
   config = [installContextNavigationBlock].reduce(
     (acc, apply) => apply(acc),
     config,
   );
 
+  // layout settings
+  config = [installLayoutSettingsBlock].reduce(
+    (acc, apply) => apply(acc),
+    config,
+  );
+
   // Disable some blocks
   if (config.blocks.blocksConfig.imagecards) {
     config.blocks.blocksConfig.imagecards.restricted = true;