Add value to existing WP Block Editor setting

Quick solution: Add a custom CSS class in the Buttons’ block properties under “Advanced > Additional CSS class(es)” then define the custom width in your theme style.css

Detailed solution: By using wp.hooks.addFilter() you can add a new control to the Button block with as many extra custom width options as you need. The Button blocks preset widths are defined within the function WidthPanel() of the blocks edit.js function:

function WidthPanel( { selectedWidth, setAttributes } ) {
...
return (
    ...
        <ButtonGroup aria-label={ __( 'Button width' ) }>
            { [ 25, 50, 75, 100 ].map( ( widthValue ) => {
    ...
    }
}

To add a new width value of 33% to the block, we need to add our own new button control to the InspectorControls and then use wp.hooks.addFilter() to add this to the existing core Button block, eg:

index.js

import { createHigherOrderComponent } from '@wordpress/compose';
import { Fragment } from '@wordpress/element';
import { InspectorControls } from '@wordpress/block-editor';
import { PanelBody, Button } from '@wordpress/components';

const withInspectorControls = createHigherOrderComponent((BlockEdit) => {
    return (props) => {

        const { setAttributes } = props;
        let widthValue = 33; // must be a number
    
        return (
            <Fragment>
                <BlockEdit {...props} />
                <InspectorControls>
                     <PanelBody title="Custom Width">
                         <Button
                             key={widthValue}
                             isSmall
                             variant={widthValue}
                             onClick={() => setAttributes({ width: widthValue })}
                        >
                            {widthValue}%
                        </Button>
                    </PanelBody>
                </InspectorControls>
            </Fragment>
        );
    };
}, 'withInspectorControl');

wp.hooks.addFilter(
    'editor.BlockEdit',
    'core/button',
    withInspectorControls
);

Next, a new additional css style needs to be added that (matches the existing width presets structure) for the new custom width, eg:

style.scss

$blocks-block__margin: 0.5em;

&.wp-block-button__width-33 {
    width: calc(33.33% - #{ $blocks-block__margin });
}

And there you have it.. 

The easiest way to put all the code above together/working is to create your own Gutenberg block (and that in itself can be challenging if you aren’t familiar with the process or ReactJS). I too have come across similiar challenges with Gutenberg, so I wanted to provide a detailed solution for this kind of issue that works.