diff --git a/docs/how-to-guides/block-tutorial/writing-your-first-block-type.md b/docs/how-to-guides/block-tutorial/writing-your-first-block-type.md
index a9dfc0d51a682..4a690984011e0 100644
--- a/docs/how-to-guides/block-tutorial/writing-your-first-block-type.md
+++ b/docs/how-to-guides/block-tutorial/writing-your-first-block-type.md
@@ -64,8 +64,6 @@ The `block.json` file should be added to your plugin. To start a new plugin, cre
Create a basic `block.json` file there:
-{% codetabs %}
-{% JSX %}
```json
{
@@ -77,22 +75,6 @@ Create a basic `block.json` file there:
"editorScript": "file:./build/index.js"
}
```
-
-{% Plain %}
-
-```json
-{
- "apiVersion": 3,
- "title": "Example: Basic",
- "name": "gutenberg-examples/example-01-basic",
- "category": "layout",
- "icon": "universal-access-alt",
- "editorScript": "file:./block.js"
-}
-```
-
-{% end %}
-
### Step 2: Register block in plugin
With the `block.json` in place, the registration for the block is a single function call in PHP, this will setup the block and JavaScript file specified in the `editorScript` property to load in the editor.
@@ -118,8 +100,6 @@ The `edit` function is a component that is shown in the editor when the block is
The `save` function is a component that defines the final markup returned by the block and saved in `post_content`.
-{% codetabs %}
-{% JSX %}
Add the following in `src/index.js`
@@ -140,33 +120,12 @@ registerBlockType( 'gutenberg-examples/example-01-basic-esnext', {
} );
```
-{% Plain %}
-
-Add the following to `block.js`
-
-```js
-( function ( blocks, React ) {
- var el = React.createElement;
-
- blocks.registerBlockType( 'gutenberg-examples/example-01-basic', {
- edit: function () {
- return el( 'p', {}, 'Hello World (from the editor).' );
- },
- save: function () {
- return el( 'p', {}, 'Hola mundo (from the frontend).' );
- },
- } );
-} )( window.wp.blocks, window.React );
-```
-
-{% end %}
### Step 4: Build or add dependency
In order to register the block, an asset php file is required in the same directory as the directory used in `register_block_type()` and must begin with the script's filename.
-{% codetabs %}
-{% JSX %}
+
Build the scripts and asset file which is used to keep track of dependencies and the build version.
@@ -174,23 +133,6 @@ Build the scripts and asset file which is used to keep track of dependencies and
npm run build
```
-{% Plain %}
-
-Create the asset file to load the dependencies for the scripts. The name of this file should be the name of the js file then .asset.php. For this example, create `block.asset.php` with the following:
-
-```php
-
- array(
- 'react',
- 'wp-blocks',
- 'wp-polyfill'
- ),
- 'version' => '0.1'
- );
-```
-
-{% end %}
### Step 5: Confirm
@@ -207,11 +149,11 @@ When you save the post and view it published, you will see the `Hola mundo (from
## Conclusion
-This shows the most basic static block. The [gutenberg-examples](https://github.com/WordPress/gutenberg-examples) repository has complete examples for both.
+This shows the most basic static block. The [block-development-examples](https://github.com/WordPress/block-development-examples) repository has complete examples for both.
-- [Basic Example with JSX build](https://github.com/WordPress/gutenberg-examples/tree/trunk/blocks-jsx/01-basic-esnext)
+- [Basic Example with JSX build](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/basic-esnext-a2ab62)
-- [Basic Example Plain JavaScript](https://github.com/WordPress/gutenberg-examples/tree/trunk/blocks-non-jsx/01-basic),
+- [Basic Example Plain JavaScript](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/minimal-block-no-build-e621a6),
**NOTE:** The examples include a more complete block setup with translation features included, it is recommended to follow those examples for a production block. The internationalization features were left out of this guide for simplicity and focusing on the very basics of a block.
@@ -219,7 +161,7 @@ This shows the most basic static block. The [gutenberg-examples](https://github.
A couple of things to note when creating your blocks:
-- A block name must be prefixed with a namespace specific to your plugin. This helps prevent conflicts when more than one plugin registers a block with the same name. In this example, the namespace is `gutenberg-examples`.
+- A block name must be prefixed with a namespace specific to your plugin. This helps prevent conflicts when more than one plugin registers a block with the same name. In this example, the namespace is `block-development-examples`.
- Block names _must_ include only lowercase alphanumeric characters or dashes and start with a letter. Example: `my-plugin/my-custom-block`.
diff --git a/docs/how-to-guides/data-basics/1-data-basics-setup.md b/docs/how-to-guides/data-basics/1-data-basics-setup.md
index 3657b65791a65..e61db83c4ecbd 100644
--- a/docs/how-to-guides/data-basics/1-data-basics-setup.md
+++ b/docs/how-to-guides/data-basics/1-data-basics-setup.md
@@ -212,4 +212,4 @@ Congratulations! You are now ready to start building the app!
- Previous part: [Introduction](/docs/how-to-guides/data-basics/README.md)
- Next part: [Building a basic list of pages](/docs/how-to-guides/data-basics/2-building-a-list-of-pages.md)
-- (optional) Review the [finished app](https://github.com/WordPress/gutenberg-examples/tree/trunk/non-block-examples/09-code-data-basics-esnext) in the gutenberg-examples repository
+- (optional) Review the [finished app](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/data-basics-59c8f8) in the block-development-examples repository
diff --git a/docs/how-to-guides/data-basics/2-building-a-list-of-pages.md b/docs/how-to-guides/data-basics/2-building-a-list-of-pages.md
index aee5575cdb5ad..8a0d172e45f45 100644
--- a/docs/how-to-guides/data-basics/2-building-a-list-of-pages.md
+++ b/docs/how-to-guides/data-basics/2-building-a-list-of-pages.md
@@ -446,4 +446,4 @@ All that’s left is to refresh the page and enjoy the brand new status indicato
* **Previous part:** [Setup](/docs/how-to-guides/data-basics/1-data-basics-setup.md)
* **Next part:** [Building an edit form](/docs/how-to-guides/data-basics/3-building-an-edit-form.md)
-* (optional) Review the [finished app](https://github.com/WordPress/gutenberg-examples/tree/trunk/non-block-examples/09-code-data-basics-esnext) in the gutenberg-examples repository
+* (optional) Review the [finished app](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/data-basics-59c8f8) in the block-development-examples repository
diff --git a/docs/how-to-guides/data-basics/3-building-an-edit-form.md b/docs/how-to-guides/data-basics/3-building-an-edit-form.md
index 754a31f1bc492..68c8738170151 100644
--- a/docs/how-to-guides/data-basics/3-building-an-edit-form.md
+++ b/docs/how-to-guides/data-basics/3-building-an-edit-form.md
@@ -540,4 +540,4 @@ function EditPageForm( { pageId, onCancel, onSaveFinished } ) {
* **Previous part:** [Building a list of pages](/docs/how-to-guides/data-basics/2-building-a-list-of-pages.md)
* **Next part:** Building a *New Page* form (coming soon)
-* (optional) Review the [finished app](https://github.com/WordPress/gutenberg-examples/tree/trunk/non-block-examples/09-code-data-basics-esnext) in the gutenberg-examples repository
+* (optional) Review the [finished app](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/data-basics-59c8f8) in the block-development-examples repository
diff --git a/docs/how-to-guides/data-basics/4-building-a-create-page-form.md b/docs/how-to-guides/data-basics/4-building-a-create-page-form.md
index 19aada07c2fc7..33c6e9a5ccff5 100644
--- a/docs/how-to-guides/data-basics/4-building-a-create-page-form.md
+++ b/docs/how-to-guides/data-basics/4-building-a-create-page-form.md
@@ -389,4 +389,4 @@ All that’s left is to refresh the page and enjoy the form:
* **Next part:** [Adding a delete button](/docs/how-to-guides/data-basics/5-adding-a-delete-button.md)
* **Previous part:** [Building an edit form](/docs/how-to-guides/data-basics/3-building-an-edit-form.md)
-* (optional) Review the [finished app](https://github.com/WordPress/gutenberg-examples/tree/trunk/non-block-examples/09-code-data-basics-esnext) in the gutenberg-examples repository
+* (optional) Review the [finished app](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/data-basics-59c8f8) in the block-development-examples repository
diff --git a/docs/how-to-guides/data-basics/5-adding-a-delete-button.md b/docs/how-to-guides/data-basics/5-adding-a-delete-button.md
index 07b10ac822c54..e0a0b0d1e9337 100644
--- a/docs/how-to-guides/data-basics/5-adding-a-delete-button.md
+++ b/docs/how-to-guides/data-basics/5-adding-a-delete-button.md
@@ -446,4 +446,4 @@ function DeletePageButton( { pageId } ) {
## What's next?
* **Previous part:** [Building a *Create page form*](/docs/how-to-guides/data-basics/4-building-a-create-page-form.md)
-* (optional) Review the [finished app](https://github.com/WordPress/gutenberg-examples/tree/trunk/non-block-examples/09-code-data-basics-esnext) in the gutenberg-examples repository
+* (optional) Review the [finished app](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/data-basics-59c8f8) in the block-development-examples repository
diff --git a/docs/how-to-guides/data-basics/README.md b/docs/how-to-guides/data-basics/README.md
index 88e901a90e11d..3e92a216b60c5 100644
--- a/docs/how-to-guides/data-basics/README.md
+++ b/docs/how-to-guides/data-basics/README.md
@@ -2,9 +2,10 @@
This tutorial aims to get you comfortable with the Gutenberg data layer. It guides you through building a simple React application that enables the user to manage their WordPress pages. The finished app will look like this:
-
-You may review the [finished app](https://github.com/WordPress/gutenberg-examples/tree/trunk/non-block-examples/09-code-data-basics-esnext) in the gutenberg-examples repository.
+[](https://playground.wordpress.net/?blueprint-url=https://raw.githubusercontent.com/WordPress/block-development-examples/trunk/plugins/data-basics-59c8f8/_playground/blueprint.json "Opens demo in WordPress Playground")
+
+You may review the [finished app](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/data-basics-59c8f8) in the block-development-examples repository.
### Table of Contents
diff --git a/docs/how-to-guides/format-api.md b/docs/how-to-guides/format-api.md
index a23293bbb27e3..00e1b82675c00 100644
--- a/docs/how-to-guides/format-api.md
+++ b/docs/how-to-guides/format-api.md
@@ -18,7 +18,7 @@ You will need:
- A minimal plugin activated and setup ready to edit
- JavaScript setup for building and enqueuing
-The [complete format-api example](https://github.com/WordPress/gutenberg-examples/tree/trunk/non-block-examples/format-api) is available that you can use as a reference for your setup.
+The [complete format-api example](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/format-api-f14b86) is available that you can use as a reference for your setup.
## Step-by-step guide
@@ -234,4 +234,4 @@ Reference documentation used in this guide:
The guide showed you how to add a button to the toolbar and have it apply a format to the selected text. Try it out and see what you can build with it in your next plugin.
-Download the [format-api example](https://github.com/WordPress/gutenberg-examples/tree/trunk/non-block-examples/format-api) from the [gutenberg-examples](https://github.com/WordPress/gutenberg-examples) repository.
+Download the [format-api example](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/format-api-f14b86) from the [block-development-examples](https://github.com/WordPress/block-development-examples) repository.
diff --git a/docs/how-to-guides/internationalization.md b/docs/how-to-guides/internationalization.md
index c3194f309fca6..08ce46edb3f58 100644
--- a/docs/how-to-guides/internationalization.md
+++ b/docs/how-to-guides/internationalization.md
@@ -37,9 +37,6 @@ add_action( 'init', 'myguten_block_init' );
In your code, you can include the i18n functions. The most common function is **\_\_** (a double underscore) which provides translation of a simple string. Here is a basic block example:
-{% codetabs %}
-{% JSX %}
-
```js
import { __ } from '@wordpress/i18n';
import { registerBlockType } from '@wordpress/blocks';
@@ -64,33 +61,6 @@ registerBlockType( 'myguten/simple', {
} );
```
-{% Plain %}
-
-```js
-const el = React.createElement;
-const { __ } = wp.i18n;
-const { registerBlockType } = wp.blocks;
-const { useBlockProps } = wp.blockEditor;
-
-registerBlockType( 'myguten/simple', {
- title: __( 'Simple Block', 'myguten' ),
- category: 'widgets',
-
- edit: function () {
- const blockProps = useBlockProps( { style: { color: 'red' } } );
-
- return el( 'p', blockProps, __( 'Hello World', 'myguten' ) );
- },
-
- save: function () {
- const blockProps = useBlockProps.save( { style: { color: 'red' } } );
- return el( 'p', blockProps, __( 'Hello World', 'myguten' ) );
- },
-} );
-```
-
-{% end %}
-
In the above example, the function will use the first argument for the string to be translated. The second argument is the text domain which must match the text domain slug specified by your plugin.
Common functions available, these mirror their PHP counterparts are:
diff --git a/docs/how-to-guides/javascript/js-build-setup.md b/docs/how-to-guides/javascript/js-build-setup.md
index b915f4dd444f9..cf49154b590a9 100644
--- a/docs/how-to-guides/javascript/js-build-setup.md
+++ b/docs/how-to-guides/javascript/js-build-setup.md
@@ -22,7 +22,7 @@ The [@wordpress/scripts](https://www.npmjs.com/package/@wordpress/scripts) packa
## Quick Start
-If you prefer a quick start, you can use one of the examples from the [Gutenberg Examples repository](https://github.com/wordpress/gutenberg-examples/) and skip below. Each one of the `-esnext` directories in the examples repository contain the necessary files for working with ESNext and JSX.
+If you prefer a quick start, you can use one of the examples from the [Block Development Examples repository](https://github.com/wordpress/block-development-examples/) and skip below. Each one of the `-esnext` directories in the examples repository contain the necessary files for working with ESNext and JSX.
## Setup
@@ -168,7 +168,7 @@ wp_register_script(
);
```
-See [ESNext blocks in gutenberg-examples repo](https://github.com/WordPress/gutenberg-examples) for full examples.
+See [blocks in the block-development-examples repo](https://github.com/WordPress/block-development-examples) for full examples.
## Summary
diff --git a/docs/how-to-guides/metabox.md b/docs/how-to-guides/metabox.md
index 7a8686968d2cf..e0402b1180c1c 100644
--- a/docs/how-to-guides/metabox.md
+++ b/docs/how-to-guides/metabox.md
@@ -26,7 +26,7 @@ You will need:
- A minimal plugin activated and ready to edit
- JavaScript setup for building and enqueuing
-A [complete meta-block example](https://github.com/WordPress/gutenberg-examples/tree/trunk/blocks-jsx/meta-block) is available that you can use as a reference for your setup.
+A [complete meta-block example](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/meta-block-bb1e55) is available that you can use as a reference for your setup.
## Step-by-step guide
diff --git a/docs/how-to-guides/plugin-sidebar-0.md b/docs/how-to-guides/plugin-sidebar-0.md
index 9543eaf876154..bf084680c3d1b 100644
--- a/docs/how-to-guides/plugin-sidebar-0.md
+++ b/docs/how-to-guides/plugin-sidebar-0.md
@@ -379,7 +379,7 @@ Functions used in this guide:
You now have a custom sidebar that you can use to update `post_meta` content.
-A complete example is available, download the [plugin-sidebar example](https://github.com/WordPress/gutenberg-examples/tree/trunk/blocks-non-jsx/plugin-sidebar) from the [gutenberg-examples](https://github.com/WordPress/gutenberg-examples) repository.
+A complete example is available, download the [plugin-sidebar example](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/plugin-sidebar-9ee4a6) from the [block-development-examples](https://github.com/WordPress/block-development-examples) repository.
### Note
@@ -407,4 +407,4 @@ return el( TextControl, {
document.querySelector( {the-value-textarea} ).innerHTML = content;
},
} );
-```
\ No newline at end of file
+```
diff --git a/docs/how-to-guides/themes/theme-json.md b/docs/how-to-guides/themes/theme-json.md
index 024564b7c9eae..2a1161827c136 100644
--- a/docs/how-to-guides/themes/theme-json.md
+++ b/docs/how-to-guides/themes/theme-json.md
@@ -69,8 +69,7 @@ To address this need, we've started to experiment with CSS Custom Properties, ak
- **Presets**: [color palettes](/docs/how-to-guides/themes/theme-support.md#block-color-palettes), [font sizes](/docs/how-to-guides/themes/theme-support.md#block-font-sizes), or [gradients](/docs/how-to-guides/themes/theme-support.md#block-gradient-presets) declared by the theme are converted to CSS Custom Properties and enqueued both the front-end and the editors.
-{% codetabs %}
-{% Input %}
+#### Input
```json
{
@@ -94,7 +93,7 @@ To address this need, we've started to experiment with CSS Custom Properties, ak
}
```
-{% Output %}
+#### Output
```css
body {
@@ -103,12 +102,10 @@ body {
}
```
-{% end %}
-
- **Custom properties**: there's also a mechanism to create your own CSS Custom Properties.
-{% codetabs %}
-{% Input %}
+
+#### Input
```json
{
@@ -124,7 +121,7 @@ body {
}
```
-{% Output %}
+#### Output
```css
body {
@@ -133,8 +130,6 @@ body {
}
```
-{% end %}
-
## Specification
This specification is the same for the three different origins that use this format: core, themes, and users. Themes can override core's defaults by creating a file called `theme.json`. Users, via the site editor, will also be able to override theme's or core's preferences via an user interface that is being worked on.
@@ -166,8 +161,8 @@ The tabs below show WordPress 5.8 supported settings and the ones supported by t
The settings section has the following structure:
-{% codetabs %}
-{% WordPress %}
+
+#### WordPress
```json
{
@@ -231,7 +226,7 @@ The settings section has the following structure:
}
```
-{% Gutenberg %}
+#### Gutenberg
```json
{
@@ -310,8 +305,6 @@ The settings section has the following structure:
}
```
-{% end %}
-
Each block can configure any of these settings separately, providing a more fine-grained control over what exists via `add_theme_support`. The settings declared at the top-level affect to all blocks, unless a particular block overwrites it. It's a way to provide inheritance and configure all blocks at once.
Note, however, that not all settings are relevant for all blocks. The settings section provides an opt-in/opt-out mechanism for themes, but it's the block's responsibility to add support for the features that are relevant to it. For example, if a block doesn't implement the `dropCap` feature, a theme can't enable it for such a block through `theme.json`.
@@ -376,8 +369,8 @@ The naming schema for the classes and the custom properties is as follows:
- Custom Properties: `--wp--preset--{preset-category}--{preset-slug}` such as `--wp--preset--color--black`
- Classes: `.has-{preset-slug}-{preset-category}` such as `.has-black-color`.
-{% codetabs %}
-{% Input %}
+
+#### Input
```json
{
@@ -490,7 +483,7 @@ The naming schema for the classes and the custom properties is as follows:
}
```
-{% Output %}
+#### Output
```css
/* Top-level custom properties */
@@ -540,8 +533,6 @@ body {
```
-{% end %}
-
To maintain backward compatibility, the presets declared via `add_theme_support` will also generate the CSS Custom Properties. If the `theme.json` contains any presets, these will take precedence over the ones declared via `add_theme_support`.
Preset classes are attached to the content of a post by some user action. That's why the engine will add `!important` to these, because user styles should take precedence over theme styles.
@@ -552,8 +543,7 @@ In addition to create CSS Custom Properties for the presets, the `theme.json` al
For example:
-{% codetabs %}
-{% Input %}
+#### Input
```json
{
@@ -578,7 +568,7 @@ For example:
}
```
-{% Output %}
+#### Output
```css
body {
@@ -592,7 +582,6 @@ body {
}
```
-{% end %}
Note that the name of the variable is created by adding `--` in between each nesting level and `camelCase` fields are transformed to `kebab-case`.
@@ -702,9 +691,9 @@ The tabs below show WordPress 5.8 supported styles and the ones supported by the
Each block declares which style properties it exposes via the [block supports mechanism](/docs/reference-guides/block-api/block-supports.md). The support declarations are used to automatically generate the UI controls for the block in the editor. Themes can use any style property via the `theme.json` for any block ― it's the theme's responsibility to verify that it works properly according to the block markup, etc.
-{% codetabs %}
-{% WordPress %}
+
+#### WordPress
```json
{
@@ -784,7 +773,7 @@ Each block declares which style properties it exposes via the [block supports me
}
```
-{% Gutenberg %}
+#### Gutenberg
```json
{
@@ -873,14 +862,11 @@ Each block declares which style properties it exposes via the [block supports me
}
```
-{% end %}
-
### Top-level styles
Styles found at the top-level will be enqueued using the `body` selector.
-{% codetabs %}
-{% Input %}
+#### Input
```json
{
@@ -893,7 +879,7 @@ Styles found at the top-level will be enqueued using the `body` selector.
}
```
-{% Output %}
+#### Output
```css
body {
@@ -901,7 +887,6 @@ body {
}
```
-{% end %}
### Block styles
@@ -909,8 +894,7 @@ Styles found within a block will be enqueued using the block selector.
By default, the block selector is generated based on its name such as `.wp-block-`. For example, `.wp-block-group` for the `core/group` block. There are some blocks that want to opt-out from this default behavior. They can do so by explicitly telling the system which selector to use for them via the `__experimentalSelector` key within the `supports` section of its `block.json` file. Note that the block needs to be registered server-side for the `__experimentalSelector` field to be available to the style engine.
-{% codetabs %}
-{% Input %}
+#### Input
```json
{
@@ -935,7 +919,7 @@ By default, the block selector is generated based on its name such as `.wp-block
}
```
-{% Output %}
+#### Output
```css
body {
@@ -949,7 +933,6 @@ p { /* The core/paragraph opts out from the default behaviour and uses p as a se
}
```
-{% end %}
#### Referencing a style
@@ -996,8 +979,8 @@ Supported by WordPress:
If they're found in the top-level the element selector will be used. If they're found within a block, the selector to be used will be the element's appended to the corresponding block.
-{% codetabs %}
-{% Input %}
+
+#### Input
```json
{
@@ -1043,7 +1026,7 @@ If they're found in the top-level the element selector will be used. If they're
}
```
-{% Output %}
+#### Output
```css
body {
@@ -1066,8 +1049,6 @@ h3 {
}
```
-{% end %}
-
##### Element pseudo selectors
Pseudo selectors `:hover`, `:focus`, `:visited`, `:active`, `:link`, `:any-link` are supported by Gutenberg.
@@ -1236,8 +1217,8 @@ This is for clarity, but also because we want a mechanism to parse back a variab
For example:
-{% codetabs %}
-{% Input %}
+
+#### Input
```json
{
@@ -1253,7 +1234,7 @@ For example:
}
```
-{% Output %}
+#### Output
```css
body {
@@ -1262,7 +1243,6 @@ body {
}
```
-{% end %}
A few notes about this process:
diff --git a/docs/manifest.json b/docs/manifest.json
index bc4d8bd7c3b28..ba345e7716ee3 100644
--- a/docs/manifest.json
+++ b/docs/manifest.json
@@ -41,6 +41,12 @@
"markdown_source": "../docs/getting-started/devenv/get-started-with-wp-scripts.md",
"parent": "devenv"
},
+ {
+ "title": "Quick Start Guide",
+ "slug": "quick-start-guide",
+ "markdown_source": "../docs/getting-started/quick-start-guide.md",
+ "parent": "getting-started"
+ },
{
"title": "Create a Block Tutorial",
"slug": "create-block",
diff --git a/docs/reference-guides/block-api/block-attributes.md b/docs/reference-guides/block-api/block-attributes.md
index 765d69584a669..35ec1c1e7c64e 100644
--- a/docs/reference-guides/block-api/block-attributes.md
+++ b/docs/reference-guides/block-api/block-attributes.md
@@ -375,7 +375,7 @@ Attribute definition:
From here, meta attributes can be read and written by a block using the same interface as any attribute:
-{% codetabs %}
+
{% JSX %}
```js
@@ -388,22 +388,6 @@ edit( { attributes, setAttributes } ) {
},
```
-{% Plain %}
-
-```js
-edit: function( props ) {
- function onChange( event ) {
- props.setAttributes( { author: event.target.value } );
- }
-
- return el( 'input', {
- value: props.attributes.author,
- onChange: onChange,
- } );
-},
-```
-
-{% end %}
#### Considerations
diff --git a/docs/reference-guides/block-api/block-deprecation.md b/docs/reference-guides/block-api/block-deprecation.md
index a1497ec346936..4d69d9d46843c 100644
--- a/docs/reference-guides/block-api/block-deprecation.md
+++ b/docs/reference-guides/block-api/block-deprecation.md
@@ -61,9 +61,6 @@ It's important to note that
attributes, supports, and
### Example:
-{% codetabs %}
-{% JSX %}
-
```js
const { registerBlockType } = wp.blocks;
const attributes = {
@@ -101,46 +98,6 @@ registerBlockType( 'gutenberg/block-with-deprecated-version', {
} );
```
-{% Plain %}
-
-```js
-var el = React.createElement,
- registerBlockType = wp.blocks.registerBlockType,
- attributes = {
- text: {
- type: 'string',
- default: 'some random value',
- },
- },
- supports = {
- className: false,
- };
-
-registerBlockType( 'gutenberg/block-with-deprecated-version', {
- // ... other block properties go here
-
- attributes: attributes,
-
- supports: supports,
-
- save: function ( props ) {
- return el( 'div', {}, props.attributes.text );
- },
-
- deprecated: [
- {
- attributes: attributes,
-
- save: function ( props ) {
- return el( 'p', {}, props.attributes.text );
- },
- },
- ],
-} );
-```
-
-{% end %}
-
In the example above we updated the markup of the block to use a `div` instead of `p`.
## Changing the attributes set
@@ -149,8 +106,6 @@ Sometimes, you need to update the attributes set to rename or modify old attribu
### Example:
-{% codetabs %}
-{% JSX %}
```js
const { registerBlockType } = wp.blocks;
@@ -192,50 +147,6 @@ registerBlockType( 'gutenberg/block-with-deprecated-version', {
} );
```
-{% Plain %}
-
-```js
-var el = React.createElement,
- registerBlockType = wp.blocks.registerBlockType;
-
-registerBlockType( 'gutenberg/block-with-deprecated-version', {
- // ... other block properties go here
-
- attributes: {
- content: {
- type: 'string',
- default: 'some random value',
- },
- },
-
- save: function ( props ) {
- return el( 'div', {}, props.attributes.content );
- },
-
- deprecated: [
- {
- attributes: {
- text: {
- type: 'string',
- default: 'some random value',
- },
- },
-
- migrate: function ( attributes ) {
- return {
- content: attributes.text,
- };
- },
-
- save: function ( props ) {
- return el( 'p', {}, props.attributes.text );
- },
- },
- ],
-} );
-```
-
-{% end %}
In the example above we updated the markup of the block to use a `div` instead of `p` and rename the `text` attribute to `content`.
@@ -246,9 +157,6 @@ E.g: a block wants to migrate a title attribute to a paragraph innerBlock.
### Example:
-{% codetabs %}
-{% JSX %}
-
```js
const { registerBlockType } = wp.blocks;
@@ -292,49 +200,6 @@ registerBlockType( 'gutenberg/block-with-deprecated-version', {
} );
```
-{% Plain %}
-
-```js
-var el = React.createElement,
- registerBlockType = wp.blocks.registerBlockType;
-
-registerBlockType( 'gutenberg/block-with-deprecated-version', {
- // ... block properties go here
-
- deprecated: [
- {
- attributes: {
- title: {
- type: 'string',
- source: 'html',
- selector: 'p',
- },
- },
-
- migrate: function ( attributes, innerBlocks ) {
- const { title, ...restAttributes } = attributes;
-
- return [
- restAttributes,
- [
- createBlock( 'core/paragraph', {
- content: attributes.title,
- fontSize: 'large',
- } ),
- ].concat( innerBlocks ),
- ];
- },
-
- save: function ( props ) {
- return el( 'p', {}, props.attributes.title );
- },
- },
- ],
-} );
-```
-
-{% end %}
-
In the example above we updated the block to use an inner Paragraph block with a title instead of a title attribute.
_Above are example cases of block deprecation. For more, real-world examples, check for deprecations in the [core block library](https://github.com/WordPress/gutenberg/tree/HEAD/packages/block-library/src). Core blocks have been updated across releases and contain simple and complex deprecations._
diff --git a/docs/reference-guides/block-api/block-edit-save.md b/docs/reference-guides/block-api/block-edit-save.md
index 35bbd5ae13e1e..a8b6f9171bdef 100644
--- a/docs/reference-guides/block-api/block-edit-save.md
+++ b/docs/reference-guides/block-api/block-edit-save.md
@@ -6,8 +6,6 @@ When registering a block with JavaScript on the client, the `edit` and `save` fu
The `edit` function describes the structure of your block in the context of the editor. This represents what the editor will render when the block is used.
-{% codetabs %}
-{% JSX %}
```jsx
import { useBlockProps } from '@wordpress/block-editor';
@@ -26,32 +24,12 @@ const blockSettings = {
};
```
-{% Plain %}
-
-```js
-var blockSettings = {
- apiVersion: 3,
-
- // ...
-
- edit: function () {
- var blockProps = wp.blockEditor.useBlockProps();
-
- return React.createElement( 'div', blockProps, 'Your block.' );
- },
-};
-```
-
-{% end %}
-
### block wrapper props
The first thing to notice here is the use of the `useBlockProps` React hook on the block wrapper element. In the example above, the block wrapper renders a "div" in the editor, but in order for the Gutenberg editor to know how to manipulate the block, add any extra classNames that are needed for the block... the block wrapper element should apply props retrieved from the `useBlockProps` react hook call. The block wrapper element should be a native DOM element, like `` and ``, or a React component that forwards any additional props to native DOM elements. Using a `
| {
const {
getEditedPostContext,
@@ -100,14 +113,24 @@ export default function Editor( { listViewToggleElement, isLoading } ) {
isInserterOpened,
isListViewOpened,
hasPageContentFocus: _hasPageContentFocus,
+ getPageContentFocusType,
} = unlock( select( editSiteStore ) );
const { __unstableGetEditorMode } = select( blockEditorStore );
const { getActiveComplementaryArea } = select( interfaceStore );
+ const { getEntityRecord } = select( coreDataStore );
+ const _context = getEditedPostContext();
// The currently selected entity to display.
// Typically template or template part in the site editor.
return {
- context: getEditedPostContext(),
+ context: _context,
+ contextPost: _context?.postId
+ ? getEntityRecord(
+ 'postType',
+ _context.postType,
+ _context.postId
+ )
+ : undefined,
editorMode: getEditorMode(),
canvasMode: getCanvasMode(),
blockEditorMode: __unstableGetEditorMode(),
@@ -125,6 +148,7 @@ export default function Editor( { listViewToggleElement, isLoading } ) {
'showBlockBreadcrumbs'
),
hasPageContentFocus: _hasPageContentFocus(),
+ pageContentFocusType: getPageContentFocusType(),
};
}, [] );
@@ -141,18 +165,7 @@ export default function Editor( { listViewToggleElement, isLoading } ) {
const secondarySidebarLabel = isListViewOpen
? __( 'List View' )
: __( 'Block Library' );
- const blockContext = useMemo( () => {
- const { postType, postId, ...nonPostFields } = context ?? {};
-
- return {
- ...( hasPageContentFocus ? context : nonPostFields ),
- // Ideally this context should be removed. However, it is currently used by the Query Loop block.
- templateSlug:
- editedPostType === TEMPLATE_POST_TYPE
- ? editedPost.slug
- : undefined,
- };
- }, [ editedPost.slug, editedPostType, hasPageContentFocus, context ] );
+ const postWithTemplate = context?.postId;
let title;
if ( hasLoadedPost ) {
@@ -174,110 +187,131 @@ export default function Editor( { listViewToggleElement, isLoading } ) {
'edit-site-editor__loading-progress'
);
- const contentProps = isLoading
- ? {
- 'aria-busy': 'true',
- 'aria-describedby': loadingProgressId,
- }
- : undefined;
+ const settings = useSpecificEditorSettings();
+ const isReady =
+ ! isLoading &&
+ ( ( postWithTemplate && !! contextPost && !! editedPost ) ||
+ ( ! postWithTemplate && !! editedPost ) );
+ const mode = useMemo( () => {
+ if ( isViewMode ) {
+ return postWithTemplate ? 'template-locked' : 'all';
+ }
+
+ if ( isEditMode && pageContentFocusType === 'hideTemplate' ) {
+ return 'post-only';
+ }
+
+ if ( postWithTemplate && hasPageContentFocus ) {
+ return 'template-locked';
+ }
+
+ if ( postWithTemplate && ! hasPageContentFocus ) {
+ return 'template-only';
+ }
+
+ return 'all';
+ }, [
+ isViewMode,
+ isEditMode,
+ postWithTemplate,
+ pageContentFocusType,
+ hasPageContentFocus,
+ ] );
return (
<>
- { isLoading ?
+ { filteredBlockTypes.map( ( block ) => (
+
+ );
+}
+
+const MemoizedBlockList = memo( BlockList );
+
+function ScreenBlockList() {
+ const [ filterValue, setFilterValue ] = useState( '' );
+ const deferredFilterValue = useDeferredValue( filterValue );
+
return (
<>
- { filteredBlockTypes.map( ( block ) => (
-
+
|
