Support <!--nextpage--> for WordPress content

[jasonbahl]

WordPress allows for pages to be split into multiple pages with the <!--nextpage--> tag.

Then you can navigate like so: /page, /page/2, /page/3, etc.

I'm not exactly sure how this feature should be supported, but we should consider some options.

[progital]

My suggestion (possibly naive) is having a flag (e.g. raw | paginated) and then getting pages as separate posts/nodes.

[jasonbahl]

My instinct is this should happen in the creation of pages. I think this construct is more a client thing than a datasource thing.

The node is the same thing. It's a post with content that has a <!--nextpage--> tag in it. You can get to the page by ID, Global ID, Slug, etc. . .if we treated the content after <!--nextpage--> as a separate node, that could complicate a lot of other issues in the Graph.

For Gatsby, I think during the createPages() cycle you would parse the content, determine how many <!--nextpage--> breaks there are, then pass the page numbers through context.

So, something like the following(pseudo code):

const result = await graphql(`
    {
      allWpPost {
        nodes {
          id
          uri
          content
        }
      }
    }
  `)

  const { nodes } = result.data.allWpPost

  nodes.forEach((doc) => {

    pageCount = contentPageCount( doc.content  ); // <-- Some function that would parse the content and determine how many pages there are

    if ( pageCount.length )
      for( var i = 0; i < pageCount.length; i++) {
        actions.createPage({
          path: `${doc.uri}/${i}`, // <-- create the page at each path
          component: require.resolve(`./src/templates/your-template.js`),
          context: {
            id: doc.id,
            uri: doc.uri,
            pageCount: pageCount <-- Pass the page count to help with page number UI
            currentPage: i <-- Pass the current page number to help with page number UI
          },
        })
      }
    } else {
      actions.createPage({
          path: doc.uri,
          component: require.resolve(`./src/templates/your-template.js`),
          context: {
            id: doc.id,
            uri: doc.uri,
            pageCount: null
            currentPage: null
          },
        })
  }

[TylerBarnes]

This is a good suggestion but I don't think this should be the responsibility of the source plugin - a theme or WP page builder plugin will need to implement this. Closing it here (even though it's a good idea) since we won't be working on it as part of this plugin.