blockGap support preview does not work with ServerSideRender

[Takshil-Kunadia]

Description

While creating a custom dynamic block, I've enabled both blockGap and layout supports on my block and used the ServerSideRender component, the blockGap support does not appear to work in the editor. The block is rendered correctly and the blockGap changes are reflected on the front end, but in the editor, the spacing between items is not applied as expected. I have tried converting items to paragraph blocks & wrapping it in group blocks but it isn't working.

Please feel free to correct me. Thanks!

Step-by-step reproduction instructions

1. Create a simple block (e.g., “demo/block-box”) with spacing ( margin,padding, blockGap ) and layout support enabled in block.json.
2. Render some static content in the block using ServerSideRender in the editor.
3. Notice that upon changing the margin & padding the wrapper div's attributes get changed with the updated css variables. But the same doesn't occur when changing the blockGap.

Screenshots, screen recording, code snippet

A simpler version of the block

block.json

{
	"name": "demo/block-box",
	"category": "widgets",
	"attributes": {},
	"supports": {
		"html": false,
		"spacing": {
			"margin": true,
			"padding": true,
			"blockGap": true
		},
		"layout": true
	},
	"textdomain": "demo-block"
}

edit.jsx

/**
 * WordPress dependencies
 */
import { __ } from '@wordpress/i18n';
import { useState } from '@wordpress/element';
import { BlockControls, useBlockProps } from '@wordpress/block-editor';
import ServerSideRender from '@wordpress/server-side-render';
import { ToolbarGroup, ToolbarButton, Placeholder, Spinner } from '@wordpress/components';

/**
 * Internal dependencies
 */
import meta from './block.json';

const EditComponent = () => {
	const [ isRefreshing, setIsRefreshing ] = useState( false );
	const blockProps = useBlockProps( { className: 'demo-box' } );

	function LoadingPlaceholder() {
		return (
			<Placeholder
				label={ __( 'Demo Box', 'demo-block' ) }
				instructions={ __( 'Loading demo content...', 'demo-block' ) }
			>
				<Spinner />
			</Placeholder>
		);
	}

	return (
		<>
			<BlockControls>
				<ToolbarGroup>
					<ToolbarButton
						icon="update"
						label={ __( 'Refresh', 'demo-block' ) }
						onClick={ toggleRefresh }
					/>
				</ToolbarGroup>
			</BlockControls>
			<div { ...blockProps }>
				<ServerSideRender
					block={ meta.name }
					LoadingResponsePlaceholder={ LoadingPlaceholder }
				/>
			</div>
		</>
	);
};

export default EditComponent;

NOTE:- Item here is a CPT and I am trying to display its post content in the block.

block php code:-

<?php
/**
 * Demo Box Block Render Callback.
 *
 * @package Demo_Block
 */

defined( 'ABSPATH' ) || exit;

/**
 * Render callback for the demo box block.
 *
 * @param array $attributes The block attributes.
 * @return string HTML markup.
 */
function demo_box_render_callback( $attributes ) {
	$wrapper_attributes = get_block_wrapper_attributes();
	ob_start();
	?>
	<div <?php echo $wrapper_attributes; ?>>
		<p class="demo-box-item">Item One</p>
		<p class="demo-box-item">Item Two</p>
		<p class="demo-box-item">Item Three</p>
	</div>
	<?php
	return ob_get_clean();
}
register_block_type( 'demo/block-box', array(
	'render_callback' => 'demo_box_render_callback',
) );

Screen.Recording.2025-02-26.at.5.01.27.PM.mov

Environment info

WordPress: 6.7.2
Testing with a block-based theme

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[yogeshbhutkar]

Thanks for raising the issue!

Can you try passing down the attributes to ServerSideRender? Normally, we'd need to pass the attributes to ServerSideRender based on which, the rendering happens.

Ref:

gutenberg/packages/block-library/src/archives/edit.js

Lines 130 to 134 in e757d1d

	<ServerSideRender
	block="core/archives"
	skipBlockSupportAttributes
	attributes={ attributes }
	/>

Specifically this:

<ServerSideRender
	block={ meta.name }
	LoadingResponsePlaceholder={ LoadingPlaceholder }
	attributes={ attributes }
/>

test-block.mov

[Takshil-Kunadia]

@yogeshbhutkar had tried this as well, and it should work ideally as I can see the updated attributes being available, but for some reason, it doesn't work on my end. Will have to dig a bit deeper.