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

Is the block selection list too narrow for long block titles? #20006

Closed
bobbingwide opened this issue Feb 3, 2020 · 2 comments
Closed

Is the block selection list too narrow for long block titles? #20006

bobbingwide opened this issue Feb 3, 2020 · 2 comments
Labels
[Feature] Inserter The main way to insert blocks using the + button in the editing interface Needs Design Feedback Needs general design feedback. [Package] i18n /packages/i18n [Type] Enhancement A suggestion for improvement.

Comments

@bobbingwide
Copy link
Contributor

Describe the bug
I'm developing a new block which currently has a 40 character title (1st example - above the ruler).

When the block selection list is displayed it gets wrapped onto 2 lines.
It doesn't look right.

Content block for dynamic oik-shortcodes
----+----1----+----2----+----3----+----4----+----5----+----6----+----7----+----8----+----9
Content block for dynamic oik-shortcodes. Expands dynamic content oik shortcodes.
Content block for dynamic oik-shortcodes. Expands dynamic content oik shortcodes. OK in block manager?

When the block name is longer ( 2nd and 3rd example ) part of the title isn't displayed.

Note: When the block name is longer the Block Manager can handle it.
The Block Manager expands as the block title gets longer.
The Block Inserter also displays the full title.

BTW. I'm using Chrome on Desktop here.

To reproduce
Steps to reproduce the behavior:

  1. Register a block with a long title: attribute.
  2. At the block inserter type /startofthelongblocknameyouchose
  3. See the popup with the block name wrapped and cropped.

Expected behavior
I don't know what should happen. That's why it's a question.
Whatever solution is proposed it should cater for translations,
which are often longer than the English.
eg. bloc de contenu pour les codes courts dynamiques.

Easy suggestion. Perhaps the documentation needs to be updated to recommend using a shortish title.
https://developer.wordpress.org/block-editor/developers/block-api/block-registration/

Screenshots
image

If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

  • OS: [e.g. iOS] Windows
  • Browser [e.g. chrome, safari] Chrome
  • Version [e.g. 22] 79.0.3945.130

Smartphone (please complete the following information):

  • Device: [e.g. iPhone6]
  • OS: [e.g. iOS8.1]
  • Browser [e.g. stock browser, safari]
  • Version [e.g. 22]

Additional context
Gutenberg 7.3.0
See also #1721

@jorgefilipecosta jorgefilipecosta added [Feature] Inserter The main way to insert blocks using the + button in the editing interface [Package] i18n /packages/i18n Needs Design Feedback Needs general design feedback. [Type] Enhancement A suggestion for improvement. labels Feb 3, 2020
@mapk
Copy link
Contributor

mapk commented Feb 3, 2020

I tested this and noticed and only noticed an issue in the / slash inserter. The other instances had a somewhat decent solution.

The / slash inserter

The words seemed to be centered when pushed to two lines.

Screen Shot 2020-02-03 at 12 07 36 PM

The Block Manager

The really long name just pushes the modal to be wider.

Screen Shot 2020-02-03 at 12 09 20 PM

The Block Library

The text is restrained but pushed to multiple lines.

Screen Shot 2020-02-03 at 12 11 29 PM

@mapk
Copy link
Contributor

mapk commented May 12, 2020

I recently tested the / inserter and it looks better now.

Screen Shot 2020-05-12 at 9 15 40 AM

@mapk mapk closed this as completed May 12, 2020
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 Needs Design Feedback Needs general design feedback. [Package] i18n /packages/i18n [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

No branches or pull requests

3 participants