Repository navigation
Conversation
… Classic Editor. Convert minor-publishing-actions to flexbox with wrap and 8px gap so that when the buttons wrap in translated languages, they do not collide vertically. Also align save-action and its spinner using flexbox, preventing the spinner from misaligning or causing float issues. Props therssoftware. See #66188.
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. Core Committers: Use this line as a base for the props when committing in SVN: To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. Props Bot commandsYou can trigger Props Bot actions by commenting on this PR:
|
Test using WordPress PlaygroundThe changes in this pull request can previewed and tested using a WordPress Playground instance. WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser. Some things to be aware of
For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation. |
joedolson
left a comment
There was a problem hiding this comment.
It would be good to have some testing of this while using plugins that insert content into the minor publishing actions container, as these layout changes need to be able to work with custom content, as well.
| #save-post { | ||
| float: left; | ||
| #minor-publishing-actions .clear { | ||
| display: none; |
There was a problem hiding this comment.
Is there a reason to set this empty clearing div to display: none; instead of removing the div?
Trac ticket: https://core.trac.wordpress.org/ticket/66188
Description
In the Classic Editor's "Publish" meta box (
#minor-publishing-actions), the "Save Draft" and "Preview" buttons wrap onto two lines when button labels are translated into longer strings in non-English locales (e.g. Frenchfr_FRor Germande_DE), or on narrow sidebar viewports. Previously, when wrapping occurred, the buttons collided vertically with zero margin between them.This PR updates
#minor-publishing-actionsto use flexbox layout, consistent with the existing modernization in#major-publishing-actions:#minor-publishing-actionstodisplay: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;. This ensures a clean 8px vertical separation whenever the buttons wrap to multiple lines.#minor-publishing-actions .clear { display: none; }as float clearing is no longer required with flex layout.#save-actiontodisplay: flex; align-items: center;and removes the float on its child.spinner(float: none; margin-top: 0; margin-bottom: 0;), keeping the loading spinner vertically centered beside the button without float wrapping issues.#preview-actiontomargin-left: auto; text-align: right;(which Grunt RTL build automatically mirrors tomargin-right: auto; text-align: left;), preserving end-edge alignment both when side-by-side and when wrapped.#save-action .spinnerfloat override inedit.css.Testing Instructions
fr_FR) or German (de_DE), or inspect and artificially lengthen the "Save Draft" button text (e.g. "Enregistrer le brouillon").Props therssoftware.
AI Disclosure: In accordance with the WordPress AI policy, I disclose that generative AI (Google Antigravity) was used in drafting the CSS changes and testing across LTR/RTL locales, and all changes were manually reviewed and verified.