Block default margin (#1177)

* Add a default margin to all blocks * Fix search page query parameters * Fix margins for a couple of blocks * Fix checking background questions * WIP * Downgrade next * Ui fixes * Fix search users
rage · Sep 12, 2023 · 5c6c67a · 5c6c67a
1 parent 1f79009
commit 5c6c67a
Show file tree

Hide file tree

Showing 170 changed files with 831 additions and 683 deletions.
diff --git a/services/cms/package-lock.json b/services/cms/package-lock.json
diff --git a/services/cms/package.json b/services/cms/package.json
@@ -54,7 +54,7 @@
     "katex": "^0.16.8",
     "lodash": "^4.17.21",
     "monaco-editor": "^0.41.0",
-    "next": "^13.4.19",
+    "next": "^13.4.12",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.46.1",

diff --git a/services/cms/src/blocks/HeroSection/HeroSectionEditor.tsx b/services/cms/src/blocks/HeroSection/HeroSectionEditor.tsx
@@ -8,6 +8,7 @@ import BackgroundAndColorCustomizer from "../../components/blocks/BackgroundAndC
 import PageContext from "../../contexts/PageContext"
 import BreakFromCentered from "../../shared-module/components/Centering/BreakFromCentered"
 import { baseTheme } from "../../shared-module/styles"
+import { respondToOrLarger } from "../../shared-module/styles/respond"
 import {
   CMS_EDITOR_SIDEBAR_THRESHOLD,
   CMS_EDITOR_SIDEBAR_WIDTH,
@@ -26,6 +27,11 @@ const HeroSectionEditor: React.FC<
   const path = useContext(PageContext)?.page?.url_path
   const formattedPath = path?.replace("-", " ").replace("/", "")
 
+  const { backgroundColor, backgroundImage, backgroundRepeatX, partiallyTransparent, alignBottom } =
+    attributes
+
+  const backgroundVerticalAlignment = alignBottom ? "bottom" : "center"
+
   return (
     <BlockWrapper id={clientId}>
       <InspectorControls key="settings">
@@ -39,16 +45,40 @@ const HeroSectionEditor: React.FC<
       >
         <div
           className={css`
-            background: ${baseTheme.colors.green[200]};
-            background-color: ${attributes.backgroundColor};
-            ${attributes.backgroundImage &&
-            `background-image: url("${attributes.backgroundImage}");
-            background-repeat: no-repeat;
-            background-position: ${direction} center;`}
             width: 100%;
             border-radius: 1px;
             transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
             padding: 7.5em 1em;
+            margin-bottom: 3rem;
+
+            background-color: ${backgroundColor ? backgroundColor : baseTheme.colors.green["200"]};
+            position: relative;
+
+            &::after {
+              background-size: 26rem;
+              width: 100%;
+              height: 100%;
+              content: "";
+              opacity: 0.3;
+              background-image: url(${backgroundImage});
+              background-repeat: ${backgroundRepeatX ? "repeat-x" : "no-repeat"};
+              background-position: center ${backgroundVerticalAlignment};
+              position: absolute;
+              top: 0px;
+              left: 0px;
+              ${respondToOrLarger.md} {
+                opacity: ${partiallyTransparent ? "1" : "0.4"};
+                background-position: ${direction} ${backgroundVerticalAlignment};
+                background-size: ${direction == "center" ? "contain" : "22rem"};
+                left: ${direction == "center" ? "0" : "30px"};
+              }
+              ${respondToOrLarger.lg} {
+                opacity: ${partiallyTransparent ? "1" : "0.4"};
+                background-position: ${direction} ${backgroundVerticalAlignment};
+                background-size: ${direction == "center" ? "contain" : "26rem"};
+                left: ${direction == "center" ? "0" : "40px"};
+              }
+            }
           `}
         >
           <div

diff --git a/services/cms/src/blocks/HeroSection/index.tsx b/services/cms/src/blocks/HeroSection/index.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable i18next/no-literal-string */
 import { BlockConfiguration } from "@wordpress/blocks"
 
+import { baseTheme } from "../../shared-module/styles"
 import { MOOCFI_CATEGORY_SLUG } from "../../utils/Gutenberg/modifyGutenbergCategories"
 
 import HeroSectionEditor from "./HeroSectionEditor"
@@ -15,6 +16,7 @@ export interface HeroSectionAttributes {
   backgroundImage: string | undefined
   backgroundRepeatX: boolean | undefined
   alignCenter?: boolean | undefined
+  alignBottom?: boolean | undefined
   useDefaultTextForLabel?: boolean | undefined
   partiallyTransparent?: boolean | undefined
 }
@@ -44,11 +46,11 @@ const HeroSectionConfiguration: BlockConfiguration<HeroSectionAttributes> = {
     },
     backgroundColor: {
       type: "string",
-      default: "#f9f9f9",
+      default: baseTheme.colors.green[200],
     },
     fontColor: {
       type: "string",
-      default: "#f9f9f9",
+      default: baseTheme.colors.gray[700],
     },
     backgroundImage: {
       type: "string",
@@ -70,6 +72,10 @@ const HeroSectionConfiguration: BlockConfiguration<HeroSectionAttributes> = {
       type: "boolean",
       default: true,
     },
+    alignBottom: {
+      type: "boolean",
+      default: false,
+    },
   },
   edit: HeroSectionEditor,
   save: HeroSectionSave,

diff --git a/services/cms/src/blocks/InfoBox/InfoBoxEditor.tsx b/services/cms/src/blocks/InfoBox/InfoBoxEditor.tsx
@@ -1,11 +1,14 @@
 import { css } from "@emotion/css"
 import { InnerBlocks, InspectorControls } from "@wordpress/block-editor"
 import { BlockEditProps } from "@wordpress/blocks"
+import { PanelBody } from "@wordpress/components"
 import React from "react"
+import { useTranslation } from "react-i18next"
 
 import BackgroundColorCustomizer from "../../components/blocks/BackgroundColorCustomizer"
 import BreakFromCentered from "../../shared-module/components/Centering/BreakFromCentered"
 import Centered from "../../shared-module/components/Centering/Centered"
+import CheckBox from "../../shared-module/components/InputFields/CheckBox"
 import breakFromCenteredProps from "../../utils/breakfromCenteredProps"
 import BlockWrapper from "../BlockWrapper"
 
@@ -16,6 +19,7 @@ const InfoBoxEditor: React.FC<React.PropsWithChildren<BlockEditProps<InfoBoxComp
   attributes,
   setAttributes,
 }) => {
+  const { t } = useTranslation()
   return (
     <BlockWrapper id={clientId}>
       <InspectorControls key="settings">
@@ -25,11 +29,24 @@ const InfoBoxEditor: React.FC<React.PropsWithChildren<BlockEditProps<InfoBoxComp
           // eslint-disable-next-line i18next/no-literal-string
           defaultBackgroundColor="#faf5f3"
         />
+
+        <div
+          className={css`
+            margin: 1rem;
+            margin-bottom: 1.5rem;
+          `}
+        >
+          <CheckBox
+            checked={attributes.noPadding}
+            onChange={(event) => setAttributes({ noPadding: event.target.checked })}
+            label={t("label-no-padding")}
+          />
+        </div>
       </InspectorControls>
       <BreakFromCentered {...breakFromCenteredProps}>
         <div
           className={css`
-            padding: 3rem;
+            ${!attributes.noPadding && `padding: 3rem;`}
             background-color: ${attributes.backgroundColor};
           `}
         >

diff --git a/services/cms/src/blocks/InfoBox/deprecated.tsx b/services/cms/src/blocks/InfoBox/deprecated.tsx
@@ -62,6 +62,7 @@ export const Deprecated1: BlockDeprecation<Deprecated1InfoBoxComponentProps> = {
     const newAttributes: InfoBoxComponentProps = {
       ...omit(attributes, ["title", "bodyText"]),
       backgroundColor: "#faf5f3",
+      noPadding: false,
     }
     return [newAttributes, newInnerBlocks]
   },

diff --git a/services/cms/src/blocks/InfoBox/index.tsx b/services/cms/src/blocks/InfoBox/index.tsx
@@ -7,6 +7,7 @@ import { Deprecated1 } from "./deprecated"
 
 export interface InfoBoxComponentProps {
   backgroundColor: string
+  noPadding: boolean
 }
 
 const InfoBoxConfiguration: BlockConfiguration<InfoBoxComponentProps> = {
@@ -18,6 +19,10 @@ const InfoBoxConfiguration: BlockConfiguration<InfoBoxComponentProps> = {
       type: "string",
       default: "#faf5f3",
     },
+    noPadding: {
+      type: "boolean",
+      default: false,
+    },
   },
   edit: InfoBoxEditor,
   save: InfoBoxSave,

diff --git a/services/cms/src/blocks/LandingPageHeroSection/LandingPageHeroSectionEditor.tsx b/services/cms/src/blocks/LandingPageHeroSection/LandingPageHeroSectionEditor.tsx
@@ -31,7 +31,11 @@ const LandingPageHeroSectionEditor: React.FC<
   return (
     <BlockWrapper id={clientId}>
       <InspectorControls key="settings">
-        <BackgroundAndColorCustomizer attributes={attributes} setAttributes={setAttributes} />
+        <BackgroundAndColorCustomizer
+          attributes={attributes}
+          setAttributes={setAttributes}
+          noAlign
+        />
       </InspectorControls>
       <BreakFromCentered
         sidebar

diff --git a/services/cms/src/blocks/index.tsx b/services/cms/src/blocks/index.tsx
@@ -37,7 +37,7 @@ import UnsupportedBlock from "./UnsupportedBlock"
 export const blockTypeMapForPages = [
   ["moocfi/aside", Aside],
   ["moocfi/chapter-progress", ChapterProgress],
-  ["moocfi/congratulations", HeroSection],
+  ["moocfi/congratulations", Congratulations],
   ["moocfi/course-chapter-grid", CourseChapterGrid],
   ["moocfi/course-progress", CourseProgress],
   ["moocfi/exercise-slide", ExerciseSlide],

diff --git a/services/cms/src/components/blocks/BackgroundAndColorCustomizer.tsx b/services/cms/src/components/blocks/BackgroundAndColorCustomizer.tsx
@@ -29,6 +29,7 @@ interface RequiredAttributes {
   backgroundColor: string | undefined
   fontColor?: string | undefined
   alignCenter?: boolean | undefined
+  alignBottom?: boolean | undefined
   backgroundRepeatX: boolean | undefined
   useDefaultTextForLabel?: boolean | undefined
   partiallyTransparent?: boolean | undefined
@@ -37,11 +38,12 @@ interface RequiredAttributes {
 interface BackgroundAndColorCustomizerProps {
   attributes: RequiredAttributes
   setAttributes: (attributes: Partial<RequiredAttributes>) => void
+  noAlign?: boolean
 }
 
 const BackgroundAndColorCustomizer: React.FC<
   React.PropsWithChildren<BackgroundAndColorCustomizerProps>
-> = ({ attributes, setAttributes }) => {
+> = ({ attributes, setAttributes, noAlign }) => {
   const { t } = useTranslation()
   const alignCenter = attributes.alignCenter == undefined || attributes.alignCenter
   const useDefaultTextForLabel =
@@ -118,11 +120,20 @@ const BackgroundAndColorCustomizer: React.FC<
         checked={attributes.backgroundRepeatX}
         onChange={() => setAttributes({ backgroundRepeatX: !attributes.backgroundRepeatX })}
       />
-      <CheckBox
-        label={t("label-align-center")}
-        checked={alignCenter}
-        onChange={() => setAttributes({ alignCenter: !alignCenter })}
-      />
+      {!noAlign && (
+        <>
+          <CheckBox
+            label={t("label-align-center")}
+            checked={alignCenter}
+            onChange={() => setAttributes({ alignCenter: !alignCenter })}
+          />
+          <CheckBox
+            label={t("label-align-bottom")}
+            checked={attributes.alignBottom}
+            onChange={() => setAttributes({ alignBottom: !attributes.alignBottom })}
+          />
+        </>
+      )}
       <CheckBox
         label={t("use-default-text-for-label")}
         checked={useDefaultTextForLabel}