Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unblock Button block for production #20093

Merged
merged 10 commits into from
Feb 14, 2020
Merged

Unblock Button block for production #20093

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
f25e623
Unblock Button block for production
lukewalczak Feb 7, 2020
20c21f4
Resolve blockers
lukewalczak Feb 10, 2020
01ebaca
Resolve non-blockers
lukewalczak Feb 10, 2020
946775e
Correct Button outline
lukewalczak Feb 11, 2020
501772f
Correct Button outline vol2
lukewalczak Feb 11, 2020
0b734c4
Refactor outline
lukewalczak Feb 11, 2020
49a04a4
Merge branch 'master' into rnmobile/unblock-button
lukewalczak Feb 12, 2020
3e1cb68
Correct focusing Button
lukewalczak Feb 12, 2020
4070fbb
Refactor after CR
lukewalczak Feb 13, 2020
3d36f32
Correct container style
lukewalczak Feb 13, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
71 changes: 60 additions & 11 deletions packages/block-library/src/button/color-background.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,42 @@ import { __experimentalUseGradient } from '@wordpress/block-editor';
*/
import styles from './editor.scss';

function ColorBackground( { children, borderRadiusValue, backgroundColor } ) {
function OutlineWrapper( {
children,
borderRadiusValue,
isSelected,
backgroundColor,
} ) {
const outlineBorderRadius =
borderRadiusValue > 0
? borderRadiusValue +
styles.button.paddingTop +
styles.button.borderWidth
: 0;

return (
<View
style={ [
styles.container,
isSelected && {
borderRadius: outlineBorderRadius,
borderWidth: styles.button.borderWidth,
borderColor: backgroundColor,
padding: styles.button.paddingTop,
},
] }
>
{ children }
</View>
);
}

function ColorBackground( {
children,
borderRadiusValue,
backgroundColor,
isSelected,
} ) {
const wrapperStyles = [
styles.richTextWrapper,
{
Expand Down Expand Up @@ -47,19 +82,33 @@ 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 }
<OutlineWrapper
backgroundColor={ backgroundColor }
borderRadiusValue={ borderRadiusValue }
isSelected={ isSelected }
>
{ children }
</LinearGradient>
<LinearGradient
colors={ colors }
useAngle={ true }
angle={ angle }
locations={ locations }
angleCenter={ { x: 0.5, y: 0.5 } }
style={ wrapperStyles }
>
{ children }
</LinearGradient>
</OutlineWrapper>
);
}
return <View style={ wrapperStyles }>{ children }</View>;
return (
<OutlineWrapper
backgroundColor={ backgroundColor }
borderRadiusValue={ borderRadiusValue }
isSelected={ isSelected }
>
<View style={ wrapperStyles }>{ children }</View>
</OutlineWrapper>
);
}

export default ColorBackground;
208 changes: 98 additions & 110 deletions packages/block-library/src/button/edit.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 ) {
Expand Down Expand Up @@ -144,17 +145,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 ) {
Expand Down Expand Up @@ -232,7 +228,7 @@ class ButtonEdit extends Component {
<>
<TextControl
icon={ ! isCompatibleWithSettings && link }
label={ __( 'Button URL' ) }
label={ __( 'Button Link URL' ) }
value={ url || '' }
valuePlaceholder={ __( 'Add URL' ) }
onChange={ this.onChangeURL }
Expand Down Expand Up @@ -260,15 +256,23 @@ class ButtonEdit extends Component {
onChange={ this.onChangeLinkRel }
autoCapitalize="none"
autoCorrect={ false }
separatorType={ 'fullWidth' }
separatorType={
isCompatibleWithSettings ? 'none' : 'fullWidth'
}
keyboardType="url"
/>
</>
);
}

render() {
const { attributes, textColor, isSelected, clientId } = this.props;
const {
attributes,
textColor,
isSelected,
clientId,
onReplace,
} = this.props;
const {
placeholder,
text,
Expand All @@ -283,12 +287,6 @@ class ButtonEdit extends Component {
borderRadius !== undefined
? borderRadius
: styles.button.borderRadius;
const outlineBorderRadius =
borderRadiusValue > 0
? borderRadiusValue +
styles.button.paddingTop +
styles.button.borderWidth
: 0;

// To achieve proper expanding and shrinking `RichText` on iOS, there is a need to set a `minWidth`
// value at least on 1 when `RichText` is focused or when is not focused, but `RichText` value is
Expand All @@ -307,103 +305,93 @@ class ButtonEdit extends Component {

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={ this.getBackgroundColor() }
lukewalczak marked this conversation as resolved.
Show resolved Hide resolved
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' }
/>
</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={ ( richText ) => {
lukewalczak marked this conversation as resolved.
Show resolved Hide resolved
this.richTextRef = richText;
} }
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>
);
}
Expand Down
6 changes: 4 additions & 2 deletions packages/block-library/src/button/editor.native.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@
}

.container {
padding: $block-spacing;
background-color: transparent;
align-self: flex-start;
}
Expand All @@ -14,7 +13,6 @@
}

.button {
background-color: $button-default-bg;
border-width: $border-width;
border-radius: $border-width * 4;
padding: $block-spacing;
Expand All @@ -30,3 +28,7 @@
.clearLinkButton {
color: $alert-red;
}

.placeholderTextColor {
color: rgba($color: $white, $alpha: 0.43);
}
2 changes: 1 addition & 1 deletion packages/block-library/src/index.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,7 +149,7 @@ export const registerCoreBlocks = () => {
preformatted,
gallery,
group,
devOnly( button ),
button,
spacer,
shortcode,
].forEach( registerBlock );
Expand Down