Social Icons: Remove custom placeholder state (#69821)

Mamaduka · t-hamano · cbravobernal · web-flow · commit b03eee0145a9 · 2025-04-05T20:27:58.000+09:00
Unlinked contributors: Dusky-Div.

Co-authored-by: Mamaduka &lt;mamaduka@git.wordpress.org&gt;
Co-authored-by: t-hamano &lt;wildworks@git.wordpress.org&gt;
Co-authored-by: cbravobernal &lt;cbravobernal@git.wordpress.org&gt;
Co-authored-by: colinduwe &lt;colind@git.wordpress.org&gt;
Co-authored-by: jasmussen &lt;joen@git.wordpress.org&gt;
Co-authored-by: richtabor &lt;richtabor@git.wordpress.org&gt;
Co-authored-by: jsnajdr &lt;jsnajdr@git.wordpress.org&gt;
Co-authored-by: afercia &lt;afercia@git.wordpress.org&gt;
diff --git a/packages/block-library/src/social-links/edit.js b/packages/block-library/src/social-links/edit.js
@@ -64,9 +64,15 @@ export function SocialLinksEdit( props ) {
 		size,
 	} = attributes;
 
-	const hasSelectedChild = useSelect(
-		( select ) =>
-			select( blockEditorStore ).hasSelectedInnerBlock( clientId ),
+	const { hasSocialIcons, hasSelectedChild } = useSelect(
+		( select ) => {
+			const { getBlockCount, hasSelectedInnerBlock } =
+				select( blockEditorStore );
+			return {
+				hasSocialIcons: getBlockCount( clientId ) > 0,
+				hasSelectedChild: hasSelectedInnerBlock( clientId ),
+			};
+		},
 		[ clientId ]
 	);
 
@@ -96,16 +102,6 @@ export function SocialLinksEdit( props ) {
 		}
 	}, [ logosOnly ] );
 
-	const SocialPlaceholder = (
-		<li className="wp-block-social-links__social-placeholder">
-			<div className="wp-block-social-links__social-placeholder-icons">
-				<div className="wp-social-link wp-social-link-twitter"></div>
-				<div className="wp-social-link wp-social-link-facebook"></div>
-				<div className="wp-social-link wp-social-link-instagram"></div>
-			</div>
-		</li>
-	);
-
 	// Fallback color values are used maintain selections in case switching
 	// themes and named colors in palette do not match.
 	const className = clsx( size, {
@@ -117,11 +113,13 @@ export function SocialLinksEdit( props ) {
 
 	const blockProps = useBlockProps( { className } );
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
-		placeholder: ! isSelected && SocialPlaceholder,
 		templateLock: false,
 		orientation: attributes.layout?.orientation ?? 'horizontal',
 		__experimentalAppenderTagName: 'li',
-		renderAppender: hasAnySelected && InnerBlocks.ButtonBlockAppender,
+		renderAppender:
+			! hasSocialIcons || hasAnySelected
+				? InnerBlocks.ButtonBlockAppender
+				: undefined,
 	} );
 
 	const POPOVER_PROPS = {
diff --git a/packages/block-library/src/social-links/editor.scss b/packages/block-library/src/social-links/editor.scss
@@ -12,52 +12,9 @@
 
 // Specificity for the following styles are fixed at 0-1-0 to match and be
 // overridable by global styles.
-:root :where(.wp-block-social-links),
-:root :where(.wp-block-social-links.is-style-logos-only .wp-block-social-links__social-placeholder .wp-social-link) {
+:root :where(.wp-block-social-links) {
 	padding: 0;
 }
-:root :where(.wp-block-social-links__social-placeholder .wp-social-link) {
-	padding: 0.25em;
-}
-:root :where(.wp-block-social-links.is-style-pill-shape .wp-block-social-links__social-placeholder .wp-social-link) {
-	padding-left: calc((2/3) * 1em);
-	padding-right: calc((2/3) * 1em);
-}
-
-// Placeholder/setup state.
-.wp-block-social-links__social-placeholder {
-	display: flex;
-	opacity: 0.8;
-	list-style: none;
-
-	// Use the first link to set the height.
-	> .wp-social-link {
-		// Use !important to keep the selector simple.
-		padding-left: 0 !important;
-		margin-left: 0 !important;
-		padding-right: 0 !important;
-		margin-right: 0 !important;
-		width: 0 !important;
-		visibility: hidden;
-	}
-
-	// Wrap the remaining placeholders in a container so the plus can overlap.
-	> .wp-block-social-links__social-placeholder-icons {
-		display: flex;
-	}
-
-	.wp-social-link::before {
-		content: "";
-		display: block;
-		width: 1em;
-		height: 1em;
-		border-radius: $radius-round;
-
-		.is-style-logos-only & {
-			background: currentColor;
-		}
-	}
-}
 
 // Selected placeholder state.
 .wp-block-social-links .wp-block-social-links__social-prompt {
