Skip to content

Improve classic editor visibility controls layout #12298

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

Closed
poligilad-auto wants to merge 4 commits into from
Closed

Improve classic editor visibility controls layout #12298

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
370285e
Improve publish box visibility controls
poligilad-auto Jun 24, 2026
8215f0c
Address visibility controls review feedback
poligilad-auto Jun 29, 2026
d9a5bee
Address visibility control alignment feedback
poligilad-auto Jun 30, 2026
eac43f6
Group visibility control wrapper styles
poligilad-auto Jun 30, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 43 additions & 0 deletions src/wp-admin/css/edit.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -712,6 +712,45 @@ form#tags-filter {
margin-top: 3px;
}

#post-visibility-select {
--post-visibility-control-gap: 3px;

margin-left: var(--post-visibility-control-gap);
}

#post-visibility-select input#post_password {
box-sizing: border-box;
width: 100%;

@tyxla tyxla Jun 30, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

This is now overwriting the pre-existing width: 94% in this same file. We might want to remove the lower specificity rule as it's redundant.

@poligilad-auto poligilad-auto Jun 30, 2026

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

Good point. I kept the existing lower-specificity #side-sortables input#post_password rule in place to avoid expanding the scope of this PR by removing a long-standing selector. The new width: 100% rule is scoped to #post-visibility-select, where the password field now needs to fit the indented Visibility controls.

margin-top: 3px;
}

#post-visibility-select input[type="radio"],
#post-visibility-select input#sticky {

@tyxla tyxla Jun 26, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

There's a #post-visibility-select { line-height: 280%; } mobile breakpoint - should we update it?

@poligilad-auto poligilad-auto Jun 29, 2026

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

Added a mobile-specific line-height override for #password-span, while leaving the existing larger mobile line-height for the rest of the visibility controls.

margin-top: 2px;
margin-right: var(--post-visibility-control-gap);
margin-bottom: 5px;
vertical-align: middle;
}

#post-visibility-select #sticky-span,
#post-visibility-select #password-span {
display: block;
margin-left: calc(1rem + var(--post-visibility-control-gap) + 0.25em);
margin-top: 2px;
}

#post-visibility-select #sticky-span {
margin-bottom: 2px;
}

#post-visibility-select #password-span {
margin-bottom: 6px;
}

#post-visibility-select p {
margin: 12px 0 0;

@tyxla tyxla Jun 30, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Ideally this would have been a bottom margin of the upper element, but I can see why we're doing it - targeting this when we also have a toggleable password field won't make it simpler. So, good to leave as-is.

@poligilad-auto poligilad-auto Jun 30, 2026

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

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

Thanks, left this as-is for the reason you mentioned: the password field is toggleable, so keeping the spacing scoped here keeps the CSS simpler.

}

#linksubmitdiv .inside, /* Old Link Manager back-compat. */
#poststuff #submitdiv .inside {
margin: 0;
Expand Down Expand Up @@ -1894,6 +1933,10 @@ table.links-table {
line-height: 280%;
}

#post-visibility-select #password-span {
line-height: 1.5;
}

.wp-core-ui .save-post-visibility,
.wp-core-ui .save-timestamp {
vertical-align: middle;
Expand Down
Loading