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?