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

[Mobile] Create cover block with only colour (from a default palette) without an image #23833

Merged
merged 16 commits into from
Jul 17, 2020
Merged

[Mobile] Create cover block with only colour (from a default palette) without an image #23833

Show file tree
Hide file tree
Changes from 14 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
c608052
Create cover block with only colour (from a default palette)
Jul 9, 2020
6e83663
Use noop instead of empty arrow function
Jul 13, 2020
3919a7d
Use default settings colors
Jul 13, 2020
a2eee4b
WIP: Changes Based on design feedback
Jul 13, 2020
83668c7
Merge branch 'master' into rnmobile/23831_Cover_Only_color
Jul 14, 2020
c71346a
Merge branch 'master' into rnmobile/23831_Cover_Only_color
Jul 14, 2020
0cbe0c1
Show palette with both hardcoded and theme colors
Jul 14, 2020
a0cd93b
Customise media placeholder styles only for the cover component
Jul 14, 2020
7aec919
Pass only modified media-placeholder styles
Jul 15, 2020
a152a4a
Pass only modified color-palette styles
Jul 15, 2020
485cef9
Updated color palette height
Jul 16, 2020
91ff055
Use only theme colors
Jul 16, 2020
a6a1f3f
Merge branch 'master' into rnmobile/23831_Cover_Only_color
Jul 17, 2020
97cc951
Fixes Dark mode styling bug
Jul 17, 2020
9036c9e
Simplified media-placeholder props
Jul 17, 2020
7d6219f
Removed unnecessary style
Jul 17, 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
16 changes: 14 additions & 2 deletions packages/block-editor/src/components/media-placeholder/index.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,9 @@ function MediaPlaceholder( props ) {
getStylesFromColorScheme,
multiple,
value = [],
children,
customEmptyStateContainerStyles,
geriux marked this conversation as resolved.
Show resolved Hide resolved
customEmptyStateTitleStyles,
} = props;

