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.

Sign up for GitHub

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

Jump to bottom

Inserter: Long block names - line break #8047

Closed
Soean opened this issue Jul 19, 2018 · 7 comments · Fixed by #64667
Closed

Inserter: Long block names - line break #8047

Soean opened this issue Jul 19, 2018 · 7 comments · Fixed by #64667
Assignees
@t-hamano
Labels
CSS Styling Related to editor and front end styles, CSS-specific issues. [Feature] Inserter The main way to insert blocks using the + button in the editing interface Good First Issue An issue that's suitable for someone looking to contribute for the first time [Package] Block library /packages/block-library [Status] In Progress Tracking issues with work in progress [Type] Enhancement A suggestion for improvement.

Comments

@Soean
Copy link
Member

Soean commented Jul 19, 2018 •
edited
Loading

Describe the bug
If the block name is very long it just breaks in a new line.
Example:
wpblocks de_wp-admin_post php_post 508 action edit 1

With hyphens: auto, we can set the break at a correct position.
wpblocks de_wp-admin_post php_post 508 action edit 4

This feature doesn't work on Chrome/Windows, see https://caniuse.com/#feat=css-hyphens But it's an enhancement for all other users.
@Soean Soean added the [Type] Enhancement A suggestion for improvement. label Jul 19, 2018
@mtias mtias added the Needs Design Feedback Needs general design feedback. label Jul 19, 2018
@hedgefield
Copy link

Seems fine to me, it's a small non-essential visual tweak, and it forces the use of the lang attribute which I understand is good for accessibility.

@karmatosed
Copy link
Member

As a check is hyphens used in core? If so then I don't mind.

@karmatosed karmatosed removed the Needs Design Feedback Needs general design feedback. label Jul 26, 2018
@Soean Soean mentioned this issue Oct 20, 2018
Closed
@La-Geek
Copy link

La-Geek commented Oct 20, 2018

Please look at the browser stats. Chrome is the most used browser worldwide.
Probably the hyphenator.js would solve this issue -> https://github.com/mnater/hyphenator

@designsimply designsimply added [Feature] Inserter The main way to insert blocks using the + button in the editing interface [Package] Block library /packages/block-library and removed [Feature] Inserter The main way to insert blocks using the + button in the editing interface labels Oct 23, 2018
@tellthemachines
Copy link
Contributor

Browser support for this feature is actually not bad though Chrome on Windows inexplicably fails. I'd agree with adding it as a progressive enhancement.

@tellthemachines tellthemachines added the CSS Styling Related to editor and front end styles, CSS-specific issues. label Apr 21, 2020
@mtias mtias added the Good First Issue An issue that's suitable for someone looking to contribute for the first time label Aug 30, 2020
@laras126
Copy link
Contributor

laras126 commented Apr 22, 2021 •
edited
Loading

Tried this out just in the inspector and seems like a straightforward fix! Since browsers ignore CSS properties they don't support, I don't think there's anything we need for progressive enhancement here.

Also, the latest 5 versions of Chrome have full support for auto.

@mtias mtias added the [Feature] Inserter The main way to insert blocks using the + button in the editing interface label May 22, 2022
@t-hamano
Copy link
Contributor

t-hamano commented Apr 9, 2023

I have tested with a few words and it appears that hyphenation is not always done at the proper place. Also, according to MDN, non-English languages do not appear to be supported yet.

For now, I think it is better not to hyphenate. What do you think?

Pneumonoultramicroscopicsilicovolcanoconiosis

Before After
Pneumonoultramicroscopicsilicovolcanoconiosis_before Pneumonoultramicroscopicsilicovolcanoconiosis_after

Supercalifragilisticexpialidocious

Before After
Supercalifragilisticexpialidocious_before Supercalifragilisticexpialidocious_after

@t-hamano
Copy link
Contributor

I've thought about this issue a bit more, and am beginning to think that if it's an improvement for a specific OS or language, it might be worth going ahead with.

Currently, hyphens: auto is used in the following two places in the Gutenberg project:

gutenberg/packages/components/src/tabs/styles.ts

Line 78 in 159d01a

hyphens: auto;

gutenberg/packages/editor/src/components/post-panel-row/style.scss

Line 16 in 159d01a

hyphens: auto;

It seems to be used widely in core:

https://github.com/search?q=repo%3AWordPress%2Fwordpress-develop%20hyphens%3A%20auto&type=code

@t-hamano t-hamano self-assigned this Jul 29, 2024
@t-hamano t-hamano mentioned this issue Aug 21, 2024
Merged
@github-actions github-actions bot added the [Status] In Progress Tracking issues with work in progress label Aug 21, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@t-hamano t-hamano

Labels
CSS Styling Related to editor and front end styles, CSS-specific issues. [Feature] Inserter The main way to insert blocks using the + button in the editing interface Good First Issue An issue that's suitable for someone looking to contribute for the first time [Package] Block library /packages/block-library [Status] In Progress Tracking issues with work in progress [Type] Enhancement A suggestion for improvement.
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Try: Hyphenate long block names in the inserter WordPress/gutenberg
9 participants
@karmatosed @laras126 @mtias @Soean @designsimply @La-Geek @hedgefield @tellthemachines @t-hamano