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();
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() {
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%
}

#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%;
}

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

#post-visibility-fieldset input,
#post-visibility-select input#sticky {
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 {
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">
<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; ?>

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

<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
/**
* @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