Custom sidebar pannel is not taking full width

Description

I have created a meta field for the post and want to create a select dropdown meta box on a single blog page using Gutenberg components but it's not taking the full width of the sidebar panel.

Step-by-step reproduction instructions

add_action( 'init', function() {
register_post_meta( 'post', 'blog_date_info', array(
    'show_in_rest' => true,
    'single' => true,
    'type' => 'string',
    'default' => 'default',
) );
} );

using Gutenberg registerPlugin create metabox for blog editor.

unbuilt version of JS code

/**
 * WordPress dependencies
 */
const { useSelect, useDispatch } = wp.data;
const { SelectControl } = wp.components;
const { PluginPostStatusInfo } = wp.editPost;
const { registerPlugin } = wp.plugins;
const { __ } = wp.i18n;

/**
 * Component to render the date selection dropdown.
 *
 * @return {JSX.Element} JSX Element
 */
const RenderBlogDateInfoMeta = () => {
    /**
     * Get the current value of the blog_date_info meta field.
     */
    const { blogDateInfo } = useSelect( ( select ) => {
        const meta = select( 'core/editor' ).getEditedPostAttribute( 'meta' );
        return {
            blogDateInfo: meta?.blog_date_info || 'default',
        };
    } );

    /**
     * Dispatch the action to update the blog_date_info meta field.
     */
    const { editPost } = useDispatch( 'core/editor' );
    const onDateInfoChange = ( newValue ) => {
        editPost( { meta: { blog_date_info: newValue } } );
    };

    return (
        <SelectControl
            label={ __( 'Display Date Format', 'features' ) }
            value={ blogDateInfo }
            options={ [
                { label: __( 'Default', 'features' ), value: 'default' },
                { label: __( 'Last updated on', 'features' ), value: 'updated' },
                { label: __( 'Published on', 'features' ), value: 'published' },
            ] }
            onChange={ onDateInfoChange }
        />
    );
};

/**
 * Main component to render the PluginPostStatusInfo sidebar.
 *
 * @return {JSX.Element} JSX Element
 */
const BlogDateInfoSidebar = () => (
    <PluginPostStatusInfo>
        <RenderBlogDateInfoMeta />
    </PluginPostStatusInfo>
);

/**
 * Register the plugin to add the date selection sidebar.
 */
registerPlugin( 'blog-date-info-sidebar', {
    render: BlogDateInfoSidebar,
    icon: null,
} );

built JS code

(()=>{var e={686:()=>{var e=wp.data,t=e.useSelect,a=e.useDispatch,r=wp.components.SelectControl,o=wp.editPost.PluginPostStatusInfo,n=wp.plugins.registerPlugin,__=wp.i18n.__,l=function(){var e=t((function(e){var t=e("core/editor").getEditedPostAttribute("meta");return{blogDateInfo:(null==t?void 0:t.blog_date_info)||"default"}})).blogDateInfo,o=a("core/editor").editPost;return React.createElement(r,{label:__("Display Date Format","features"),value:e,options:[{label:__("Default","features"),value:"default"},{label:__("Last updated on","features"),value:"updated"},{label:__("Published on","features"),value:"published"}],onChange:function(e){o({meta:{blog_date_info:e}})}})};n("blog-date-info-sidebar",{render:function(){return React.createElement(o,null,React.createElement(l,null))},icon:null})}},t={};function a(r){var o=t[r];if(void 0!==o)return o.exports;var n=t[r]={exports:{}};return e[r](n,n.exports,a),n.exports}a.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return a.d(t,{a:t}),t},a.d=(e,t)=>{for(var r in t)a.o(t,r)&&!a.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},a.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),(()=>{"use strict";a(686)})()})();

Enqueue JS file

add_action( 'enqueue_block_editor_assets', function(){
    wp_enqueue_script( 'date-info', plugin_dir_url( __FILE__ ) . 'test.js', array( 'wp-plugins', 'wp-edit-post', 'wp-element', 'wp-components', 'wp-data' ) );
} );

Screenshots, screen recording, code snippet

No response

Environment info

wp-core

