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

Add graphical empty state into block inserter #17326

Closed

Conversation

truchot
Copy link
Contributor

@truchot truchot commented Sep 4, 2019

Description

Add graphical empty state into inserter block related to #17122

Screenshots

localhost_1234_

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
Copy link
Contributor

mapk commented Sep 5, 2019

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

Screen Shot 2019-09-05 at 7 44 35 AM

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

Screen Shot 2019-09-05 at 7 43 55 AM

And, when searching a finding a block:

Screen Shot 2019-09-05 at 7 44 25 AM

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

@kjellr
Copy link
Contributor

kjellr commented Sep 5, 2019

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

This PR

Screen Shot 2019-09-05 at 3 46 28 PM

Master

Screen Shot 2019-09-05 at 3 46 58 PM

…:truchot/gutenberg into add/block-inserter-graphical-empty-state

# Conflicts:
#	packages/block-editor/src/components/inserter/style.scss
@truchot
Copy link
Contributor Author

truchot commented Sep 6, 2019

Thanks @kjellr for the feedback I fix it :)

@truchot truchot requested a review from mapk September 8, 2019 19:32
@talldan talldan added [Feature] Inserter The main way to insert blocks using the + button in the editing interface [Type] Enhancement A suggestion for improvement. labels Sep 13, 2019
Copy link
Contributor

@kjellr kjellr left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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>);

packages/block-editor/src/components/inserter/style.scss Outdated Show resolved Hide resolved
packages/block-editor/src/components/inserter/style.scss Outdated Show resolved Hide resolved
@truchot
Copy link
Contributor Author

truchot commented Sep 28, 2019

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

@Soean
Copy link
Member

Soean commented Feb 24, 2020

@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?

Base automatically changed from master to trunk March 1, 2021 15:42
@Mamaduka
Copy link
Member

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

CleanShot 2022-09-26 at 13 12 13

@Mamaduka Mamaduka closed this Sep 26, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Inserter The main way to insert blocks using the + button in the editing interface [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants