Add placeholder components when no links specified

Improve the default experience for social links when no links are
specified. This uses the new placeholder prop in InnerBlocks and
BlockList.

packages/block-library/src/social-links/edit.js

@@ -14,24 +14,18 @@ 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">
+			Use [+] to add icons.
+		</div>
+	);
+
 	const blockProps = useBlockProps();
 	return (
 		<Fragment>
@@ -49,8 +43,8 @@ export function SocialLinksEdit( props ) {
 			<InnerBlocks
 				allowedBlocks={ ALLOWED_BLOCKS }
 				templateLock={ false }
-				template={ TEMPLATE }
 				orientation="horizontal"
+				placeholder={ SocialPlaceholder }
 				__experimentalTagName="ul"
 				__experimentalPassedProps={ blockProps }
 				__experimentalAppenderTagName="li"

packages/block-library/src/social-links/editor.scss

@@ -22,6 +22,13 @@
 .editor-styles-wrapper .wp-block-social-links {
 	padding: 0;
 }
+.wp-block-social-links__social-placeholder {
+	background-color: #aaa;
+	border-radius: 8px;
+	margin: 8px;
+	padding: 4px;
+	font-size: 13px;
+}
 
 // Polish the Appender.
 .wp-block-social-links .block-list-appender {