Skip to content

Commit 0a92947

Browse files
committed
prep build 01/30
2 parents a3191c8 + 3eb68c2 commit 0a92947

File tree

179 files changed

+3577
-4017
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

179 files changed

+3577
-4017
lines changed

.eslintrc.js

+6
Original file line numberDiff line numberDiff line change
@@ -406,5 +406,11 @@ module.exports = {
406406
],
407407
},
408408
},
409+
{
410+
files: [ 'packages/interactivity*/src/**' ],
411+
rules: {
412+
'react/react-in-jsx-scope': 'error',
413+
},
414+
},
409415
],
410416
};

docs/contributors/documentation/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@ An example, the link to this page is: `/docs/contributors/documentation/README.m
111111

112112
The code example in markdown should be wrapped in three tick marks \`\`\` and should additionally include a language specifier. See this [GitHub documentation around fenced code blocks](https://help.github.com/en/github/writing-on-github/creating-and-highlighting-code-blocks).
113113

114-
A unique feature to the Gutenberg documentation is the `codetabs` toggle, this allows two versions of code to be shown at once. This is used for showing both `JSX` and `Plain` code samples. For example, [on this block tutorial page](/docs/how-to-guides/block-tutorial/block-controls-toolbar-and-sidebar.md).
114+
A unique feature to the Gutenberg documentation is the `codetabs` toggle, this allows two versions of code to be shown at once. This is used for showing both `JSX` and `Plain` code samples.
115115

116116
Here is an example `codetabs` section:
117117

docs/getting-started/faq.md

+49-90
Large diffs are not rendered by default.

docs/how-to-guides/block-tutorial/applying-styles-with-stylesheets.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ A block typically inserts markup (HTML) into post content that you want to style
66

77
## Before you start
88

9-
You will need a basic block and WordPress development environment to implement the examples shown in this guide. See the [create a basic block](/docs/how-to-guides/block-tutorial/writing-your-first-block-type.md) or [block tutorial](/docs/getting-started/devenv/get-started-with-create-block.md) to get setup.
9+
You will need a basic block and WordPress development environment to implement the examples shown in this guide. See the [Quick Start Guide](/docs/getting-started/quick-start-guide.md) or [block tutorial](/docs/getting-started/tutorial.md) to get set up.
1010

1111
## Methods to add style
1212

docs/how-to-guides/block-tutorial/block-controls-toolbar-and-sidebar.md

-191
This file was deleted.

docs/how-to-guides/block-tutorial/nested-blocks-inner-blocks.md

+25-5
Original file line numberDiff line numberDiff line change
@@ -38,14 +38,16 @@ registerBlockType( 'gutenberg-examples/example-06', {
3838

3939
## Allowed blocks
4040

41-
Using the `allowedBlocks` property, you can define the set of blocks allowed in your InnerBlock. This restricts the blocks that can be included only to those listed, all other blocks will not show in the inserter.
41+
Using the `allowedBlocks` prop, you can further limit, in addition to the `allowedBlocks` field in `block.json`, which blocks can be inserted as direct descendants of this block. It is useful to determine the list of allowed blocks dynamically, individually for each block. For example, determined by a block attribute:
4242

4343
```js
44-
const ALLOWED_BLOCKS = [ 'core/image', 'core/paragraph' ];
44+
const { allowedBlocks } = attributes;
4545
//...
46-
<InnerBlocks allowedBlocks={ ALLOWED_BLOCKS } />;
46+
<InnerBlocks allowedBlocks={ allowedBlocks } />;
4747
```
4848

49+
If the list of allowed blocks is always the same, prefer the [`allowedBlocks` block setting](#defining-a-children-block-relationship) instead.
50+
4951
## Orientation
5052

5153
By default, `InnerBlocks` expects its blocks to be shown in a vertical list. A valid use-case is to style inner blocks to appear horizontally, for instance by adding CSS flex or grid properties to the inner blocks wrapper. When blocks are styled in such a way, the `orientation` prop can be set to indicate that a horizontal layout is being used:
@@ -109,12 +111,13 @@ add_action( 'init', function() {
109111
} );
110112
```
111113

112-
## Using parent and ancestor relationships in blocks
114+
## Using parent, ancestor and children relationships in blocks
113115

114-
A common pattern for using InnerBlocks is to create a custom block that will be only be available if its parent block is inserted. This allows builders to establish a relationship between blocks, while limiting a nested block's discoverability. Currently, there are two relationships builders can use: `parent` and `ancestor`. The differences are:
116+
A common pattern for using InnerBlocks is to create a custom block that will only be available if its parent block is inserted. This allows builders to establish a relationship between blocks, while limiting a nested block's discoverability. There are three relationships that builders can use: `parent`, `ancestor` and `allowedBlocks`. The differences are:
115117

116118
- If you assign a `parent` then you’re stating that the nested block can only be used and inserted as a __direct descendant of the parent__.
117119
- If you assign an `ancestor` then you’re stating that the nested block can only be used and inserted as a __descendent of the parent__.
120+
- If you assign the `allowedBlocks` then you’re stating a relationship in the opposite direction, i.e., which blocks can be used and inserted as __direct descendants of this block__.
118121

119122
The key difference between `parent` and `ancestor` is `parent` has finer specificity, while an `ancestor` has greater flexibility in its nested hierarchy.
120123

@@ -150,6 +153,23 @@ When defining a descendent block, use the `ancestor` block setting. This prevent
150153
}
151154
```
152155

156+
### Defining a children block relationship
157+
158+
An example of this is the Navigation block, which is assigned the `allowedBlocks` block setting. This makes only a certain subset of block types to be available as direct descendants of the Navigation block. See [Navigation code for reference](https://github.com/WordPress/gutenberg/tree/HEAD/packages/block-library/src/navigation).
159+
160+
The `allowedBlocks` setting can be extended by builders of custom blocks. The custom block can hook into the `blocks.registerBlockType` filter and add itself to the available children of the Navigation.
161+
162+
When defining a set of possible descendant blocks, use the `allowedBlocks` block setting. This limits what blocks are showing in the inserter when inserting a new child block.
163+
164+
```json
165+
{
166+
"title": "Navigation",
167+
"name": "core/navigation",
168+
"allowedBlocks": [ "core/navigation-link", "core/search", "core/social-links", "core/page-list", "core/spacer" ],
169+
// ...
170+
}
171+
```
172+
153173
## Using a React hook
154174

155175
You can use a react hook called `useInnerBlocksProps` instead of the `InnerBlocks` component. This hook allows you to take more control over the markup of inner blocks areas.

0 commit comments

Comments
 (0)