plugin development – How to override core/paragraph onChange handler

Question

Below is the code, in this case it replacing the original core/paragraph with RichText and removes the original core/paragraph setting panel.
How can I override only onChange handler of core/paragraph block? Thanks in advance.

var withInspectorControls = wp.compose.createHigherOrderComponent( function (BlockEdit) {
        return function ( props ) {
            if(props.name !== 'core/paragraph'){
                return el( BlockEdit, props );
            }
            var blockProps = wp.blockEditor.useBlockProps({style: blockStyle});
            return wp.element.createElement( wp.blockEditor.RichText, Object.assign( blockProps, {
                tagName: 'p',
                value: props.attributes.content,
                onChange: function( content ) {
                    props.setAttributes( { content: content } );
                    var contentLength = String(content).length;
                    console.log(contentLength);
                    props.setAttributes({className: ''});
                    if(contentLength > 23){
                        props.setAttributes({className: 'text-orange'});
                    }
                    if(contentLength > 26) props.setAttributes({className: 'text-red'});
                }
            } ) );
            console.log(wp.element);
            /*return el(
                wp.element.Fragment,
                {},
                el( BlockEdit, props ),
                el(
                    wp.blockEditor.InspectorControls,
                    {},
                    el( wp.components.PanelBody, {}, 'My custom control' )
                )
            );*/
        };
    },
    'withInspectorControls' );
    
    wp.hooks.addFilter(
        'editor.BlockEdit',
        'my-plugin/with-inspector-controls',
        withInspectorControls
    );

0
Avijit Palit 4 weeks 2021-07-04T01:56:17-05:00 0 Answers 0 views 0

Leave an answer

Browse
Browse