What happens/fires when you select a block in the editor?

Question

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 />;
}

Answer 1

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.