![(please configure the [header_logo] section in trac.ini)](/chrome/site/your_project_logo.png){kind=logo}
Opened 4 weeks ago
Last modified 4 weeks ago
#65469 new defect (bug)
Backend: Publish
| Reported by: | krisseeuw | Owned by: | |
|---|---|---|---|
| Priority: | normal | Milestone: | Awaiting Review |
| Component: | Editor | Version: | 7.0 |
| Severity: | normal | Keywords: | 2nd-opinion |
| Cc: | Focuses: | ui, css |
Description
In WordPress 7, the publish-options have visual formatting issues. This is dependent on the language and size of texts and buttons. I have issues when using German, though the formatting issues are visible in English as well.
The core problem is that functions are no longer on different lines, but somehow in a single line. If the text is too long, buttons are moved out of sight and no longer available (like: "Publish" or "Update"). I guess it's a CSS issue.
Attachments (4)
Change History (11)
#2
@
4 weeks ago
Hi Gautam
Thank you for your prompt reply. Indeed, I was not precise enough. You are right, it is about the editor. I do not use the Gutenberg editor, as my WordPress-theme has an enhanced version of WP Bakery, which I use.
Theme: Uncode (undsgn.com)
Plug-ins needed: Uncode Core and the enhanced version of WP Bakery.
I switched off all other plug-ins, with the same issue.
Here are two screenshots:
https://e.pcloud.link/publink/show?code=kZEnQcZjxyiM4fqQIHVrNnyxLfFtkkR1s7X
One screenshot is in German. Site: kernbeisser.ch.
One screenshot is in English: Site: fmstarter.com.
German needs longer texts. You see how it afflicts the size of buttons etc.
English has shorter texts, but also shows the same issues.
What changed:
The links in the publish part, particularly in the lower part, were each on a separate line. That is no longer the case. The button to Publish/Update is now pushed out under the border of the surrounding area. Result: Buttons disappear. This particularly affects the Update button once a post has been published.
Does that clarify the issue?
Regards
Karsten
@
4 weeks ago
Publish metabox for a draft post, in German (de-DE), with Yoast Duplicate Post and Yoast SEO active
@
4 weeks ago
Publish metabox in German, abbreviating the Save Draft button text to "Speichern" and showing the spinner image
#3
@
4 weeks ago
- Focuses accessibility removed
- Keywords 2nd-opinion added; needs-patch removed
Hi!
The issue with the major actions at the bottom is reported on #65286, and there is a hotfix for that until 7.0.1 is released. The flex-wrap hotfix apparently is active in your English site, where the Duplicate Post plugin's actions display above Publish/Update. However, the plugin's bottom margins still do not work well with the flex display:
- "Copy to a new draft":
#duplicate-action { margin-bottom: 12px } - "Rewrite & Republish":
#rewrite-republish-action { margin-bottom: -2px }
Related: https://github.com/Yoast/duplicate-post/issues/512
In the minor publishing actions at the top of the meta box, the two buttons do not line up vertically because they still use float, and a spinner image is hidden next to the Save button until it indicates saving the draft. Flex display might fit for that container, too, but it also would need to wrap to another line. A gap could be appropriate there, especially between rows if the buttons would wrap.
If it is not worth editing the CSS for the minor action buttons at the top, this ticket can be closed as a duplicate of #65286.
#4
follow-up:
↓ 5
@
4 weeks ago
Thanks for the detailed report @krisseeuw and for the analysis @sabernhardt
Since the major issue of this ticket is related to the action buttons at the bottom of the panel, and since the top buttons don't pose any usability issues, I think this ticket can be marked as a duplicate of #65286.
Also, @sabernhardt is the spacing issue with the top buttons introduced by the Yoast plugin or is it something that needs to be handled by the core regardless?
#5
in reply to: ↑ 4
;
follow-up:
↓ 7
@
4 weeks ago
is the spacing issue with the top buttons introduced by the Yoast plugin or is it something that needs to be handled by the core regardless?
The two Yoast plugins do not affect the top buttons' alignment or spacing. Improving that would involve editing core CSS.
#7
in reply to: ↑ 5
@
4 weeks ago
[edited]
Thank you for quality and competence in all the answers here. I truly appreciate that. Let me add some more details according to my observations:
Replying to sabernhardt:
is the spacing issue with the top buttons introduced by the Yoast plugin or is it something that needs to be handled by the core regardless?
I tested without any plug-ins and had the same issues. To properly distinguish:
Top:
The top buttons line up just fine. The only thing interfering here seem to be the translations. If languages has long translations, this affects the size and positioning.
Bottom:
The text links in WP 6 were each on a line. Current CSS does not do that, thus everything is scrambling on a single line. Add a line break after each text link will probably fix it.
The two Yoast plugins do not affect the top buttons' alignment or spacing. Improving that would involve editing core CSS.
Correct. As explained above, this is not CSS probably, but translation. German has two long texts, while English has shorter texts. That affects the display.
I hope this feedback is useful. Happily leaving this now to the team :-)
Regards
Karsten
Hi @krisseeuw
Can you share a screenshot or reproduction steps that can help someone verify the issue?
From what I could understand from the description of the ticket, you seem to be referring to the the Update/Publish button in the editor. Although, I was not able to reproduce the behaviour.