Skip to content

Editor: Add vertical margin between Save Draft and Preview buttons in Classic Editor - #13807

Open
robelsust wants to merge 2 commits into
WordPress:trunkfrom
robelsust:trac-66188
Open

robelsust wants to merge 2 commits into
WordPress:trunkfrom
robelsust:trac-66188

Conversation

@robelsust

Copy link
Copy Markdown

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. French fr_FR or German de_DE), or on narrow sidebar viewports. Previously, when wrapping occurred, the buttons collided vertically with zero margin between them.

This PR updates #minor-publishing-actions to use flexbox layout, consistent with the existing modernization in #major-publishing-actions:

  1. Flexbox with wrapping and gap: Sets #minor-publishing-actions to display: 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.
  2. Hide legacy clearfix: Sets #minor-publishing-actions .clear { display: none; } as float clearing is no longer required with flex layout.
  3. Centered spinner beside button: Sets #save-action to display: 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.
  4. End alignment for Preview: Sets #preview-action to margin-left: auto; text-align: right; (which Grunt RTL build automatically mirrors to margin-right: auto; text-align: left;), preserving end-edge alignment both when side-by-side and when wrapped.
  5. Clean up obsolete overrides: Removes #save-action .spinner float override in edit.css.

Testing Instructions

  1. In WordPress admin, install and activate the Classic Editor plugin (or test any post edit screen with the Classic Editor Publish meta box).
  2. Switch site language to French (fr_FR) or German (de_DE), or inspect and artificially lengthen the "Save Draft" button text (e.g. "Enregistrer le brouillon").
  3. Narrow the Publish meta box sidebar width until the "Save Draft" and "Preview" buttons wrap onto separate lines.
  4. Verify that:
    • There is an 8px vertical gap between the top button and bottom button (no collision).
    • The Preview button aligns cleanly to the right edge (LTR) or left edge (RTL).
    • Clicking "Save Draft" displays the spinner vertically centered beside the button.
  5. Test in RTL mode (e.g., Arabic or Hebrew) to confirm proper mirroring.

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.

… 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.
@github-actions

github-actions Bot commented Sep 29, 2026 •

Copy link
Copy Markdown

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:

Props therssoftware, joedolson.

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.


Props Bot commands

You can trigger Props Bot actions by commenting on this PR:

  • @propsbot add <username> to give props to a GitHub user. Requires write access.
  • @propsbot remove <username> to leave a user out of the props. Requires write access.
  • @propsbot refresh to refresh this list. Adding the props-bot label works too.

@github-actions

Copy link
Copy Markdown

Test using WordPress Playground

The 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

  • All changes will be lost when closing a tab with a Playground instance.
  • All changes will be lost when refreshing the page.
  • A fresh instance is created each time the link below is clicked.
  • Every time this pull request is updated, a new ZIP file containing all changes is created. If changes are not reflected in the Playground instance,
    it's possible that the most recent build failed, or has not completed. Check the list of workflow runs to be sure.

For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation.

Test this pull request with WordPress Playground.

@joedolson joedolson left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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;

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there a reason to set this empty clearing div to display: none; instead of removing the div?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants