0

I'm writing a plugin for a new block type. It has some backend processing, and uses ServerSideRender. When I render on the admin / post-edit side of things, I put the render inside a Disabled block, and, indeed, mouse-hover doesn't do anything, and the javascript controls inside the block seem to be disabled. But the whole thing is wrapped in a div with class wp-block. When you click on that wrapper div ... something happens. Whatever that something is, the children seem to get re-rendered, and my stuff is not working properly. I'm trying to understand what gets fired when that wrapper div changes to is-selected, and what it's supposed to do; so I can figure out what, if anything, I should handle when that happens.

Here's the edit.js. It's pretty simplified, as much is commented out while I work on understanding this:

/**
 * WordPress dependencies
 */

import apiFetch from '@wordpress/api-fetch';
import {
        Button,
        ButtonGroup,
        Disabled,
        Placeholder,
        TextControl,
        Spinner} from '@wordpress/components';
import { useDispatch } from '@wordpress/data';
import { useState } from '@wordpress/element';
import { __, sprintf } from '@wordpress/i18n';
import ServerSideRender from '@wordpress/server-side-render';

export default function MyBlock( props ) {
        const {
                attributes: {
                    cwraggBaseId
                    cwraggLocalFile
                    // more attributes ...
                },
                clientId,
                setAttributes,
        } = props;
        const attributes = props.attributes;

        const { createErrorNotice } = useDispatch( 'core/notices' );
        const [ isValidating, setIsValidating ] = useState( false );
        const post_id = wp.data.select("core/editor").getCurrentPostId();
        console.log('Post ID is ', post_id);

        // save the clientId as an attribute so we can use it on public side
        if ( ! cwraggBaseId ) {
                console.log('cwraggBaseId is ', cwraggBaseId);
                console.log('clientId is ', clientId);
                setAttributes( { cwraggBaseId: clientId } );
        }

        const DataSrcButtonGroup = () => (
                <>
                <ButtonGroup>
                    <Button
                      label={ __( 'Upload', 'cwraggb') }
                      isPrimary>{ __( 'Upload', 'cwraggb') }</Button>
                    <Button
                      onClick={ validate }
                      label={ __( 'Retrieve from URL', 'cwraggb') }
                      aria-disabled={ isValidating }
                      disabled={ isValidating }
                      isTertiary>{ __( 'Retrieve from URL',
                        'cwraggb')}</Button>
                    { isValidating && <Spinner /> }
                    <Button
                      label={ __( 'Schedule from URL',
                          'cwraggb') }
                      isTertiary>{ __( 'Schedule from URL',
                        'cwraggb') }</Button>
                </ButtonGroup>
                </>
        );

        function validate() {
                setIsValidating( true );

                apiFetch( {
                    path: '/cwraggb/v1/setremotedatasrc',
                    method: 'POST',
                    data: { 'url': cwraggDataSource,
                            'type': 'remote-csv',
                            'postId': post_id } }
                ).then( ( localFileName ) => {
                        setAttributes( { cwraggLocalFile: localFileName } );
                }).catch( ( error ) => {
                        createErrorNotice(
                                sprintf(
                                    __( 'Could not validate data source. %s',
                                        'cwraggb' ), error.message),
                                {
                                        id: 'cwragg-validate-error',
                                        type: 'snackbar'
                                }
                        );
                }).finally( () => {
                        setIsValidating( false );
                });
        }

       const MyRender = () => {
                return(
                    <Disabled>
                        <ServerSideRender
                            block={ props.name }
                            attributes={{ ...attributes }} />
                    </Disabled>
                );
        }

        const MyPlaceholder = () => {
            return(
                <Placeholder
                  icon='chart-bar'
                  label="My Block"
                  instructions={ __( 'Upload a data file, get one from a URL, '
                      + 'or schedule retrieval from a URL.', 'cwraggb') }>
                    { <DataSrcButtonGroup /> }
                </Placeholder>
            );
        };

        const Component = cwraggLocalFile
                ? MyRender
                : MyPlaceholder;

        return <Component />;
}
0

If the block is under Disabled then your touch isn't changing anything. Is there anything else in your code which changes any attributes? The server-side-rendering refreshes when an attribute changes.

It will be better if you can share your JS part of code.

6
  • I added the code, and you're right — it must be something in my code, because if I add an arbitrary other block type (say, an Image), and click on it, then nothing changes. But even if I click on the Placeholder for mine, it re-renders. – philolegein Dec 18 '20 at 8:09
  • Just a wild guess, can you remove this line and the console.log line after it? const post_id = wp.data.select("core/editor").getCurrentPostId(); Also, can you keep an eye on your console to see if anything, like an HTTP request, gets triggered every time you click? – Hardeep Asrani Dec 19 '20 at 20:27
  • What seems to be causing it is the useState — I'm currently poking at some of the native blocks to see how they use it and if I'm doing something wrong. – philolegein Dec 22 '20 at 8:00
  • Do you have the code somewhere in git so I can try on my end? – Hardeep Asrani Dec 22 '20 at 18:15
  • This is active, early development, but sure, go ahead: github.com/cwrichardson/cwra-google-graph-block – philolegein Dec 22 '20 at 19:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.