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

1 Answer 1

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. Dec 18, 2020 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? Dec 19, 2020 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. Dec 22, 2020 at 8:00
  • Do you have the code somewhere in git so I can try on my end? Dec 22, 2020 at 18:15
  • This is active, early development, but sure, go ahead: github.com/cwrichardson/cwra-google-graph-block Dec 22, 2020 at 19:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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