Skip to content

Commit 070a628

Browse files
george-misangeorge-misan
authored
More element of AI components (#1333)
* fix bugs with terminology block * add asideWithImage block * refactor asideWithImage block * fix ui bug with exercise-list * make asideWithImage component responsive * convert px to rem * resolve review commentts by coderabbitai * resolve review commentts by coderabbitai * resolve review commentts by coderabbitai * resolve review commentts by coderabbitai * update snapshots * change placeholder in AsideWithImageEditor * update sorting function * update snapshots * update sort function * update snapshots
1 parent c4a2136 commit 070a628

File tree

21 files changed

+264
-33
lines changed

21 files changed

+264
-33
lines changed

‎services/cms/src/blocks/AsideWithImage/AsideWithImageEditor.tsx

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import { css } from "@emotion/css"
2+
import { InnerBlocks, RichText } from "@wordpress/block-editor"
3+
import { BlockEditProps } from "@wordpress/blocks"
4+
import React from "react"
5+
import { useTranslation } from "react-i18next"
6+
7+
import BlockWrapper from "../BlockWrapper"
8+
9+
import { AsideWithImageBlockAttributes } from "."
10+
11+
import { baseTheme, headingFont } from "@/shared-module/common/styles"
12+
13+
const ALLOWED_NESTED_BLOCKS = ["core/image"]
14+
15+
const AsideWithImageEditor: React.FC<
16+
React.PropsWithChildren<BlockEditProps<AsideWithImageBlockAttributes>>
17+
> = ({ clientId, attributes: { title, content }, setAttributes }) => {
18+
const { t } = useTranslation()
19+
return (
20+
<BlockWrapper id={clientId}>
21+
<div>
22+
<div
23+
className={css`
24+
padding: 1rem;
25+
background: ${baseTheme.colors.clear[100]};
26+
display: grid;
27+
grid-template-columns: 0.4fr 1fr;
28+
font-family: ${headingFont};
29+
30+
figure {
31+
width: 180px;
32+
margin: 0 !important;
33+
}
34+
`}
35+
>
36+
<InnerBlocks allowedBlocks={ALLOWED_NESTED_BLOCKS} />
37+
<div>
38+
<RichText
39+
className={css`
40+
font-weight: 600;
41+
`}
42+
// eslint-disable-next-line i18next/no-literal-string
43+
tagName="h4"
44+
value={title}
45+
onChange={(value: string) => setAttributes({ title: value })}
46+
placeholder={t("heading-placeholder")}
47+
/>
48+
<RichText
49+
className={css`
50+
text-align: center;
51+
`}
52+
// eslint-disable-next-line i18next/no-literal-string
53+
tagName="span"
54+
value={content}
55+
onChange={(value: string) => setAttributes({ content: value })}
56+
placeholder={t("copy-text-placeholder")}
57+
/>
58+
</div>
59+
</div>
60+
</div>
61+
</BlockWrapper>
62+
)
63+
}
64+
65+
export default AsideWithImageEditor

‎services/cms/src/blocks/AsideWithImage/AsideWithImageSave.tsx

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { InnerBlocks } from "@wordpress/block-editor"
2+
3+
const AsideWithImageSave: React.FC<unknown> = () => {
4+
return (
5+
<aside>
6+
<InnerBlocks.Content />
7+
</aside>
8+
)
9+
}
10+
11+
export default AsideWithImageSave

‎services/cms/src/blocks/AsideWithImage/index.tsx

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
/* eslint-disable i18next/no-literal-string */
2+
import { BlockConfiguration } from "@wordpress/blocks"
3+
4+
import { MOOCFI_CATEGORY_SLUG } from "../../utils/Gutenberg/modifyGutenbergCategories"
5+
6+
import AsideWithImageEditor from "./AsideWithImageEditor"
7+
import AsideWithImageSave from "./AsideWithImageSave"
8+
9+
export interface AsideWithImageBlockAttributes {
10+
title: string
11+
content: string
12+
}
13+
14+
const AsideWithImageConfiguration: BlockConfiguration<AsideWithImageBlockAttributes> = {
15+
title: "Aside with Image",
16+
description: "An aside block with custom image",
17+
category: MOOCFI_CATEGORY_SLUG,
18+
attributes: {
19+
title: {
20+
type: "string",
21+
source: "html",
22+
selector: "h1",
23+
default: "This is the heading of this component...",
24+
},
25+
content: {
26+
type: "string",
27+
default:
28+
"Coulrophobia brings on feelings of fear when you see clowns or clown images. It's a specific phobic disorder that causes anxiety, a racing heart, nausea and profuse sweating",
29+
},
30+
},
31+
edit: AsideWithImageEditor,
32+
save: AsideWithImageSave,
33+
}
34+
35+
export default AsideWithImageConfiguration

‎services/cms/src/blocks/Terminology/TerminologyBlockEditor.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { TerminologyBlockAttributes } from "."
1111

1212
import { primaryFont } from "@/shared-module/common/styles"
1313

14-
const ALLOWED_NESTED_BLOCKS = ["core/heading", "core/paragraph"]
14+
const ALLOWED_NESTED_BLOCKS = ["core/heading", "core/paragraph", "core/list"]
1515
const LANDING_PAGE_HERO_SECTION_TEMPLATE: Template[] = [
1616
["core/paragraph", { content: "Insert body text...", placeholder: "Insert body text..." }],
1717
]
@@ -21,6 +21,7 @@ const TerminologyBlockEditor: React.FC<
2121
> = ({ clientId, attributes, setAttributes }) => {
2222
const { title, blockName } = attributes
2323
const { t } = useTranslation()
24+
2425
return (
2526
<BlockWrapper id={clientId}>
2627
<InspectorControls key="settings">

‎services/cms/src/blocks/Terminology/index.tsx

+5-3
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,16 @@ import { MOOCFI_CATEGORY_SLUG } from "../../utils/Gutenberg/modifyGutenbergCateg
66
import LandingPageHeroSectionEditor from "./TerminologyBlockEditor"
77
import LandingPageHeroSectionSave from "./TerminologyBlockSave"
88

9+
import { baseTheme } from "@/shared-module/common/styles"
10+
911
export interface TerminologyBlockAttributes {
1012
title: string
1113
primaryColor: string
1214
content: string
1315
blockName: string
1416
}
1517

16-
const LandingPageHeroSectionConfiguration: BlockConfiguration<TerminologyBlockAttributes> = {
18+
const TerminologyBlockConfiguration: BlockConfiguration<TerminologyBlockAttributes> = {
1719
title: "Terminology Block",
1820
description: "Terminology Block.",
1921
category: MOOCFI_CATEGORY_SLUG,
@@ -30,7 +32,7 @@ const LandingPageHeroSectionConfiguration: BlockConfiguration<TerminologyBlockAt
3032
},
3133
primaryColor: {
3234
type: "string",
33-
default: "#FFFFFF",
35+
default: baseTheme.colors.purple[600],
3436
},
3537
content: {
3638
type: "string",
@@ -41,4 +43,4 @@ const LandingPageHeroSectionConfiguration: BlockConfiguration<TerminologyBlockAt
4143
save: LandingPageHeroSectionSave,
4244
}
4345

44-
export default LandingPageHeroSectionConfiguration
46+
export default TerminologyBlockConfiguration

‎services/cms/src/blocks/index.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import { BlockConfiguration } from "@wordpress/blocks"
33

44
import Aside from "./Aside"
5+
import AsideWithImage from "./AsideWithImage"
56
import Author from "./Author"
67
import AuthorInnerBlock from "./AuthorInnerBlock"
78
import ChapterProgress from "./ChapterProgress"
@@ -83,6 +84,7 @@ export const blockTypeMapForPages = [
8384
["moocfi/expandable-content-inner-block", ExpendableContentInnerBlock],
8485
["moocfi/revelable-content", RevealableContent],
8586
["moocfi/revealable-hidden-content", RevealableHiddenContent],
87+
["moocfi/aside-with-image", AsideWithImage],
8688

8789
["moocfi/flip-card", FlipCard],
8890
["moocfi/front-card", FrontFlipCard],

‎services/course-material/src/components/ContentRenderer/index.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ import ColumnsBlock from "./core/layout/ColumnsBlock"
3333
import SeparatorBlock from "./core/layout/Separator"
3434
import SpacerBlock from "./core/layout/SpacerBlock"
3535
import AsideBlock from "./moocfi/AsideBlock"
36+
import AsideWithImageBlock from "./moocfi/AsideWithImageBlock"
3637
import AudioPlayer from "./moocfi/AudioPlayer/index"
3738
import AuthorBlock from "./moocfi/AuthorBlock"
3839
import AuthorInnerBlock from "./moocfi/AuthorInnerBlock"
@@ -180,6 +181,7 @@ export const blockToRendererMap: { [blockName: string]: any } = {
180181
"moocfi/ingress": Ingress,
181182
"moocfi/terminology-block": TerminologyBlock,
182183
"moocfi/logo-link": LogoLink,
184+
"moocfi/aside-with-image": AsideWithImageBlock,
183185
}
184186

185187
const highlightedBlockStyles = css`

‎services/course-material/src/components/ContentRenderer/moocfi/AsideWithImageBlock.tsx

+95
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
import { css } from "@emotion/css"
2+
import React, { useContext } from "react"
3+
4+
import { BlockRendererProps } from ".."
5+
import { GlossaryContext } from "../../../contexts/GlossaryContext"
6+
import InnerBlocks from "../util/InnerBlocks"
7+
import { parseText } from "../util/textParsing"
8+
9+
import { primaryFont } from "@/shared-module/common/styles"
10+
import { respondToOrLarger } from "@/shared-module/common/styles/respond"
11+
import withErrorBoundary from "@/shared-module/common/utils/withErrorBoundary"
12+
13+
interface AsideWithImageBlockAttributes {
14+
title: string
15+
content: string
16+
}
17+
18+
const AsideWithImageBlock: React.FC<
19+
React.PropsWithChildren<BlockRendererProps<AsideWithImageBlockAttributes>>
20+
> = (props) => {
21+
const { terms } = useContext(GlossaryContext)
22+
return (
23+
<div
24+
className={css`
25+
width: 100%;
26+
padding: 0 0 4rem 0;
27+
display: grid;
28+
grid-template-columns: 1fr;
29+
row-gap: 2rem;
30+
border-bottom: 2px solid #eaedf0;
31+
32+
${respondToOrLarger.sm} {
33+
grid-template-columns: 0.2fr 1fr;
34+
column-gap: 2.5rem;
35+
}
36+
37+
div:first-of-type {
38+
width: 150px;
39+
height: 150px;
40+
border-radius: 100%;
41+
object-fit: none;
42+
overflow: hidden;
43+
margin: 0;
44+
figure {
45+
width: 7.5rem;
46+
aspect-ratio: 1/1;
47+
margin: 0;
48+
49+
img {
50+
width: 9.375rem;
51+
height: 9.375rem;
52+
margin: 0;
53+
}
54+
}
55+
}
56+
57+
p {
58+
margin: 0 !important;
59+
font-size: 1.125rem;
60+
line-height: 160%;
61+
}
62+
63+
h4 {
64+
font-weight: 600;
65+
line-height: 140%;
66+
font-family: ${primaryFont};
67+
margin-bottom: 1.125rem;
68+
font-weight: 550;
69+
font-size: 1.5rem;
70+
color: #1a2333;
71+
}
72+
`}
73+
>
74+
<InnerBlocks parentBlockProps={props} />
75+
<div>
76+
<h4
77+
dangerouslySetInnerHTML={{
78+
__html: parseText(props.data.attributes.title, terms).parsedText,
79+
}}
80+
/>
81+
<p
82+
className={css`
83+
font-size: 1rem;
84+
line-height: 100%;
85+
font-weight: 400;
86+
`}
87+
>
88+
{props.data.attributes.content}
89+
</p>
90+
</div>
91+
</div>
92+
)
93+
}
94+
95+
export default withErrorBoundary(AsideWithImageBlock)

‎services/course-material/src/components/ContentRenderer/moocfi/AuthorBlock.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import InnerBlocks from "../util/InnerBlocks"
88
import { baseTheme } from "@/shared-module/common/styles"
99
import withErrorBoundary from "@/shared-module/common/utils/withErrorBoundary"
1010

11-
interface InfoBoxBlockAttributes {
11+
interface AuthorBlockAttributes {
1212
backgroundColor: string
1313
}
1414

@@ -64,7 +64,7 @@ const Wrapper = styled.div`
6464
}
6565
`
6666

67-
const AuthorBlock: React.FC<React.PropsWithChildren<BlockRendererProps<InfoBoxBlockAttributes>>> = (
67+
const AuthorBlock: React.FC<React.PropsWithChildren<BlockRendererProps<AuthorBlockAttributes>>> = (
6868
props,
6969
) => {
7070
return (

‎services/course-material/src/components/ContentRenderer/moocfi/AuthorInnerBlock.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,12 @@ import InnerBlocks from "../util/InnerBlocks"
55

66
import withErrorBoundary from "@/shared-module/common/utils/withErrorBoundary"
77

8-
interface InfoBoxBlockAttributes {
8+
interface AuthorInnerBlockAttributes {
99
backgroundColor: string
1010
}
1111

1212
const AuthorInnerBlock: React.FC<
13-
React.PropsWithChildren<BlockRendererProps<InfoBoxBlockAttributes>>
13+
React.PropsWithChildren<BlockRendererProps<AuthorInnerBlockAttributes>>
1414
> = (props) => {
1515
return (
1616
<div>

‎services/course-material/src/components/ContentRenderer/moocfi/Ingress.tsx

+15-10
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,22 @@
11
import { css } from "@emotion/css"
2-
import React from "react"
2+
import React, { useContext } from "react"
33

44
import { BlockRendererProps } from ".."
5+
import { GlossaryContext } from "../../../contexts/GlossaryContext"
6+
import { parseText } from "../../ContentRenderer/util/textParsing"
57

68
import { headingFont, primaryFont } from "@/shared-module/common/styles"
79
import withErrorBoundary from "@/shared-module/common/utils/withErrorBoundary"
810

9-
interface InfoBoxBlockAttributes {
11+
interface IngressBlockAttributes {
1012
title: string
11-
subtitle: boolean
13+
subtitle: string
1214
}
1315

14-
const Ingress: React.FC<React.PropsWithChildren<BlockRendererProps<InfoBoxBlockAttributes>>> = (
16+
const Ingress: React.FC<React.PropsWithChildren<BlockRendererProps<IngressBlockAttributes>>> = (
1517
props,
1618
) => {
19+
const { terms } = useContext(GlossaryContext)
1720
return (
1821
<div
1922
className={css`
@@ -32,9 +35,10 @@ const Ingress: React.FC<React.PropsWithChildren<BlockRendererProps<InfoBoxBlockA
3235
letter-spacing: -1;
3336
font-family: ${headingFont};
3437
`}
35-
>
36-
{props.data.attributes.title}
37-
</h2>
38+
dangerouslySetInnerHTML={{
39+
__html: parseText(props.data.attributes.title, terms).parsedText,
40+
}}
41+
/>
3842
)}
3943
<h3
4044
className={css`
@@ -44,9 +48,10 @@ const Ingress: React.FC<React.PropsWithChildren<BlockRendererProps<InfoBoxBlockA
4448
line-height: 1.35;
4549
font-family: ${primaryFont};
4650
`}
47-
>
48-
{props.data.attributes.subtitle}
49-
</h3>
51+
dangerouslySetInnerHTML={{
52+
__html: parseText(props.data.attributes.subtitle, terms).parsedText,
53+
}}
54+
/>
5055
</div>
5156
)
5257
}

‎services/course-material/src/components/ContentRenderer/moocfi/LogoLink.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,12 @@ import BreakFromCentered from "@/shared-module/common/components/Centering/Break
88
import Centered from "@/shared-module/common/components/Centering/Centered"
99
import withErrorBoundary from "@/shared-module/common/utils/withErrorBoundary"
1010

11-
interface InfoBoxBlockAttributes {
11+
interface LogoLinkBlockAttributes {
1212
backgroundColor: string
1313
noPadding: boolean
1414
}
1515

16-
const LogoLink: React.FC<React.PropsWithChildren<BlockRendererProps<InfoBoxBlockAttributes>>> = (
16+
const LogoLink: React.FC<React.PropsWithChildren<BlockRendererProps<LogoLinkBlockAttributes>>> = (
1717
props,
1818
) => {
1919
return (

0 commit comments

Comments
 (0)