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.

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

Nested blocks #428

Closed
joyously opened this Issue Apr 15, 2017 · 17 comments

Comments

Projects
10 participants
@joyously

joyously commented Apr 15, 2017

In #409 there was a comment

I'm also operating under the assumption that a block will be "root level" for the foreseeable future - i.e. it will be a direct child of the article.post element that holds the post content.

It appeared that all (block type)HTML elements were becoming blocks. But a lot of HTML elements can be nested, so it follows that blocks could be nested. How could they be previewed correctly if they are not?

Nested lists come to mind immediately. The theme test data contains several nested lists.
An image is a block, right? And can you put it in a paragraph? Even one with a caption.
I was told that the heading hierarchy needed for accessibility could be bypassed by using a figure to hold HTML examples my imagined blogger was writing about.
Blockquotes are for referencing whatever HTML is from an outside source, not just paragraphs.
Tables can have images and paragraphs.
I just wrote issue #427 about being able to put wrapper blocks around other blocks for styling.

@jasmussen

This comment has been minimized.

Show comment
Hide comment
@jasmussen

jasmussen Apr 20, 2017

Contributor

Nesting will be critical to the customization focus later in the year. I suspect the editor will have to deal with nested content, but perhaps not optimize the UI towards this.

Contributor

jasmussen commented Apr 20, 2017

Nesting will be critical to the customization focus later in the year. I suspect the editor will have to deal with nested content, but perhaps not optimize the UI towards this.

@strarsis

This comment has been minimized.

Show comment
Hide comment
@strarsis

strarsis Jul 3, 2017

So a plugin that provides a block could also offer a Gutenberg-editor for block contents - which in turn could again contain another Gutenberg-editor with more blocks?

strarsis commented Jul 3, 2017

So a plugin that provides a block could also offer a Gutenberg-editor for block contents - which in turn could again contain another Gutenberg-editor with more blocks?

@jasmussen

This comment has been minimized.

Show comment
Hide comment
@jasmussen

jasmussen Jul 3, 2017

Contributor

So a plugin that provides a block could also offer a Gutenberg-editor for block contents - which in turn could again contain another Gutenberg-editor with more blocks?

It's more of an ability to insert a block into another. For example you might have a block that creates two columns. You could then insert text and images into either column.

Contributor

jasmussen commented Jul 3, 2017

So a plugin that provides a block could also offer a Gutenberg-editor for block contents - which in turn could again contain another Gutenberg-editor with more blocks?

It's more of an ability to insert a block into another. For example you might have a block that creates two columns. You could then insert text and images into either column.

@strarsis

This comment has been minimized.

Show comment
Hide comment
@strarsis

strarsis Jul 3, 2017

@jasmussen: I see potential for nesting blocks in some plugin applications. For example, a plugin may provide a space where user can put content. Or even multiple spaces. The plugin could show them as blocks directly in editor where the block of the plugin is used - or instead in an option page, isolated from the main editor.

strarsis commented Jul 3, 2017

@jasmussen: I see potential for nesting blocks in some plugin applications. For example, a plugin may provide a space where user can put content. Or even multiple spaces. The plugin could show them as blocks directly in editor where the block of the plugin is used - or instead in an option page, isolated from the main editor.

@maddisondesigns

This comment has been minimized.

Show comment
Hide comment
@maddisondesigns

maddisondesigns Aug 4, 2017

I mentioned in #1281 that it's currently impossible to add inline images into Text blocks. This makes it impossible to do something like the below image. This is critical. You need to be able to add images inline with your text.

gutenberg-inlineimages

maddisondesigns commented Aug 4, 2017

I mentioned in #1281 that it's currently impossible to add inline images into Text blocks. This makes it impossible to do something like the below image. This is critical. You need to be able to add images inline with your text.

gutenberg-inlineimages

@jasmussen

This comment has been minimized.

Show comment
Hide comment
@jasmussen
Contributor

jasmussen commented Aug 4, 2017

@maddisondesigns See also #2042

@jasmussen

This comment has been minimized.

Show comment
Hide comment
@jasmussen

jasmussen Jan 4, 2018

Contributor

One challenge that comes with nested blocks is the UI for the side controls — the movers, and the ellipsis. This is because those side controls either overlap or stack or create other unpredictable behavior, when they are floated or nested. See #3725, #3868.

Solution idea 1

First off — only allow the side controls to appear when the block has first been selected.

nested block selected

If we implement the hovering proposed in #3044, we could then show the movers and ellipsis when you hover near each side of the block:

nested block hover left

nested block hover right

Solution idea 2

