diff --git a/packages/block-library/src/navigation/edit/placeholder/placeholder-preview.js b/packages/block-library/src/navigation/edit/placeholder/placeholder-preview.js
index a844cb6109c0d3..613446726683bd 100644
--- a/packages/block-library/src/navigation/edit/placeholder/placeholder-preview.js
+++ b/packages/block-library/src/navigation/edit/placeholder/placeholder-preview.js
@@ -3,26 +3,19 @@
  */
 import classnames from 'classnames';
 
-/**
- * WordPress dependencies
- */
-import { Icon, search } from '@wordpress/icons';
-
 const PlaceholderPreview = ( { isLoading } ) => {
 	return (
 		<ul
 			className={ classnames(
 				'wp-block-navigation-placeholder__preview',
-				'wp-block-navigation__container',
 				{ 'is-loading': isLoading }
 			) }
 		>
-			<li className="wp-block-navigation-item">&#8203;</li>
-			<li className="wp-block-navigation-item">&#8203;</li>
-			<li className="wp-block-navigation-item">&#8203;</li>
-			<li className="wp-block-navigation-placeholder__preview-search-icon">
-				<Icon icon={ search } />
-			</li>
+			<li>&#8203;</li>
+			<li>&#8203;</li>
+			<li>&#8203;</li>
+			<li>&#8203;</li>
+			<li>&#8203;</li>
 		</ul>
 	);
 };
diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss
index 5b3d7f4c8671c9..540f6a3bf012ea 100644
--- a/packages/block-library/src/navigation/editor.scss
+++ b/packages/block-library/src/navigation/editor.scss
@@ -191,10 +191,23 @@ $color-control-label-height: 20px;
 	justify-content: flex-start;
 }
 
+
 /**
  * Setup state
  */
 
+// Loading state.
+@keyframes loadingpulse {
+	0% {
+		opacity: 1;
+	}
+	50% {
+		opacity: 0.5;
+	}
+	100% {
+		opacity: 1;
+	}
+}
 // Unstyle some inherited placeholder component styles.
 .components-placeholder.wp-block-navigation-placeholder {
 	outline: none;
@@ -204,8 +217,10 @@ $color-control-label-height: 20px;
 	min-height: 0;
 
 	// Needed for the preview menu items to match actual menu items.
+	gap: inherit;
 	.components-placeholder__fieldset {
 		font-size: inherit;
+		gap: inherit;
 	}
 
 	.components-placeholder__fieldset .components-button {
@@ -220,116 +235,78 @@ $color-control-label-height: 20px;
 	}
 }
 
