Add custom formatting to custom block only

[gregbia]

I'm adding a custom button to the formatting toolbar using the format API

( function( wp ) {
    var MyCustomButton = function( props ) {
        return wp.element.createElement(
            wp.editor.RichTextToolbarButton, {
                icon: 'editor-code',
                title: 'Sample output',
                onClick: function() {
                    props.onChange( wp.richText.toggleFormat(
                        props.value,
                        { type: 'my-custom-format/sample-output' }
                    ) );
                },
                isActive: props.isActive,
            }
        );
    }
    wp.richText.registerFormatType(
        'my-custom-format/sample-output', {
            title: 'Sample output',
            tagName: 'sample',
            className: null,
            edit: MyCustomButton,
        }
    );
} )( window.wp );

The new custom button is added to the formatting toolbar of all the blocks. Is it possible to register it to a specific block only or a list of blocks?

[jorgefilipecosta]

Hi @gregbia,
here is a sample code that only adds the button to the paragraph block:

( function( wp ) {
	var withSelect = wp.data.withSelect;
	var ifCondition = wp.compose.ifCondition;
	var compose = wp.compose.compose;
	var MyCustomButton = function( props ) {
		return wp.element.createElement(
			wp.editor.RichTextToolbarButton, {
				icon: 'editor-code',
				title: 'Sample output',
				onClick: function() {
					console.log( 'toggle format' );
				},
			}
		);
	}
	var ConditionalButton = compose(
		withSelect( function( select ) {
			return {
				selectedBlock: select('core/editor').getSelectedBlock()
			}
		} ),
		ifCondition( function( props ) {
			return (
				props.selectedBlock &&
				props.selectedBlock.name === 'core/paragraph'
			); 
		} )
	)( MyCustomButton );
	wp.richText.registerFormatType(
		'my-custom-format/sample-output', {
			title: 'Sample output',
			tagName: 'samp',
			className: null,
			edit: ConditionalButton,
		}
	);
} )( window.wp );

You may change the sample to add the button to other blocks.

A PR, that adds this sample to the documentation was created #14113.

[gregbia]

Awesome! Thank you!