Templates

Overview

WP Irving comes with its own version of templates help build your Irving site. Using the same format a the Components API, you can rapidly iterate and build templates.

/your-theme/templates/single.json

{
  "page": [
    {
      "name": "irving/body-wrapper",
      "children": [
        {
          "name": "irving/heading",
          "config": {
            "tag": "h1"
          },
          "children": [
            { "name": "post/title" }
            {
              "name": "post/content",
              "config": {
                "themeName": "body"
              }
            }
          ]
        }
      ]
    }
  ]
}

Quick Start

• Create a new folder in your theme called templates.
• Create defaults.json and index.json in this new directory.

The defaults.json file will render to the defaults key as explained in the Context docs.

{
  "defaults": [
    {
      "name": "irving/body-wrapper",
      "children": [
        "Loading..."
      ]
    }
  ]
}

The index.json file will populate page key for the response.

{
  "page": [
    {
      "name": "irving/body-wrapper",
      "children": [
        "Loaded!"
      ]
    }
  ]
}

Routing

WP Irving implements the same logic as the WP Template Hierarchy. This allows developers to follow already documented and well understood conventions when writing a theme.

Template Parsing

When a request is made to a components API, WP Irving will search for your /templates/ and load accordingly. It will take these JSON templates and parse them.

Template Parts

Any component with a namespace of template-parts/component-name will automatically look for a corresponding component-name.json file in a neighboring /your-theme/template-parts/ directory. The parser will locate the template part JSON and set any components as the children of the template-parts/component that called it.

Data Provider

Tbd.

Callbacks

Upon output, the parser will check the component registry (see below) and execute any registered callbacks.

Components

WP Irving

Component Registry and Autoloading

Structure

An example component,

+-- /components/example/
| +-- component.json // Component definition.
| +-- index.js // React component.
| +-- index.php // WordPress registration.
| +-- /themes/
| | +-- index.js
| | +-- primary.js
| | +-- secondary.js

component.json

This file is responsible for defining most of the component, and is utilized both client and serverside.

{
  "name": "wp-irving/example",
  "mapTo": "fragment",
  "category": "Common",
  "description": "Example component to demo and document the component structure.",
  "config": {
    "name": {
      "type": "string",
      "required": true
    }
  },
  "data_consumer": [ "wp-irving/postId" ],
  "data_provider": [ "wp-irving/postId" ]
}

index.js

This your react component.

index.php

This file will be autoloaded by WP Irving. It's primary purpose is to register the component via JSON and allow developers to easily write callbacks.

Component Class

WP Irving offers a component class which is used by the parser to validate components. Every JSON component gets parsed into an instance of this class.

Component Config Schema

(Needs example)