Making inner blocks easier to locate.

[paaljoachim]

What problem does this address?

I added the Query Loop and tried to figure out why the page did not automatically show a next page (1,2,3 etc) on the bottom of the posts that were being previewed.

I was told that I had to add the Pagination Inner block. Inspired by my comment here: https://github.com/WordPress/gutenberg/pull/35347#issuecomment-1031400593

Adding an inner block. In this case Pagination is so:

1. Be sure that the Query Loop block is selected.
2. Scroll to the bottom and locate the + icon in the bottom right corner. Click it.
3. The in page inserter shows up and one needs to write the beginning letters for pagination.... to have it show up. Select it and add it to the page.

What is your proposed solution?

We need to make Inner blocks easier to locate and use. At the moment there is a huge discoverability problem. Inner blocks I would call a primary action, and an icon could be added to the toolbar to make adding inner blocks easier to locate.

All blocks that have inner blocks could have an icon (title: inner blocks) in the toolbar. As one clicks the Inner blocks icon an in page inserter shows up listing the inner blocks available for the block. Clicking to add an inner block would just automatically add it to the top of the parent block. The user can then click the arrow move icons or drag to place it where it is needed.

Perhaps something like this:

This way one can easily click an icon in the toolbar to get an overview of which inner blocks one can add to the specific block.

Thoughts? @jasmussen @ntsekouras @critterverse @javierarce

[aurooba]

This is a great idea, @paaljoachim! In the Super List Block, I did this thing where I made the inserter for the inner blocks far more visible and appear with higher visual priority than the inserter for the overall document – it's more of a visual fix than anything, but it's super helpful:

I definitely do the plus button solution as well you are proposing, although in my I use it to append additional inner blocks of the same kind (since only kind of inner block is allowed in my block):

The idea of showing a little list of options of inner blocks (or the whole library if that's the case) is a very cool idea.

[jasmussen]

Innerblocks can use a lot of love, for sure! I would love to see explorations that do not add any additional user interface to the canvas itself, or any of the block UI, we already have multiple ways to do that:

• Select a block and press Enter to create another blow
• Slash command in empty paragraph
• Sibling inserter
• Block's more menu, insert before/after

The top left inserter also still works, and inserts content right after the block that is selected.

The sibling inserter enhancements, as well as insertion tools in the List View, both feel like potent avenues of exploration to me 🚀

[paaljoachim]

Thank you Joen! @jasmussen

Continuing some explorations.

Select a block and press Enter to create another block and then use the slash inserter to add a block.

Inside a block where one can add inner blocks. Press enter to go to another line that automatically begins with the Paragraph block. Follow prompt and type slash / and see by default the Inner block list. Something similar to this.

Perhaps when inside a block containing inner blocks the slash prompt can be adjusted:

---

Block Inserter

For instance after adding the Query Loop block. (When a block containing inner blocks is present on the page/post.) Clicking the Block Inserter could first show a section called Query Loop Inner blocks.

---

Sibling inserter

Clicking to add a block while inside the Query Loop block.

Could initially show a search query for Query Loop Inner blocks, and show the available blocks. One thing that comes up is that there are more than 6 inner blocks for the Query Loop. A user might think there are only the 6 inner blocks available as that is what is being seen.

---

Block's more menu, insert before/after I skipped this approach for now.

List view

That is more challenging. Brain storming... I open List View and click the top level Query Loop. Adding a symbol to say that this is a parent block with inner blocks. Adding under the contextual/3 dot menu a method to insert inner blocks. Inner block icon.

Let's say that opening List View one sees an inner block icon next to the 3 dot drop down menu. One clicks the inner block icon and a kind of in page inserter shows up or a kind of slash list of inner blocks is seen. (Does not feel right but I am just brainstorming.)

Here is another approach. I added an info bubble the user can hover or click to get information about the specific block.

[lapinell]

I could probably take some of these and do some user testing to help aid in decision making. Can be rapid with 1 or 2 users or more in-depth. Thoughts?

[critterverse]

I could probably take some of these and do some user testing to help aid in decision making.

This is an awesome idea, @lapinell! 😀 You could always share your findings on this issue or directly in the #design Slack channel. I also wanted to mention the Full Site Editing Outreach Program, which I think you might find interesting. You can find more info in the handbook, or just join the #fse-outreach-experiment channel in the WordPress Slack instance. The FSE program does reoccurring calls for testing on new and upcoming features, so you might find some likeminded contributors in that channel (and will definitely find some more ideas for interesting stuff to test!).

[karmatosed]

For now, this feels like just having the feedback label not also needs design makes most sense. Let's ensure we get that but focus a little.