23 | ); 24 | 25 | const quote = screen.getByText( text ); 26 | 27 | expect( quote ).toBeInTheDocument(); 28 | expect( quote.parentElement.getAttribute('class') ).toEqual('container'); 29 | } ); 30 | 31 | it( 'renders a "large" quote via a className prop provided by Gutenberg', () => { 32 | render( 33 |
37 | ); 38 | 39 | const quote = screen.getByText( text ); 40 | 41 | expect( quote ).toBeInTheDocument(); 42 | expect( quote.parentElement.getAttribute('class') ).toEqual('container large'); 43 | } ); 44 | } ); 45 | 46 | -------------------------------------------------------------------------------- /components/Blocks/Quote/Quote.tsx: -------------------------------------------------------------------------------- 1 | import { BlockProps } from '../index'; 2 | import styles from './Quote.module.css'; 3 | 4 | /** 5 | * This is a styled component, for the Gutenberg Quote Block 6 | * (Block documentation: https://gogutenberg.com/blocks/quote/) 7 | * 8 | * The WordPress block will have content (passed as innerHTML): 9 | *
Before software can be reusable, it first has to be usable.
Ralph Johnson 10 | * And a className attribute that is (by default) either is-style-default or is-style-large 11 | * 12 | * The PostContent.tsx case for Quote will ensure both innerHTML and className are part of the props 13 | * 14 | * The Quote component is output as: 15 | *16 | *18 | * 19 | * Use a switch statement to assign the appropriate override style. The .container style is 20 | * our default styling and catch-all that should work even if there's no className. 21 | * 22 | * Quote.module.css contains two different styling options - default (the .container class) and large (the .large class). 23 | * 24 | * The large option results in a defined separation vertically between quote and citation, while the default 25 | * is much more compact. 26 | * 27 | * Since the style can be extended/customized within WordPress, the code here assumes there may be 28 | * other classNames -- but only supports the two current options. If additional classNames can be selected 29 | * from the WP admin UI, then declare the related styles in the CSS file and add a case statement for that style. 30 | */ 31 | 32 | type Props = BlockProps & { 33 | className?: string, 34 | }; 35 | 36 | export default function Quote ( { block: { innerHTML }, ...props } : Props ) { 37 | let style = styles.container; 38 | 39 | switch ( props.className ) { 40 | case 'is-style-large': 41 | style += ' ' + styles.large; 42 | break; 43 | // Add additional styles here 44 | default: 45 | // no additional class 46 | } 47 | 48 | return ( 49 | 53 | ); 54 | } 55 | -------------------------------------------------------------------------------- /components/Blocks/Table/Table.tsx: -------------------------------------------------------------------------------- 1 | import { BlockProps } from '../index'; 2 | 3 | export default function Table ( { block: { innerHTML }, ...props }: BlockProps ) { 4 | return ( 5 |Before software can be reusable, it first has to be usable.
Ralph Johnson 17 | *
9 | Unsupported block:
10 | {
11 | tagName &&
12 |
43 | );
44 | }
45 |
--------------------------------------------------------------------------------
/components/Blocks/index.tsx:
--------------------------------------------------------------------------------
1 | import { ComponentType } from 'react';
2 | import { ContentBlock } from '@/graphql/generated';
3 | import ClassicEditorBlock from './ClassicEditorBlock/ClassicEditorBlock';
4 | import Heading from './Heading/Heading';
5 | import ImageBlock from './ImageBlock/ImageBlock';
6 | import List from './List/List';
7 | import Paragraph from './Paragraph/Paragraph';
8 | import Quote from './Quote/Quote';
9 | import Table from './Table/Table';
10 |
11 | export interface BlockProps {
12 | block: ContentBlock,
13 | }
14 |
15 | export type PostContentBlockMap = {
16 | [ key: string ]: ComponentTypeUnsupported block: {name}
10 | {
11 | tagName &&
12 | {tagName}
13 | } 14 | { 15 | html && 16 |17 | {html} 18 |19 | } 20 | { 21 | attributes.length > 0 && ( 22 |
-
23 | {
24 | attributes.map( ( attr, i ) => (
25 |
- {attr.name}: {attr.value || 'null'} 26 | ) ) 27 | } 28 |
-
34 | {
35 | innerBlocks.map( ( block, i ) => (
36 |
- {block.name} 37 | ) ) 38 | } 39 |
11 | {props.children}
12 |
13 | );
14 | }
15 |
--------------------------------------------------------------------------------
/components/ClientOnly/ClientOnly.tsx:
--------------------------------------------------------------------------------
1 | import { ReactNode, useEffect, useState } from 'react';
2 |
3 | export default function ClientOnly( props: {
4 | children: ReactNode,
5 | } ) {
6 | const [ hasMounted, setHasMounted ] = useState{props.title}
62 | {props.children} 63 |-
15 | {
16 | props.posts.map( post => (
17 |
- 18 | {post.title} 19 | 20 | ) ) 21 | } 22 |
24 | { 25 | props.previousPageLink && 26 | <> 27 | < Previous 28 | 29 | 30 | } 31 | { 32 | props.nextPageLink && 33 | Next > 34 | } 35 |
36 | 37 | ); 38 | } 39 | -------------------------------------------------------------------------------- /components/SearchForm/SearchForm.module.css: -------------------------------------------------------------------------------- 1 | .container { 2 | column-gap: 1em; 3 | display: grid; 4 | grid-template-columns: auto 100px; 5 | } 6 | 7 | .input { 8 | height: 100%; 9 | } 10 | -------------------------------------------------------------------------------- /components/SearchForm/SearchForm.tsx: -------------------------------------------------------------------------------- 1 | import { FormEvent, useRef } from 'react'; 2 | import { useRouter } from 'next/router'; 3 | import styles from './SearchForm.module.css'; 4 | 5 | type Props = { 6 | path: string, 7 | search: string, 8 | }; 9 | 10 | export default function SearchForm( props: Props ) { 11 | const ref = useRef12 | 15 | 16 | ); 17 | } 18 | 19 | -------------------------------------------------------------------------------- /components/SiteHeader/SiteHeader.tsx: -------------------------------------------------------------------------------- 1 | import { ReactNode } from 'react'; 2 | import Link from 'next/link'; 3 | 4 | type Props = { 5 | headerLink?: ReactNode, 6 | }; 7 | 8 | /** 9 | * Server-side data loading must take place in pages. If you need to load data 10 | * to render this component, you must pass it down as props (or load it client- 11 | * side.) 12 | */ 13 | export default function SiteHeader( props: Props ) { 14 | return ( 15 | <> 16 | 26 |
27 | 28 | ); 29 | } 30 | -------------------------------------------------------------------------------- /graphql/apollo-link.ts: -------------------------------------------------------------------------------- 1 | import { ApolloLink, HttpLink, from } from '@apollo/client'; 2 | import { onError } from '@apollo/client/link/error'; 3 | import { log, logError, LogContext } from '@/lib/log'; 4 | 5 | const uri = process.env.NEXT_PUBLIC_GRAPHQL_ENDPOINT; 6 | 7 | export default function getApolloLink ( requestContext: LogContext = {} ) { 8 | // If endpoint is undefined, throw for visibility. 9 | if ( 'undefined' === typeof uri ) { 10 | throw new Error( 'GraphQL endpoint is undefined' ); 11 | } 12 | 13 | return from( [ 14 | // Error link to log GraphQL errors. 15 | onError( ( { graphQLErrors, networkError } ) => { 16 | if ( graphQLErrors ) { 17 | graphQLErrors.forEach( err => { 18 | const { locations, path } = err; 19 | const context = { 20 | locations: JSON.stringify( locations ), 21 | path: JSON.stringify( path ), 22 | }; 23 | 24 | logError( err, context, requestContext ); 25 | } ); 26 | } 27 | 28 | if ( networkError ) { 29 | logError( networkError, {}, requestContext ); 30 | } 31 | } ), 32 | 33 | // Custom ApolloLink to log successful queries for debugging. 34 | new ApolloLink( ( operation, forward ) => { 35 | const { operationName, setContext, variables } = operation; 36 | 37 | const debug = { 38 | operationName, 39 | variables: JSON.stringify( variables ), 40 | }; 41 | 42 | const startTime = Date.now(); 43 | 44 | setContext( ( { headers = {} } ) => ( { 45 | headers: { 46 | ...headers, 47 | // Here is where you can set custom request headers for your GraphQL 48 | // requests. If the request is client-side, it must be allowed by the 49 | // CORS policy in WPGraphQL. 50 | }, 51 | } ) ); 52 | 53 | return forward( operation ) 54 | .map( data => { 55 | const response = operation.getContext().response; 56 | const context = { 57 | ...debug, 58 | cacheStatus: response?.headers?.get( 'x-cache' ), 59 | cacheAge: response?.headers?.get( 'age' ), 60 | payloadSize: response?.body?.bytesWritten, 61 | requestDurationInMs: Date.now() - startTime, 62 | }; 63 | 64 | log( 'GraphQL request', context, requestContext ); 65 | 66 | return data; 67 | } ); 68 | } ), 69 | 70 | // Standard HttpLink to connect to GraphQL. 71 | new HttpLink( { uri } ), 72 | ] ); 73 | } 74 | -------------------------------------------------------------------------------- /graphql/apollo-provider.tsx: -------------------------------------------------------------------------------- 1 | import { ReactNode } from 'react'; 2 | import { ApolloProvider } from '@apollo/client'; 3 | import getApolloClient from './apollo'; 4 | 5 | type Props = { 6 | children: ReactNode, 7 | }; 8 | 9 | /** 10 | * This is a provider that you can *optionally* use if you have a widespread need 11 | * to load data during the client-side render. It is not in use by default. 12 | * Wrapping your app (_app.tsx) in this provider will make Apollo available for 13 | * use in your React components (e.g., useQuery) but will increase the size of 14 | * your bundle. 15 | * 16 | * If you don't have a widespread need for this, stick to getStaticProps and 17 | * getServerSideProps and enjoy a smaller bundle and more performant site. :) 18 | * 19 | * If you need to load data client-side for just a few pages, consider wrapping 20 | * just those pages. Next.js's code splitting will ensure that your other pages 21 | * retain a smaller bundle size. 22 | */ 23 | export default function ClientSideApolloProvider( props: Props ) { 24 | return ( 25 |
This decoupled WordPress site is built with WordPress VIP’s Next.js boilerplate and decoupled plugin bundle. If you’re seeing this page, it means your decoupled site has been successfully deployed. Please take a moment to read through this introduction, which supplements our public documentation and the README of this repo.
Getting started
32 |This boilerplate provides some basic functionality out-of-the-box, allowing you to view and preview your content. Explore the pages linked below and examine the code and GraphQL queries that power them. Feel free to delete this sample code or extend it for your own purposes.
33 |Your content
35 |-
36 | {
37 | props.contentTypes
38 | .map( contentType => (
39 |
- 40 | {contentType.name} 41 | 42 | ) ) 43 | } 44 |
- media library 45 |
Previewing
48 |Previewing unpublished posts or updates to published posts works out of the box. Simply click the “Preview” button in WordPress and you’ll be redirected to a one-time-use preview link on this decoupled site.
49 |
24 | {
25 | props.mediaItems.map( mediaItem => {
26 | const {
27 | altText = '',
28 | id,
29 | sourceUrl,
30 | } = mediaItem;
31 |
32 | // Each image is displayed in a fixed-height box of 100px. If the
33 | // actual height of the image is less than 100px, then use
34 | return (
35 |
42 |
53 | is in a , reset it's formatting to blend in */
287 | background: inherit;
288 | font-size: inherit;
289 | color: inherit;
290 | border: 0;
291 | padding: 0;
292 | margin: 0;
293 | }
294 |
295 | code pre {
296 | /* When is in a , reset it's formatting to blend in */
297 | display: inline;
298 | background: inherit;
299 | font-size: inherit;
300 | color: inherit;
301 | border: 0;
302 | padding: 0;
303 | margin: 0;
304 | }
305 |
306 | details {
307 | /* Make the look more "clickable" */
308 | padding: .6rem 1rem;
309 | background: var(--nc-bg-2);
310 | border: 1px solid var(--nc-bg-3);
311 | border-radius: 4px;
312 | }
313 |
314 | summary {
315 | /* Makes the look more like a "clickable" link with the pointer cursor */
316 | cursor: pointer;
317 | font-weight: bold;
318 | }
319 |
320 | details[open] {
321 | /* Adjust the padding while open */
322 | padding-bottom: .75rem;
323 | }
324 |
325 | details[open] summary {
326 | /* Adjust the padding while open */
327 | margin-bottom: 6px;
328 | }
329 |
330 | details[open]>*:last-child {
331 | /* Resets the bottom margin of the last element in the while is opened. This prevents double margins/paddings. */
332 | margin-bottom: 0;
333 | }
334 |
335 | dt {
336 | font-weight: bold;
337 | }
338 |
339 | dd::before {
340 | /* Add an arrow to data table definitions */
341 | content: '→ ';
342 | }
343 |
344 | hr {
345 | /* Reset the border of the
separator, then set a better line */
346 | border: 0;
347 | border-bottom: 1px solid var(--nc-bg-3);
348 | margin: 1rem auto;
349 | }
350 |
351 | fieldset {
352 | margin-top: 1rem;
353 | padding: 2rem;
354 | border: 1px solid var(--nc-bg-3);
355 | border-radius: 4px;
356 | }
357 |
358 | legend {
359 | padding: auto .5rem;
360 | }
361 |
362 | table {
363 | /* border-collapse sets the table's elements to share borders, rather than floating as separate "boxes". */
364 | border-collapse: collapse;
365 | width: 100%
366 | }
367 |
368 | td,
369 | th {
370 | border: 1px solid var(--nc-bg-3);
371 | text-align: left;
372 | padding: .5rem;
373 | }
374 |
375 | th {
376 | background: var(--nc-bg-2);
377 | }
378 |
379 | tr:nth-child(even) {
380 | /* Set every other cell slightly darker. Improves readability. */
381 | background: var(--nc-bg-2);
382 | }
383 |
384 | table caption {
385 | font-weight: bold;
386 | margin-bottom: .5rem;
387 | }
388 |
389 | textarea {
390 | /* Don't let the