Add graphical empty state into block inserter

[truchot]

Description

Add graphical empty state into inserter block related to #17122

Screenshots

Types of changes

I added ::before pseudo-element to create graphical empty state and I centered vertically and horizontally the "no results" block.

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.

[mapk]

Thanks for taking this on, @truchot! First, the "no blocks" state looks fantastic.

However, the other states of the Inserter/Library are now centering awkwardly.

And, when searching a finding a block:

It looks to me like the centering you applied might be bleeding into the rest of the Inserter?

[kjellr]

Thanks, @truchot! In general, this looks great. I'm seeing just one last bug: double lines in between panels.

This PR

Master

[truchot]

Thanks @kjellr for the feedback I fix it :)

[kjellr]

Sorry for the delayed review, @truchot! I've added a couple comments, but have a more general implementation note, too:

After thinking about this more, I think it makes more sense to use an SVG instead of drawing it this way. Doing so would ensure that this icon would align to any other Material-based question mark icons we use elsewhere in the UI.

It would be best to do this in JS, but alternatively if we want to stick to CSS, we could we try inlining the SVG instead. Something like:

content: url('data:image/svg+xml;utf8,<svg width='24' height='24' viewbox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M8 10c0-2.21 1.79-4 4-4s4 1.79 4 4c0 1.283-.79 1.973-1.56 2.646C13.712 13.283 13 13.905 13 15h-2c0-1.821.942-2.543 1.77-3.178.65-.498 1.23-.943 1.23-1.822 0-1.1-.9-2-2-2s-2 .9-2 2H8zM13 16v2h-2v-2h2z' fill='#6c7781'/></svg>);

[truchot]

Thanks @kjellr ! I fix spacing with grid size variables and I display icon within JS as you prefer.

[Soean]

@truchot Oh, no feedback since september. There seems to be a merge conflict now. Can you rebase the master, so we can test it again?

[Mamaduka]

Hi, @truchot

Sorry, I think this PR fell into the cracks. The original issue was resolved via #21944, and the "No results" state for Inserter has been improved since then

I'm going to close this PR.

Thanks for your contributions!

Screenshot