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.

Sign up for GitHub

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

Jump to bottom

Docs: Move ESNext to default view #22973

Merged
merged 1 commit into from
Jun 6, 2020
Merged

Docs: Move ESNext to default view #22973

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
84 changes: 42 additions & 42 deletions ...rs-developers/developers/tutorials/block-tutorial/nested-blocks-inner-blocks.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,31 @@ Note: A single block can only contain one `InnerBlock` component.
Here is the basic InnerBlocks usage.

{% codetabs %}
{% ESNext %}
```js
import { registerBlockType } from '@wordpress/blocks';
import { InnerBlocks } from '@wordpress/block-editor';

registerBlockType( 'gutenberg-examples/example-06', {
// ...

edit: ( { className } ) => {
return (
<div className={ className }>
<InnerBlocks />
</div>
);
},

save: ( { className } ) => {
return (
<div className={ className }>
<InnerBlocks.Content />
</div>
);
},
} );
```
{% ES5 %}
```js
( function( blocks, element, blockEditor ) {
Expand Down Expand Up @@ -39,36 +64,11 @@ Here is the basic InnerBlocks usage.
window.wp.blockEditor,
) );
```
{% ESNext %}
```js
import { registerBlockType } from '@wordpress/blocks';
import { InnerBlocks } from '@wordpress/block-editor';

registerBlockType( 'gutenberg-examples/example-06', {
// ...

edit: ( { className } ) => {
return (
<div className={ className }>
<InnerBlocks />
</div>
);
},

save: ( { className } ) => {
return (
<div className={ className }>
<InnerBlocks.Content />
</div>
);
},
} );
```
{% end %}

## Allowed Blocks

Using the `ALLOWED_BLOCKS` property, you can define the set of blocks allowed in your InnerBlock. This restricts the that can be included only to those listed, all other blocks will not show in the inserter.
Using the `ALLOWED_BLOCKS` property, you can define the set of blocks allowed in your InnerBlock. This restricts the that can be included only to those listed, all other blocks will not show in the inserter.

```js
const ALLOWED_BLOCKS = [ 'core/image', 'core/paragraph' ];
Expand All @@ -84,7 +84,7 @@ const ALLOWED_BLOCKS = [ 'core/image', 'core/paragraph' ];
Use the template property to define a set of blocks that prefill the InnerBlocks component when inserted. You can set attributes on the blocks to define their use. The example below shows a book review template using InnerBlocks component and setting placeholders values to show the block usage.

{% codetabs %}
{% ES5 %}
{% ESNext %}
```js
const MY_TEMPLATE = [
[ 'core/image', {} ],
Expand All @@ -94,17 +94,16 @@ const MY_TEMPLATE = [

//...

edit: function( props ) {
return el(
InnerBlocks,
{
template: MY_TEMPLATE,
templateLock: "all",
}
edit: () => {
return (
<InnerBlocks
template={ MY_TEMPLATE }
templateLock="all"
/>
);
},
```
{% ESNext %}
{% ES5 %}
```js
const MY_TEMPLATE = [
[ 'core/image', {} ],
Expand All @@ -114,12 +113,13 @@ const MY_TEMPLATE = [

//...

edit: () => {
return (
<InnerBlocks
template={ MY_TEMPLATE }
templateLock="all"
/>
edit: function( props ) {
return el(
InnerBlocks,
{
template: MY_TEMPLATE,
templateLock: "all",
}
);
},
```
Expand All @@ -129,7 +129,7 @@ Use the `templateLock` property to lock down the template. Using `all` locks the

### Post Template

Unrelated to `InnerBlocks` but worth mentioning here, you can create a [post template](https://developer.wordpress.org/block-editor/developers/block-api/block-templates/) by post type, that preloads the block editor with a set of blocks.
Unrelated to `InnerBlocks` but worth mentioning here, you can create a [post template](https://developer.wordpress.org/block-editor/developers/block-api/block-templates/) by post type, that preloads the block editor with a set of blocks.

The `InnerBlocks` template is for the component in the single block that you created, the rest of the post can include any blocks the user likes. Using a post template, can lock the entire post to just the template you define.

Expand Down