example: Blocks rendering in Next.js (pages/mocked graphql calls)

[moonmeister]

This serves as a playground for us to create the code that the CLI will eventually generate for users

[ahuseyn]

In this example we will demonstrate how to render WordPress Blocks in a structured and customizable manner, within the Next.js project. We will use wp-graphql-content-blocks to fetch structured blocks data and include the appropriate fragments for each block. We will also create react components for the most common blocks:

• Paragraph
• Heading
• List
• Quote
• Code
• Preformatted
• Table
• Image
• Audio
• Video
• Buttons
• Columns
• Group
• Row
• Separator
• Embed

[moonmeister]

@ahuseyn That looks like a pretty good list. I'd just use whatever blocks are in the @faustwp/blocks packages. If by fragments you mean GraphQL fragments, I think that's outside the scope of this example. Our focus here would be on rendering the data, not fetching it. Like the issue says let's just mock WPGraphQL responses. Unless anyone objects, happy to hear our other opinions.

[ahuseyn]

@moonmeister thanks for the feedback. I agree that we should keep the scope of the example tight. I have one concern about the use case though. If we're intending to provide reusable "plug and play" block snippets here, I think it would be beneficial to provide gql fragments for the blocks as well, along with block components, just as @faustwp/blocks does. So they can copy and paste the blocks, include the fragments and start using it immediately. What do you think?

[moonmeister]

I have some thoughts on how we do this. the way Faust does it is really terrible. But also I don't want to get into the weeds of integrating fragments and the client. Maybe we write the fragments but still mock the response? How does that feel?

[ahuseyn]

Absolutely, that was my initial thinking as well. I'll add fragments for reusability and use mock the response to keep the scope tight.

[ahuseyn]

Draft PR: #102