CODEWITHSUNDEEP
wordpresswordpress-gutenberg
Ja Nosch
Ja Nosch

Reputation: 423

Add value to existing WP Block Editor setting

I would like to add a 33% to the Wordpress Block "Button". So far it has 25%,50%,75% and 100%. Is it possible to insert my new value into the existing width selector?

I'm guessing Block Filters are the way to go.

I think I also found the way to get the settings object which might then help me to find out what I need to overwrite. However simply adding this code to my admin.js does not produce any output. Where would I need to load this?

const filterBlocks = (settings) => {
    if (settings.name !== 'core/buttons') {
        return settings
    }
    console.log(settings);
    return settings;
}

Upvotes: 0

Views: 1590

Answers (1)

S.Walsh
S.Walsh

Reputation: 3699

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.. Custom Button Width on Button Block

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.

Upvotes: 2

Related Questions