Description

In WordPress 7.0 Beta 5, checkboxes inside classic PHP side meta boxes are visually indistinguishable between checked and unchecked states. The checkbox does toggle correctly (.checked returns true), but the visual feedback is completely lost.

This affects native HTML checkboxes inside meta boxes registered via add_meta_box() with 'side' context. It does not affect Gutenberg's own React-based sidebar controls (Categories, Tags, etc.) as those render outside the .edit-post-meta-boxes-area container.

Root cause

A CSS rule in load-styles overrides the :checked state:

.edit-post-meta-boxes-area .metabox-location-side .postbox input[type=checkbox]:checked {
    background: #fff;
    border-color: #757575;
}

This has higher specificity than the default admin :checked styles (which use var(--wp-admin-theme-color)), making checked checkboxes look identical to unchecked ones.

Expected behavior

The checkbox should display the standard WordPress admin checked state (colored background with white checkmark SVG).

Actual behavior

The checkbox remains visually white/unchecked regardless of its actual state.

Environment

• WordPress 7.0 Beta 5
• Twenty Twenty-Five theme, all plugins deactivated except a minimal test plugin
• Tested in Chrome and Firefox
• No console errors

Suggested fix

Remove or correct the :checked override so it preserves the default admin styling:

.edit-post-meta-boxes-area .metabox-location-side .postbox input[type=checkbox]:checked {
    background: var(--wp-admin-theme-color, #2271b1);
    border-color: var(--wp-admin-theme-color, #2271b1);
}

Step-by-step reproduction instructions

1. Register a simple meta box with context 'side' containing a native checkbox:

add_meta_box(
    'my_test_metabox',
    'Test Checkbox',
    'my_test_metabox_callback',
    'post',
    'side',
    'default'
);

function my_test_metabox_callback( $post ) {
    echo '<label>';
    echo '<input type="checkbox" name="test_check" value="1">';
    echo ' Enable something';
    echo '</label>';
}

2. Open the post editor (block editor).
3. Click the checkbox inside the side meta box.
4. Observe: no visual change. The checkbox appears unchecked.
5. Run in browser console: document.querySelector('#my_test_metabox input[type="checkbox"]').checked — returns true.

Screenshots, screen recording, code snippet

No response

Environment info

• WordPress version: 7.0-beta5
• Gutenberg plugin: No (using core editor)
• PHP version: 8.2.30
• OS: macOS
• Browser: Chrome 146.0.7680.80 (Build oficial) (arm64)
• Theme: Twenty Twenty-Five
• Plugins: None (tested with all plugins deactivated except minimal test plugin)

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure