refs #261398: added customization to use blocks as page header

eea · Dec 8, 2023 · a22b745 · a22b745
1 parent 7409b6b
commit a22b745
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 2 deletions.
diff --git a/src/StyleWrapper/StyleWrapperView.jsx b/src/StyleWrapper/StyleWrapperView.jsx
@@ -1,6 +1,8 @@
 import React from 'react';
+import { Portal } from 'react-portal';
 import { connect } from 'react-redux';
 import cx from 'classnames';
+import { BodyClass } from '@plone/volto/helpers';
 import config from '@plone/volto/registry';
 import { withCachedImages } from '@eeacms/volto-block-style/hocs';
 import { getFieldURL } from '@eeacms/volto-block-style/helpers';
@@ -44,6 +46,17 @@ const h2rgb = (hex) => {
   return `${R}, ${G}, ${B},`;
 };
 
+function IsomorphicPortal({ children }) {
+  const [isClient, setIsClient] = React.useState();
+  React.useEffect(() => setIsClient(true), []);
+
+  return isClient ? (
+    <Portal node={document.getElementById('page-header')}>{children}</Portal>
+  ) : (
+    children
+  );
+}
+
 export function getInlineStyles(data, props = {}) {
   return {
     ...(data.hidden && props.mode !== 'edit' ? { display: 'none' } : {}),
@@ -104,6 +117,7 @@ const StyleWrapperView = (props) => {
     customId,
     isDropCap,
     isScreenHeight,
+    useAsPageHeader = false,
     hidden = false,
     stretch,
   } = styleData;
@@ -170,8 +184,7 @@ const StyleWrapperView = (props) => {
     : props.children;
 
   const ViewComponentWrapper = style?.viewComponent;
-
-  return styled ? (
+  const StyleWrapperRendered = styled ? (
     nativeIntegration && !style_name?.includes('content-box') ? (
       children
     ) : (
@@ -196,6 +209,15 @@ const StyleWrapperView = (props) => {
   ) : (
     children
   );
+
+  return useAsPageHeader ? (
+    <React.Fragment>
+      <BodyClass className="custom-page-header grey-breadcrumbs" />
+      <IsomorphicPortal>{StyleWrapperRendered}</IsomorphicPortal>
+    </React.Fragment>
+  ) : (
+    StyleWrapperRendered
+  );
 };
 
 export default connect((state, props) => ({

diff --git a/src/StyleWrapper/schema.js b/src/StyleWrapper/schema.js
@@ -48,6 +48,7 @@ export const StyleSchema = () => {
         id: 'advanced',
         title: 'Advanced',
         fields: [
+          'useAsPageHeader',
           'theme',
           'hidden',
           'height',
@@ -164,6 +165,11 @@ export const StyleSchema = () => {
         description: 'First letter is styled as a drop cop',
         type: 'boolean',
       },
+      useAsPageHeader: {
+        title: 'Use as page header',
+        description: 'Use this block as page header',
+        type: 'boolean',
+      },
       hidden: {
         title: 'Hidden',
         description: 'Hide this block',

diff --git a/src/StyleWrapper/stretchStyleDefaultView.css b/src/StyleWrapper/stretchStyleDefaultView.css
@@ -282,3 +282,7 @@ body:not(.is-authenticated):not(.document_wide_view).stretch {
     margin: 0 -1.3vw;
   }
 }
+
+#page-header .content-box {
+  margin-bottom: 0px;
+}