diff --git a/src/pages/docs/how-to/authentication/index.mdx b/src/pages/docs/how-to/authentication/index.mdx index eaa9d982..e2f1ca91 100644 --- a/src/pages/docs/how-to/authentication/index.mdx +++ b/src/pages/docs/how-to/authentication/index.mdx @@ -113,7 +113,7 @@ Here are some things you can do to continue to test and add to your auth strateg - You can verify that authentication is working by adding a `console.log()` with the current user's name to check whether they are being authenticated properly. Using the above code example, it would look like this: -```js +```js title="pages/gated/index.js" import { useAuth, getApolloAuthClient, useLogout } from "@faustwp/core"; import { gql, useQuery } from "@apollo/client"; @@ -142,7 +142,7 @@ function AuthenticatedView() { } // Console log the current user's name to verify authentication - console.log("Authenticated user's name:", data?.viewer?.name); + console.log("Authenticated user's name:", data?.viewer?.name); // [!code ++] // Rest of your component ``` diff --git a/src/pages/docs/how-to/post-previews/index.mdx b/src/pages/docs/how-to/post-previews/index.mdx index 07335c96..8e37dc24 100644 --- a/src/pages/docs/how-to/post-previews/index.mdx +++ b/src/pages/docs/how-to/post-previews/index.mdx @@ -43,7 +43,7 @@ export default function MyApp({ Component, pageProps }) { With your headless secret set and the `authorizeHandler` ready to handle requests, you can now create a Next.js [page](https://nextjs.org/docs/basic-features/pages) for previews. Create a file at `pages/preview.js` with the following code: -```js +```js title="pages/preview.js" import { WordPressTemplate } from "@faustwp/core"; export default function Preview(props) { @@ -59,7 +59,7 @@ Just a note, we don't use the `getWordPressProps` here as opposed in some other Now that we have everything set up, it is time to add post previews to your WPGraphQL queries. Navigate to your `wp-templates` folder. You should have a `single.js` from the template hierarchy step. This `single.js` file is the component that is responsible for rendering post-type data from WordPress. In your `single.js` file, add this code block: -```js +```js title="wp-templates/single.js" import { gql } from "@apollo/client"; export default function Component(props) { diff --git a/src/pages/docs/how-to/rendering-blocks-with-the-template-hierarchy/index.mdx b/src/pages/docs/how-to/rendering-blocks-with-the-template-hierarchy/index.mdx index ccec8ea0..e763a3d8 100644 --- a/src/pages/docs/how-to/rendering-blocks-with-the-template-hierarchy/index.mdx +++ b/src/pages/docs/how-to/rendering-blocks-with-the-template-hierarchy/index.mdx @@ -28,24 +28,22 @@ Set up the [template hierarchy](/docs/how-to/template-hierarchy/) in Faust.js. The `@faust/blocks` package contains a small reference list of blocks that you can use in your site. To use them, you need to import the relevant blocks into your block list: -JavaScript - -``` +```js title="wp-blocks/index.js" // wp-blocks/index.js -import { CoreBlocks } from '@faustwp/blocks'; +import { CoreBlocks } from "@faustwp/blocks"; export default { - CoreParagraph: CoreBlocks.CoreParagraph, - CoreColumns: CoreBlocks.CoreColumns, - CoreColumn: CoreBlocks.CoreColumn, - CoreCode: CoreBlocks.CoreCode, - CoreQuote: CoreBlocks.CoreQuote, - CoreImage: CoreBlocks.CoreImage, - CoreSeparator: CoreBlocks.CoreSeparator, - CoreList: CoreBlocks.CoreList, - CoreButton: CoreBlocks.CoreButton, - CoreButtons: CoreBlocks.CoreButtons, - CoreHeading: CoreBlocks.CoreHeading, + CoreParagraph: CoreBlocks.CoreParagraph, + CoreColumns: CoreBlocks.CoreColumns, + CoreColumn: CoreBlocks.CoreColumn, + CoreCode: CoreBlocks.CoreCode, + CoreQuote: CoreBlocks.CoreQuote, + CoreImage: CoreBlocks.CoreImage, + CoreSeparator: CoreBlocks.CoreSeparator, + CoreList: CoreBlocks.CoreList, + CoreButton: CoreBlocks.CoreButton, + CoreButtons: CoreBlocks.CoreButtons, + CoreHeading: CoreBlocks.CoreHeading, }; ``` @@ -53,11 +51,8 @@ You can add the code block above to your `wp-blocks/index.js` file. Then in your template query, you need to pass the provided fragment entries: -JavaScript - -``` -// wp-templates/front-page.js -import blocks from '../wp-blocks'; +```js title=" wp-templates/front-page.js" +import blocks from "../wp-blocks"; Component.query = gql` ${blocks.CoreParagraph.fragments.entry} @@ -103,10 +98,8 @@ Component.query = gql` Now that you have all the queries ready, you can render the blocks using the provided `flatListToHierarchical` method and `WordPressBlocksViewer`: -JavaScript +```js title="wp-templates/front-page.js" -``` -// wp-templates/front-page.js import { gql } from '@apollo/client'; import { flatListToHierarchical } from '@faustwp/core'; @@ -134,10 +127,8 @@ export default function Component({ loading, data }) { ### WordPressBlocksProvider- Theme Use -If you do not need a theme, you must pass `null` as the `theme` prop for the `WordPressBlocksProvider` like below. If you don’t pass a theme, it will fail. +If you do not need a theme, you must pass `null` as the `theme` prop for the `WordPressBlocksProvider` like the example below. If you don’t pass a theme, it will fail. -JavaScript - -``` +```js ``` diff --git a/src/pages/docs/how-to/rendering-blocks/index.mdx b/src/pages/docs/how-to/rendering-blocks/index.mdx index 6b5bec89..cfc935c1 100644 --- a/src/pages/docs/how-to/rendering-blocks/index.mdx +++ b/src/pages/docs/how-to/rendering-blocks/index.mdx @@ -52,8 +52,6 @@ In WordPress block development, a `block.json` file is a configuration file that As an example, given the following `block.json` definition of a block: -JSON - ```json title="block.json" // block.json { @@ -133,7 +131,7 @@ export default { To query specific block data you need to define that data in the `contentBlock` as the appropriate type. Here is an example query to get all the rendered HTML from the `editorBlocks` field: -```gql +```graphql query GetBlocksByURI($uri: ID!) { post(id: $uri, idType: URI) { title