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

Open
poligilad-auto wants to merge 1 commit into
base: trunk
Choose a base branch
from
+118 −18
Open

Improve classic editor visibility controls layout #12298

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
23 changes: 15 additions & 8 deletions src/js/_enqueues/admin/post.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -302,7 +302,7 @@ window.wp = window.wp || {};
* All post and postbox controls and functionality.
*/
jQuery( function($) {
var stamp, visibility, $submitButtons, updateVisibility, updateText,
var stamp, visibility, $submitButtons, updateVisibility, updateText, getSelectedVisibility, setSelectedVisibility,
$textarea = $('#content'),
$document = $(document),
postId = $('#post_ID').val() || 0,
Expand Down Expand Up @@ -720,6 +720,12 @@ jQuery( function($) {
if ( $('#submitdiv').length ) {
stamp = $('#timestamp').html();
visibility = $('#post-visibility-display').html();
getSelectedVisibility = function() {
return $postVisibilitySelect.find( 'input[name="visibility"]:checked' ).val();
};
setSelectedVisibility = function( value ) {
$( '#visibility-radio-' + value ).prop( 'checked', true );
};

/**
* When the visibility of a post changes sub-options should be shown or hidden.
Expand All @@ -730,15 +736,15 @@ jQuery( function($) {
*/
updateVisibility = function() {
// Show sticky for public posts.
if ( $postVisibilitySelect.find('input:radio:checked').val() != 'public' ) {
if ( getSelectedVisibility() != 'public' ) {
$('#sticky').prop('checked', false);
$('#sticky-span').hide();
} else {
$('#sticky-span').show();
}

// Show password input field for password protected post.
if ( $postVisibilitySelect.find('input:radio:checked').val() != 'password' ) {
if ( getSelectedVisibility() != 'password' ) {
$('#password-span').hide();
} else {
$('#password-span').show();
Expand Down Expand Up @@ -821,7 +827,7 @@ jQuery( function($) {
}

// Add "privately published" to post status when applies.
if ( $postVisibilitySelect.find('input:radio:checked').val() == 'private' ) {
if ( getSelectedVisibility() == 'private' ) {
$('#publish').val( __( 'Update' ) );
if ( 0 === optPublish.length ) {
postStatus.append('<option value="publish">' + __( 'Privately Published' ) + '</option>');
Expand Down Expand Up @@ -872,7 +878,7 @@ jQuery( function($) {
if ( $postVisibilitySelect.is(':hidden') ) {
updateVisibility();
$postVisibilitySelect.slideDown( 'fast', function() {
$postVisibilitySelect.find( 'input[type="radio"]' ).first().trigger( 'focus' );
$postVisibilitySelect.find( 'input[name="visibility"]' ).first().trigger( 'focus' );
} );
$(this).hide();
}
Expand All @@ -881,18 +887,19 @@ jQuery( function($) {
// Cancel visibility selection area and hide it from view.
$postVisibilitySelect.find('.cancel-post-visibility').on( 'click', function( event ) {
$postVisibilitySelect.slideUp('fast');
$('#visibility-radio-' + $('#hidden-post-visibility').val()).prop('checked', true);
setSelectedVisibility( $( '#hidden-post-visibility' ).val() );
$('#post_password').val($('#hidden-post-password').val());
$('#sticky').prop('checked', $('#hidden-post-sticky').prop('checked'));
$('#post-visibility-display').html(visibility);
$('#visibility .edit-visibility').show().trigger( 'focus' );
updateVisibility();

@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.

Why was this necessary?

updateText();
event.preventDefault();
});

// Set the selected visibility as current.
$postVisibilitySelect.find('.save-post-visibility').on( 'click', function( event ) { // Crazyhorse branch - multiple OK cancels.
var visibilityLabel = '', selectedVisibility = $postVisibilitySelect.find('input:radio:checked').val();
var visibilityLabel = '', selectedVisibility = getSelectedVisibility();

$postVisibilitySelect.slideUp('fast');
$('#visibility .edit-visibility').show().trigger( 'focus' );
Expand All @@ -919,7 +926,7 @@ jQuery( function($) {
});

// When the selection changes, update labels.
$postVisibilitySelect.find('input:radio').on( 'change', function() {
$postVisibilitySelect.find( 'input[name="visibility"]' ).on( 'change', function() {

@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.

I think the name="visibility" is a nice improvement over just targeting input:radio before.

updateVisibility();
});

Expand Down
40 changes: 36 additions & 4 deletions src/wp-admin/css/edit.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -334,10 +334,6 @@ form#tags-filter {
min-width: 0;
}

#side-sortables input#post_password {
width: 94%
}
Comment on lines -337 to -339

@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.

Any chance this might have some unforeseen consequences?


#side-sortables .tagsdiv #newtag {
flex: 1;
min-width: 0;
Expand Down Expand Up @@ -712,6 +708,42 @@ form#tags-filter {
margin-top: 3px;
}

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

@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.

Why do we need max-width: 100% if we also have width: 100% here?

}

#post-visibility-fieldset {
margin: 0;
padding: 0;
border: 0;
}

#post-visibility-fieldset input,
#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?

margin: 2px 3px 5px 0;
vertical-align: middle;
}

#post-visibility-select #sticky-span,
#post-visibility-select #password-span {
display: block;
margin-top: 8px;
}

#post-visibility-select #sticky-span {
margin-left: 0;
}

#post-visibility-select input#post_password {

@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.

This selector already exists above, let's merge

margin-top: 3px;
}

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

#linksubmitdiv .inside, /* Old Link Manager back-compat. */
#poststuff #submitdiv .inside {
margin: 0;
Expand Down
14 changes: 8 additions & 6 deletions src/wp-admin/includes/meta-boxes.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -208,17 +208,19 @@ function post_submit_meta_box( $post, $args = array() ) {
<?php endif; ?>

<input type="hidden" name="hidden_post_visibility" id="hidden-post-visibility" value="<?php echo esc_attr( $visibility ); ?>" />
<input type="radio" name="visibility" id="visibility-radio-public" value="public" <?php checked( $visibility, 'public' ); ?> /> <label for="visibility-radio-public" class="selectit"><?php _e( 'Public' ); ?></label><br />
<fieldset id="post-visibility-fieldset">

@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.

Re-ordering DOM in the Publish metabox is not a cosmetic-only change. The order and structure of #post-visibility-select children is a long-standing public surface that countless plugins/themes hook into (inserting controls after the sticky span, after a specific radio, etc.). Moving #password-span and #sticky-span out of their historical positions is a backward-compat risk that the PR doesn't acknowledge.

<legend class="screen-reader-text"><?php _e( 'Visibility' ); ?></legend>
<input type="radio" name="visibility" id="visibility-radio-public" value="public" <?php checked( $visibility, 'public' ); ?> /> <label for="visibility-radio-public" class="selectit"><?php _e( 'Public' ); ?></label><br />
<input type="radio" name="visibility" id="visibility-radio-password" value="password" <?php checked( $visibility, 'password' ); ?> /> <label for="visibility-radio-password" class="selectit"><?php _e( 'Password protected' ); ?></label><br />
<input type="radio" name="visibility" id="visibility-radio-private" value="private" <?php checked( $visibility, 'private' ); ?> /> <label for="visibility-radio-private" class="selectit"><?php _e( 'Private' ); ?></label><br />
</fieldset>

<span id="password-span"><label for="post_password"><?php _e( 'Password:' ); ?></label> <input type="text" name="post_password" id="post_password" class="ltr" value="<?php echo esc_attr( $post->post_password ); ?>" maxlength="255" /><br /></span>

<?php if ( 'post' === $post_type && current_user_can( 'edit_others_posts' ) ) : ?>
<span id="sticky-span"><input id="sticky" name="sticky" type="checkbox" value="sticky" <?php checked( is_sticky( $post_id ) ); ?> /> <label for="sticky" class="selectit"><?php _e( 'Stick this post to the front page' ); ?></label><br /></span>
<?php endif; ?>
Comment on lines 220 to 222

@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.

AFAIK "sticky" intentionally used to be under "Public" since it only applies to Public posts. So I believe this is an unexpected / unwanted change.


<input type="radio" name="visibility" id="visibility-radio-password" value="password" <?php checked( $visibility, 'password' ); ?> /> <label for="visibility-radio-password" class="selectit"><?php _e( 'Password protected' ); ?></label><br />
<span id="password-span"><label for="post_password"><?php _e( 'Password:' ); ?></label> <input type="text" name="post_password" id="post_password" class="ltr" value="<?php echo esc_attr( $post->post_password ); ?>" maxlength="255" /><br /></span>
Comment on lines -217 to -218

@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.

Same as above with the password field


<input type="radio" name="visibility" id="visibility-radio-private" value="private" <?php checked( $visibility, 'private' ); ?> /> <label for="visibility-radio-private" class="selectit"><?php _e( 'Private' ); ?></label><br />

<p>
<a href="#visibility" class="save-post-visibility hide-if-no-js button"><?php _e( 'OK' ); ?></a>
<a href="#visibility" class="cancel-post-visibility hide-if-no-js button-cancel"><?php _e( 'Cancel' ); ?></a>
Expand Down
59 changes: 59 additions & 0 deletions tests/phpunit/tests/admin/includesMetaBoxes.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
<?php

@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.

I think this test isn't useful and can be removed

/**
* @group admin
*/
class Tests_Admin_IncludesMetaBoxes extends WP_UnitTestCase {
/**
* Editor user ID.
*
* @var int
*/
public static $editor_id;

public static function wpSetUpBeforeClass( WP_UnitTest_Factory $factory ) {
self::$editor_id = $factory->user->create( array( 'role' => 'editor' ) );
}

public function test_post_submit_meta_box_renders_visibility_controls() {
$post = self::factory()->post->create_and_get(
array(
'post_author' => self::$editor_id,
'post_status' => 'draft',
)
);

wp_set_current_user( self::$editor_id );

$output = $this->render_post_submit_meta_box( $post );

$this->assertStringContainsString( '<fieldset id="post-visibility-fieldset">', $output );
$this->assertMatchesRegularExpression( '/name="visibility" id="visibility-radio-public" value="public"\\s+checked=\'checked\'/', $output );
$this->assertStringContainsString( 'name="visibility" id="visibility-radio-password" value="password"', $output );
$this->assertStringContainsString( 'name="visibility" id="visibility-radio-private" value="private"', $output );
$this->assertStringContainsString( 'name="hidden_post_visibility" id="hidden-post-visibility" value="public"', $output );
$this->assertStringContainsString( 'id="sticky-span"', $output );
$this->assertStringContainsString( 'id="password-span"', $output );
$this->assertStringContainsString( 'name="post_password" id="post_password"', $output );
$this->assertStringNotContainsString( '<select name="visibility" id="post-visibility">', $output );
$this->assertStringNotContainsString( 'name="visibility_password"', $output );
}

private function render_post_submit_meta_box( WP_Post $post ) {
require_once ABSPATH . 'wp-admin/includes/meta-boxes.php';

$previous_post = $GLOBALS['post'] ?? null;
$GLOBALS['post'] = $post;

ob_start();
post_submit_meta_box( $post );
$output = ob_get_clean();

if ( null === $previous_post ) {
unset( $GLOBALS['post'] );
} else {
$GLOBALS['post'] = $previous_post;
}

return $output;
}
}
Loading