-
Notifications
You must be signed in to change notification settings - Fork 151
-
I used WPEngine's faust-scaffold-ts repo's code for my website. This was based on Faust's "Implementing TypeScript" documentation.
I am using WordPressBlocksViewer and WordPressBlocksProvider so I can choose to customize some of their core blocks if I want to change how it is displayed or add custom blocks.
Because I am using TypeScript, the documentation on changing a core block doesn't work because their examples are not meant for TypeScript. It breaks my application. I eventually found ONE small example that only shows how to create the block but not implement it.
My code:
/wp-blocks/CoreParagraph.tsx
import { gql } from '../__generated__';
import { WordPressBlock } from '@faustwp/blocks';
import { CoreParagraphFragmentFragment } from '../__generated__/graphql';
export const CoreParagraph: WordPressBlock<CoreParagraphFragmentFragment> = (
props
) => {
return <p>{props.attributes?.content}</p>;
};
export const fragments = {
entry: gql(`
fragment CoreParagraphFragment on CoreParagraph {
attributes {
content
textColor
}
}
`),
key: `CoreParagraphFragment`
};
/wp-blocks/index.ts
import { CoreParagraph } from './CoreParagraph';
export default {
CoreParagraph
};
_app.tsx WordPressBlocksProvider implementation
import '../../faust.config';
import React, { createContext, ReactElement, ReactNode, useRef } from 'react';
import { useRouter } from 'next/router';
import { FaustProvider } from '@faustwp/core';
import '../styles/colors.scss';
import '../styles/globals.scss';
import { AppProps } from 'next/app';
import { WordPressBlocksProvider } from '@faustwp/blocks';
import blocks from '../wp-blocks/index';
import { NextPage } from 'next';
export type NextPageWithLayout = NextPage & {
getLayout?: (page: ReactElement) => ReactNode;
};
type AppPropsWithLayout = AppProps & {
Component: NextPageWithLayout;
};
export default function MyApp({ Component, pageProps }: AppPropsWithLayout) {
const router = useRouter();
const getLayout = Component.getLayout ?? ((page) => page);
return (
<FaustProvider pageProps={pageProps}>
<WordPressBlocksProvider
config={{
blocks,
theme: null
}}
>
{getLayout(<Component {...pageProps} key={router.asPath} />)}
</WordPressBlocksProvider>
</FaustProvider>
);
}
Page query with the fragment hardcoded
Component.query = gql(`
fragment CoreParagraphFragment on CoreParagraph {
attributes {
content
textColor
}
}
query GetPage($databaseId: ID!, $asPreview: Boolean = false) {
page(id: $databaseId, idType: DATABASE_ID, asPreview: $asPreview) {
title
content
editorBlocks(flat: false) {
__typename
renderedHtml
id: clientId
parentClientId
...CoreParagraphFragment
}
}
...
Error I get from the above
Screenshot 2024年03月27日 at 07 44 55
Page query with the fragment included via import
Component.query = gql(`
${components.CoreParagraph.fragments.entry}
...
Error I get from the above
Screenshot 2024年03月27日 at 07 45 26
Is anyone able to tell me what I am doing wrong?
Beta Was this translation helpful? Give feedback.