Skip to content
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

Make the 'Insert Before' / 'Insert After' options work for block lists that don't allow the default block type #23603

Closed
Tracked by #35521
talldan opened this issue Jul 1, 2020 · 4 comments · Fixed by #59162
Labels
[Block] Buttons Affects the Buttons Block [Block] Navigation Affects the Navigation Block [Block] Social Affects the Social Block - used to display Social Media accounts [Feature] Blocks Overall functionality of blocks [Type] Enhancement A suggestion for improvement.

Comments

@talldan
Copy link
Contributor

talldan commented Jul 1, 2020

Is your feature request related to a problem? Please describe.
While working on the Navigation Block it was observed that the Insert Before and Insert After options are missing within the block.

I did some investigation, and it looks like these options only work when the Default Block (i.e. Paragraph) is supported. For blocks like Navigation, Buttons, or Social that don't support paragraphs, the options don't appear.

Describe the solution you'd like
Could Insert Before or Insert After trigger an inserter menu if the default block can't be inserted? It's unclear to me how that could work, but some design exploration might yield some results.

Describe alternatives you've considered
Another option, is that if the block only supports single inner block types (Navigation -> Navigation Link, Buttons -> Button), Insert Before could result in just that block only being inserted.

This would still result in the option being unavailable for blocks like Social that support multiple block types.

@talldan talldan added [Type] Enhancement A suggestion for improvement. [Feature] Blocks Overall functionality of blocks [Block] Buttons Affects the Buttons Block [Block] Navigation Affects the Navigation Block [Block] Social Affects the Social Block - used to display Social Media accounts Needs Design Needs design efforts. labels Jul 1, 2020
@mapk
Copy link
Contributor

mapk commented Jul 20, 2020

A couple other ideas here could include:

  1. The "Insert Before/After" can add the same block that is selected before or after. So if I have a Link block selected, it just adds a Link block before or after.
  2. Or we can change the text to reference the more common block that would be inserted. So in the case of the Nav block, it could say, "Insert Link after" or "Insert Link before"

insert-link

@mapk mapk added Needs Design Feedback Needs general design feedback. and removed Needs Design Needs design efforts. labels Jul 20, 2020
@shaunandrews
Copy link
Contributor

I'd expect that blocks can define a defaultInnerBlock, which would allow these options to work. In the case of the Buttons block, it would define it's default as the Button block and support options for "Insert Button Before/After". With the Navigation block, the default would be the Link block and support options for "Insert Link Before/After".

I wouldn't expect the Quick Library (a.k.a. Inline Inserter) to appear, as that's not how these menu options work everywhere else in the editor.

@talldan
Copy link
Contributor Author

talldan commented Feb 9, 2021

I'd expect that blocks can define a defaultInnerBlock, which would allow these options to work. In the case of the Buttons block, it would define it's default as the Button block and support options for "Insert Button Before/After". With the Navigation block, the default would be the Link block and support options for "Insert Link Before/After".

This sounds like a good suggestion, that'll probably work well for the buttons and potentially the navigation block.

For social I don't think any of the icons could be considered default, but probably just have to accept that as an edge case that can't be solved.

@gwwar
Copy link
Contributor

gwwar commented Mar 17, 2021

This is larger in scope than anticipated, so priority was lowered. I'm putting this one on hold until we close a few other navigation issues. Other folks are welcome to try fixing this one in the meantime.

To recap the exploration in #29490:

Specifying a default innerBlock works, but it's a bit limited. For blocks that have many variants a better solution would be to show the quick inserter

See how awkward this is in social links?

social-link-variations.mp4

It kind of works for navigation, but we can't transform from a page link to say a spacer.

navigationpageinsert.mp4

Folks are leaning toward leveraging the quick inserter. Note that the quick inserter already auto-inserts the block when there's only one block type available, so this works well for something like buttons that can only accept button blocks.

Here are two potential approaches:

  1. Get a quick inserter to render at the right place/index. Add additional block-editor actions as needed to toggle a quick inserter display, and update insertion point data. See half example

  2. Create a placeholder block, which is an editor only block (nothing should render on the frontend). Clicking on it will display the quick inserter.

PoC.mp4

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Buttons Affects the Buttons Block [Block] Navigation Affects the Navigation Block [Block] Social Affects the Social Block - used to display Social Media accounts [Feature] Blocks Overall functionality of blocks [Type] Enhancement A suggestion for improvement.
Projects
No open projects
Status: ✅ Done
4 participants