Unblock Button block for production (#20093)

* Unblock Button block for production * Resolve blockers * Resolve non-blockers * Correct Button outline * Correct Button outline vol2 * Refactor outline * Correct focusing Button * Refactor after CR * Correct container style
WordPress · Feb 14, 2020 · 95be294 · 95be294
1 parent d870797
commit 95be294
Show file tree

Hide file tree

Showing 4 changed files with 170 additions and 136 deletions.
diff --git a/packages/block-library/src/button/color-background.native.js b/packages/block-library/src/button/color-background.native.js
@@ -44,22 +44,28 @@ function ColorBackground( { children, borderRadiusValue, backgroundColor } ) {
 		};
 	}
 
-	if ( gradientValue ) {
-		const { colors, locations, angle } = transformGradient();
-		return (
-			<LinearGradient
-				colors={ colors }
-				useAngle={ true }
-				angle={ angle }
-				locations={ locations }
-				angleCenter={ { x: 0.5, y: 0.5 } }
-				style={ wrapperStyles }
-			>
-				{ children }
-			</LinearGradient>
-		);
-	}
-	return <View style={ wrapperStyles }>{ children }</View>;
+	const { colors, locations, angle } = gradientValue
+		? transformGradient()
+		: {};
+
+	return (
+		<View style={ wrapperStyles }>
+			{ gradientValue && (
+				<LinearGradient
+					colors={ colors }
+					useAngle={ true }
+					angle={ angle }
+					locations={ locations }
+					angleCenter={ { x: 0.5, y: 0.5 } }
+					style={ [
+						styles.linearGradient,
+						{ borderRadius: borderRadiusValue },
+					] }
+				/>
+			) }
+			{ children }
+		</View>
+	);
 }
 
 export default ColorBackground;
diff --git a/packages/block-library/src/button/edit.native.js b/packages/block-library/src/button/edit.native.js
@@ -40,6 +40,7 @@ const NEW_TAB_REL = 'noreferrer noopener';
 const MIN_BORDER_RADIUS_VALUE = 0;
 const MAX_BORDER_RADIUS_VALUE = 50;
 const INITIAL_MAX_WIDTH = 108;
