Opened 8 months ago
Closed 6 months ago
#60851 closed defect (bug) (fixed)
Bulk edit and quickedit needs more space for longer translations
Reported by: | zodiac1978 | Owned by: | swissspidy |
---|---|---|---|
Milestone: | 6.6 | Priority: | normal |
Severity: | normal | Version: | 6.3 |
Component: | Quick/Bulk Edit | Keywords: | has-screenshots has-patch |
Focuses: | ui | Cc: |
Description
In #25753 we introduced more space (5em was the default, we needed 7em) for .locale-de-de .inline-edit-row fieldset label span.title
in the German locale.
After that, #28303 added this change to the new formal locale .locale-de-de-formal
But in #33212 this was removed again by @ocean90 and the new default was 6em.
This wasn't enough for ru_RU which got 8em.
In WordPress 6.2 the string "Parent" was translated with "Eltern" and for this 6em was okay:
https://translate.wordpress.org/projects/wp/6.2.x/admin/de/default/?filters%5Bstatus%5D=either&filters%5Boriginal_id%5D=16083988&filters%5Btranslation_id%5D=105887217
But in WordPress 6.3 this was changed to "Übergeordnet":
https://translate.wordpress.org/projects/wp/6.3.x/de/default/?filters%5Bstatus%5D=either&filters%5Boriginal_id%5D=16507337&filters%5Btranslation_id%5D=109126351
Now the translation is too long and 6em space is not sufficient anymore.
Re-adding the 7em width would solve this issue again.
There is also the same problem with the Polish locale which has a very long translation:
https://translate.wordpress.org/projects/wp/dev/pl/default/?filters%5Bstatus%5D=either&filters%5Boriginal_id%5D=16087645&filters%5Btranslation_id%5D=106835593
Attachments (15)
Change History (37)
#1
@
8 months ago
- Keywords has-patch dev-feedback added
I think there are 3 possible solutions here:
- We could change the translation to a shorter string - I think this was an intentional change, because "Übergeordnet" is much better than the literal translation of "Parent" with "Eltern".
- We could switch to a better CSS design using flexbox or grid, but as I understand, this would need more markup changes and as the admin design will get a refresh in the future this sounds like the wrong approach.
- We could re-introduce the bigger width for the German locale (which is provided in the patch).
This does not fix the problem with the Polish translation, but I pinged someone from the Polish community to take a look. Maybe they can fix it with shortening the string.
Edit: Here is the link for the Polish translation.
#3
follow-up:
↓ 4
@
7 months ago
I think there can be simple enough CSS patch: flex to label, margin:auto to children, line-height:1.4 for .title. I believe that making exceptions for different locales is not the right things to do.
#4
in reply to:
↑ 3
;
follow-up:
↓ 8
@
7 months ago
Replying to oglekler:
I think there can be simple enough CSS patch: flex to label, margin:auto to children, line-height:1.4 for .title. I believe that making exceptions for different locales is not the right things to do.
I do not think there is an easy CSS patch possible with the current markup. We either make an exception for some locales or we raise the width for all. It is an easy fix which was already used in the past.
Fiddling with markup and CSS will mean to punt this ticket as this will be not ready for 6.6 in time.
This ticket was mentioned in Slack in #core by nhrrob. View the logs.
6 months ago
#6
follow-up:
↓ 7
@
6 months ago
- Milestone changed from 6.6 to 6.7
We have reviewed this in today's bug scrub.
Looks like it won't be ready for 6.6
Punting to the next release 6.7.
#7
in reply to:
↑ 6
@
6 months ago
- Keywords 2nd-opinion added
Replying to nhrrob:
We have reviewed this in today's bug scrub.
Looks like it won't be ready for 6.6
Punting to the next release 6.7.
This is such a disappointing decision. There is a patch available, and the other options do not make any sense with the upcoming redesign of the admin area in mind. Why don't we fix it in the meantime?
This locale specific solution was used before and for other problems of the same kind.
Pinging @ocean90 and @swissspidy for a second opinion on this matter.
#8
in reply to:
↑ 4
;
follow-up:
↓ 9
@
6 months ago
I think there can be simple enough CSS patch: flex to label, margin:auto to children, line-height:1.4 for .title. I believe that making exceptions for different locales is not the right things to do.
I do not think there is an easy CSS patch possible with the current markup. We either make an exception for some locales or we raise the width for all. It is an easy fix which was already used in the past.
Fiddling with markup and CSS will mean to punt this ticket as this will be not ready for 6.6 in time.
Well, has this been tested already? Maybe as a quick mockup in the browser's dev tools?
If it's too complex then something like the current patch is an OK solution for now, unless many more locales are affected. Keep in mind though it only works for de_DE, not de_AT or de_CH.
There is also the same problem with the Polish locale which has a very long translation
Are any other locales affected?
#9
in reply to:
↑ 8
@
6 months ago
Replying to swissspidy:
Well, has this been tested already? Maybe as a quick mockup in the browser's dev tools?
I couldn't get this working with just CSS in the browser dev tools. This is because every row has no connection to the other rows, therefore the width of one column has no effect to other columns.
I think the checkbox in the bulk edit variant make it even more difficult.
If it's too complex then something like the current patch is an OK solution for now, unless many more locales are affected. Keep in mind though it only works for de_DE, not de_AT or de_CH.
As de_AT and de_CH are copying from DE, every of those locales is affected:
de_DE, de_DE-formal, de_AT, de_CH, de_CH-informal
We could also try to use an attribute selector to shorten this up:
Something like body[class*="locale-de-"]
Are any other locales affected?
I am not 100% sure, but checked many and the DE variants and Polish were the only ones I found.
This ticket was mentioned in PR #6675 on WordPress/wordpress-develop by @oglekler.
6 months ago
#10
Fix with Grid
Trac ticket: https://core.trac.wordpress.org/ticket/60851
This ticket was mentioned in PR #6676 on WordPress/wordpress-develop by @oglekler.
6 months ago
#11
Line height change
Trac ticket: https://core.trac.wordpress.org/ticket/60851
#12
follow-up:
↓ 13
@
6 months ago
@zodiac1978 can you take a look at two possible options I suggested? There is little time, but I think we still can finalize the solution or make an improvement this release and move further work to the next. I also don't like breakable layout and think that this should be fixed.
#13
in reply to:
↑ 12
@
6 months ago
Replying to oglekler:
@zodiac1978 can you take a look at two possible options I suggested? There is little time, but I think we still can finalize the solution or make an improvement this release and move further work to the next. I also don't like breakable layout and think that this should be fixed.
You only provided a screenshot for Bulk Edit. For me both version are still broken with using the "Quickedit" link.
It is working for the "Selects", but still broken for "Input" and the "Checkbox" is even more difficult. This should be next to the text ...
#14
@
6 months ago
@zodiac1978, sorry, I did only Bulk Edit to make my point that this can be fixed without special exceptions 🤷 There are two possible options to choose from, with their pros and cons. Grid is more flexible, but I am not sure that it's support is good enough for our case: https://caniuse.com/css-subgrid
#15
@
6 months ago
Let me sum it up:
Fiddling with markup and CSS will mean to punt this ticket as this will be not ready for 6.6 in time.
If it's too complex then something like the current patch is an OK solution for now, unless many more locales are affected. Keep in mind though it only works for de_DE, not de_AT or de_CH.
As de_AT and de_CH are copying from DE, every of those locales is affected:
de_DE, de_DE-formal, de_AT, de_CH, de_CH-informal
We could also try to use an attribute selector to shorten this up:
Something like body[class*="locale-de-"]
I would suggest using my approach for now and fix this better in 6.7 in a new ticket. This needs more time for research and discussion to fix this in a more modern and dynamic way.
#16
@
6 months ago
@swissspidy what do you think? I don't like an idea of temporarily fixes, but this one is quite simple. I have doubts if this is an enhancement as well, because it looks like a bug fix.
#17
@
6 months ago
- Keywords dev-feedback 2nd-opinion removed
- Milestone changed from 6.7 to 6.6
- Owner set to swissspidy
- Status changed from new to reviewing
- Type changed from enhancement to defect (bug)
I think it's fine to fix this like this for now.
#19
@
6 months ago
@swissspidy I don't know if I need to open a new ticket or if this could be handled here.
I copied the same selector twice and missed some (compared to the same fix for ru_RU locale).
60851.3.diff fixes both.
There is still one negligible error:
With our patch we override .quick-edit-row-post fieldset.inline-edit-col-right label span.title
which has a width set to auto and this is now set to 7em. But as this creates no layout error, I think it could stay this way.
#21
@
6 months ago
We could also fix the last mentioned layout issue with this code:
body[class*="locale-de-"] .quick-edit-row-post fieldset.inline-edit-col-right label span.title, .locale-ru-ru .quick-edit-row-post fieldset.inline-edit-col-right label span.title, .locale-lt-lt .quick-edit-row-post fieldset.inline-edit-col-right label span.title { width: auto; }
Broken layout in German locale (bulk edit)