Add docs for InnerBlocks orientation prop (#23641)

* Update README for InnerBlocks to document orientation prop * Update nested blocks tuturoial
WordPress · Jul 2, 2020 · 2d7e690 · 2d7e690
1 parent 542ba2a
commit 2d7e690
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 0 deletions.
diff --git a/...rs-developers/developers/tutorials/block-tutorial/nested-blocks-inner-blocks.md b/...rs-developers/developers/tutorials/block-tutorial/nested-blocks-inner-blocks.md
@@ -78,6 +78,16 @@ const ALLOWED_BLOCKS = [ 'core/image', 'core/paragraph' ];
 />
 ```
 
+## Orientation
+
+By default, `InnerBlocks` expects its blocks to be shown in a vertical list. A valid use-case is to style InnerBlocks to appear horizontally. When blocks are styled in such a way, the `orientation` prop can be used to indicate a horizontal layout:
+```js
+<InnerBlocks
+ orientation="horizontal"
+/>
+```
+
+Specifying this prop will result in the block movers being shown horizontally, and also ensure drag and drop works correctly.
 
 ## Template
 

diff --git a/packages/block-editor/src/components/inner-blocks/README.md b/packages/block-editor/src/components/inner-blocks/README.md
@@ -70,6 +70,13 @@ The previous code block restricts all blocks, so only child blocks explicitly re
 
 If `allowedBlocks` is set to `true`, all blocks are allowed. `false` means no blocks are allowed.
 
+### `orientation`
+* **Type:** `"horizontal"|"vertical"|undefined`
+
+Indicates whether inner blocks are shown horizontally or vertically. Use the string 'horizontal' or 'vertical' as a value. When left unspecified, defaults to 'vertical'.
+
+While this prop doesn't change any styles for the inner blocks themselves, it does display the Block Movers in the correct orientation, and also ensures drag and drop works correctly.
+
 ### `template`
 * **Type:** `Array<Array<Object>>`