Skip to content

Commit

Permalink
update all newer docs
Browse files Browse the repository at this point in the history
  • Loading branch information
aristath committed May 5, 2021
1 parent 6307e9d commit 80ed51e
Show file tree
Hide file tree
Showing 4 changed files with 24 additions and 21 deletions.
16 changes: 8 additions & 8 deletions docs/getting-started/full-site-editing.md
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
# Full Site Editing

At the highest level, the vision of Full Site Editing is to provide a collection of features that bring the familiar experience and extendability of blocks to all parts of your site rather than just post and pages. You can think of Full Site Editing as the umbrella project name for various sub-projects within Gutenberg that make this vision possible. Projects under Full Site Editing (FSE) include everything from the Site Editor, Global Styles, numerous Site/Post/Page specific blocks, Query block, Navigation block, Templates, and block themes. What follows are brief descriptions of the major pieces with more details found [here](https://github.com/WordPress/gutenberg/issues/24551):
At the highest level, the vision of Full Site Editing is to provide a collection of features that bring the familiar experience and extendability of blocks to all parts of your site rather than just post and pages. You can think of Full Site Editing as the umbrella project name for various sub-projects within Gutenberg that make this vision possible. Projects under Full Site Editing (FSE) include everything from the Site Editor, Global Styles, numerous Site/Post/Page specific blocks, Query block, Navigation block, Templates, and block themes. What follows are brief descriptions of the major pieces with more details found [here](https://github.com/WordPress/gutenberg/issues/24551):

- Site Editor: the cohesive experience that allows you to directly edit and navigate between various templates, template parts, styling options, and more.
- Template Editing: a scaled down direct editing experience allowing you to edit/change/create the template a post/page uses.
- Block Theme: work to allow for a theme that's built using templates composed using blocks that works with full site editing. More below.
- Site Editor: the cohesive experience that allows you to directly edit and navigate between various templates, template parts, styling options, and more.
- Template Editing: a scaled down direct editing experience allowing you to edit/change/create the template a post/page uses.
- Block Theme: work to allow for a theme that's built using templates composed using blocks that works with full site editing. More below.
- Styling: the feature that enables styling modifications across three levels (local blocks, theme defaults, and global modifications).
- Theme Blocks: new blocks that accomplish everything possible in traditional templates using template tags (ex: Post Author Block).
- Browsing: the feature that unlocks the ability to navigate between various entities in the site editing experience including templates, pages, etc.
- Theme Blocks: new blocks that accomplish everything possible in traditional templates using template tags (ex: Post Author Block).
- Browsing: the feature that unlocks the ability to navigate between various entities in the site editing experience including templates, pages, etc.
- Navigation Block: a new block that allows you to edit a site's navigation menu, both in terms of structure and design.
- Query Block: a new block that replicates the classic WP_Query and allows for further customization with additional functionality.
- Query Block: a new block that replicates the classic WP_Query and allows for further customization with additional functionality.

There are other projects, like the Navigation Editor and Widget Editor, that are meant to specifically help classic themes begin adapting more to the block framework and to act as a stepping stone of sorts to Full Site Editing. These are separate projects from Full Site Editing though but are worth being aware of as they ultimately help the cause of getting more people adjusted to using blocks in more places.

Expand Down Expand Up @@ -56,6 +56,6 @@ See the [architecture document on templates](/docs/explanations/architecture/ful

### theme.json

Instead of the proliferation of theme support flags or alternative methods, a new `theme.json` file is being used to define theme settings. **NOTE:** This feature is still experimental and changing, so the interim file name is `experimental-theme.json`
Instead of the proliferation of theme support flags or alternative methods, a new `theme.json` file is being used to define theme settings.

See [documentation for theme.json](/docs/how-to-guides/themes/theme-json.md).
4 changes: 2 additions & 2 deletions docs/how-to-guides/themes/block-theme-overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ A very simple block theme is structured like so:
```
theme
|__ style.css
|__ experimental-theme.json
|__ theme.json
|__ functions.php
|__ block-templates
|__ index.html
Expand All @@ -31,7 +31,7 @@ theme
|__ ...
```

The difference with existing WordPress themes is that the different templates in the template hierarchy, and template parts, are block templates instead of php files. In addition, this example includes an [`experimental-theme.json`](/docs/how-to-guides/themes/theme-json.md) file for some styles.
The difference with existing WordPress themes is that the different templates in the template hierarchy, and template parts, are block templates instead of php files. In addition, this example includes a [`theme.json`](/docs/how-to-guides/themes/theme-json.md) file for some styles.

## What is a block template?

Expand Down
23 changes: 13 additions & 10 deletions docs/how-to-guides/themes/create-block-theme.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,13 @@ This tutorial is up to date as of Gutenberg version 9.1.

## Table of Contents

1. [What is needed to create a block-theme?](#what-is-needed-to-create-a-block-theme)
2. [Creating the theme](#creating-the-theme)
3. [Creating the templates and template parts](#creating-the-templates-and-template-parts)
4. [experimental-theme.json - Global styles](#experimental-theme-json-global-styles)
- [Create a block theme](#create-a-block-theme)
- [Table of Contents](#table-of-contents)
- [What is needed to create a block theme?](#what-is-needed-to-create-a-block-theme)
- [Required files and file structure](#required-files-and-file-structure)
- [Creating the theme](#creating-the-theme)
- [Creating the templates and template parts](#creating-the-templates-and-template-parts)
- [theme.json - Global styles](#themejson---global-styles)

## What is needed to create a block theme?

Expand All @@ -27,7 +30,7 @@ Each template or template part contains the [block grammar](/docs/explanations/a

A block theme requires an `index.php` file, an index template file, a `style.css` file, and a `functions.php` file.

The theme may optionally include an [experimental-theme.json file](/docs/how-to-guides/themes/theme-json.md) to manage global styles. You decide what additional templates and template parts to include in your theme.
The theme may optionally include an [theme.json file](/docs/how-to-guides/themes/theme-json.md) to manage global styles. You decide what additional templates and template parts to include in your theme.

Templates are placed inside the `block-templates` folder, and template parts are placed inside the `block-template-parts` folder:

Expand All @@ -36,7 +39,7 @@ theme
|__ style.css
|__ functions.php
|__ index.php
|__ experimental-theme.json
|__ theme.json
|__ block-templates
|__ index.html
|__ single.html
Expand Down Expand Up @@ -179,9 +182,9 @@ If you used a different theme name, adjust the value for the theme text domain.

Eventually, you will be able to create and combine templates and template parts directly in the site editor.

### Experimental-theme.json - Global styles
### theme.json - Global styles

The purpose of the `experimental-theme.json` file is to make it easier to style blocks by setting defaults.
The purpose of the `theme.json` file is to make it easier to style blocks by setting defaults.

It is used to:

Expand All @@ -191,13 +194,13 @@ It is used to:

[The documentation for global styles contains a list of available block and style combinations.](/docs/how-to-guides/themes/theme-json.md)

Create a file called `experimental-theme.json` and save it inside the main folder.
Create a file called `theme.json` and save it inside the main folder.

CSS variables are generated using **Global presets**. The variables are added to the `:root` on the front, and to the `.editor-styles-wrapper` class in the editor.

Styles that are added to the themes `style.css` file or an editor style sheet are loaded after global styles.

Add the following global presets to the `experimental-theme.json` file:
Add the following global presets to the `theme.json` file:

```
{
Expand Down
2 changes: 1 addition & 1 deletion docs/how-to-guides/themes/theme-support.md
Original file line number Diff line number Diff line change
Expand Up @@ -407,4 +407,4 @@ If a theme opts in, it should [define default link colors](https://developer.wor
}
```

The framework will take care of enqueing the necessary rules for this to work. Whether or not the theme supports `experimental-theme.json` the presets will also be enqueued as CSS Custom Properties, so themes can also use `--wp--style--color-link: var(--wp--preset--color--<color-slug>)`. See [the docs](/docs/how-to-guides/themes/theme-json.md#color-properties) for details.
The framework will take care of enqueing the necessary rules for this to work. Whether or not the theme supports `theme.json` the presets will also be enqueued as CSS Custom Properties, so themes can also use `--wp--style--color-link: var(--wp--preset--color--<color-slug>)`. See [the docs](/docs/how-to-guides/themes/theme-json.md#color-properties) for details.

0 comments on commit 80ed51e

Please sign in to comment.