-// Spinner.
-.wp-block-navigation-placeholder .components-spinner {
-	margin-top: -4px;
-	margin-left: 4px;
-	vertical-align: middle;
-	margin-right: 7px;
-}
-
-@keyframes loadingpulse {
-	0% {
-		opacity: 1;
-	}
-	50% {
-		opacity: 0.5;
-	}
-	100% {
-		opacity: 1;
-	}
-}
-
 // Unselected state.
 .wp-block-navigation-placeholder__preview {
 	display: flex;
-	flex-direction: row;
 	align-items: center;
-	flex-wrap: nowrap;
-	width: 100%;
-	overflow: hidden;
+	padding: $grid-unit-05 $grid-unit-10 $grid-unit-05 $grid-unit-15;
+	min-width: $grid-unit-10 * 12;
 
-	&.is-loading {
-		animation: loadingpulse 1s linear infinite;
-		animation-delay: 0.5s; // avoid animating for fast network responses
-	}
+	// Make it at least as high as the smallest placeholder.
+	min-height: $button-size + $grid-unit-05 + $grid-unit-05;
 
-	// Style skeleton elements to mostly match the metrics of actual menu items.
-	// Needs specificity.
-	.wp-block-navigation-item.wp-block-navigation-item {
-		position: relative;
-		min-width: 72px;
-
-		&::before {
-			display: block;
-			content: "";
-			border-radius: $radius-block-ui;
-			background: currentColor;
-			height: $grid-unit-20;
-			width: 100%;
-		}
+	// Hide when selected.
+	.wp-block-navigation.is-selected & {
+		display: none;
 	}
 
-	.wp-block-navigation-placeholder__preview-search-icon {
-		height: $icon-size;
-		svg {
-			fill: currentColor;
-		}
-	}
+	/*// Draw the dashed outline.
+	// By setting the dashed border to currentColor, we ensure it's visible
+	// against any background color.
+	color: currentColor;
+	background: transparent;
+	&::before {
+		content: "";
+		display: block;
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		border: $border-width dashed currentColor;
+		opacity: 0.4;
+		pointer-events: none;
 
-	.wp-block-navigation-item.wp-block-navigation-item,
-	.wp-block-navigation-placeholder__preview-search-icon {
-		opacity: 0.3;
-	}
+		// Inherit border radius from style variations.
+		border-radius: inherit;
+	}*/
 
-	&:not(.is-loading) {
-		// Don't show the preview boxes for an empty nav block,
-		// but be technically present to help size the empty state.
-		.wp-block-navigation.is-selected & {
-			display: flex;
-			opacity: 0;
-			width: 0;
-			overflow: hidden;
-			flex-wrap: nowrap;
-			flex: 0;
-		}
+	// Draw navigation placeholder indicators.
+	gap: inherit;
 
-		// Hide entirely when vertical.
-		.wp-block-navigation.is-selected .is-small &,
-		.wp-block-navigation.is-selected .is-medium & {
-			display: none;
-		}
+	li {
+		border: $border-width dashed currentColor;
+		opacity: 0.45;
+		height: 1em;
+		width: 4em;
+		border-radius: $radius-block-ui;
 	}
 }
 
 // Selected state.
 .wp-block-navigation-placeholder__controls {
-	padding: $grid-unit-10;
+	padding: $grid-unit-05 $grid-unit-10;
 	border-radius: $radius-block-ui;
 	background-color: $white;
 	box-shadow: inset 0 0 0 $border-width $gray-900;
+	display: none;
 	flex-direction: row;
 	align-items: center;
-	display: none;
 	position: relative;
 	z-index: 1;
 
-	// Adjust padding for when shown horizontally.
-	.is-large & {
-		padding: $grid-unit-05 $grid-unit-10;
+	// Show when selected.
+	.wp-block-navigation.is-selected & {
+		display: flex;
 	}
 
+
 	// If an ancestor has a text-decoration property applied, it is inherited regardless of
 	// the specificity of a child element. Only pulling the child out of the flow fixes it.
 	// See also https://www.w3.org/TR/CSS21/text.html#propdef-text-decoration.
 	float: left;
 	width: 100%;
 
-	// Show when selected.
-	.wp-block-navigation.is-selected & {
-		display: flex;
-	}
-
 	// Show stacked for the vertical navigation, or small placeholders.
 	.is-small &,
 	.is-medium & {
diff --git a/packages/block-library/src/post-featured-image/editor.scss b/packages/block-library/src/post-featured-image/editor.scss
index 31a77623c335cd..7b158f59040f78 100644
--- a/packages/block-library/src/post-featured-image/editor.scss
+++ b/packages/block-library/src/post-featured-image/editor.scss
@@ -48,7 +48,7 @@
 			bottom: 0;
 			left: 0;
 			border: $border-width dashed currentColor;
-			opacity: 0.4;
+			opacity: 0.45;
 			pointer-events: none;
 
 			// Inherit border radius from style variations.
@@ -93,7 +93,7 @@
 			height: 100%;
 			stroke: currentColor;
 			stroke-dasharray: 3;
-			opacity: 0.4;
+			opacity: 0.45;
 		}
 
 		// Show default placeholder height when not resized.
diff --git a/packages/block-library/src/site-logo/editor.scss b/packages/block-library/src/site-logo/editor.scss
index af1a9fe59f2bd2..d09c45bea4e02c 100644
--- a/packages/block-library/src/site-logo/editor.scss
+++ b/packages/block-library/src/site-logo/editor.scss
@@ -110,7 +110,7 @@
 			bottom: 0;
 			left: 0;
 			border: $border-width dashed currentColor;
-			opacity: 0.4;
+			opacity: 0.45;
 			pointer-events: none;
 
 			// Inherit border radius from style variations.
@@ -155,7 +155,7 @@
 			height: 100%;
 			stroke: currentColor;
 			stroke-dasharray: 3;
-			opacity: 0.4;
+			opacity: 0.45;
 		}
 	}