Gallery block: Add css var to enable theme authors to set a default g…

…allery gap (#40008) Co-authored-by: Glen Davies <glen.davies@a8c.com>
WordPress · Apr 4, 2022 · 4fdf889 · 4fdf889
1 parent 15a9154
commit 4fdf889
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 9 deletions.
diff --git a/packages/block-library/src/gallery/block.json b/packages/block-library/src/gallery/block.json
@@ -111,6 +111,7 @@
 		"units": [ "px", "em", "rem", "vh", "vw" ],
 		"spacing": {
 			"blockGap": true,
+			"__experimentalSkipSerialization": [ "blockGap" ],
 			"__experimentalDefaultControls": {
 				"blockGap": true
 			}

diff --git a/packages/block-library/src/gallery/gap-styles.js b/packages/block-library/src/gallery/gap-styles.js
@@ -6,10 +6,15 @@ import { useContext, createPortal } from '@wordpress/element';
 
 export default function GapStyles( { blockGap, clientId } ) {
 	const styleElement = useContext( BlockList.__unstableElementContext );
-
-	const gap = blockGap
-		? `#block-${ clientId } { --wp--style--unstable-gallery-gap: ${ blockGap } }`
-		: `#block-${ clientId } { --wp--style--unstable-gallery-gap: var( --wp--style--block-gap, 0.5em ) }`;
+	// --gallery-block--gutter-size is deprecated. --wp--style--gallery-gap-default should be used by themes that want to set a default
+	// gap on the gallery.
+	const gapValue = blockGap
+		? blockGap
+		: `var( --wp--style--gallery-gap-default, var( --gallery-block--gutter-size, var( --wp--style--block-gap, 0.5em ) ) )`;
+	const gap = `#block-${ clientId } { 
+		--wp--style--unstable-gallery-gap: ${ gapValue };
+		gap: ${ gapValue } 
+	}`;
 
 	const GapStyle = () => {
 		return <style>{ gap }</style>;

diff --git a/packages/block-library/src/gallery/index.php b/packages/block-library/src/gallery/index.php
@@ -48,16 +48,18 @@ function block_core_gallery_render( $attributes, $content ) {
 	// 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       = preg_match( '%[\\\(&=}]|/\*%', $gap ) ? null : $gap;
-	$class     = wp_unique_id( 'wp-block-gallery-' );
-	$content   = preg_replace(
+	$gap     = preg_match( '%[\\\(&=}]|/\*%', $gap ) ? null : $gap;
+	$class   = wp_unique_id( 'wp-block-gallery-' );
+	$content = preg_replace(
 		'/' . preg_quote( 'class="', '/' ) . '/',
 		'class="' . $class . ' ',
 		$content,
 		1
 	);
-	$gap_value = $gap ? $gap : 'var( --wp--style--block-gap, 0.5em )';
-	$style     = '.' . $class . '{ --wp--style--unstable-gallery-gap: ' . $gap_value . '}';
+	// --gallery-block--gutter-size is deprecated. --wp--style--gallery-gap-default should be used by themes that want to set a default
+	// gap on the gallery.
+	$gap_value = $gap ? $gap : 'var( --wp--style--gallery-gap-default, var( --gallery-block--gutter-size, var( --wp--style--block-gap, 0.5em ) ) )';
+	$style     = '.' . $class . '{ --wp--style--unstable-gallery-gap: ' . $gap_value . '; 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.
 	// See https://core.trac.wordpress.org/ticket/53494.