diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js
index f1fba4a7bc4752..002bbcc1e32588 100644
--- a/packages/block-editor/src/components/block-list/index.js
+++ b/packages/block-editor/src/components/block-list/index.js
@@ -30,7 +30,10 @@ const appenderNodesMap = new Map();
  */
 const BLOCK_ANIMATION_THRESHOLD = 200;
 
-function BlockList( { className, rootClientId, renderAppender }, ref ) {
+function BlockList(
+	{ className, placeholder, rootClientId, renderAppender },
+	ref
+) {
 	const Container = rootClientId ? 'div' : RootContainer;
 	const fallbackRef = useRef();
 	const wrapperRef = ref || fallbackRef;
@@ -45,6 +48,7 @@ function BlockList( { className, rootClientId, renderAppender }, ref ) {
 				) }
 			>
 				<BlockListItems
+					placeholder={ placeholder }
 					rootClientId={ rootClientId }
 					renderAppender={ renderAppender }
 					wrapperRef={ wrapperRef }
@@ -55,6 +59,7 @@ function BlockList( { className, rootClientId, renderAppender }, ref ) {
 }
 
 function Items( {
+	placeholder,
 	rootClientId,
 	renderAppender,
 	__experimentalAppenderTagName,
@@ -136,6 +141,7 @@ function Items( {
 					</AsyncModeProvider>
 				);
 			} ) }
+			{ blockClientIds.length < 1 && placeholder }
 			<BlockListAppender
 				tagName={ __experimentalAppenderTagName }
 				rootClientId={ rootClientId }
diff --git a/packages/block-editor/src/components/inner-blocks/README.md b/packages/block-editor/src/components/inner-blocks/README.md
index 5eea37c867004b..4cdd0e9b5ffd3e 100644
--- a/packages/block-editor/src/components/inner-blocks/README.md
+++ b/packages/block-editor/src/components/inner-blocks/README.md
@@ -162,5 +162,7 @@ Determines whether the toolbars of _all_ child Blocks (applied deeply, recursive
 
 For example, a button block, deeply nested in several levels of block `X` that utilises this property will see the button block's toolbar displayed on block `X`'s toolbar area.
 
+### `placeholder`
 
-
+* **Type:** `Function`
+* **Default:** - `undefined`. The placeholder is an optional function that can be passed in to be a rendered component placed in front of the appender. This can be used to represent an example state prior to any blocks being placed. See the Social Links for an implementation example.
diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js
index 48bb8274636aad..18a38801eb7406 100644
--- a/packages/block-editor/src/components/inner-blocks/index.js
+++ b/packages/block-editor/src/components/inner-blocks/index.js
@@ -48,6 +48,7 @@ function UncontrolledInnerBlocks( props ) {
 		__experimentalAppenderTagName,
 		renderAppender,
 		orientation,
+		placeholder,
 	} = props;
 
 	useNestedSettingsUpdate(
@@ -88,6 +89,7 @@ function UncontrolledInnerBlocks( props ) {
 				renderAppender={ renderAppender }
 				__experimentalAppenderTagName={ __experimentalAppenderTagName }
 				wrapperRef={ wrapperRef }
+				placeholder={ placeholder }
 			/>
 		</BlockContextProvider>
 	);
diff --git a/packages/block-library/src/social-links/edit.js b/packages/block-library/src/social-links/edit.js
index 44be658e7fbd11..13ce364c83561b 100644
--- a/packages/block-library/src/social-links/edit.js
+++ b/packages/block-library/src/social-links/edit.js
@@ -14,30 +14,26 @@ import { __ } from '@wordpress/i18n';
 
 const ALLOWED_BLOCKS = [ 'core/social-link' ];
 
-// Template contains the links that show when start.
-const TEMPLATE = [
-	[
-		'core/social-link',
-		{ service: 'wordpress', url: 'https://wordpress.org' },
-	],
-	[ 'core/social-link', { service: 'facebook' } ],
-	[ 'core/social-link', { service: 'twitter' } ],
-	[ 'core/social-link', { service: 'instagram' } ],
-	[ 'core/social-link', { service: 'linkedin' } ],
-	[ 'core/social-link', { service: 'youtube' } ],
-];
-
 export function SocialLinksEdit( props ) {
 	const {
 		attributes: { openInNewTab },
 		setAttributes,
 	} = props;
+
+	const SocialPlaceholder = (
+		<div className="wp-block-social-links__social-placeholder">
+			<div className="wp-block-social-link wp-social-link-facebook"></div>
+			<div className="wp-block-social-link wp-social-link-twitter"></div>
+			<div className="wp-block-social-link wp-social-link-instagram"></div>
+		</div>
+	);
+
 	const blockProps = useBlockProps();
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		allowedBlocks: ALLOWED_BLOCKS,
-		templateLock: false,
-		template: TEMPLATE,
 		orientation: 'horizontal',
+		placeholder: SocialPlaceholder,
+		templateLock: false,
 		__experimentalAppenderTagName: 'li',
 	} );
 	return (
diff --git a/packages/block-library/src/social-links/editor.scss b/packages/block-library/src/social-links/editor.scss
index f5544459d2cc1f..dec1e6fa3634d0 100644
--- a/packages/block-library/src/social-links/editor.scss
+++ b/packages/block-library/src/social-links/editor.scss
@@ -23,9 +23,41 @@
 	padding: 0;
 }
 
+// Placeholder/setup state.
+.wp-block-social-links__social-placeholder {
+	display: flex;
+
+	.wp-block-social-link {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		margin: 0 $grid-unit-10 $grid-unit-10 0;
+		width: 36px;
+		height: 36px;
+		border-radius: $radius-round;
+		opacity: 0.8;
+	}
+}
+
+.is-style-logos-only .wp-block-social-links__social-placeholder .wp-block-social-link::before {
+	content: "";
+	display: block;
+	width: 18px;
+	height: 18px;
+	border-radius: $radius-round;
+	opacity: 0.8;
+	background: currentColor;
+}
+
+.is-style-pill-shape .wp-block-social-links__social-placeholder .wp-block-social-link {
+	border-radius: 9999px;
+	padding-left: 16px + 12px;
+	padding-right: 16px + 12px;
+}
+
 // Polish the Appender.
 .wp-block-social-links .block-list-appender {
-	margin: 0;
+	margin: 0 0 $grid-unit-10 0;
 	display: flex;
 	align-items: center;
 }
@@ -47,22 +79,6 @@
 	min-height: 36px; // This height matches the height of the buttons and ensures an empty block doesn't collapse.
 }
 
-// Disappear but show on hover or nav mode focus.
-[data-type="core/social-links"] .wp-social-link__is-incomplete {
-	transition: transform 0.1s ease;
-	transform-origin: center center;
-}
-
-[data-type="core/social-links"]:not(.is-selected):not(.has-child-selected) {
-	.wp-social-link__is-incomplete {
-		opacity: 0;
-		transform: scale(0);
-		width: 0;
-		padding: 0;
-		margin-right: 0;
-	}
-}
-
 // Unconfigured placeholder links are semitransparent.
 .wp-social-link.wp-social-link__is-incomplete {
 	opacity: 0.5;
diff --git a/packages/block-library/src/social-links/style.scss b/packages/block-library/src/social-links/style.scss
index 46c3f5ca5e9dcb..7782500c696190 100644
--- a/packages/block-library/src/social-links/style.scss
+++ b/packages/block-library/src/social-links/style.scss
@@ -20,7 +20,7 @@
 	display: block;
 	width: 36px;
 	height: 36px;
-	border-radius: 36px; // This makes it pill-shaped instead of oval, in cases where the image fed is not perfectly sized.
+	border-radius: 9999px; // This makes it pill-shaped instead of oval, in cases where the image fed is not perfectly sized.
 	margin: 0 8px 8px 0;
 	transition: transform 0.1s ease;
 	@include reduce-motion("transition");