Mobile has a similar challenge to nested blocks in that it doesn't have room for side controls at all. For mobile we simply show those controls below the content of the blocks. We could do the same for nested blocks?

nested block alternative

Contributor

jasmussen commented Jan 4, 2018

One challenge that comes with nested blocks is the UI for the side controls — the movers, and the ellipsis. This is because those side controls either overlap or stack or create other unpredictable behavior, when they are floated or nested. See #3725, #3868.

Solution idea 1

First off — only allow the side controls to appear when the block has first been selected.

nested block selected

If we implement the hovering proposed in #3044, we could then show the movers and ellipsis when you hover near each side of the block:

nested block hover left

nested block hover right

Solution idea 2

Mobile has a similar challenge to nested blocks in that it doesn't have room for side controls at all. For mobile we simply show those controls below the content of the blocks. We could do the same for nested blocks?

nested block alternative

@melchoyce

This comment has been minimized.

Show comment
Hide comment
@melchoyce

melchoyce Jan 9, 2018

I like Solution 2 — feels cleaner overall.

Does the dark border denote a nested block?

melchoyce commented Jan 9, 2018

I like Solution 2 — feels cleaner overall.

Does the dark border denote a nested block?

@jasmussen

This comment has been minimized.

Show comment
Hide comment
@jasmussen

jasmussen Jan 10, 2018

Contributor

Solution 2 would then be for mobile and nested blocks, and only appear on select. I'm a fan too.

Does the dark border denote a nested block?

No, this is just the blockquote border, because the mockup depicts two paragraphs inside a blockquote. My bad for not clarifying.

Contributor

jasmussen commented Jan 10, 2018

Solution 2 would then be for mobile and nested blocks, and only appear on select. I'm a fan too.

Does the dark border denote a nested block?

No, this is just the blockquote border, because the mockup depicts two paragraphs inside a blockquote. My bad for not clarifying.

@melchoyce

This comment has been minimized.

Show comment
Hide comment
@melchoyce

melchoyce Jan 10, 2018

Thanks for clarifying 👍 From your mockups, the only difference would be the block controls. Can you talk a bit about your thoughts re: visually identifying which blocks are standalone, and which are nested? Do you have any plans to explore any additional visual indicators?

melchoyce commented Jan 10, 2018

Thanks for clarifying 👍 From your mockups, the only difference would be the block controls. Can you talk a bit about your thoughts re: visually identifying which blocks are standalone, and which are nested? Do you have any plans to explore any additional visual indicators?

@jasmussen

This comment has been minimized.

Show comment
Hide comment
@jasmussen

jasmussen Jan 10, 2018

Contributor

Can you talk a bit about your thoughts re: visually identifying which blocks are standalone, and which are nested? Do you have any plans to explore any additional visual indicators?

By "standalone" do you mean "top-level"? In any case, that's about as far as I've thought. All blocks in Gutenberg right now are top-level, but as soon as nesting lands, and the List block is rewritten to be a list block with nested list items, there's obviously UI challenges as discussed on this thread. I've also thought about how selecting and arrow-keys would work, and there's a bit on it on this new ticket: #4382

Does that help?

Contributor

jasmussen commented Jan 10, 2018

Can you talk a bit about your thoughts re: visually identifying which blocks are standalone, and which are nested? Do you have any plans to explore any additional visual indicators?

By "standalone" do you mean "top-level"? In any case, that's about as far as I've thought. All blocks in Gutenberg right now are top-level, but as soon as nesting lands, and the List block is rewritten to be a list block with nested list items, there's obviously UI challenges as discussed on this thread. I've also thought about how selecting and arrow-keys would work, and there's a bit on it on this new ticket: #4382

Does that help?

@melchoyce

This comment has been minimized.

Show comment
Hide comment
@melchoyce

melchoyce Jan 10, 2018

By "standalone" do you mean "top-level"?

By "standalone," I meant a block that is not nested.

That helps, thanks 👍

melchoyce commented Jan 10, 2018

By "standalone" do you mean "top-level"?

By "standalone," I meant a block that is not nested.

That helps, thanks 👍

@melchoyce melchoyce added this to In progress in Phase 2 Jan 16, 2018

@karmatosed karmatosed added this to the Feature complete milestone Jan 25, 2018

@mtias mtias removed this from the Feature Complete milestone Jan 26, 2018

@aduth aduth closed this in #3745 Feb 6, 2018

@westonruter westonruter moved this from In progress to Done in Phase 2 Aug 3, 2018

@ryancwalsh

This comment has been minimized.

Show comment
Hide comment
@ryancwalsh

ryancwalsh Aug 13, 2018

Are blocks nestable yet?

