1

I want to create a custom gutenberg block but it should be a core block with additional text at the end. It is just example but let's say I want a new block working just like core/paragraph but it will render additional "test" string at the end.

import { registerBlockType } from '@wordpress/blocks';
import { __ } from '@wordpress/i18n';
import {
    Panel,
    PanelBody,
    PanelRow
} from '@wordpress/components';
import {
    useBlockProps,
    InnerBlocks,
    InspectorControls
} from '@wordpress/block-editor';
import metadata from '../../config/extended-block.json';

registerBlockType( metadata, {
    edit: ( { attributes, setAttributes } ) => {
        const blockProps = useBlockProps( {
            className: "test_extended",
            style: {
              /* some styles based on attributes */
            }
        } );

        return <div { ...blockProps }>
            <InspectorControls key="settings" group="styles">
                <Panel>
                    <PanelBody title={ __( "atribute name", "test" ) } initialOpen={ false }>
                        <PanelRow>
                            <fieldset>
                                {/* Some controls for changing attributes, color pallete or something */}
                            </fieldset>
                        </PanelRow>        
                    </PanelBody>
                </Panel>
            </InspectorControls>
            <div className='test_extended'>
                <InnerBlocks /> 
            </div>
        </div>
    },

    save: ( {attributes} ) => {
        const blockProps = useBlockProps.save( {
            className: "test_extended",
            style: {
            /* some styles based on attributes */
            }
        } );
        return <div {...blockProps}>
            <div className='test_extended'>
                <InnerBlocks /> 
            </div>
        </div>
    }
} );

This is the code I use to build and register new gutenberg block. What should I do if test/extended-block is just like core/paragraph or core/group but with some additional options?

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.