Fix image layout shift from placeholder to selected placeholder (#59857)

* Fix image layout shift from placeholder to selected placeholder * Only when not selected. * Update changelog.
WordPress · Mar 14, 2024 · eabd972 · eabd972
1 parent ee70b1c
commit eabd972
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 7 deletions.
diff --git a/packages/block-library/src/image/editor.scss b/packages/block-library/src/image/editor.scss
@@ -2,11 +2,6 @@
 // @todo: this particular minimal style of placeholder could be componentized further.
 .wp-block-image.wp-block-image {
 
-	&:not(.is-selected) .components-placeholder__fieldset {
-		// Show only is selected.
-		display: none;
-	}
-
 	// Show Placeholder style on-select.
 	&.is-selected .components-placeholder {
 		// Block UI appearance.

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -1,7 +1,8 @@
 <!-- Learn how to maintain this file at https://github.com/WordPress/gutenberg/tree/HEAD/packages#maintaining-changelogs. -->
 
 ## Unreleased
--	`Drowdown` : Add styling support for `MenuGroup` ([#59723](https://github.com/WordPress/gutenberg/pull/59723)).
+-	`Dropdown` : Add styling support for `MenuGroup` ([#59723](https://github.com/WordPress/gutenberg/pull/59723)).
+-	`Placeholder` : Allow overflow but only when placeholder is selected, to fix a layout shift. `MenuGroup` ([#59857](https://github.com/WordPress/gutenberg/pull/59857)).
 
 ### Enhancements
 

diff --git a/packages/components/src/placeholder/style.scss b/packages/components/src/placeholder/style.scss
@@ -212,7 +212,11 @@
 
 	// By painting the borders here, we enable them to be replaced by the Border control.
 	@include placeholder-style();
-	overflow: auto;
+
+	overflow: hidden;
+	.is-selected & {
+		overflow: auto;
+	}
 }
 
 // Position the spinner.