Set default block gap in frontend

packages/block-library/src/gallery/edit.js

@@ -471,7 +471,7 @@ function GalleryEdit( props ) {
 
 	const gap = attributes.style?.spacing?.blockGap
 		? `#block-${ clientId } { --wp--style--unstable-gallery-gap: ${ attributes.style.spacing.blockGap } }`
-		: `#block-${ clientId } { --wp--style--unstable-gallery-gap: var( --wp--style--block-gap ) }`;
+		: `#block-${ clientId } { --wp--style--unstable-gallery-gap: var( --wp--style--block-gap, 0.5em ) }`;
 
 	const GapStyle = () => {
 		return <style>{ gap }</style>;

packages/block-library/src/gallery/index.php

@@ -44,11 +44,11 @@ function block_core_gallery_data_id_backcompatibility( $parsed_block ) {
  * @return string The content of the block being rendered.
  */
 function block_core_gallery_render( $attributes, $content ) {
-	$gap_value = _wp_array_get( $attributes, array( 'style', 'spacing', 'blockGap' ) );
+	$gap = _wp_array_get( $attributes, array( 'style', 'spacing', 'blockGap' ) );
 	// Skip if gap value contains unsupported characters.
 	// Regex for CSS value borrowed from `safecss_filter_attr`, and used here
 	// because we only want to match against the value, not the CSS attribute.
-	$gap_value = preg_match( '%[\\\(&=}]|/\*%', $gap_value ) ? null : $gap_value;
+	$gap = preg_match( '%[\\\(&=}]|/\*%', $gap ) ? null : $gap;
 	$id        = uniqid();
 	$class     = 'wp-block-gallery-' . $id;
 	$content   = preg_replace(
@@ -57,6 +57,7 @@ function block_core_gallery_render( $attributes, $content ) {
 		$content,
 		1
 	);
+	$gap_value = $gap ? $gap : 'var( --wp--style--block-gap, 0.5em )';
 	$style     = '.' . $class . '{ --wp--style--unstable-gallery-gap: ' . $gap_value . '}';
 	// Ideally styles should be loaded in the head, but blocks may be parsed
 	// after that, so loading in the footer for now.