Component Schema

Every component has a schema.json file which is used to define the component's props.

We prefer using JSON Schemas to describe our props over something like PropTypes. Using a .json file allows our React and PHP code to validate and enforce schemas.

What is the schema file?

Intro to JSON Schemas

Troubleshooting

Structure

Usage

• Every component has a schema.json file.
• WordPress uses the schema to determine if the data structure is correct, and will throw an error otherwise.

Blank Schema

• $schema - We use the draft-07.
• $id - Unique ID for this schema. Uses the component's dash-case name.
• type - This schema represents the props object for this component, so our top-level prop type is also object.
• properties - When "type": "object" is used, the properties keys are used to drive deeper into the schema shape.

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "$id": "/schemas/component-name.schema.json",
  "type": "object",
  "properties": {}
}

Schema property examples

Text

{
	"default": "foo",
	"enum": [
		"foo",
		"bar"
	],
	"type": "string"
}

Object

{
	"type": "object",
	"properties": {}
}

Array (strings)

{
	"items": {
		"type": "string"
	},
	"type": "array"
}

Array (objects)

// Schema
{
	"items": {
		"type": "object",
		"properties": {
			"name": {
				"type": "string"
			}
		}
	},
	"type": "array"
}

Boolean

{
	"default": true,
	"type": "boolean"
}

Integer

{
	"default": 10,
	"type": "integer"
}

References

Nest other schemas. $ref resolves to the schema's $id field.

Note: The Nova Manifest uses the schema $refs in order to recursively set defaults. Without it, your component data will not hydrate as expected.

{
	"link": {
	  "$ref": "https://nova.pmcdev.io/schemas/link/schema.json#"
	},
}

Requiring Fields

Use the required key to define an array of required properties. This can be used on any "type": "object" schema.

{
	"required": [
		"propertyName"
	]
}