Description

While updating the documentation for the AlignmentControlMatrix, I found that no matter what value I passed to the width prop, the display was always the same.

Step-by-step reproduction instructions

1. Add the code snippet to a plugin
2. Change the width value to anything other than the default of 92
3. The widget of the component is unchanged

Screenshots, screen recording, code snippet

I created a simple plugin with the following code to render the control:

import { __experimentalAlignmentMatrixControl as AlignmentMatrixControl } from '@wordpress/components';
import { useState } from '@wordpress/element';
import { registerPlugin } from '@wordpress/plugins';
import { PluginDocumentSettingPanel } from '@wordpress/edit-post';

const Example = () => {
	const [ alignment, setAlignment ] = useState( 'center center' );
	return (
		<PluginDocumentSettingPanel title="test">
			<AlignmentMatrixControl
				width="2000"
				value={ alignment }
				onChange={ ( newAlignment ) => setAlignment( newAlignment ) }
			/>
		</PluginDocumentSettingPanel>
	);
};

registerPlugin( 'my-plugin', { render: Example } );

As you can see in the screenshot, the value is passed to the markup but the default value ( 92 ) is overriding the styles.

Environment info

• Wordpress 5.8 using a default theme.

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