在编辑器中选择块时会发生/触发什么情况?

时间:2020-12-17 作者:philolegein

我正在为一种新的块类型编写插件。它有一些后端处理,并使用ServerSideRender. 当我在管理/后期编辑方面进行渲染时,我将渲染放在Disabled 块,实际上,鼠标悬停没有任何作用,块内的javascript控件似乎被禁用。但整个事情都被div 带类wp-block. 当你点击包装器时div ... 事情发生了。不管那是什么,孩子们似乎被重新渲染了,我的东西工作不正常。我想知道当包装纸div 更改为is-selected, 以及它应该做什么;所以我可以弄清楚,如果有什么事情发生的话,我应该处理什么。

这里是编辑。js。这非常简单,因为在我努力理解这一点时,有很多内容被注释掉了:

/**
 * 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 个回复
SO网友:Hardeep Asrani

如果该块处于Disabled 那么你的触摸不会改变任何事情。您的代码中是否有其他更改任何属性的内容?属性更改时,服务器端渲染将刷新。

如果您可以共享代码的JS部分,那就更好了。