javascript - eventcallback on block update?

admin管理员组

文章数量:1335847

I am attempting to put together a custom block that produces an embed from a third party. The embed is generated by an external script scanning for an element with a data attribute holding a unique identifier. I have the basic version of this block working just fine. However, I am now trying to have this embed display dynamically in the edit screen when you enter the identifier.

My edit function looks like this:

function Edit( { attributes, setAttributes } ) {

    const onChangeIdentifier = (value) => {
        setAttributes({ identifier: value });
    };

    return (
        <div id = {`embed-${ instanceId }`}>
    {attributes.identifier
    ? 
        <div  
            data-identifier= { attributes.identifier }
        >

        </div>

     : 

        <Placeholder
            instructions={ __( 'Enter identifier.' ) }
        >
            <PlainText
                placeholder={ __(
                        'Enter identifier here…'
                    ) }
                value={ attributes.identifier || '' }
                onChange={ onChangeIdentifier }
            />
    </Placeholder>

    }
    </div>);
}

export default withInstanceId( Edit );

Almost everything happens correctly. When the identifier is entered it swaps out the placeholder for the data-identifier element, but the embed can't be generated because the third party script only automatically triggers a scan when the DOM loads. They do provide a function to manually call a scan in the event you create an embed via ajax. Here is the issue: I do not know where to call this function to have it correctly render the embed. (I can verify it works properly, as I can edit the block and call the function in console and have it update correctly.)

I am attempting to put together a custom block that produces an embed from a third party. The embed is generated by an external script scanning for an element with a data attribute holding a unique identifier. I have the basic version of this block working just fine. However, I am now trying to have this embed display dynamically in the edit screen when you enter the identifier.

My edit function looks like this:

function Edit( { attributes, setAttributes } ) {

    const onChangeIdentifier = (value) => {
        setAttributes({ identifier: value });
    };

    return (
        <div id = {`embed-${ instanceId }`}>
    {attributes.identifier
    ? 
        <div  
            data-identifier= { attributes.identifier }
        >

        </div>

     : 

        <Placeholder
            instructions={ __( 'Enter identifier.' ) }
        >
            <PlainText
                placeholder={ __(
                        'Enter identifier here…'
                    ) }
                value={ attributes.identifier || '' }
                onChange={ onChangeIdentifier }
            />
    </Placeholder>

    }
    </div>);
}

export default withInstanceId( Edit );

Almost everything happens correctly. When the identifier is entered it swaps out the placeholder for the data-identifier element, but the embed can't be generated because the third party script only automatically triggers a scan when the DOM loads. They do provide a function to manually call a scan in the event you create an embed via ajax. Here is the issue: I do not know where to call this function to have it correctly render the embed. (I can verify it works properly, as I can edit the block and call the function in console and have it update correctly.)

• javascript
• block-editor

Share Improve this question asked May 27, 2020 at 22:48 jshwlkrjshwlkr 53411 gold badge66 silver badges2424 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

You might try a useEffect hook subscribed to the attributes.identifier to call the script.

something like:

function Edit( { attributes, setAttributes } ) {

    useEffect( () => {

      // this will fire whenever the attribute changes.
      thirdPartyScriptFunctionName();

    },[attributes.identifier])

     const onChangeIdentifier = (value) => {
        setAttributes({ identifier: value });
     };

    return (
         <div id = {`embed-${ instanceId }`}>
             {attributes.identifier
         ? 
       <div  
           data-identifier= { attributes.identifier }
        >

        </div>

     : 

        <Placeholder
            instructions={ __( 'Enter identifier.' ) }
        >
            <PlainText
                placeholder={ __(
                        'Enter identifier here…'
                    ) }
                value={ attributes.identifier || '' }
                onChange={ onChangeIdentifier }
            />
       </Placeholder>

    }
     </div>);
}

 export default withInstanceId( Edit );

You'll need to get the useEffect hook from the wp.element global.

Hope this helps!

本文标签： javascripteventcallback on block update