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 />;
}
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
Reset to default 0If 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.