Expandable content -block (#1305)

* Initial flip card block

* Improvements for flip card

* Added templateLock

* Initial expandable content -block

* Initial Revealable content -block

* Changed icon to button

* Little changes

* Little changes to revealable content block

* Changes to flipcard desing

* Changes to style of expandable content -block

* Changes to style of revealable content -block

* Small changes to style of the flip card block

* Small changes

* Changes to margin

* Seperated Inner card to back and front cards

* Small changes to Revealable content -block

* Little fixes

---------

Co-authored-by: Maija Y <[email protected]>

services/cms/src/blocks/ExpandableContent/ExpandableContentEditor.tsx

@@ -0,0 +1,26 @@
+import { InnerBlocks } from "@wordpress/block-editor"
+import { BlockEditProps } from "@wordpress/blocks"
+import React from "react"
+import { useTranslation } from "react-i18next"
+
+import BlockPlaceholderWrapper from "../BlockPlaceholderWrapper"
+
+const ALLOWED_NESTED_BLOCKS = ["core/expandable-content-inner-block"]
+const ExpandableContentEditor: React.FC<
+  React.PropsWithChildren<BlockEditProps<Record<string, never>>>
+> = ({ clientId }) => {
+  const { t } = useTranslation()
+  return (
+    <BlockPlaceholderWrapper
+      id={clientId}
+      title={t("expandable-content-placeholder")}
+      explanation={t("expandable-content-explanation")}
+    >
+      <div>
+        <InnerBlocks allowedBlocks={ALLOWED_NESTED_BLOCKS} />
+      </div>
+    </BlockPlaceholderWrapper>
+  )
+}
+
+export default ExpandableContentEditor

services/cms/src/blocks/ExpandableContent/ExpandableContentInnerBlock/ExpandableContentInnerBlockEditor.tsx

@@ -0,0 +1,38 @@
+/* eslint-disable i18next/no-literal-string */
+import { css } from "@emotion/css"
+import { InnerBlocks } from "@wordpress/block-editor"
+import { BlockEditProps } from "@wordpress/blocks"
+import React from "react"
+import { useTranslation } from "react-i18next"
+
+import BlockPlaceholderWrapper from "../../BlockPlaceholderWrapper"
+
+import { ExpandableContentConfigurationProps } from "."
+
+import TextField from "@/shared-module/common/components/InputFields/TextField"
+
+const ALLOWED_NESTED_BLOCKS = ["core/heading", "core/paragraph", "core/image", "core/list"]
+const ExpandableContentInnerBlockEditor: React.FC<
+  React.PropsWithChildren<BlockEditProps<ExpandableContentConfigurationProps>>
+> = ({ clientId, attributes, setAttributes }) => {
+  const { t } = useTranslation()
+  return (
+    <BlockPlaceholderWrapper
+      id={clientId}
+      title={"Expandable content"}
+      explanation={"Expandable content"}
+    >
+      <TextField
+        placeholder={t("label-title")}
+        value={attributes.name}
+        onChangeByValue={(value) => setAttributes({ name: value })}
+        className={css`
+          margin-bottom: 1rem !important;
+        `}
+      />
+      <InnerBlocks allowedBlocks={ALLOWED_NESTED_BLOCKS} />
+    </BlockPlaceholderWrapper>
+  )
+}
+
+export default ExpandableContentInnerBlockEditor

services/cms/src/blocks/ExpandableContent/ExpandableContentInnerBlock/ExpandableContentInnerBlockSave.tsx

@@ -0,0 +1,12 @@
+import { InnerBlocks } from "@wordpress/block-editor"
+import React from "react"
+
+const ExpandableContentInnerBlockSave: React.FC<unknown> = () => {
+  return (
+    <div>
+      <InnerBlocks.Content />
+    </div>
+  )
+}
+
+export default ExpandableContentInnerBlockSave

services/cms/src/blocks/ExpandableContent/ExpandableContentInnerBlock/index.tsx

@@ -0,0 +1,23 @@
+/* eslint-disable i18next/no-literal-string */
+import { BlockConfiguration } from "@wordpress/blocks"
+
+import { MOOCFI_CATEGORY_SLUG } from "../../../utils/Gutenberg/modifyGutenbergCategories"
+
+import ExpandableContentEditor from "./ExpandableContentInnerBlockEditor"
+import ExpandableContentSave from "./ExpandableContentInnerBlockSave"
+
+export interface ExpandableContentConfigurationProps {
+  name: string
+}
+const ExpandableContentInnerBlockConfiguration: BlockConfiguration<ExpandableContentConfigurationProps> =
+  {
+    title: "Expandable Content",
+    description: "One or more heading that has expandable/collapsible content",
+    category: MOOCFI_CATEGORY_SLUG,
+    attributes: { name: { type: "string", default: "" } },
+    parent: ["moocfi/expandable-content"],
+    edit: ExpandableContentEditor,
+    save: ExpandableContentSave,
+  }
+
+export default ExpandableContentInnerBlockConfiguration

services/cms/src/blocks/ExpandableContent/ExpandableContentSave.tsx

@@ -0,0 +1,12 @@
+import { InnerBlocks } from "@wordpress/block-editor"
+import React from "react"
+
+const ExpendableContentSave: React.FC<unknown> = () => {
+  return (
+    <div>
+      <InnerBlocks.Content />
+    </div>
+  )
+}
+
+export default ExpendableContentSave

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

@@ -0,0 +1,20 @@
+import { BlockConfiguration } from "@wordpress/blocks"
+
+import { MOOCFI_CATEGORY_SLUG } from "../../utils/Gutenberg/modifyGutenbergCategories"
+
+import ExpandableContentEditor from "./ExpandableContentEditor"
+import ExpandableContentSave from "./ExpandableContentSave"
+
+// eslint-disable-next-line i18next/no-literal-string
+const ExpandableContent = "ExpandableContent"
+
+const ExpandableContentConfiguration: BlockConfiguration = {
+  title: ExpandableContent,
+  description: ExpandableContent,
+  category: MOOCFI_CATEGORY_SLUG,
+  attributes: {},
+  edit: ExpandableContentEditor,
+  save: ExpandableContentSave,
+}
+
+export default ExpandableContentConfiguration

services/cms/src/blocks/FlipCard/BackFlipCard/BackFlipCardEditor.tsx

@@ -0,0 +1,25 @@
+import { InnerBlocks } from "@wordpress/block-editor"
+import { BlockEditProps } from "@wordpress/blocks"
+import React from "react"
+import { useTranslation } from "react-i18next"
+
+import BlockPlaceholderWrapper from "../../BlockPlaceholderWrapper"
+
+const ALLOWED_NESTED_BLOCKS = ["core/image", "core/paragraph", "core/heading", "core/list"]
+
+const BackFlipCardEditor: React.FC<BlockEditProps<Record<string, never>>> = ({ clientId }) => {
+  const { t } = useTranslation()
+
+  return (
+    <BlockPlaceholderWrapper
+      id={clientId}
+      title={t("back-card")}
+      explanation={t("back-card-explanation")}
+    >
+      <div>
+        <InnerBlocks allowedBlocks={ALLOWED_NESTED_BLOCKS} templateLock={false} />
+      </div>
+    </BlockPlaceholderWrapper>
+  )
+}
+export default BackFlipCardEditor

services/cms/src/blocks/FlipCard/BackFlipCard/BackFlipCardSave.tsx

@@ -0,0 +1,11 @@
+import { InnerBlocks } from "@wordpress/block-editor"
+
+const BackFlipCardSave: React.FC = () => {
+  return (
+    <div>
+      <InnerBlocks.Content />
+    </div>
+  )
+}
+
+export default BackFlipCardSave

services/cms/src/blocks/FlipCard/BackFlipCard/index.tsx

@@ -0,0 +1,19 @@
+/* eslint-disable i18next/no-literal-string */
+import { BlockConfiguration } from "@wordpress/blocks"
+
+import BackFlipCardEditor from "./BackFlipCardEditor"
+import InnerCardSave from "./BackFlipCardSave"
+
+import { MOOCFI_CATEGORY_SLUG } from "@/utils/Gutenberg/modifyGutenbergCategories"
+
+const BackFlipCardConfiguration: BlockConfiguration = {
+  title: "Back Flip Card",
+  description: "Back side for the flip card block",
+  category: MOOCFI_CATEGORY_SLUG,
+  parent: ["moocfi/flip-card"],
+  attributes: {},
+  edit: BackFlipCardEditor,
+  save: InnerCardSave,
+}
+
+export default BackFlipCardConfiguration

services/cms/src/blocks/FlipCard/FlipCardEditor.tsx

@@ -0,0 +1,44 @@
+import { InnerBlocks, InspectorControls } from "@wordpress/block-editor"
+import { BlockEditProps, TemplateArray } from "@wordpress/blocks"
+import React from "react"
+import { useTranslation } from "react-i18next"
+
+import BlockPlaceholderWrapper from "../BlockPlaceholderWrapper"
+
+import { FlipCardAttributes } from "."
+
+import FlipBoxSizeCustomizer from "@/components/blocks/FlipCardSizeCustomizer"
+
+const ALLOWED_NESTED_BLOCKS = ["moocfi/front-card"]
+const INNER_BLOCKS_TEMPLATE: TemplateArray = [
+  ["moocfi/front-card", {}],
+  ["moocfi/back-card", {}],
+]
+
+const FlipCardEditor: React.FC<React.PropsWithChildren<BlockEditProps<FlipCardAttributes>>> = ({
+  clientId,
+  attributes,
+  setAttributes,
+}) => {
+  const { t } = useTranslation()
+
+  return (
+    <BlockPlaceholderWrapper
+      id={clientId}
+      title={t("flip-card-placeholder")}
+      explanation={t("flip-card-placeholder-explanation")}
+    >
+      <InspectorControls key="flip-card-settings">
+        <FlipBoxSizeCustomizer attributes={attributes} setAttributes={setAttributes} />
+      </InspectorControls>
+      <div>
+        <InnerBlocks
+          allowedBlocks={ALLOWED_NESTED_BLOCKS}
+          template={INNER_BLOCKS_TEMPLATE}
+          templateLock="all"
+        />
+      </div>
+    </BlockPlaceholderWrapper>
+  )
+}
+export default FlipCardEditor

services/cms/src/blocks/FlipCard/FlipCardSave.tsx

@@ -0,0 +1,11 @@
+import { InnerBlocks } from "@wordpress/block-editor"
+
+const FlipCardSave: React.FC = () => {
+  return (
+    <div>
+      <InnerBlocks.Content />
+    </div>
+  )
+}
+
+export default FlipCardSave

services/cms/src/blocks/FlipCard/FrontFlipCard/FrontFlipCardEditor.tsx

@@ -0,0 +1,25 @@
+import { InnerBlocks } from "@wordpress/block-editor"
+import { BlockEditProps } from "@wordpress/blocks"
+import React from "react"
+import { useTranslation } from "react-i18next"
+
+import BlockPlaceholderWrapper from "../../BlockPlaceholderWrapper"
+
+const ALLOWED_NESTED_BLOCKS = ["core/image", "core/paragraph", "core/heading", "core/list"]
+
+const FrontFlipCardEditor: React.FC<BlockEditProps<Record<string, never>>> = ({ clientId }) => {
+  const { t } = useTranslation()
+
+  return (
+    <BlockPlaceholderWrapper
+      id={clientId}
+      title={t("front-card")}
+      explanation={t("front-card-explanation")}
+    >
+      <div>
+        <InnerBlocks allowedBlocks={ALLOWED_NESTED_BLOCKS} templateLock={false} />
+      </div>
+    </BlockPlaceholderWrapper>
+  )
+}
+export default FrontFlipCardEditor

services/cms/src/blocks/FlipCard/FrontFlipCard/FrontFlipCardSave.tsx

@@ -0,0 +1,11 @@
+import { InnerBlocks } from "@wordpress/block-editor"
+
+const FrontFlipCardSave: React.FC = () => {
+  return (
+    <div>
+      <InnerBlocks.Content />
+    </div>
+  )
+}
+
+export default FrontFlipCardSave

services/cms/src/blocks/FlipCard/FrontFlipCard/index.tsx

@@ -0,0 +1,19 @@
+/* eslint-disable i18next/no-literal-string */
+import { BlockConfiguration } from "@wordpress/blocks"
+
+import FrontFlipCardEditor from "./FrontFlipCardEditor"
+import FrontFlipCardSave from "./FrontFlipCardSave"
+
+import { MOOCFI_CATEGORY_SLUG } from "@/utils/Gutenberg/modifyGutenbergCategories"
+
+const FrontFlipCardConfiguration: BlockConfiguration = {
+  title: "Inner Card",
+  description: "Front side for the flip card block",
+  category: MOOCFI_CATEGORY_SLUG,
+  parent: ["moocfi/flip-card"],
+  attributes: {},
+  edit: FrontFlipCardEditor,
+  save: FrontFlipCardSave,
+}
+
+export default FrontFlipCardConfiguration

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

@@ -0,0 +1,26 @@
+/* eslint-disable i18next/no-literal-string */
+import { BlockConfiguration } from "@wordpress/blocks"
+
+import FlipCardEditor from "./FlipCardEditor"
+import FlipCardSave from "./FlipCardSave"
+
+import { MOOCFI_CATEGORY_SLUG } from "@/utils/Gutenberg/modifyGutenbergCategories"
+
+export interface FlipCardAttributes {
+  size: string
+}
+const FlipCardConfiguration: BlockConfiguration<FlipCardAttributes> = {
+  title: "Flip Card",
+  description: "A two sided flip card that can be flipped by clicking the card",
+  category: MOOCFI_CATEGORY_SLUG,
+  attributes: {
+    size: {
+      type: "string",
+      default: "xl",
+    },
+  },
+  edit: FlipCardEditor,
+  save: FlipCardSave,
+}
+
+export default FlipCardConfiguration

services/cms/src/blocks/RevealableContent/RevealableContentEditor.tsx

@@ -0,0 +1,32 @@
+import { InnerBlocks } from "@wordpress/block-editor"
+import { BlockEditProps } from "@wordpress/blocks"
+import { t } from "i18next"
+import React from "react"
+
+import BlockPlaceholderWrapper from "../BlockPlaceholderWrapper"
+
+import { ConditionAttributes } from "."
+
+const ALLOWED_NESTED_BLOCKS = [
+  "core/heading",
+  "core/paragraph",
+  "core/image",
+  "core/list",
+  "moocfi/revealable-hidden-content",
+]
+
+const ConditionalBlockEditor: React.FC<
+  React.PropsWithChildren<BlockEditProps<ConditionAttributes>>
+> = ({ clientId }) => {
+  return (
+    <BlockPlaceholderWrapper
+      id={clientId}
+      title={t("revealable-content-placeholder")}
+      explanation={t("revealable-content-explanation")}
+    >
+      <InnerBlocks allowedBlocks={ALLOWED_NESTED_BLOCKS} />
+    </BlockPlaceholderWrapper>
+  )
+}
+
+export default ConditionalBlockEditor

services/cms/src/blocks/RevealableContent/RevealableContentSave.tsx

@@ -0,0 +1,11 @@
+import { InnerBlocks } from "@wordpress/block-editor"
+
+const RevealableContentSave: React.FC = () => {
+  return (
+    <div>
+      <InnerBlocks.Content />
+    </div>
+  )
+}
+
+export default RevealableContentSave