version: 6.6.2 site_language: en_US user_language: en_US timezone: +00:00 permalink: undefined https_status: false multisite: false user_registration: 0 blog_public: 1 default_comment_status: open environment_type: local user_count: 2 dotorg_communication: true

wp-paths-sizes

wordpress_path: /var/www/html wordpress_size: loading... uploads_path: /var/www/html/wp-content/uploads uploads_size: loading... themes_path: /var/www/html/wp-content/themes themes_size: loading... plugins_path: /var/www/html/wp-content/plugins plugins_size: loading... fonts_path: /var/www/html/wp-content/uploads/fonts fonts_size: loading... database_size: loading... total_size: loading...

wp-active-theme

name: Twenty Twenty-Five (twentytwentyfive) version: 1.0 author: the WordPress team author_website: https://wordpress.org parent_theme: none theme_features: core-block-patterns, post-thumbnails, responsive-embeds, editor-styles, html5, automatic-feed-links, widgets-block-editor, block-templates, post-formats, editor-style theme_path: /var/www/html/wp-content/themes/twentytwentyfive auto_update: Disabled

wp-themes-inactive (15)

Emptytheme: version: 1.0, author: the WordPress team, Auto-updates disabled Twenty Eleven: version: 4.7, author: the WordPress team, Auto-updates disabled Twenty Fifteen: version: 3.8, author: the WordPress team, Auto-updates disabled Twenty Fourteen: version: 4.0, author: the WordPress team, Auto-updates disabled Twenty Nineteen: version: 2.9, author: the WordPress team, Auto-updates disabled Twenty Seventeen: version: 3.7, author: the WordPress team, Auto-updates disabled Twenty Sixteen: version: 3.3, author: the WordPress team, Auto-updates disabled Twenty Ten: version: 4.2, author: the WordPress team, Auto-updates disabled Twenty Thirteen: version: 4.2, author: the WordPress team, Auto-updates disabled Twenty Twelve: version: 4.3, author: the WordPress team, Auto-updates disabled Twenty Twenty: version: 2.7, author: the WordPress team, Auto-updates disabled Twenty Twenty-Four: version: 1.2, author: the WordPress team, Auto-updates disabled Twenty Twenty-One: version: 2.3, author: the WordPress team, Auto-updates disabled Twenty Twenty-Three: version: 1.5, author: the WordPress team, Auto-updates disabled Twenty Twenty-Two: version: 1.8, author: the WordPress team, Auto-updates disabled

wp-plugins-active (1)

Gutenberg: version: 19.6.0-rc.3, author: Gutenberg Team, Auto-updates disabled

wp-plugins-inactive (1)

Hello Dolly: version: 1.7.2, author: Matt Mullenweg, Auto-updates disabled

wp-media

