From 1a4a95d5ac4bab0b9699bda6712ef44db9e207f3 Mon Sep 17 00:00:00 2001 From: Ross Maguire Date: Fri, 31 Mar 2023 16:39:48 +0100 Subject: [PATCH] feat: page layout and styles for homepage block --- .gitignore | 1 + .../ContentWrapper/ContentWrapper.module.scss | 254 +++++++++--------- styles/_blocks.scss | 40 +++ wp-templates/front-page.js | 44 +-- 4 files changed, 185 insertions(+), 154 deletions(-) diff --git a/.gitignore b/.gitignore index 697bbd5c..94f7d32a 100644 --- a/.gitignore +++ b/.gitignore @@ -5,3 +5,4 @@ node_modules # JavaScript dependencies package-lock.json +.next diff --git a/components/ContentWrapper/ContentWrapper.module.scss b/components/ContentWrapper/ContentWrapper.module.scss index 1fe0634c..e50008cf 100644 --- a/components/ContentWrapper/ContentWrapper.module.scss +++ b/components/ContentWrapper/ContentWrapper.module.scss @@ -1,134 +1,124 @@ .component { - max-width: var(--wpe--content--max-width); - margin: 0 auto; - line-height: 1.6875; - - :global { - // Scope WordPress block styles within ContentWrapper. - @import 'styles/blocks'; - - * { - max-width: 100%; - } - - figure { - margin-left: 0; - margin-right: 0; - } - - h1, - h2, - h3, - h4, - h5, - h6 { - margin: 4.8rem 0; - } - - strong { - font-weight: 700; - } - - a { - color: var(--wpe--link--color); - text-decoration: underline; - - &:hover, - &:focus { - color: var(--wpe--link--color); - text-decoration: none; - } - } - - li { - font-size: 1.6rem; - } - - img { - display: block; - height: auto; - max-width: 100%; - } - - .alignleft { - display: inline; - float: left; - margin-right: 1.5em; - } - - .alignright { - display: inline; - float: right; - margin-left: 1.5em; - } - - .aligncenter { - clear: both; - display: block; - margin-left: auto; - margin-right: auto; - } - - code, - pre { - color: var(--color-white); - background: var(--color-black); - } - - code { - padding: 0.25rem 0.5rem; - } - - pre { - max-width: 100%; - overflow: auto; - padding: 1rem; - } - - blockquote { - border-top: 1px solid var(--color-black); - border-bottom: 1px solid var(--color-black); - font-style: italic; - margin-top: 0; - margin-left: 0; - margin-right: 0; - padding: 4rem 1rem 4rem; - text-align: center; - - &::before { - content: '”'; - display: block; - font-size: 6rem; - line-height: 0; - margin: 2rem 0; - } - - > *:last-child { - margin-bottom: 0; - } - } - - table { - border-collapse: collapse; - width: 100%; - } - - thead th { - border-bottom: 1px solid var(--wpe--color--border); - padding-bottom: 0.5em; - } - - th { - padding: 0.4rem 0; - text-align: left; - } - - tr { - border-bottom: 1px solid var(--wpe--color--border); - } - - td { - padding: 0.4em; - } - } + margin: 0 auto; + line-height: 1.6875; + + :global { + // Scope WordPress block styles within ContentWrapper. + @import 'styles/blocks'; + + * { + max-width: 100%; + } + + figure { + margin-left: 0; + margin-right: 0; + } + + strong { + font-weight: 700; + } + + a { + color: var(--wpe--link--color); + text-decoration: underline; + + &:hover, + &:focus { + color: var(--wpe--link--color); + text-decoration: none; + } + } + + li { + font-size: 1.6rem; + } + + img { + display: block; + height: auto; + max-width: 100%; + } + + .alignleft { + display: inline; + float: left; + margin-right: 1.5em; + } + + .alignright { + display: inline; + float: right; + margin-left: 1.5em; + } + + .aligncenter { + clear: both; + display: block; + margin-left: auto; + margin-right: auto; + } + + code, + pre { + color: var(--color-white); + background: var(--color-black); + } + + code { + padding: 0.25rem 0.5rem; + } + + pre { + max-width: 100%; + overflow: auto; + padding: 1rem; + } + + blockquote { + border-top: 1px solid var(--color-black); + border-bottom: 1px solid var(--color-black); + font-style: italic; + margin-top: 0; + margin-left: 0; + margin-right: 0; + padding: 4rem 1rem 4rem; + text-align: center; + + &::before { + content: '”'; + display: block; + font-size: 6rem; + line-height: 0; + margin: 2rem 0; + } + + > *:last-child { + margin-bottom: 0; + } + } + + table { + border-collapse: collapse; + width: 100%; + } + + thead th { + border-bottom: 1px solid var(--wpe--color--border); + padding-bottom: 0.5em; + } + + th { + padding: 0.4rem 0; + text-align: left; + } + + tr { + border-bottom: 1px solid var(--wpe--color--border); + } + + td { + padding: 0.4em; + } + } } diff --git a/styles/_blocks.scss b/styles/_blocks.scss index afc75805..daf6cd8e 100644 --- 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 index 73848f48..81960709 100644 --- 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} />
- - -
-

This page is utilizing the "front-page" WordPress template.

- wp-templates/front-page.js -
- +