// use ref to keep media array current for callbacks during rerenders
Expand Down Expand Up @@ -104,9 +107,15 @@ function MediaPlaceholder( props ) {
return (
<>
<View style={ styles.modalIcon }>{ icon }</View>
<Text style={ emptyStateTitleStyle }>
<Text
style={ [
emptyStateTitleStyle,
customEmptyStateTitleStyles,
] }
>
{ placeholderTitle }
</Text>
{ children }
<Text style={ styles.emptyStateDescription }>
{ instructions }
</Text>
Expand Down Expand Up @@ -164,7 +173,10 @@ function MediaPlaceholder( props ) {
>
<View
style={ [
emptyStateContainerStyle,
[
emptyStateContainerStyle,
customEmptyStateContainerStyles,
],
isAppender && appenderStyle,
] }
>
Expand Down
45 changes: 44 additions & 1 deletion packages/block-library/src/cover/edit.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
*/
import { View, TouchableWithoutFeedback } from 'react-native';
import Video from 'react-native-video';
import { noop } from 'lodash';

/**
* WordPress dependencies
Expand All @@ -22,6 +23,7 @@ import {
ToolbarButton,
ToolbarGroup,
Gradient,
ColorPalette,
} from '@wordpress/components';
import {
BlockControls,
Expand Down Expand Up @@ -76,6 +78,7 @@ const Cover = ( {
onFocus,
overlayColor,
setAttributes,
settings,
closeSettingsBottomSheet,
} ) => {
const {
Expand All @@ -90,6 +93,11 @@ const Cover = ( {
} = attributes;
const CONTAINER_HEIGHT = minHeight || COVER_DEFAULT_HEIGHT;

const THEME_COLORS_COUNT = 4;
const coverDefaultPalette = {
colors: settings.colors.slice( 0, THEME_COLORS_COUNT ),
};

const { gradientValue } = __experimentalUseGradient();

const hasBackground = !! (
Expand Down Expand Up @@ -160,6 +168,16 @@ const Cover = ( {
setIsVideoLoading( false );
};

function setColor( color ) {
setAttributes( {
// clear all related attributes (only one should be set)
overlayColor: undefined,
customOverlayColor: color,
gradient: undefined,
customGradient: undefined,
} );
}

const backgroundColor = getStylesFromColorScheme(
styles.backgroundSolid,
styles.backgroundSolidDark
Expand Down Expand Up @@ -314,14 +332,36 @@ const Cover = ( {
return (
<View>
<MediaPlaceholder
customEmptyStateContainerStyles={
styles.mediaPlaceholderEmptyStateContainer
}
customEmptyStateTitleStyles={
styles.mediaPlaceholderEmptyStateTitle
}
icon={ placeholderIcon }
labels={ {
title: __( 'Cover' ),
} }
onSelect={ onSelectMedia }
allowedTypes={ ALLOWED_MEDIA_TYPES }
onFocus={ onFocus }
/>
>
<View style={ styles.colorPaletteWrapper }>
<ColorPalette
customColorIndicatorStyles={
styles.paletteColorIndicator
}
customIndicatorWrapperStyles={
styles.paletteCustomIndicatorWrapper
}
setColor={ setColor }
onCustomPress={ noop }
defaultSettings={ coverDefaultPalette }
shouldShowCustomIndicatorOption={ false }
shouldShowCustomLabel={ false }
/>
</View>
</MediaPlaceholder>
</View>
);
}
Expand Down Expand Up @@ -377,7 +417,10 @@ export default compose( [

const selectedBlockClientId = getSelectedBlockClientId();

const { getSettings } = select( 'core/block-editor' );

return {
settings: getSettings(),
isParentSelected: selectedBlockClientId === clientId,
};
} ),
Expand Down
27 changes: 27 additions & 0 deletions packages/block-library/src/cover/style.native.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,3 +75,30 @@
.clearMediaButton {
color: $alert-red;
}

.colorPaletteWrapper {
min-height: 50px;
}

.paletteColorIndicator {
margin-top: 0;
margin-bottom: 0;
width: 32px;
height: 32px;
}

.paletteCustomIndicatorWrapper {
flex-direction: row;
align-items: center;
width: 32px;
height: 32px;
}
geriux marked this conversation as resolved.
Show resolved Hide resolved

.mediaPlaceholderEmptyStateContainer {
height: 300;
}

.mediaPlaceholderEmptyStateTitle {
margin-top: 4;
margin-bottom: 16;
}
geriux marked this conversation as resolved.
Show resolved Hide resolved
41 changes: 31 additions & 10 deletions packages/components/src/color-palette/index.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,10 @@ function ColorPalette( {
currentSegment,
onCustomPress,
shouldEnableBottomSheetScroll,
shouldShowCustomIndicatorOption = true,
shouldShowCustomLabel = true,
customColorIndicatorStyles,
customIndicatorWrapperStyles,
} ) {
const customSwatchGradients = [
'linear-gradient(120deg, rgba(255,0,0,.8), 0%, rgba(255,255,255,1) 70.71%)',
Expand All @@ -66,7 +70,8 @@ function ColorPalette( {
: customSwatchGradients;
const isCustomGradientColor = isGradientColor && isSelectedCustom();
const shouldShowCustomIndicator =
! isGradientSegment || isCustomGradientColor;
shouldShowCustomIndicatorOption &&
( ! isGradientSegment || isCustomGradientColor );

const accessibilityHint = isGradientSegment
? __( 'Navigates to customize the gradient' )
Expand Down Expand Up @@ -222,15 +227,21 @@ function ColorPalette( {
color={ color }
isSelected={ isSelected( color ) }
opacity={ opacity }
style={ styles.colorIndicator }
style={ [
styles.colorIndicator,
customColorIndicatorStyles,
] }
/>
</Animated.View>
</TouchableWithoutFeedback>
);
} ) }
{ shouldShowCustomIndicator && (
<View
style={ styles.customIndicatorWrapper }
style={ [
styles.customIndicatorWrapper,
customIndicatorWrapperStyles,
] }
onLayout={ onCustomIndicatorLayout }
>
<View style={ verticalSeparatorStyle } />
Expand All @@ -240,18 +251,28 @@ function ColorPalette( {
accessibilityState={ { selected: isSelectedCustom() } }
accessibilityHint={ accessibilityHint }
>
<View style={ styles.customIndicatorWrapper }>
<View
style={ [
styles.customIndicatorWrapper,
customIndicatorWrapperStyles,
] }
>
<ColorIndicator
withCustomPicker={ ! isGradientSegment }
color={ customIndicatorColor }
isSelected={ isSelectedCustom() }
style={ styles.colorIndicator }
style={ [
styles.colorIndicator,
customColorIndicatorStyles,
] }
/>
<Text style={ customTextStyle }>
{ isIOS
? customText
: customText.toUpperCase() }
</Text>
{ shouldShowCustomLabel && (
<Text style={ customTextStyle }>
{ isIOS
? customText
: customText.toUpperCase() }
</Text>
) }
</View>
</TouchableWithoutFeedback>
</View>
Expand Down