我正在为一种新的块类型编写插件。它有一些后端处理,并使用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 />;
}