image_editor: WP_Image_Editor_Imagick imagick_module_version: 1691 imagemagick_version: ImageMagick 6.9.11-60 Q16 aarch64 2021-01-25 https://imagemagick.org imagick_version: 3.7.0 file_uploads: 1 post_max_size: 1G upload_max_filesize: 1G max_effective_size: 1 GB max_file_uploads: 20 imagick_limits: imagick::RESOURCETYPE_AREA: 122 MB imagick::RESOURCETYPE_DISK: 1073741824 imagick::RESOURCETYPE_FILE: 786432 imagick::RESOURCETYPE_MAP: 512 MB imagick::RESOURCETYPE_MEMORY: 256 MB imagick::RESOURCETYPE_THREAD: 1 imagick::RESOURCETYPE_TIME: 9.2233720368548E+18 imagemagick_file_formats: 3FR, 3G2, 3GP, AAI, AI, APNG, ART, ARW, AVI, AVIF, AVS, BGR, BGRA, BGRO, BIE, BMP, BMP2, BMP3, BRF, CAL, CALS, CANVAS, CAPTION, CIN, CIP, CLIP, CMYK, CMYKA, CR2, CR3, CRW, CUR, CUT, DATA, DCM, DCR, DCX, DDS, DFONT, DNG, DPX, DXT1, DXT5, EPDF, EPI, EPS, EPS2, EPS3, EPSF, EPSI, EPT, EPT2, EPT3, ERF, FAX, FILE, FITS, FRACTAL, FTP, FTS, G3, G4, GIF, GIF87, GRADIENT, GRAY, GRAYA, GROUP4, H, HALD, HDR, HEIC, HISTOGRAM, HRZ, HTM, HTML, HTTP, HTTPS, ICB, ICO, ICON, IIQ, INFO, INLINE, IPL, ISOBRL, ISOBRL6, J2C, J2K, JBG, JBIG, JNG, JNX, JP2, JPC, JPE, JPEG, JPG, JPM, JPS, JPT, JSON, K25, KDC, LABEL, M2V, M4V, MAC, MAGICK, MAP, MASK, MAT, MATTE, MEF, MIFF, MKV, MNG, MONO, MOV, MP4, MPC, MPG, MRW, MSL, MTV, MVG, NEF, NRW, NULL, ORF, OTB, OTF, PAL, PALM, PAM, PATTERN, PBM, PCD, PCDS, PCL, PCT, PCX, PDB, PDF, PDFA, PEF, PES, PFA, PFB, PFM, PGM, PGX, PICON, PICT, PIX, PJPEG, PLASMA, PNG, PNG00, PNG24, PNG32, PNG48, PNG64, PNG8, PNM, POCKETMOD, PPM, PREVIEW, PS, PS2, PS3, PSB, PSD, PTIF, PWP, RADIAL-GRADIENT, RAF, RAS, RAW, RGB, RGBA, RGBO, RGF, RLA, RLE, RMF, RW2, SCR, SCT, SFW, SGI, SHTML, SIX, SIXEL, SPARSE-COLOR, SR2, SRF, STEGANO, SUN, TEXT, TGA, THUMBNAIL, TIFF, TIFF64, TILE, TIM, TTC, TTF, TXT, UBRL, UBRL6, UIL, UYVY, VDA, VICAR, VID, VIDEO, VIFF, VIPS, VST, WBMP, WEBM, WEBP, WMV, WPG, X, X3F, XBM, XC, XCF, XPM, XPS, XV, XWD, YCbCr, YCbCrA, YUV gd_version: bundled (2.1.0 compatible) gd_formats: GIF, JPEG, PNG, WebP, BMP, AVIF ghostscript_version: 10.00.0

wp-server

server_architecture: Linux 6.6.32-linuxkit aarch64 httpd_software: Apache/2.4.62 (Debian) php_version: 8.2.24 64bit php_sapi: apache2handler max_input_variables: 1000 time_limit: 30 memory_limit: 128M admin_memory_limit: 256M max_input_time: -1 upload_max_filesize: 1G php_post_max_size: 1G curl_version: 7.88.1 OpenSSL/3.0.14 suhosin: false imagick_availability: true pretty_permalinks: true current: 2024-11-04T18:02:27+00:00 utc-time: Monday, 04-Nov-24 18:02:27 UTC server-time: 2024-11-04T18:02:24+00:00

wp-database

extension: mysqli server_version: 11.4.3-MariaDB-ubu2404 client_version: mysqlnd 8.2.24 max_allowed_packet: 16777216 max_connections: 151

wp-constants

WP_HOME: http://localhost:8888 WP_SITEURL: http://localhost:8888 WP_CONTENT_DIR: /var/www/html/wp-content WP_PLUGIN_DIR: /var/www/html/wp-content/plugins WP_MEMORY_LIMIT: 40M WP_MAX_MEMORY_LIMIT: 256M WP_DEBUG: true WP_DEBUG_DISPLAY: true WP_DEBUG_LOG: false SCRIPT_DEBUG: true WP_CACHE: false CONCATENATE_SCRIPTS: undefined COMPRESS_SCRIPTS: undefined COMPRESS_CSS: undefined WP_ENVIRONMENT_TYPE: local WP_DEVELOPMENT_MODE: undefined DB_CHARSET: utf8 DB_COLLATE: undefined

wp-filesystem

wordpress: writable wp-content: writable uploads: writable plugins: writable themes: writable fonts: not writable

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

[x] Yes

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

[x] Yes

Please confirm which theme type you used for testing.

[x] Block
[ ] Classic
[ ] Hybrid (e.g. classic with theme.json)
[ ] Not sure

WordPress / gutenberg