https://wordpress.org/gutenberg/handbook/reference/faq/ says "The UI for manipulating nested blocks is still being refined, and depending on the timing, it might not be included in the first version of Gutenberg."

I'm trying to allow my editable Recipe Card block to accept optional inner blocks (such as more lists and paragraphs), but I can't figure out how.

https://wordpress.org/gutenberg/handbook/block-api/#parent-optional says "Blocks are able to be inserted into blocks that use InnerBlocks as nested content."

https://github.com/WordPress/gutenberg/blob/master/packages/block-library/src/columns/column.js looks substantially different from a typical block.js I've seen, so I don't understand and am wondering if there is more of a tutorial somewhere other than https://github.com/WordPress/gutenberg/blob/master/packages/editor/src/components/inner-blocks/README.md.

For example, how would I do the following.

I want to have an editable block that is like this:

<div class="mySpecialContainer">
    <h3>Here is My Non-editable Title</h3>
    <div class="innerSection">
        <InnerBlocks.Content />
    </div>
</div>

Basically all it will do is create a stylable outer div, a pre-defined h3 title, and an editable inner div.

I'd love a demo of that if possible. Thanks so much!

ryancwalsh commented Aug 13, 2018

Are blocks nestable yet?

https://wordpress.org/gutenberg/handbook/reference/faq/ says "The UI for manipulating nested blocks is still being refined, and depending on the timing, it might not be included in the first version of Gutenberg."

I'm trying to allow my editable Recipe Card block to accept optional inner blocks (such as more lists and paragraphs), but I can't figure out how.

https://wordpress.org/gutenberg/handbook/block-api/#parent-optional says "Blocks are able to be inserted into blocks that use InnerBlocks as nested content."

https://github.com/WordPress/gutenberg/blob/master/packages/block-library/src/columns/column.js looks substantially different from a typical block.js I've seen, so I don't understand and am wondering if there is more of a tutorial somewhere other than https://github.com/WordPress/gutenberg/blob/master/packages/editor/src/components/inner-blocks/README.md.

For example, how would I do the following.

I want to have an editable block that is like this:

<div class="mySpecialContainer">
    <h3>Here is My Non-editable Title</h3>
    <div class="innerSection">
        <InnerBlocks.Content />
    </div>
</div>

Basically all it will do is create a stylable outer div, a pre-defined h3 title, and an editable inner div.

I'd love a demo of that if possible. Thanks so much!

@chrisvanpatten

This comment has been minimized.

Show comment
Hide comment
@chrisvanpatten

chrisvanpatten Aug 13, 2018

Contributor

@ryancwalsh Our Text Accordion block uses a similar structure. Take a look at the editor and render components in particular. You could just replace the RichText with your non-editable title.

Contributor

chrisvanpatten commented Aug 13, 2018

@ryancwalsh Our Text Accordion block uses a similar structure. Take a look at the editor and render components in particular. You could just replace the RichText with your non-editable title.

@ryancwalsh

This comment has been minimized.

Show comment
Hide comment
@ryancwalsh

ryancwalsh Aug 13, 2018

@chrisvanpatten That sounds promising, so thank you. I currently only know basic Javascript and don't recognize what I'm seeing here with these tags that aren't within strings. Is there some kind of special compiling setup I need? Does WordPress itself somehow handle these odd-looking JS files? Thanks.

ryancwalsh commented Aug 13, 2018

@chrisvanpatten That sounds promising, so thank you. I currently only know basic Javascript and don't recognize what I'm seeing here with these tags that aren't within strings. Is there some kind of special compiling setup I need? Does WordPress itself somehow handle these odd-looking JS files? Thanks.

@chrisvanpatten

This comment has been minimized.

Show comment
Hide comment
@chrisvanpatten

chrisvanpatten Aug 13, 2018

Contributor

@ryancwalsh The example I sent uses JSX, which needs to be compiled (the instructions are in the README in that repo). Gutenberg does provide some back-compat for older JavaScript with the el function but I'm not super well-versed on the specifics of that. This might be a good place to start examining: https://github.com/WordPress/gutenberg-examples/blob/master/05-recipe-card/block.js

Contributor

chrisvanpatten commented Aug 13, 2018

@ryancwalsh The example I sent uses JSX, which needs to be compiled (the instructions are in the README in that repo). Gutenberg does provide some back-compat for older JavaScript with the el function but I'm not super well-versed on the specifics of that. This might be a good place to start examining: https://github.com/WordPress/gutenberg-examples/blob/master/05-recipe-card/block.js

@ryancwalsh

This comment has been minimized.

Show comment
Hide comment
@ryancwalsh

ryancwalsh commented Aug 13, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment