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 all 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
8 changes: 7 additions & 1 deletion 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,8 @@ function MediaPlaceholder( props ) {
getStylesFromColorScheme,
multiple,
value = [],
children,
height,
} = props;

// use ref to keep media array current for callbacks during rerenders
Expand Down Expand Up @@ -107,6 +109,7 @@ function MediaPlaceholder( props ) {
<Text style={ emptyStateTitleStyle }>
{ placeholderTitle }
</Text>
{ children }
<Text style={ styles.emptyStateDescription }>
{ instructions }
</Text>
Expand Down Expand Up @@ -164,7 +167,10 @@ function MediaPlaceholder( props ) {
>
<View
style={ [
emptyStateContainerStyle,
[
emptyStateContainerStyle,
height && { height },
],
isAppender && appenderStyle,
] }
>
Expand Down
4 changes: 2 additions & 2 deletions packages/block-editor/src/components/media-placeholder/styles.native.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@

.emptyStateTitle {
text-align: center;
margin-top: 8;
margin-bottom: 10;
margin-top: 4;
margin-bottom: 16;
font-size: 14;
color: #2e4453;
}
Expand Down
37 changes: 36 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,28 @@ const Cover = ( {
return (
<View>
<MediaPlaceholder
height={ styles.mediaPlaceholderEmptyStateContainer.height }
icon={ placeholderIcon }
labels={ {
title: __( 'Cover' ),
} }
onSelect={ onSelectMedia }
allowedTypes={ ALLOWED_MEDIA_TYPES }
onFocus={ onFocus }
/>
>
<View style={ styles.colorPaletteWrapper }>
<ColorPalette
customColorIndicatorStyles={
styles.paletteColorIndicator
}
setColor={ setColor }
onCustomPress={ noop }
defaultSettings={ coverDefaultPalette }
shouldShowCustomIndicatorOption={ false }
shouldShowCustomLabel={ false }
/>
</View>
</MediaPlaceholder>
</View>
);
}
Expand Down Expand Up @@ -377,7 +409,10 @@ export default compose( [

const selectedBlockClientId = getSelectedBlockClientId();

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

return {
settings: getSettings(),
isParentSelected: selectedBlockClientId === clientId,
};
} ),
Expand Down
15 changes: 15 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,18 @@
.clearMediaButton {
color: $alert-red;
}

.colorPaletteWrapper {
min-height: 50px;
}

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

.mediaPlaceholderEmptyStateContainer {
height: 300;
}
28 changes: 20 additions & 8 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,9 @@ function ColorPalette( {
currentSegment,
onCustomPress,
shouldEnableBottomSheetScroll,
shouldShowCustomIndicatorOption = true,
shouldShowCustomLabel = true,
customColorIndicatorStyles,
} ) {
const customSwatchGradients = [
'linear-gradient(120deg, rgba(255,0,0,.8), 0%, rgba(255,255,255,1) 70.71%)',
Expand All @@ -66,7 +69,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,7 +226,10 @@ function ColorPalette( {
color={ color }
isSelected={ isSelected( color ) }
opacity={ opacity }
style={ styles.colorIndicator }
style={ [
styles.colorIndicator,
customColorIndicatorStyles,
] }
/>
</Animated.View>
</TouchableWithoutFeedback>
Expand All @@ -245,13 +252,18 @@ function ColorPalette( {
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