diff --git a/packages/block-library/src/gallery/block.json b/packages/block-library/src/gallery/block.json index f241135b76b25..4276b81bbed23 100644 --- 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 index e558e4f9276dc..d7ef149d0dbe1 100644 --- 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 ; diff --git a/packages/block-library/src/gallery/index.php b/packages/block-library/src/gallery/index.php index bb71fe98169c8..649a8bf5e77be 100644 --- 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.