Skip to content

Commit

Permalink
Add docs
Browse files Browse the repository at this point in the history
  • Loading branch information
aristath committed Mar 12, 2021
1 parent 6134c79 commit 56d0a5a
Showing 1 changed file with 35 additions and 1 deletion.
36 changes: 35 additions & 1 deletion docs/how-to-guides/themes/theme-json.md
Original file line number Diff line number Diff line change
Expand Up @@ -477,7 +477,9 @@ These are the current typography properties supported by blocks:

There's a growing need to add more theme metadata to the theme.json. This section lists those other fields:

**customTemplates**: within this field themes can list the custom templates present in the `block-templates` folder, the keys should match the custom template name. For example, for a custom template named `my-custom-template.html`, the `theme.json` can declare what post types can use it and what's the title to show the user:
#### `customTemplates`:

within this field themes can list the custom templates present in the `block-templates` folder, the keys should match the custom template name. For example, for a custom template named `my-custom-template.html`, the `theme.json` can declare what post types can use it and what's the title to show the user:

```json
{
Expand All @@ -490,6 +492,38 @@ There's a growing need to add more theme metadata to the theme.json. This sectio
}
```

#### `skipLinks`

Within this field, themes can change the behavior of the automatic skip-link generation, or opt-out.

```json
{
"skipLinks": {
"auto": true,
"css": true,
"links": [
{
"target": "#skip-link-target",
"label": "Skip to Content"
},
{
"target": "#main-navigation",
"label": "Skip to Navigation",
"useFallbacks": false
}
]
}
}
```

Arguments:
* `auto`: (bool) Whether skip-links will be auto-generated or not. Defaults to `true`. To opt-out of the automatic skip-links, set to `false`.
* `css:` (bool) Whether CSS for the skip-link should be automatically added or not. Defaults to `true`. To opt-out and manually handle CSS for skip-links, set to `false`.
* `links`: (array) Can be used to define a custom skip-link (or multiple skip-links if needed). Each "link" can have the following:
* `target`: (string|array) The selector of the element that should be used as the target.
* `label`: (string) The skip-link's label. If omitted defaults to `Skip to content`.
* `useFallbacks`: (bool) Defaults to `true`. If a `target` is not defined, or the `target` element is not located, then the skip-link target will fallback to the 1st instance of these elements: `#skip-link-target, main, .wp-block-post-title, .wp-block-query-loop, .wp-block-post-content, .entry-content, h1, h2`. If set to false, then the fallbacks won't be added. Use in case of multiple skip-links.

## Frequently Asked Questions

### The naming schema of CSS Custom Properties
Expand Down

0 comments on commit 56d0a5a

Please sign in to comment.