Correct undo in social links

WordPress · Jun 18, 2020 · a0edba7 · a0edba7
1 parent 76cf8d6
commit a0edba7
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 12 deletions.
diff --git a/packages/block-editor/src/components/block-list/index.native.js b/packages/block-editor/src/components/block-list/index.native.js
@@ -103,6 +103,7 @@ export class BlockList extends Component {
 			<EmptyListComponentCompose
 				rootClientId={ this.props.rootClientId }
 				renderAppender={ this.props.renderAppender }
+				renderFooterAppender={ this.props.renderFooterAppender }
 			/>
 		);
 	}
@@ -372,7 +373,13 @@ class EmptyListComponent extends Component {
 			shouldShowInsertionPoint,
 			rootClientId,
 			renderAppender,
+			renderFooterAppender,
 		} = this.props;
+
+		if ( renderFooterAppender ) {
+			return null;
+		}
+
 		return (
 			<View style={ styles.defaultAppender }>
 				<ReadableContentView>

diff --git a/packages/block-library/src/social-link/edit.native.js b/packages/block-library/src/social-link/edit.native.js
@@ -52,21 +52,31 @@ const SocialLinkEdit = ( {
 
 	const [ isLinkSheetVisible, setIsLinkSheetVisible ] = useState( false );
 	const [ isValue, setIsValue ] = useState( !! url );
+	const [ urlInputValue, setUrlInputValue ] = useState( '' );
+	const [ labelInputValue, setLabelInputValue ] = useState( '' );
 
 	const animatedValue = useRef( new Animated.Value( 0 ) ).current;
 
 	const IconComponent = getIconBySite( service )();
 	const socialLinkName = getNameBySite( service );
 
+	// When new social icon is added link sheet is opened automatically
 	useEffect( () => {
 		if ( isSelected && ! url ) {
 			setIsLinkSheetVisible( true );
 		}
 	}, [] );
 
 	useEffect( () => {
-		setAttributes( { url: prependHTTP( url ) } );
-	}, [ ! isLinkSheetVisible && url ] );
+		setUrlInputValue( url || '' );
+		setLabelInputValue( label || '' );
+		if ( ! url ) {
+			setIsValue( false );
+			animatedValue.setValue( 0 );
+		} else if ( url ) {
+			animateColors();
+		}
+	}, [ url ] );
 
 	const interpolationColors = {
 		backgroundColor: animatedValue.interpolate( {
@@ -92,11 +102,11 @@ const SocialLinkEdit = ( {
 			setIsValue( false );
 			animatedValue.setValue( 0 );
 		}
-		setAttributes( { url: value } );
+		setUrlInputValue( value );
 	}
 
 	function onChangeLabel( value ) {
-		setAttributes( { label: value } );
+		setLabelInputValue( value );
 	}
 
 	function animateColors() {
@@ -111,10 +121,15 @@ const SocialLinkEdit = ( {
 	}
 
 	function onCloseSettingsSheet() {
-		if ( url ) {
+		setAttributes( {
+			url: prependHTTP( urlInputValue ),
+			label: labelInputValue,
+		} );
+		setIsLinkSheetVisible( false );
+
+		if ( urlInputValue !== '' ) {
 			animateColors();
 		}
-		setIsLinkSheetVisible( false );
 	}
 
 	function onIconPress() {
@@ -143,7 +158,7 @@ const SocialLinkEdit = ( {
 				>
 					<TextControl
 						label={ __( 'URL' ) }
-						value={ url || '' }
+						value={ urlInputValue }
 						valuePlaceholder={ __( 'Add URL' ) }
 						onChange={ onChangeURL }
 						onSubmit={ onCloseSettingsSheet }
@@ -155,7 +170,7 @@ const SocialLinkEdit = ( {
 					/>
 					<TextControl
 						label={ __( 'Link label' ) }
-						value={ label || '' }
+						value={ labelInputValue }
 						valuePlaceholder={ __( 'None' ) }
 						onChange={ onChangeLabel }
 					/>

diff --git a/packages/block-library/src/social-links/edit.native.js b/packages/block-library/src/social-links/edit.native.js
@@ -7,7 +7,7 @@ import { View } from 'react-native';
  */
 import { InnerBlocks } from '@wordpress/block-editor';
 import { withDispatch, withSelect } from '@wordpress/data';
-import { useRef } from '@wordpress/element';
+import { useRef, useEffect, useState } from '@wordpress/element';
 import { compose, usePreferredColorSchemeStyle } from '@wordpress/compose';
 
 /**
@@ -41,10 +41,17 @@ function SocialLinksEdit( {
 	activeInnerBlocks,
 	getBlock,
 } ) {
-	const { align } = attributes;
+	const [ initialCreation, setInitialCreation ] = useState( true );
 	const shouldRenderFooterAppender = isSelected || isInnerIconSelected;
+	const { align } = attributes;
 	const { marginLeft: spacing } = styles.spacing;
 
+	useEffect( () => {
+		if ( ! shouldRenderFooterAppender ) {
+			setInitialCreation( false );
+		}
+	}, [ shouldRenderFooterAppender ] );
+
 	const renderFooterAppender = useRef( () => (
 		<View>
 			<InnerBlocks.ButtonBlockAppender isFloating={ true } />
@@ -57,7 +64,7 @@ function SocialLinksEdit( {
 	);
 
 	function renderPlaceholder() {
-		return [ ...new Array( innerBlocks.length ) ].map( ( index ) => (
+		return [ ...new Array( innerBlocks.length || 1 ) ].map( ( index ) => (
 			<View style={ placeholderStyle } key={ index } />
 		) );
 	}
@@ -80,7 +87,7 @@ function SocialLinksEdit( {
 		<InnerBlocks
 			allowedBlocks={ ALLOWED_BLOCKS }
 			templateLock={ false }
-			template={ TEMPLATE }
+			template={ initialCreation && TEMPLATE }
 			renderFooterAppender={
 				shouldRenderFooterAppender && renderFooterAppender.current
 			}