Merge pull request #4 from wpengine/RossoMaguire/TITAN-287

[TITAN-287] - Page layout and styles for homepage block
wpengine · Apr 3, 2023 · ca480e5 · ca480e5
2 parents cd4e241 + 98ff193
commit ca480e5
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 43 deletions.
diff --git a/components/ContentWrapper/ContentWrapper.module.scss b/components/ContentWrapper/ContentWrapper.module.scss
@@ -6,17 +6,6 @@
     // Scope WordPress block styles within ContentWrapper.
     @import 'styles/blocks';
 
-    // custom class set in blocks properties in Gutenberg sidebar
-    .inner-blueprint-content,
-    .outer-blueprint-block .wp-block-columns {
-      width: 60% !important;
-      margin: 0 auto !important;
-    }
-
-    .has-white-color {
-      color: white !important;
-    }
-
     * {
       max-width: 100%;
     }
@@ -25,16 +14,7 @@
       margin-left: 0;
       margin-right: 0;
     }
-
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-      margin: 4.8rem 0;
-    }
-
+
     strong {
       font-weight: 700;
     }

diff --git a/styles/_blocks.scss b/styles/_blocks.scss
@@ -10,3 +10,43 @@
 @import '@wordpress/base-styles/variables';
 @import '@wordpress/base-styles/breakpoints';
 @import '@wordpress/block-library/src/style';
+
+// custom class set in blocks properties in Gutenberg sidebar
+.inner-blueprint-content,
+.outer-blueprint-block .wp-block-columns {
+  width: 985px;
+  margin: 0 auto !important;
+}
+
+.outer-blueprint-hero .wp-block-columns {
+  .inner-hero {
+    padding: 2em;
+  }
+}
+
+.has-white-color {
+  color: var(--wpe--color--white);
+}
+
+.has-white-background-color {
+  background: var(--wpe--color--white);
+}
+
+.wp-block-cover__inner-container {
+  z-index: 999 !important;
+}
+
+.wp-block-button {
+  background-color: var(--wpe--color--black);
+  color: var(--wpe--color--white);
+
+  a {
+    color: var(--wpe--color--white);
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: none;
+      color: var(--wpe--color--white);
+    }
+  }
+}
diff --git a/wp-templates/front-page.js b/wp-templates/front-page.js
@@ -9,17 +9,15 @@ import {
   NavigationMenu,
   Hero,
   SEO,
+  ContentWrapper,
 } from '../components';
 
-export default function Component() {
-  const { data } = useQuery(Component.query, {
-    variables: Component.variables(),
-  });
-
+export default function Component(props) {
   const { title: siteTitle, description: siteDescription } =
-    data?.generalSettings;
-  const primaryMenu = data?.headerMenuItems?.nodes ?? [];
-  const footerMenu = data?.footerMenuItems?.nodes ?? [];
+    props?.data?.generalSettings;
+  const primaryMenu = props?.data?.headerMenuItems?.nodes ?? [];
+  const footerMenu = props?.data?.footerMenuItems?.nodes ?? [];
+  const { title, content } = props?.data?.page ?? { title: '' };
 
   return (
     <>
@@ -30,26 +28,35 @@ export default function Component() {
         menuItems={primaryMenu}
       />
       <Main>
-        <Container>
-          <Hero title={'Front Page'} />
-          <div className="text-center">
-            <p>This page is utilizing the "front-page" WordPress template.</p>
-            <code>wp-templates/front-page.js</code>
-          </div>
-        </Container>
+        <ContentWrapper content={content} />
       </Main>
       <Footer title={siteTitle} menuItems={footerMenu} />
     </>
   );
 }
 
+Component.variables = ({ databaseId }, ctx) => {
+  return {
+    databaseId,
+    headerLocation: MENUS.PRIMARY_LOCATION,
+    footerLocation: MENUS.FOOTER_LOCATION,
+    asPreview: ctx?.asPreview,
+  };
+};
+
 Component.query = gql`
   ${BlogInfoFragment}
   ${NavigationMenu.fragments.entry}
   query GetPageData(
+    $databaseId: ID!
     $headerLocation: MenuLocationEnum
     $footerLocation: MenuLocationEnum
+    $asPreview: Boolean = false
   ) {
+    page(id: $databaseId, idType: DATABASE_ID, asPreview: $asPreview) {
+      title
+      content
+    }
     generalSettings {
       ...BlogInfoFragment
     }
@@ -65,10 +72,3 @@ Component.query = gql`
     }
   }
 `;
-
-Component.variables = () => {
-  return {
-    headerLocation: MENUS.PRIMARY_LOCATION,
-    footerLocation: MENUS.FOOTER_LOCATION,
-  };
-};