Custom sidebar pannel is not taking full width #66724

up1512001 · 2024-11-04T18:03:50Z

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

register meta field for post.

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.

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

The text was updated successfully, but these errors were encountered:

up1512001 added the [Type] Bug An existing feature does not function as intended label Nov 4, 2024

up1512001 linked a pull request Nov 4, 2024 that will close this issue

Fix: registerPlugin width issue #66725

Open

github-actions bot assigned up1512001 Nov 4, 2024

github-actions bot added the [Status] In Progress Tracking issues with work in progress label Nov 4, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Custom sidebar pannel is not taking full width #66724

Custom sidebar pannel is not taking full width #66724

up1512001 commented Nov 4, 2024 •

edited

Loading

Custom sidebar pannel is not taking full width #66724

Custom sidebar pannel is not taking full width #66724

Comments

up1512001 commented Nov 4, 2024 • edited Loading

Description

Step-by-step reproduction instructions

unbuilt version of JS code

built JS code

Screenshots, screen recording, code snippet

Environment info

wp-core

wp-paths-sizes

wp-active-theme

wp-themes-inactive (15)

wp-plugins-active (1)

wp-plugins-inactive (1)

wp-media

wp-server

wp-database

wp-constants

wp-filesystem

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

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

Please confirm which theme type you used for testing.

up1512001 commented Nov 4, 2024 •

edited

Loading