feature: add grouping block #257

MarleenEliza · 2025-03-13T08:58:32Z

Changes

based on Split PagePartialBlock into component to group content and component to reuse content #256 , adds a GroupingBlock with GroupingItemBlock.

This is meant to replace a part of the Page Partial Block functions, but since the editing of the Page Partial Block is a breaking change that will impact already existing Page Partial Blocks, this change will be dealt with in a different PR.
This PR only adds a GroupingBlock which is a non-breaking change.

Associated issue

#256 (non breaking half)

How to test

Checklist

I have performed a self-review of my own code
I have made sure that my PR is easy to review (not too big, includes comments)
I have made updated relevant documentation files (in project README, docs/, etc)
I have added a decision log entry if the change affects the architecture or changes a significant technology
I have notified a reviewer

cloudflare-workers-and-pages · 2025-03-13T09:03:43Z

Deploying head-start with Cloudflare Pages

Latest commit:	`1ef7394`
Status:	✅ Deploy successful!
Preview URL:	https://04c6e922.head-start.pages.dev
Branch Preview URL:	https://256-add-groupingblock.head-start.pages.dev

View logs

MarleenEliza

@jurgenbelien Could you have a look at this PR? It is non breaking and add the GroupingBlock only

MarleenEliza · 2025-03-13T09:04:49Z

src/blocks/GroupingBlock/GroupingBlock.test.ts

