@wordpress/server-side-render
Version:
The component used with WordPress to server-side render a preview of dynamic blocks to display in the editor.
68 lines • 2.53 kB
TypeScript
export declare function rendererPath(block: string, attributes?: Record<string, unknown> | null, urlQueryArgs?: Record<string, unknown>): string;
export declare function removeBlockSupportAttributes(attributes: Record<string, unknown> & {
style?: Record<string, unknown>;
}): Record<string, unknown>;
/**
* Server-side render response object.
*/
export interface ServerSideRenderResponse {
/** The current request status: 'idle', 'loading', 'success', or 'error'. */
status: 'idle' | 'loading' | 'success' | 'error';
/** The rendered block content (available when status is 'success'). */
content?: string;
/** The error message (available when status is 'error'). */
error?: string;
}
/**
* Configuration object for the useServerSideRender hook.
*/
export interface UseServerSideRenderArgs {
/** The block attributes to be sent to the server for rendering. */
attributes: Record<string, unknown>;
/** The identifier of the block to be serverside rendered. Example: 'core/archives'. */
block: string;
/** Whether to remove block support attributes before sending. */
skipBlockSupportAttributes?: boolean;
/** The HTTP method to use ('GET' or 'POST'). Default is 'GET'. */
httpMethod?: 'GET' | 'POST';
/** Additional query arguments to append to the request URL. */
urlQueryArgs?: Record<string, unknown>;
}
/**
* A hook for server-side rendering a preview of dynamic blocks to display in the editor.
*
* Handles fetching server-rendered previews for blocks, managing loading states,
* and automatically debouncing requests to prevent excessive API calls. It supports both
* GET and POST requests, with POST requests used for larger attribute payloads.
*
* @example
* Basic usage:
*
* ```jsx
* import { RawHTML } from '@wordpress/element';
* import { useServerSideRender } from '@wordpress/server-side-render';
*
* function MyServerSideRender( { attributes, block } ) {
* const { content, status, error } = useServerSideRender( {
* attributes,
* block,
* } );
*
* if ( status === 'loading' ) {
* return <div>Loading...</div>;
* }
*
* if ( status === 'error' ) {
* return <div>Error: { error }</div>;
* }
*
* return <RawHTML>{ content }</RawHTML>;
* }
* ```
*
* @param args The hook configuration object.
*
* @return The server-side render response object.
*/
export declare function useServerSideRender(args: UseServerSideRenderArgs): ServerSideRenderResponse;
//# sourceMappingURL=hook.d.ts.map