Social Links: Update Placeholder experience when first inserting Soci…

…al Links (#25941) * Do not hide the icons if the URL is not set This prevents the icons disappearing when losing focus and the URL is not set. This causes is a little unexpected and is not how other placeholders behave, for example the image placeholder still shows without an image set and the block not selected. * Adds placeholder prop to show if no blocks in list The placeholder prop can hold a component that will show in front of the appender if specified and there are no blocks in the block list. Added to help Social Links render a better placeholder experience. * Add placeholder prop to pass forward to BlockList The placeholder prop accepts a component to render if there are no blocks. The component is shown inline with the appender. This was added to support a better experience for Social Links placeholder. * 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. * Fix issues with rebase/refactor * Prettier formatting autofix * Used blurred faux-icons for placeholder * Soften the placeholder colors with some Alphaville * Polish the placeholder state. * Tweak setup state. * Fix margin and color issue. * Add placeholder prop to InnerBlocks README Co-authored-by: jasmussen <[email protected]>
WordPress · Oct 16, 2020 · fff1071 · fff1071
1 parent 96dfbd7
commit fff1071
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 35 deletions.
diff --git 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,
@@ -147,6 +152,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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -22,7 +22,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");