Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Docs: Add variations key to block.json JSON schema definition #42539

Merged
merged 8 commits into from
Jul 20, 2022
40 changes: 40 additions & 0 deletions docs/reference-guides/block-api/block-metadata.md
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,15 @@ Starting in WordPress 5.8 release, we encourage using the `block.json` metadata
"message": "This is a notice!"
}
},
"variations": [
{
"name": "example",
"title": "Example",
"attributes": {
"message": "This is an example!"
},
}
]
"editorScript": "file:./build/index.js",
"script": "file:./build/script.js",
"viewScript": "file:./build/view.js",
Expand Down Expand Up @@ -421,6 +430,37 @@ It provides structured example data for the block. This data is used to construc

See the [the example documentation](/docs/reference-guides/block-api/block-registration.md#example-optional) for more details.

### Variations

- Type: `object[]`
- Optional
- Localized: Yes (`title`, `description`, and `keywords` of each variation only)
- Property: `variations`
fabiankaegy marked this conversation as resolved.
Show resolved Hide resolved
- Since: `WordPress 5.9.0`

```json
{
fabiankaegy marked this conversation as resolved.
Show resolved Hide resolved
"variations": [
{
"name": "example",
"title": "Example",
"attributes": {
"level": 2,
"message": "This is an example!"
},
"scope": [ "block" ],
"isActive": [ "level" ]
}
]
}
```

Block Variations is the API that allows a block to have similar versions of it, but all these versions share some common functionality. Each block variation is differentiated from the others by setting some initial attributes or inner blocks. Then at the time when a block is inserted these attributes and/or inner blocks are applied.

_Note: In JavaScript you can provide a function for the `isActive` property, and a React element for the `icon`. In the `block.json` file both only support strings_

See the [the variations documentation](/docs/reference-guides/block-api/block-variations.md) for more details.

### Editor Script

- Type: `WPDefinedAsset` ([learn more](#wpdefinedasset))
Expand Down
87 changes: 87 additions & 0 deletions schemas/json/block.json
Original file line number Diff line number Diff line change
Expand Up @@ -482,6 +482,93 @@
}
}
]
},
"variations": {
"type": "array",
"description": "Block Variations is the API that allows a block to have similar versions of it, but all these versions share some common functionality.",
"items": {
"type": "object",
"required": [ "name", "title" ],
"additionalProperties": false,
"properties": {
"name": {
"type": "string",
"description": "The unique and machine-readable name."
},
"title": {
"type": "string",
"description": "A human-readable variation title."
},
"description": {
"type": "string",
"description": "A detailed variation description."
},
"category": {
"description": "A category classification, used in search interfaces to arrange block types by category.",
"anyOf": [
{
"type": "string"
},
{
"enum": [
"text",
"media",
"design",
"widgets",
"theme",
"embed"
]
}
]
},
"icon": {
"description": "An icon helping to visualize the variation. It can have the same shape as the block type.",
"type": "string"
},
"isDefault": {
"type": "boolean",
"default": false,
"description": "Indicates whether the current variation is the default one."
},
"attributes": {
"type": "object",
"description": "Values that override block attributes."
},
"innerBlocks": {
"type": "array",
"items": {
"type": "array"
},
"description": "Initial configuration of nested blocks."
},
"example": {
"type": "object",
"description": "Example provides structured data for the block preview. You can set to undefined to disable the preview shown for the block type."
},
"scope": {
"type": "array",
"description": "The list of scopes where the variation is applicable.",
"items": {
"enum": [ "inserter", "block", "transform" ]
},
"default": [ "inseter", "block" ]
},
"keywords": {
"type": "array",
"description": "An array of terms (which can be translated) that help users discover the variation while searching.",
"items": {
"type": "string"
}
},
"isActive": {
"type": "array",
"items": {
"type": "string"
},
"description": "The list of attributes that should be compared. Each attributes will be matched and the variation will be active if all of them are matching."
}
}
}
}
},
"required": [ "name", "title" ],
Expand Down