Switch to using the block id as the selector for custom gap property

WordPress · Jan 25, 2022 · 06543e4 · 06543e4
1 parent 5422714
commit 06543e4
Showing 1 changed file with 3 additions and 4 deletions.
diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js
@@ -7,7 +7,7 @@ import { concat, find } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { compose, useInstanceId } from '@wordpress/compose';
+import { compose } from '@wordpress/compose';
 import {
 	BaseControl,
 	PanelBody,
@@ -121,7 +121,6 @@ function GalleryEdit( props ) {
 		};
 	}, [] );
 
-	const id = useInstanceId( getBlock( clientId ) );
 	const styleElement = useContext( BlockList.__unstableElementContext );
 
 	const innerBlockImages = useSelect(
@@ -471,8 +470,8 @@ function GalleryEdit( props ) {
 	const hasLinkTo = linkTo && linkTo !== 'none';
 
 	const gap = attributes.style?.spacing?.blockGap
-		? `.wp-container-${ id } { --wp--style--unstable-gallery-gap: ${ attributes.style.spacing.blockGap } }`
-		: undefined;
+		? `#block-${ clientId } { --wp--style--unstable-gallery-gap: ${ attributes.style.spacing.blockGap } }`
+		: `#block-${ clientId } { --wp--style--unstable-gallery-gap: var( --wp--style--block-gap ) }`;
 
 	const GapStyle = () => {
 		return <style>{ gap }</style>;