Skip to content

Commit

Permalink
Add StandaloneHeadingBlock (#336)
Browse files Browse the repository at this point in the history
Remove textAlign prop from HeadingBlock and move it to
StandaloneHeadingBlock so the text align setting will only be visible
where it is used.
  • Loading branch information
SebiVPS authored Aug 20, 2024
1 parent e517ad3 commit 816bc41
Show file tree
Hide file tree
Showing 19 changed files with 182 additions and 80 deletions.
4 changes: 2 additions & 2 deletions admin/src/common/blocks/AccordionItemBlock.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,18 +8,18 @@ import {
createCompositeSetting,
} from "@comet/blocks-admin";
import { AccordionItemBlockData } from "@src/blocks.generated";
import { HeadingBlock } from "@src/common/blocks/HeadingBlock";
import { RichTextBlock } from "@src/common/blocks/RichTextBlock";
import { SpaceBlock } from "@src/common/blocks/SpaceBlock";
import { StandaloneCallToActionListBlock } from "@src/common/blocks/StandaloneCallToActionListBlock";
import { StandaloneHeadingBlock } from "@src/common/blocks/StandaloneHeadingBlock";
import { FormattedMessage } from "react-intl";

const AccordionContentBlock = createBlocksBlock({
name: "AccordionContent",
supportedBlocks: {
richtext: RichTextBlock,
space: SpaceBlock,
heading: HeadingBlock,
heading: StandaloneHeadingBlock,
callToActionList: StandaloneCallToActionListBlock,
},
});
Expand Down
10 changes: 0 additions & 10 deletions admin/src/common/blocks/HeadingBlock.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -84,16 +84,6 @@ export const HeadingBlock = createCompositeBlock(
fieldProps: { label: <FormattedMessage id="headingBlock.htmlTag" defaultMessage="HTML tag" />, fullWidth: true },
}),
},
textAlignment: {
block: createCompositeBlockSelectField<HeadingBlockData["textAlignment"]>({
defaultValue: "left",
options: [
{ value: "left", label: <FormattedMessage id="headingBlock.textAlignment.left" defaultMessage="left" /> },
{ value: "center", label: <FormattedMessage id="headingBlock.textAlignment.center" defaultMessage="center" /> },
],
fieldProps: { label: <FormattedMessage id="headingBlock.textAlignment" defaultMessage="Text alignment" />, fullWidth: true },
}),
},
},
},
(block) => {
Expand Down
31 changes: 31 additions & 0 deletions admin/src/common/blocks/StandaloneHeadingBlock.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import { BlockCategory, createCompositeBlock, createCompositeBlockSelectField } from "@comet/blocks-admin";
import { StandaloneHeadingBlockData } from "@src/blocks.generated";
import { HeadingBlock } from "@src/common/blocks/HeadingBlock";
import * as React from "react";
import { FormattedMessage } from "react-intl";

export const StandaloneHeadingBlock = createCompositeBlock(
{
name: "StandaloneHeading",
displayName: <FormattedMessage id="standaloneHeading.displayName" defaultMessage="Heading" />,
blocks: {
heading: {
block: HeadingBlock,
},
textAlignment: {
block: createCompositeBlockSelectField<StandaloneHeadingBlockData["textAlignment"]>({
defaultValue: "left",
options: [
{ value: "left", label: <FormattedMessage id="standaloneHeading.textAlignment.left" defaultMessage="left" /> },
{ value: "center", label: <FormattedMessage id="standaloneHeading.textAlignment.center" defaultMessage="center" /> },
],
fieldProps: { label: <FormattedMessage id="standaloneHeading.textAlignment" defaultMessage="Text alignment" />, fullWidth: true },
}),
},
},
},
(block) => {
block.category = BlockCategory.TextAndContent;
return block;
},
);
4 changes: 2 additions & 2 deletions admin/src/documents/pages/blocks/ColumnsBlock.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,11 @@ import {
} from "@comet/blocks-admin";
import { AnchorBlock } from "@comet/cms-admin";
import { AccordionBlock } from "@src/common/blocks/AccordionBlock";
import { HeadingBlock } from "@src/common/blocks/HeadingBlock";
import { MediaGalleryBlock } from "@src/common/blocks/MediaGalleryBlock";
import { RichTextBlock } from "@src/common/blocks/RichTextBlock";
import { SpaceBlock } from "@src/common/blocks/SpaceBlock";
import { StandaloneCallToActionListBlock } from "@src/common/blocks/StandaloneCallToActionListBlock";
import { StandaloneHeadingBlock } from "@src/common/blocks/StandaloneHeadingBlock";
import { StandaloneMediaBlock } from "@src/common/blocks/StandaloneMediaBlock";
import { FormattedMessage } from "react-intl";

Expand Down Expand Up @@ -118,7 +118,7 @@ const ColumnsContentBlock = createBlocksBlock({
anchor: AnchorBlock,
richtext: RichTextBlock,
space: SpaceBlock,
heading: HeadingBlock,
heading: StandaloneHeadingBlock,
callToActionList: StandaloneCallToActionListBlock,
media: StandaloneMediaBlock,
mediaGallery: MediaGalleryBlock,
Expand Down
4 changes: 2 additions & 2 deletions admin/src/documents/pages/blocks/ContentGroupBlock.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@ import { BlockCategory, createBlocksBlock, createCompositeBlock, createComposite
import { AnchorBlock } from "@comet/cms-admin";
import { ContentGroupBlockData } from "@src/blocks.generated";
import { AccordionBlock } from "@src/common/blocks/AccordionBlock";
import { HeadingBlock } from "@src/common/blocks/HeadingBlock";
import { MediaGalleryBlock } from "@src/common/blocks/MediaGalleryBlock";
import { RichTextBlock } from "@src/common/blocks/RichTextBlock";
import { SpaceBlock } from "@src/common/blocks/SpaceBlock";
import { StandaloneCallToActionListBlock } from "@src/common/blocks/StandaloneCallToActionListBlock";
import { StandaloneHeadingBlock } from "@src/common/blocks/StandaloneHeadingBlock";
import { StandaloneMediaBlock } from "@src/common/blocks/StandaloneMediaBlock";
import { ColumnsBlock } from "@src/documents/pages/blocks/ColumnsBlock";
import { KeyFactsBlock } from "@src/documents/pages/blocks/KeyFactsBlock";
Expand All @@ -28,7 +28,7 @@ const ContentGroupContentBlock = createBlocksBlock({
space: SpaceBlock,
teaser: TeaserBlock,
richtext: RichTextBlock,
heading: HeadingBlock,
heading: StandaloneHeadingBlock,
columns: ColumnsBlock,
callToActionList: StandaloneCallToActionListBlock,
keyFacts: KeyFactsBlock,
Expand Down
4 changes: 2 additions & 2 deletions admin/src/documents/pages/blocks/PageContentBlock.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import { createBlocksBlock } from "@comet/blocks-admin";
import { AnchorBlock } from "@comet/cms-admin";
import { AccordionBlock } from "@src/common/blocks/AccordionBlock";
import { HeadingBlock } from "@src/common/blocks/HeadingBlock";
import { MediaGalleryBlock } from "@src/common/blocks/MediaGalleryBlock";
import { RichTextBlock } from "@src/common/blocks/RichTextBlock";
import { SpaceBlock } from "@src/common/blocks/SpaceBlock";
import { StandaloneCallToActionListBlock } from "@src/common/blocks/StandaloneCallToActionListBlock";
import { StandaloneHeadingBlock } from "@src/common/blocks/StandaloneHeadingBlock";
import { StandaloneMediaBlock } from "@src/common/blocks/StandaloneMediaBlock";
import { BillboardTeaserBlock } from "@src/documents/pages/blocks/BillboardTeaserBlock";
import { ColumnsBlock } from "@src/documents/pages/blocks/ColumnsBlock";
Expand All @@ -22,7 +22,7 @@ export const PageContentBlock = createBlocksBlock({
space: SpaceBlock,
teaser: TeaserBlock,
richtext: RichTextBlock,
heading: HeadingBlock,
heading: StandaloneHeadingBlock,
columns: ColumnsBlock,
callToActionList: StandaloneCallToActionListBlock,
keyFacts: KeyFactsBlock,
Expand Down
71 changes: 45 additions & 26 deletions api/block-meta.json
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@
"kind": "OneOfBlocks",
"blocks": {
"richtext": "RichText",
"heading": "Heading",
"heading": "StandaloneHeading",
"space": "Space",
"callToActionList": "StandaloneCallToActionList"
},
Expand Down Expand Up @@ -121,7 +121,7 @@
"kind": "OneOfBlocks",
"blocks": {
"richtext": "RichText",
"heading": "Heading",
"heading": "StandaloneHeading",
"space": "Space",
"callToActionList": "StandaloneCallToActionList"
},
Expand Down Expand Up @@ -531,7 +531,7 @@
"anchor": "Anchor",
"richtext": "RichText",
"space": "Space",
"heading": "Heading",
"heading": "StandaloneHeading",
"callToActionList": "StandaloneCallToActionList",
"media": "StandaloneMedia",
"mediaGallery": "MediaGallery"
Expand Down Expand Up @@ -572,7 +572,7 @@
"anchor": "Anchor",
"richtext": "RichText",
"space": "Space",
"heading": "Heading",
"heading": "StandaloneHeading",
"callToActionList": "StandaloneCallToActionList",
"media": "StandaloneMedia",
"mediaGallery": "MediaGallery"
Expand Down Expand Up @@ -656,7 +656,7 @@
"space": "Space",
"teaser": "Teaser",
"richtext": "RichText",
"heading": "Heading",
"heading": "StandaloneHeading",
"columns": "Columns",
"callToActionList": "StandaloneCallToActionList",
"keyFacts": "KeyFacts",
Expand Down Expand Up @@ -700,7 +700,7 @@
"space": "Space",
"teaser": "Teaser",
"richtext": "RichText",
"heading": "Heading",
"heading": "StandaloneHeading",
"columns": "Columns",
"callToActionList": "StandaloneCallToActionList",
"keyFacts": "KeyFacts",
Expand Down Expand Up @@ -1016,15 +1016,6 @@
"H6"
],
"nullable": false
},
{
"name": "textAlignment",
"kind": "Enum",
"enum": [
"left",
"center"
],
"nullable": false
}
],
"inputFields": [
Expand Down Expand Up @@ -1052,15 +1043,6 @@
"H6"
],
"nullable": false
},
{
"name": "textAlignment",
"kind": "Enum",
"enum": [
"left",
"center"
],
"nullable": false
}
]
},
Expand Down Expand Up @@ -1575,7 +1557,7 @@
"space": "Space",
"teaser": "Teaser",
"richtext": "RichText",
"heading": "Heading",
"heading": "StandaloneHeading",
"columns": "Columns",
"callToActionList": "StandaloneCallToActionList",
"keyFacts": "KeyFacts",
Expand Down Expand Up @@ -1621,7 +1603,7 @@
"space": "Space",
"teaser": "Teaser",
"richtext": "RichText",
"heading": "Heading",
"heading": "StandaloneHeading",
"columns": "Columns",
"callToActionList": "StandaloneCallToActionList",
"keyFacts": "KeyFacts",
Expand Down Expand Up @@ -2305,6 +2287,43 @@
}
]
},
{
"name": "StandaloneHeading",
"fields": [
{
"name": "heading",
"kind": "Block",
"block": "Heading",
"nullable": false
},
{
"name": "textAlignment",
"kind": "Enum",
"enum": [
"left",
"center"
],
"nullable": false
}
],
"inputFields": [
{
"name": "heading",
"kind": "Block",
"block": "Heading",
"nullable": false
},
{
"name": "textAlignment",
"kind": "Enum",
"enum": [
"left",
"center"
],
"nullable": false
}
]
},
{
"name": "StandaloneMedia",
"fields": [
Expand Down
4 changes: 2 additions & 2 deletions api/src/common/blocks/accordion-item.block.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,17 +11,17 @@ import {
inputToData,
} from "@comet/blocks-api";
import { IsUndefinable } from "@comet/cms-api";
import { HeadingBlock } from "@src/common/blocks/heading.block";
import { RichTextBlock } from "@src/common/blocks/rich-text.block";
import { SpaceBlock } from "@src/common/blocks/space.block";
import { StandaloneCallToActionListBlock } from "@src/common/blocks/standalone-call-to-action-list.block";
import { StandaloneHeadingBlock } from "@src/common/blocks/standalone-heading.block";
import { IsBoolean, IsString } from "class-validator";

const AccordionContentBlock = createBlocksBlock(
{
supportedBlocks: {
richtext: RichTextBlock,
heading: HeadingBlock,
heading: StandaloneHeadingBlock,
space: SpaceBlock,
callToActionList: StandaloneCallToActionListBlock,
},
Expand Down
12 changes: 0 additions & 12 deletions api/src/common/blocks/heading.block.ts
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,6 @@ enum HeadlineTag {
H6 = "H6",
}

enum TextAlignment {
left = "left",
center = "center",
}

class HeadingBlockData extends BlockData {
@ChildBlock(RichTextBlock)
eyebrow: BlockDataInterface;
Expand All @@ -36,9 +31,6 @@ class HeadingBlockData extends BlockData {

@BlockField({ type: "enum", enum: HeadlineTag })
htmlTag: HeadlineTag;

@BlockField({ type: "enum", enum: TextAlignment })
textAlignment: TextAlignment;
}

class HeadingBlockInput extends BlockInput {
Expand All @@ -52,10 +44,6 @@ class HeadingBlockInput extends BlockInput {
@BlockField({ type: "enum", enum: HeadlineTag })
htmlTag: HeadlineTag;

@IsEnum(TextAlignment)
@BlockField({ type: "enum", enum: TextAlignment })
textAlignment: TextAlignment;

transformToBlockData(): HeadingBlockData {
return inputToData(HeadingBlockData, this);
}
Expand Down
43 changes: 43 additions & 0 deletions api/src/common/blocks/standalone-heading.block.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import {
BlockData,
BlockDataInterface,
BlockField,
BlockInput,
ChildBlock,
ChildBlockInput,
createBlock,
ExtractBlockInput,
inputToData,
} from "@comet/blocks-api";
import { HeadingBlock } from "@src/common/blocks/heading.block";
import { IsEnum } from "class-validator";

enum TextAlignment {
left = "left",
center = "center",
}

class StandaloneHeadingBlockData extends BlockData {
@ChildBlock(HeadingBlock)
heading: BlockDataInterface;

@BlockField({ type: "enum", enum: TextAlignment })
textAlignment: TextAlignment;
}

class StandaloneHeadingBlockInput extends BlockInput {
@ChildBlockInput(HeadingBlock)
heading: ExtractBlockInput<typeof HeadingBlock>;

@IsEnum(TextAlignment)
@BlockField({ type: "enum", enum: TextAlignment })
textAlignment: TextAlignment;

transformToBlockData(): StandaloneHeadingBlockData {
return inputToData(StandaloneHeadingBlockData, this);
}
}

export const StandaloneHeadingBlock = createBlock(StandaloneHeadingBlockData, StandaloneHeadingBlockInput, {
name: "StandaloneHeading",
});
Loading

0 comments on commit 816bc41

Please sign in to comment.