Add nested block / inner block to tutorial #17559

mkaz · 2019-09-24T19:37:26Z

Description

Adds a new page to the block tutorial for Nested Blocks using InnerBlocks.

How has this been tested?

Follow documentation and confirm it works. View live on branch here.

Types of changes

Documentation.

Adds an exmaple using InnerBlocks to the block tutorial

oandregal · 2019-10-11T07:52:30Z

docs/toc.json

@@ -86,7 +86,9 @@
 			{ "docs/designers-developers/developers/tutorials/block-tutorial/introducing-attributes-and-editable-fields.md": [] },
 			{ "docs/designers-developers/developers/tutorials/block-tutorial/block-controls-toolbar-and-sidebar.md": [] },
 			{ "docs/designers-developers/developers/tutorials/block-tutorial/creating-dynamic-blocks.md": [] },
-			{ "docs/designers-developers/developers/tutorials/block-tutorial/generate-blocks-with-wp-cli.md": [] }
+			{ "docs/designers-developers/developers/tutorials/block-tutorial/generate-blocks-with-wp-cli.md": [] },


How about shifting the order and having the inner blocks tutorial first? The steps of the block tutorial look clearer that way (build more complex things as you advanced) and the rhythm doesn't get broken by the CLI tutorial (which isn't about things you could use to build blocks but block set up instead).

I'm wondering if this CLI tutorial is still up to date 🤔

Yeh, I kinda want to remove the CLI suggestion. I was going to post about that in a separate PR. I'm not sure if the scaffolding that it generates is really what we want.

It may be worth revisiting the CLI part, even to delete it. In the meantime, I think that section fits better after the nested/inner blocks tutorial.

docs/designers-developers/developers/tutorials/block-tutorial/nested-blocks-inner-blocks.md

oandregal · 2019-10-11T09:37:55Z

I've gone too tactical perhaps in that I've commented on little things here and there. My bigger question is: do we require this new addition to the block tutorial to be a full working example with the corresponding code in gutenberg-examples repo? The other parts of the tutorial do have that, so I guess we should follow that pattern. If we feel that we can do differently, I'm open to other approaches.

Thanks for the improvements! Co-Authored-By: Andrés <nosolosw@users.noreply.github.com>

mkaz · 2019-10-11T18:39:18Z

@nosolosw yes, I think we should add it to gutenberg-examples repo, but that should not be necessary for merge, it is better to get some documentation up than none.

The gutenberg-examples repo being numbered makes it tricky to add items to it. Since I think this one could fit in-between other lessons. I also don't like the disconnect between the explanation in the tutorial and the examples repo, but not quite sure how to solve.

So I've been mulling over how we could adopt and change that repo, but haven't really come up with something concrete enough to propose.

docs/designers-developers/developers/tutorials/block-tutorial/nested-blocks-inner-blocks.md

oandregal

I've left a couple of comments; otherwise, this can be merged.

docs/designers-developers/developers/tutorials/block-tutorial/nested-blocks-inner-blocks.md

oandregal · 2020-01-02T12:17:06Z

I've created WordPress/gutenberg-examples#102 to port this example to gutenberg-examples.

Co-Authored-By: Andrés <nosolosw@users.noreply.github.com>

mkaz added [Type] Developer Documentation Documentation for developers [Status] In Progress Tracking issues with work in progress labels Sep 24, 2019

mkaz requested review from ajitbohra, chrisvanpatten and youknowriad as code owners September 24, 2019 19:37

mkaz removed the [Status] In Progress Tracking issues with work in progress label Oct 3, 2019

mkaz force-pushed the docs/add-nested-block branch from 174d1b1 to 70cc70a Compare October 8, 2019 22:15

mkaz added 4 commits October 9, 2019 09:06

Add nested block / inner block to tutorial

c75db22

Adds an exmaple using InnerBlocks to the block tutorial

Add ES5 examples

9f46640

Whitespace

2d5c5fb

Add innerblocks page to table of contents

b9b7e0c

mkaz force-pushed the docs/add-nested-block branch from 70cc70a to b9b7e0c Compare October 9, 2019 16:06

gziolo added the [Feature] Nested / Inner Blocks Anything related to the experience of nested/inner blocks inside a larger container, like Group or P label Oct 10, 2019

gziolo requested a review from jorgefilipecosta October 10, 2019 11:04

oandregal reviewed Oct 11, 2019

View reviewed changes