+import GroupingBlock, { type Props } from './GroupingBlock.astro';
+
+describe('GroupingBlock', () => {
+  test('renders a stack layout without a title when layout is "stack-untitled"', async () => {


Same layout tests as done previously on Page Partial

Let's not duplicate it. Remove the PagePartial tests that are about rendering it with a certain layout, and let the PagePartialBlock use the GroupingBlock to render.

MarleenEliza · 2025-03-13T09:08:20Z

src/blocks/GroupingBlock/GroupingBlock.astro

+type GroupingItem = {
+  title: string;
+  blocks: AnyBlock[];
+};


GroupingItem is only used inside GroupingBlock and does not exsist as a separate Block the content editor can add.

Note that you do have a Fragment for this that you can import...

jurgenbelien

Let's make sure the grouping logic is only in grouping block, and PagePartial uses the logic in GroupingBlock to render it (for the time being)

jurgenbelien · 2025-03-13T12:36:24Z

src/blocks/GroupingBlock/GroupingItemBlock/GroupingItemBlock.fragment.graphql

I think we can move this out of it's containing folder, and put the whole fragment definition inside of the other block's fragment file

jurgenbelien · 2025-03-13T12:45:32Z

src/blocks/GroupingBlock/GroupingBlock.test.ts

+import GroupingBlock, { type Props } from './GroupingBlock.astro';
+
+describe('GroupingBlock', () => {
+  test('renders a stack layout without a title when layout is "stack-untitled"', async () => {


Let's not duplicate it. Remove the PagePartial tests that are about rendering it with a certain layout, and let the PagePartialBlock use the GroupingBlock to render.

jurgenbelien · 2025-03-13T12:46:29Z

src/blocks/GroupingBlock/GroupingBlock.astro

+type GroupingItem = {
+  title: string;
+  blocks: AnyBlock[];
+};


Note that you do have a Fragment for this that you can import...

jurgenbelien · 2025-03-13T12:47:06Z

config/datocms/migrations/1741855116_addGroupingBlock.ts

+          'BRbU6VwTRgmG5SbwUs0rBg',
+          'F60ZY1wFSW2qbvh99poj3g',
+          'PAk40zGjQJCcDXXPgygUrA',
+          'QYfZyBzIRWKxA1MinIR0aQ',
+          'TBuD6qQOSDy6i9dM3T_XEA',
+          'VZvVfu52RZK81WG0Dxp-FQ',
+          'V80liDVtRC-UYgd3Sm-dXg',
+          'ZdBokLsWRgKKjHrKeJzdpw',
+          'gezG9nO7SfaiWcWnp-HNqw',
+          '0SxYNS2CR1it_5LHYWuEQg',


Consider writing this in a nondestructive way. See #245

For this migration I'd say do the following for pages and homepage:

const homePageBodyBlocks = (await client.fields.find("home_page::body_blocks")) .validators?.rich_text_blocks?.item_types || []; await client.fields.update('pUj2PObgTyC-8X4lvZLMBA', { validators: { rich_text_blocks: { item_types: [ ...homePageBodyBlocks, // grouping block.

MarleenEliza · 2025-03-14T10:26:46Z

src/blocks/PagePartialBlock/PagePartialBlock.astro

+  ...block,
+  __typename: 'GroupingBlockRecord',
+  items: block.items.map(item => ({
+    title: item.title,
+    blocks: item.blocks as GroupingBlockFragment['items'][number]['blocks'],
+    __typename: 'GroupingItemBlockRecord'
+  }))


Not a very elegant way of typing, but mind that this is temporary

jurgenbelien · 2025-03-14T10:26:33Z

config/datocms/migrations/1741855116_addGroupingBlock.ts

+  );
+
+  console.log(
+    'Create block model "\uD83D\uDDC2\uFE0F Grouping Item Block" (`grouping_item_block`)',


Should we maybe name it GroupingItem instead of GroupingItemBlock? It should only be used inside the GroupingBlock, and should not be in AnyBlock.

jurgenbelien · 2025-03-14T10:28:27Z

src/blocks/GroupingBlock/GroupingBlock.astro

+    block: GroupingBlockFragment
+}
+export type GroupingItem = GroupingItemBlockFragment & {
+    blocks: AnyBlock[];


I would not expect AnyBlock here, the definition of blocks is in GroupItem(Block)Fragment

jurgenbelien · 2025-03-14T10:29:19Z

src/blocks/GroupingBlock/GroupingBlock.fragment.graphql

@@ -0,0 +1,12 @@
+#import './GroupingItemBlock.fragment.graphql'


Paste the contents of this fragment underneath the GroupingBlock fragment

MarleenEliza force-pushed the 256-add-groupingblock branch from 7d88d5e to 77771c2 Compare March 13, 2025 09:03

MarleenEliza commented Mar 13, 2025

View reviewed changes

MarleenEliza requested a review from jurgenbelien March 13, 2025 09:09

MarleenEliza force-pushed the 256-add-groupingblock branch from 77771c2 to c042538 Compare March 13, 2025 09:28

add grouping block

d6feeb6

MarleenEliza force-pushed the 256-add-groupingblock branch from c042538 to d6feeb6 Compare March 13, 2025 09:44

MarleenEliza changed the title ~~add grouping block~~ feature: add grouping block Mar 13, 2025

jurgenbelien reviewed Mar 13, 2025

View reviewed changes

keep page partial functionality

1ef7394

MarleenEliza force-pushed the 256-add-groupingblock branch from 9f2c445 to 1ef7394 Compare March 14, 2025 08:09

jurgenbelien self-requested a review March 14, 2025 10:24

MarleenEliza commented Mar 14, 2025

View reviewed changes

jurgenbelien reviewed Mar 14, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feature: add grouping block #257

feature: add grouping block #257

MarleenEliza commented Mar 13, 2025 •

edited

Loading

cloudflare-workers-and-pages bot commented Mar 13, 2025 •

edited

Loading

MarleenEliza left a comment

MarleenEliza Mar 13, 2025

jurgenbelien Mar 13, 2025

MarleenEliza Mar 13, 2025

jurgenbelien Mar 13, 2025

jurgenbelien left a comment

jurgenbelien Mar 13, 2025

jurgenbelien Mar 13, 2025

jurgenbelien Mar 13, 2025

jurgenbelien Mar 13, 2025

MarleenEliza Mar 14, 2025

jurgenbelien Mar 14, 2025

jurgenbelien Mar 14, 2025

jurgenbelien Mar 14, 2025

		@@ -0,0 +1,12 @@
		#import './GroupingItemBlock.fragment.graphql'

feature: add grouping block #257

Are you sure you want to change the base?

feature: add grouping block #257

Conversation

MarleenEliza commented Mar 13, 2025 • edited Loading

Changes

Associated issue

How to test

Checklist

cloudflare-workers-and-pages bot commented Mar 13, 2025 • edited Loading

Deploying head-start with Cloudflare Pages

MarleenEliza left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jurgenbelien left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MarleenEliza commented Mar 13, 2025 •

edited

Loading

cloudflare-workers-and-pages bot commented Mar 13, 2025 •

edited

Loading