+const PREPEND_HTTP = 'http://';
 
 class ButtonEdit extends Component {
 	constructor( props ) {
@@ -54,16 +55,20 @@ class ButtonEdit extends Component {
 		this.getURLFromClipboard = this.getURLFromClipboard.bind( this );
 		this.onToggleLinkSettings = this.onToggleLinkSettings.bind( this );
 		this.onToggleButtonFocus = this.onToggleButtonFocus.bind( this );
+		this.setRef = this.setRef.bind( this );
 
 		// `isEditingURL` property is used to prevent from automatically pasting
 		// URL from clipboard while trying to clear `Button URL` field and then
 		// manually adding specific link
 		this.isEditingURL = false;
 
+		const isButtonFocused =
+			Platform.OS === 'ios' ? ! props.hasParents : true;
+
 		this.state = {
 			maxWidth: INITIAL_MAX_WIDTH,
 			isLinkSheetVisible: false,
-			isButtonFocused: true,
+			isButtonFocused,
 		};
 	}
 
@@ -144,17 +149,12 @@ class ButtonEdit extends Component {
 	}
 
 	getBackgroundColor() {
-		const { backgroundColor, attributes } = this.props;
+		const { backgroundColor } = this.props;
 		if ( backgroundColor.color ) {
 			// `backgroundColor` which should be set when we are able to resolve it
 			return backgroundColor.color;
-		} else if ( attributes.backgroundColor ) {
-			// `backgroundColor` which should be set when we can’t resolve
-			// the button `backgroundColor` that was created on web
-			return styles.fallbackButton.backgroundColor;
-			// `backgroundColor` which should be set when `Button` is created on mobile
 		}
-		return styles.button.backgroundColor;
+		return styles.fallbackButton.backgroundColor;
 	}
 
 	onChangeText( value ) {
@@ -180,13 +180,6 @@ class ButtonEdit extends Component {
 		setAttributes( { url: value } );
 	}
 
-	onLayout( { nativeEvent } ) {
-		const { width } = nativeEvent.layout;
-		const { marginRight, paddingRight, borderWidth } = styles.button;
-		const buttonSpacing = 2 * ( marginRight + paddingRight + borderWidth );
-		this.setState( { maxWidth: width - buttonSpacing } );
-	}
-
 	onChangeOpenInNewTab( value ) {
 		const { setAttributes, attributes } = this.props;
 		const { rel } = attributes;
@@ -227,12 +220,19 @@ class ButtonEdit extends Component {
 		this.setState( { isLinkSheetVisible: false } );
 	}
 
+	onLayout( { nativeEvent } ) {
+		const { width } = nativeEvent.layout;
+		const { marginRight } = styles.button;
+		const buttonSpacing = 2 * marginRight;
+		this.setState( { maxWidth: width - buttonSpacing } );
+	}
+
 	getLinkSettings( url, rel, linkTarget, isCompatibleWithSettings ) {
 		return (
 			<>
 				<TextControl
 					icon={ ! isCompatibleWithSettings && link }
-					label={ __( 'Button URL' ) }
+					label={ __( 'Button Link URL' ) }
 					value={ url || '' }
 					valuePlaceholder={ __( 'Add URL' ) }
 					onChange={ this.onChangeURL }
@@ -260,15 +260,27 @@ class ButtonEdit extends Component {
 					onChange={ this.onChangeLinkRel }
 					autoCapitalize="none"
 					autoCorrect={ false }
-					separatorType={ 'fullWidth' }
+					separatorType={
+						isCompatibleWithSettings ? 'none' : 'fullWidth'
+					}
 					keyboardType="url"
 				/>
 			</>
 		);
 	}
 
+	setRef( richText ) {
+		this.richTextRef = richText;
+	}
+
 	render() {
-		const { attributes, textColor, isSelected, clientId } = this.props;
+		const {
+			attributes,
+			textColor,
+			isSelected,
+			clientId,
+			onReplace,
+		} = this.props;
 		const {
 			placeholder,
 			text,
@@ -305,105 +317,108 @@ class ButtonEdit extends Component {
 				? ''
 				: placeholder || __( 'Add text…' );
 
+		const backgroundColor = this.getBackgroundColor();
+
 		return (
 			<View style={ { flex: 1 } } onLayout={ this.onLayout }>
-				<View
-					style={ [
-						styles.container,
-						isSelected && {
-							borderColor: this.getBackgroundColor(),
-							borderRadius: outlineBorderRadius,
-							borderWidth: styles.button.borderWidth,
-						},
-					] }
+				<ColorBackground
+					borderRadiusValue={ borderRadiusValue }
+					backgroundColor={ backgroundColor }
+					isSelected={ isSelected }
 				>
-					<ColorBackground
-						borderRadiusValue={ borderRadiusValue }
-						backgroundColor={ this.getBackgroundColor() }
-					>
-						<RichText
-							setRef={ ( richText ) => {
-								this.richTextRef = richText;
-							} }
-							placeholder={ placeholderText }
-							value={ text }
-							onChange={ this.onChangeText }
-							style={ {
-								...richTextStyle.richText,
-								color: textColor.color || '#fff',
-							} }
-							textAlign="center"
-							placeholderTextColor={ 'lightgray' }
-							identifier="content"
-							tagName="p"
-							minWidth={ minWidth }
-							maxWidth={ maxWidth }
-							id={ clientId }
-							isSelected={ isButtonFocused }
-							withoutInteractiveFormatting
-							unstableOnFocus={ () =>
-								this.onToggleButtonFocus( true )
-							}
-							__unstableMobileNoFocusOnMount={ ! isSelected }
-							selectionColor={ textColor.color || '#fff' }
+					{ isSelected && (
+						<View
+							pointerEvents="none"
+							style={ [
+								styles.outline,
+								{
+									borderRadius: outlineBorderRadius,
+									borderWidth: styles.button.borderWidth,
+									borderColor: backgroundColor,
+								},
+							] }
 						/>
-					</ColorBackground>
-
-					{ isButtonFocused && (
-						<BlockControls>
-							<ToolbarGroup>
-								<ToolbarButton
-									title={ __( 'Edit image' ) }
-									icon={ link }
-									onClick={ this.onToggleLinkSettings }
-								/>
-							</ToolbarGroup>
-						</BlockControls>
 					) }
-
-					<BottomSheet
-						isVisible={ isLinkSheetVisible }
-						onClose={ this.onToggleLinkSettings }
-						hideHeader
-					>
-						{ this.getLinkSettings( url, rel, linkTarget ) }
-						<BottomSheet.Cell
-							label={ __( 'Remove link' ) }
-							labelStyle={ styles.clearLinkButton }
-							separatorType={ 'none' }
-							onPress={ this.onClearSettings }
-						/>
-					</BottomSheet>
-
-					<InspectorControls>
-						<PanelBody title={ __( 'Border Settings' ) }>
-							<RangeControl
-								label={ __( 'Border Radius' ) }
-								minimumValue={ MIN_BORDER_RADIUS_VALUE }
-								maximumValue={ MAX_BORDER_RADIUS_VALUE }
-								value={ borderRadiusValue }
-								onChange={ this.onChangeBorderRadius }
-								separatorType="none"
+					<RichText
+						setRef={ this.setRef }
+						placeholder={ placeholderText }
+						value={ text }
+						onChange={ this.onChangeText }
+						style={ {
+							...richTextStyle.richText,
+							color: textColor.color || '#fff',
+						} }
+						textAlign="center"
+						placeholderTextColor={
+							styles.placeholderTextColor.color
+						}
+						identifier="content"
+						tagName="p"
+						minWidth={ minWidth }
+						maxWidth={ maxWidth }
+						id={ clientId }
+						isSelected={ isButtonFocused }
+						withoutInteractiveFormatting
+						unstableOnFocus={ () =>
+							this.onToggleButtonFocus( true )
+						}
+						__unstableMobileNoFocusOnMount={ ! isSelected }
+						selectionColor={ textColor.color || '#fff' }
+						onReplace={ onReplace }
+						onRemove={ () => onReplace( [] ) }
+					/>
+				</ColorBackground>
+
+				{ isSelected && (
+					<BlockControls>
+						<ToolbarGroup>
+							<ToolbarButton
+								title={ __( 'Edit image' ) }
+								icon={ link }
+								onClick={ this.onToggleLinkSettings }
+								isActive={ url && url !== PREPEND_HTTP }
 							/>
-						</PanelBody>
-						<PanelBody title={ __( 'Link Settings' ) }>
-							{ this.getLinkSettings(
-								url,
-								rel,
-								linkTarget,
-								true
+						</ToolbarGroup>
+					</BlockControls>
+				) }
+
+				<BottomSheet
+					isVisible={ isLinkSheetVisible }
+					onClose={ this.onToggleLinkSettings }
+					hideHeader
+				>
+					{ this.getLinkSettings( url, rel, linkTarget ) }
+					<BottomSheet.Cell
+						label={ __( 'Remove link' ) }
+						labelStyle={ styles.clearLinkButton }
+						separatorType={ 'none' }
+						onPress={ this.onClearSettings }
+					/>
+				</BottomSheet>
+
+				<InspectorControls>
+					<PanelBody title={ __( 'Border Settings' ) }>
+						<RangeControl
+							label={ __( 'Border Radius' ) }
+							minimumValue={ MIN_BORDER_RADIUS_VALUE }
+							maximumValue={ MAX_BORDER_RADIUS_VALUE }
+							value={ borderRadiusValue }
+							onChange={ this.onChangeBorderRadius }
+							separatorType="none"
+						/>
+					</PanelBody>
+					<PanelBody title={ __( 'Link Settings' ) }>
+						{ this.getLinkSettings( url, rel, linkTarget, true ) }
+					</PanelBody>
+					<PanelBody>
+						<UnsupportedFooterControl
+							label={ __(
+								'Button color settings are coming soon.'
 							) }
-						</PanelBody>
-						<PanelBody title={ __( 'Color Settings' ) }>
-							<UnsupportedFooterControl
-								label={ __(
-									'Note: Theme colors are not available at this time.'
-								) }
-								separatorType="none"
-							/>
-						</PanelBody>
-					</InspectorControls>
-				</View>
+							separatorType="none"
+						/>
+					</PanelBody>
+				</InspectorControls>
 			</View>
 		);
 	}
@@ -414,13 +429,17 @@ export default compose( [
 	withColors( 'backgroundColor', { textColor: 'color' } ),
 	withSelect( ( select ) => {
 		const { isEditorSidebarOpened } = select( 'core/edit-post' );
-		const { getSelectedBlockClientId } = select( 'core/block-editor' );
+		const { getSelectedBlockClientId, getBlockParents } = select(
+			'core/block-editor'
+		);
 
 		const selectedId = getSelectedBlockClientId();
+		const hasParents = getBlockParents( selectedId ).length > 0;
 
 		return {
 			selectedId,
 			editorSidebarOpened: isEditorSidebarOpened(),
+			hasParents,
 		};
 	} ),
 ] )( ButtonEdit );