From c60805229ad630988a75d15453bec767b6b3a654 Mon Sep 17 00:00:00 2001 From: Antonis Lilis Date: Thu, 9 Jul 2020 18:23:00 +0300 Subject: [PATCH 01/13] Create cover block with only colour (from a default palette) --- .../media-placeholder/index.native.js | 2 + .../block-library/src/cover/edit.native.js | 47 ++++++++++++++++++- .../block-library/src/cover/style.native.scss | 32 +++++++++++++ .../src/color-palette/index.native.js | 22 ++++++--- 4 files changed, 95 insertions(+), 8 deletions(-) diff --git a/packages/block-editor/src/components/media-placeholder/index.native.js b/packages/block-editor/src/components/media-placeholder/index.native.js index 2b3700cd200e4..9bce72043ab85 100644 --- a/packages/block-editor/src/components/media-placeholder/index.native.js +++ b/packages/block-editor/src/components/media-placeholder/index.native.js @@ -43,6 +43,7 @@ function MediaPlaceholder( props ) { getStylesFromColorScheme, multiple, value = [], + children, } = props; // use ref to keep media array current for callbacks during rerenders @@ -169,6 +170,7 @@ function MediaPlaceholder( props ) { > { getMediaOptions() } { renderContent() } + { children } ); diff --git a/packages/block-library/src/cover/edit.native.js b/packages/block-library/src/cover/edit.native.js index df81a2f9b1d1e..708e739b5661b 100644 --- a/packages/block-library/src/cover/edit.native.js +++ b/packages/block-library/src/cover/edit.native.js @@ -21,6 +21,7 @@ import { ToolbarButton, ToolbarGroup, Gradient, + ColorPalette, } from '@wordpress/components'; import { BlockControls, @@ -68,6 +69,31 @@ const INNER_BLOCKS_TEMPLATE = [ const COVER_MAX_HEIGHT = 1000; const COVER_DEFAULT_HEIGHT = 300; +const COVER_DEFAULT_PALETTE = { + colors: [ + { + name: __( 'Black' ), + slug: 'black', + color: '#000000', + }, + { + name: __( 'White' ), + slug: 'white', + color: '#ffffff', + }, + { + name: __( 'Vivid cyan blue' ), + slug: 'vivid-cyan-blue', + color: '#0693e3', + }, + { + name: __( 'Pale pink' ), + slug: 'pale-pink', + color: '#f78da7', + }, + ], +}; + const Cover = ( { attributes, getStylesFromColorScheme, @@ -158,6 +184,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 @@ -305,7 +341,16 @@ const Cover = ( { onSelect={ onSelectMedia } allowedTypes={ ALLOWED_MEDIA_TYPES } onFocus={ onFocus } - /> + > + {} } + defaultSettings={ COVER_DEFAULT_PALETTE } + shouldShowCustomIndicatorOption={ false } + shouldShowCustomLabel={ false } + /> + ); } diff --git a/packages/block-library/src/cover/style.native.scss b/packages/block-library/src/cover/style.native.scss index 59d23d8999b31..8fa429eec5698 100644 --- a/packages/block-library/src/cover/style.native.scss +++ b/packages/block-library/src/cover/style.native.scss @@ -71,3 +71,35 @@ width: 100%; height: 100%; } + +.contentContainer { + flex-direction: row; + padding: 0 $grid-unit-20; +} + +.container { + padding-bottom: $grid-unit-20; +} + +.verticalSeparator { + border-width: 0; + margin-right: $grid-unit-20 / 2; +} + +.verticalSeparatorDark { + border-width: 0; +} + +.colorIndicator { + margin-top: 8px; + margin-bottom: 8px; + width: 24px; + height: 24px; +} + +.customIndicatorWrapper { + flex-direction: row; + align-items: center; + width: 24px; + height: 24px; +} diff --git a/packages/components/src/color-palette/index.native.js b/packages/components/src/color-palette/index.native.js index 1f04cbf566ddf..f85eac5ce2567 100644 --- a/packages/components/src/color-palette/index.native.js +++ b/packages/components/src/color-palette/index.native.js @@ -21,7 +21,7 @@ import { usePreferredColorSchemeStyle } from '@wordpress/compose'; /** * Internal dependencies */ -import styles from './style.scss'; +import defaultStyles from './style.scss'; import ColorIndicator from '../color-indicator'; import { colorsUtils } from '../mobile/color-settings/utils'; import { performLayoutAnimation } from '../mobile/layout-animation'; @@ -40,7 +40,12 @@ function ColorPalette( { currentSegment, onCustomPress, shouldEnableBottomSheetScroll, + shouldShowCustomIndicatorOption = true, + shouldShowCustomLabel = true, + customStyles, } ) { + const styles = customStyles === undefined ? defaultStyles : customStyles; + const customSwatchGradients = [ 'linear-gradient(120deg, rgba(255,0,0,.8), 0%, rgba(255,255,255,1) 70.71%)', 'linear-gradient(240deg, rgba(0,255,0,.8), 0%, rgba(0,255,0,0) 70.71%)', @@ -66,7 +71,8 @@ function ColorPalette( { : customSwatchGradients; const isCustomGradientColor = isGradientColor && isSelectedCustom(); const shouldShowCustomIndicator = - ! isGradientSegment || isCustomGradientColor; + shouldShowCustomIndicatorOption && + ( ! isGradientSegment || isCustomGradientColor ); const accessibilityHint = isGradientSegment ? __( 'Navigates to customize the gradient' ) @@ -247,11 +253,13 @@ function ColorPalette( { isSelected={ isSelectedCustom() } style={ styles.colorIndicator } /> - - { isIOS - ? customText - : customText.toUpperCase() } - + { shouldShowCustomLabel && ( + + { isIOS + ? customText + : customText.toUpperCase() } + + ) } From 6e83663ec4f859dfeff557e3d53d068a0b8b1bfa Mon Sep 17 00:00:00 2001 From: Antonis Lilis Date: Mon, 13 Jul 2020 14:36:11 +0300 Subject: [PATCH 02/13] Use noop instead of empty arrow function --- packages/block-library/src/cover/edit.native.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/cover/edit.native.js b/packages/block-library/src/cover/edit.native.js index 708e739b5661b..46dcaa5fd9454 100644 --- a/packages/block-library/src/cover/edit.native.js +++ b/packages/block-library/src/cover/edit.native.js @@ -3,6 +3,7 @@ */ import { View, TouchableWithoutFeedback } from 'react-native'; import Video from 'react-native-video'; +import { noop } from 'lodash'; /** * WordPress dependencies @@ -345,7 +346,7 @@ const Cover = ( { {} } + onCustomPress={ noop } defaultSettings={ COVER_DEFAULT_PALETTE } shouldShowCustomIndicatorOption={ false } shouldShowCustomLabel={ false } From 3919a7d6f99a58710dadd764dd646e367e304099 Mon Sep 17 00:00:00 2001 From: Antonis Lilis Date: Mon, 13 Jul 2020 15:07:09 +0300 Subject: [PATCH 03/13] Use default settings colors --- .../block-library/src/cover/edit.native.js | 37 ++++++------------- 1 file changed, 12 insertions(+), 25 deletions(-) diff --git a/packages/block-library/src/cover/edit.native.js b/packages/block-library/src/cover/edit.native.js index 46dcaa5fd9454..524e35d25375d 100644 --- a/packages/block-library/src/cover/edit.native.js +++ b/packages/block-library/src/cover/edit.native.js @@ -70,31 +70,6 @@ const INNER_BLOCKS_TEMPLATE = [ const COVER_MAX_HEIGHT = 1000; const COVER_DEFAULT_HEIGHT = 300; -const COVER_DEFAULT_PALETTE = { - colors: [ - { - name: __( 'Black' ), - slug: 'black', - color: '#000000', - }, - { - name: __( 'White' ), - slug: 'white', - color: '#ffffff', - }, - { - name: __( 'Vivid cyan blue' ), - slug: 'vivid-cyan-blue', - color: '#0693e3', - }, - { - name: __( 'Pale pink' ), - slug: 'pale-pink', - color: '#f78da7', - }, - ], -}; - const Cover = ( { attributes, getStylesFromColorScheme, @@ -102,6 +77,7 @@ const Cover = ( { onFocus, overlayColor, setAttributes, + settings, } ) => { const { backgroundType, @@ -115,6 +91,14 @@ const Cover = ( { } = attributes; const CONTAINER_HEIGHT = minHeight || COVER_DEFAULT_HEIGHT; + const COVER_DEFAULT_PALETTE = { + colors: settings.colors.filter( ( c ) => + [ 'black', 'white', 'vivid-cyan-blue', 'pale-pink' ].includes( + c.slug + ) + ), + }; + const { gradientValue } = __experimentalUseGradient(); const hasBackground = !! ( @@ -406,7 +390,10 @@ export default compose( [ const selectedBlockClientId = getSelectedBlockClientId(); + const { getSettings } = select( 'core/block-editor' ); + return { + settings: getSettings(), isParentSelected: selectedBlockClientId === clientId, }; } ), From a2eee4bad6688536185071a81dedff40362820ae Mon Sep 17 00:00:00 2001 From: Antonis Lilis Date: Mon, 13 Jul 2020 17:53:06 +0300 Subject: [PATCH 04/13] WIP: Changes Based on design feedback --- .../media-placeholder/index.native.js | 2 +- .../media-placeholder/styles.native.scss | 2 +- .../block-library/src/cover/edit.native.js | 18 ++++++++------- .../block-library/src/cover/style.native.scss | 23 +++++++------------ 4 files changed, 20 insertions(+), 25 deletions(-) diff --git a/packages/block-editor/src/components/media-placeholder/index.native.js b/packages/block-editor/src/components/media-placeholder/index.native.js index 9bce72043ab85..ea445b85dc6f2 100644 --- a/packages/block-editor/src/components/media-placeholder/index.native.js +++ b/packages/block-editor/src/components/media-placeholder/index.native.js @@ -108,6 +108,7 @@ function MediaPlaceholder( props ) { { placeholderTitle } + { children } { instructions } @@ -170,7 +171,6 @@ function MediaPlaceholder( props ) { > { getMediaOptions() } { renderContent() } - { children } ); diff --git a/packages/block-editor/src/components/media-placeholder/styles.native.scss b/packages/block-editor/src/components/media-placeholder/styles.native.scss index c6a8cf00eab2c..bf3bf2a598ad2 100644 --- a/packages/block-editor/src/components/media-placeholder/styles.native.scss +++ b/packages/block-editor/src/components/media-placeholder/styles.native.scss @@ -1,6 +1,6 @@ .emptyStateContainer { flex: 1; - height: 142; + height: 300; flex-direction: column; align-items: center; justify-content: center; diff --git a/packages/block-library/src/cover/edit.native.js b/packages/block-library/src/cover/edit.native.js index 524e35d25375d..1c29784a0ac78 100644 --- a/packages/block-library/src/cover/edit.native.js +++ b/packages/block-library/src/cover/edit.native.js @@ -327,14 +327,16 @@ const Cover = ( { allowedTypes={ ALLOWED_MEDIA_TYPES } onFocus={ onFocus } > - + + + ); diff --git a/packages/block-library/src/cover/style.native.scss b/packages/block-library/src/cover/style.native.scss index 8fa429eec5698..18dbb96085eb7 100644 --- a/packages/block-library/src/cover/style.native.scss +++ b/packages/block-library/src/cover/style.native.scss @@ -72,6 +72,10 @@ height: 100%; } +.colorPaletteWrapper { + min-height: 58px; +} + .contentContainer { flex-direction: row; padding: 0 $grid-unit-20; @@ -81,25 +85,14 @@ padding-bottom: $grid-unit-20; } -.verticalSeparator { - border-width: 0; - margin-right: $grid-unit-20 / 2; -} - -.verticalSeparatorDark { - border-width: 0; -} - .colorIndicator { - margin-top: 8px; - margin-bottom: 8px; - width: 24px; - height: 24px; + width: 32px; + height: 32px; } .customIndicatorWrapper { flex-direction: row; align-items: center; - width: 24px; - height: 24px; + width: 32px; + height: 32px; } From 0cbe0c1d2bd7a937cc822c70da0af851ca1d1389 Mon Sep 17 00:00:00 2001 From: Antonis Lilis Date: Tue, 14 Jul 2020 16:10:01 +0300 Subject: [PATCH 05/13] Show palette with both hardcoded and theme colors --- .../media-placeholder/styles.native.scss | 4 +-- .../block-library/src/cover/edit.native.js | 25 +++++++++++++------ 2 files changed, 20 insertions(+), 9 deletions(-) diff --git a/packages/block-editor/src/components/media-placeholder/styles.native.scss b/packages/block-editor/src/components/media-placeholder/styles.native.scss index bf3bf2a598ad2..5ce646208a391 100644 --- a/packages/block-editor/src/components/media-placeholder/styles.native.scss +++ b/packages/block-editor/src/components/media-placeholder/styles.native.scss @@ -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; } diff --git a/packages/block-library/src/cover/edit.native.js b/packages/block-library/src/cover/edit.native.js index df34ea9c275a7..2fa057f84d988 100644 --- a/packages/block-library/src/cover/edit.native.js +++ b/packages/block-library/src/cover/edit.native.js @@ -93,12 +93,23 @@ const Cover = ( { } = attributes; const CONTAINER_HEIGHT = minHeight || COVER_DEFAULT_HEIGHT; - const COVER_DEFAULT_PALETTE = { - colors: settings.colors.filter( ( c ) => - [ 'black', 'white', 'vivid-cyan-blue', 'pale-pink' ].includes( - c.slug - ) - ), + const DEFAULT_COLORS = [ + { + name: __( 'Black' ), + slug: 'black', + color: '#000000', + }, + { + name: __( 'White' ), + slug: 'white', + color: '#ffffff', + }, + ]; + + const THEME_COLORS_COUNT = 2; + const themeColors = settings.colors.slice( 0, THEME_COLORS_COUNT ); + const coverDefaultPalette = { + colors: [ ...DEFAULT_COLORS, ...themeColors ], }; const { gradientValue } = __experimentalUseGradient(); @@ -348,7 +359,7 @@ const Cover = ( { customStyles={ styles } setColor={ setColor } onCustomPress={ noop } - defaultSettings={ COVER_DEFAULT_PALETTE } + defaultSettings={ coverDefaultPalette } shouldShowCustomIndicatorOption={ false } shouldShowCustomLabel={ false } /> From a0cd93b05d4aafc6082f6a1fe83fc0b93451a57f Mon Sep 17 00:00:00 2001 From: Antonis Lilis Date: Tue, 14 Jul 2020 17:07:05 +0300 Subject: [PATCH 06/13] Customise media placeholder styles only for the cover component --- .../media-placeholder/index.native.js | 5 +- .../media-placeholder/styles.native.scss | 6 +- .../block-library/src/cover/edit.native.js | 2 + .../src/cover/media-placeholder.native.scss | 73 +++++++++++++++++++ 4 files changed, 82 insertions(+), 4 deletions(-) create mode 100644 packages/block-library/src/cover/media-placeholder.native.scss diff --git a/packages/block-editor/src/components/media-placeholder/index.native.js b/packages/block-editor/src/components/media-placeholder/index.native.js index 0e07e1a7613af..fea26d9e3dc64 100644 --- a/packages/block-editor/src/components/media-placeholder/index.native.js +++ b/packages/block-editor/src/components/media-placeholder/index.native.js @@ -20,7 +20,7 @@ import { Icon, plusCircleFilled } from '@wordpress/icons'; /** * Internal dependencies */ -import styles from './styles.scss'; +import defaultStyles from './styles.scss'; // remove duplicates after gallery append const dedupMedia = ( media ) => @@ -44,8 +44,11 @@ function MediaPlaceholder( props ) { multiple, value = [], children, + customStyles, } = props; + const styles = customStyles === undefined ? defaultStyles : customStyles; + // use ref to keep media array current for callbacks during rerenders const mediaRef = useRef( value ); mediaRef.current = value; diff --git a/packages/block-editor/src/components/media-placeholder/styles.native.scss b/packages/block-editor/src/components/media-placeholder/styles.native.scss index 5ce646208a391..c6a8cf00eab2c 100644 --- a/packages/block-editor/src/components/media-placeholder/styles.native.scss +++ b/packages/block-editor/src/components/media-placeholder/styles.native.scss @@ -1,6 +1,6 @@ .emptyStateContainer { flex: 1; - height: 300; + height: 142; flex-direction: column; align-items: center; justify-content: center; @@ -21,8 +21,8 @@ .emptyStateTitle { text-align: center; - margin-top: 4; - margin-bottom: 16; + margin-top: 8; + margin-bottom: 10; font-size: 14; color: #2e4453; } diff --git a/packages/block-library/src/cover/edit.native.js b/packages/block-library/src/cover/edit.native.js index 2fa057f84d988..83c9e9ccd1104 100644 --- a/packages/block-library/src/cover/edit.native.js +++ b/packages/block-library/src/cover/edit.native.js @@ -47,6 +47,7 @@ import { getProtocol } from '@wordpress/url'; * Internal dependencies */ import styles from './style.scss'; +import placeholderStyles from './media-placeholder.scss'; import { attributesFromMedia, COVER_MIN_HEIGHT, @@ -346,6 +347,7 @@ const Cover = ( { return ( Date: Wed, 15 Jul 2020 09:59:08 +0300 Subject: [PATCH 07/13] Pass only modified media-placeholder styles --- .../media-placeholder/index.native.js | 11 ++- .../block-library/src/cover/edit.native.js | 8 +- .../src/cover/media-placeholder.native.scss | 73 ------------------- .../block-library/src/cover/style.native.scss | 9 +++ 4 files changed, 20 insertions(+), 81 deletions(-) delete mode 100644 packages/block-library/src/cover/media-placeholder.native.scss diff --git a/packages/block-editor/src/components/media-placeholder/index.native.js b/packages/block-editor/src/components/media-placeholder/index.native.js index fea26d9e3dc64..1e1714ab93537 100644 --- a/packages/block-editor/src/components/media-placeholder/index.native.js +++ b/packages/block-editor/src/components/media-placeholder/index.native.js @@ -20,7 +20,7 @@ import { Icon, plusCircleFilled } from '@wordpress/icons'; /** * Internal dependencies */ -import defaultStyles from './styles.scss'; +import styles from './styles.scss'; // remove duplicates after gallery append const dedupMedia = ( media ) => @@ -44,11 +44,10 @@ function MediaPlaceholder( props ) { multiple, value = [], children, - customStyles, + customEmptyStateContainer, + customEmptyStateTitle, } = props; - const styles = customStyles === undefined ? defaultStyles : customStyles; - // use ref to keep media array current for callbacks during rerenders const mediaRef = useRef( value ); mediaRef.current = value; @@ -95,7 +94,7 @@ function MediaPlaceholder( props ) { } const emptyStateTitleStyle = getStylesFromColorScheme( - styles.emptyStateTitle, + [ styles.emptyStateTitle, props.customEmptyStateTitle ], styles.emptyStateTitleDark ); const addMediaButtonStyle = getStylesFromColorScheme( @@ -138,7 +137,7 @@ function MediaPlaceholder( props ) { styles.appenderDark ); const emptyStateContainerStyle = getStylesFromColorScheme( - styles.emptyStateContainer, + [ styles.emptyStateContainer, props.customEmptyStateContainer ], styles.emptyStateContainerDark ); diff --git a/packages/block-library/src/cover/edit.native.js b/packages/block-library/src/cover/edit.native.js index 83c9e9ccd1104..44f45b720831a 100644 --- a/packages/block-library/src/cover/edit.native.js +++ b/packages/block-library/src/cover/edit.native.js @@ -47,7 +47,6 @@ import { getProtocol } from '@wordpress/url'; * Internal dependencies */ import styles from './style.scss'; -import placeholderStyles from './media-placeholder.scss'; import { attributesFromMedia, COVER_MIN_HEIGHT, @@ -347,7 +346,12 @@ const Cover = ( { return ( Date: Wed, 15 Jul 2020 10:18:44 +0300 Subject: [PATCH 08/13] Pass only modified color-palette styles --- .../media-placeholder/index.native.js | 8 ++--- .../block-library/src/cover/edit.native.js | 11 +++++-- .../block-library/src/cover/style.native.scss | 17 ++++------- .../src/color-palette/index.native.js | 29 ++++++++++++++----- 4 files changed, 38 insertions(+), 27 deletions(-) diff --git a/packages/block-editor/src/components/media-placeholder/index.native.js b/packages/block-editor/src/components/media-placeholder/index.native.js index 1e1714ab93537..2a0fc55f7defe 100644 --- a/packages/block-editor/src/components/media-placeholder/index.native.js +++ b/packages/block-editor/src/components/media-placeholder/index.native.js @@ -44,8 +44,8 @@ function MediaPlaceholder( props ) { multiple, value = [], children, - customEmptyStateContainer, - customEmptyStateTitle, + customEmptyStateContainerStyles, + customEmptyStateTitleStyles, } = props; // use ref to keep media array current for callbacks during rerenders @@ -94,7 +94,7 @@ function MediaPlaceholder( props ) { } const emptyStateTitleStyle = getStylesFromColorScheme( - [ styles.emptyStateTitle, props.customEmptyStateTitle ], + [ styles.emptyStateTitle, customEmptyStateTitleStyles ], styles.emptyStateTitleDark ); const addMediaButtonStyle = getStylesFromColorScheme( @@ -137,7 +137,7 @@ function MediaPlaceholder( props ) { styles.appenderDark ); const emptyStateContainerStyle = getStylesFromColorScheme( - [ styles.emptyStateContainer, props.customEmptyStateContainer ], + [ styles.emptyStateContainer, customEmptyStateContainerStyles ], styles.emptyStateContainerDark ); diff --git a/packages/block-library/src/cover/edit.native.js b/packages/block-library/src/cover/edit.native.js index 44f45b720831a..3c55ea7ec8127 100644 --- a/packages/block-library/src/cover/edit.native.js +++ b/packages/block-library/src/cover/edit.native.js @@ -346,10 +346,10 @@ const Cover = ( { return ( @@ -236,7 +238,10 @@ function ColorPalette( { } ) } { shouldShowCustomIndicator && ( @@ -246,12 +251,20 @@ function ColorPalette( { accessibilityState={ { selected: isSelectedCustom() } } accessibilityHint={ accessibilityHint } > - + { shouldShowCustomLabel && ( From 485cef933c505e86c4440e7afd89111a544f0f01 Mon Sep 17 00:00:00 2001 From: Antonis Lilis Date: Thu, 16 Jul 2020 11:10:56 +0300 Subject: [PATCH 09/13] Updated color palette height --- packages/block-library/src/cover/style.native.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/cover/style.native.scss b/packages/block-library/src/cover/style.native.scss index 3db3aa2824af0..b4f8610bf0417 100644 --- a/packages/block-library/src/cover/style.native.scss +++ b/packages/block-library/src/cover/style.native.scss @@ -77,7 +77,7 @@ } .colorPaletteWrapper { - min-height: 58px; + min-height: 50px; } .paletteColorIndicator { From 91ff055244ade26ec1ff44419cb32a677f5935fc Mon Sep 17 00:00:00 2001 From: Antonis Lilis Date: Thu, 16 Jul 2020 23:27:21 +0300 Subject: [PATCH 10/13] Use only theme colors --- .../block-library/src/cover/edit.native.js | 18 ++---------------- 1 file changed, 2 insertions(+), 16 deletions(-) diff --git a/packages/block-library/src/cover/edit.native.js b/packages/block-library/src/cover/edit.native.js index 3c55ea7ec8127..051500e596e56 100644 --- a/packages/block-library/src/cover/edit.native.js +++ b/packages/block-library/src/cover/edit.native.js @@ -93,23 +93,9 @@ const Cover = ( { } = attributes; const CONTAINER_HEIGHT = minHeight || COVER_DEFAULT_HEIGHT; - const DEFAULT_COLORS = [ - { - name: __( 'Black' ), - slug: 'black', - color: '#000000', - }, - { - name: __( 'White' ), - slug: 'white', - color: '#ffffff', - }, - ]; - - const THEME_COLORS_COUNT = 2; - const themeColors = settings.colors.slice( 0, THEME_COLORS_COUNT ); + const THEME_COLORS_COUNT = 4; const coverDefaultPalette = { - colors: [ ...DEFAULT_COLORS, ...themeColors ], + colors: settings.colors.slice( 0, THEME_COLORS_COUNT ), }; const { gradientValue } = __experimentalUseGradient(); From 97cc9510a4f492bcfe94a514c54202b661102c41 Mon Sep 17 00:00:00 2001 From: Antonis Lilis Date: Fri, 17 Jul 2020 09:27:19 +0300 Subject: [PATCH 11/13] Fixes Dark mode styling bug --- .../components/media-placeholder/index.native.js | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/components/media-placeholder/index.native.js b/packages/block-editor/src/components/media-placeholder/index.native.js index 2a0fc55f7defe..59a4daf9b69ff 100644 --- a/packages/block-editor/src/components/media-placeholder/index.native.js +++ b/packages/block-editor/src/components/media-placeholder/index.native.js @@ -94,7 +94,7 @@ function MediaPlaceholder( props ) { } const emptyStateTitleStyle = getStylesFromColorScheme( - [ styles.emptyStateTitle, customEmptyStateTitleStyles ], + styles.emptyStateTitle, styles.emptyStateTitleDark ); const addMediaButtonStyle = getStylesFromColorScheme( @@ -107,7 +107,12 @@ function MediaPlaceholder( props ) { return ( <> { icon } - + { placeholderTitle } { children } @@ -137,7 +142,7 @@ function MediaPlaceholder( props ) { styles.appenderDark ); const emptyStateContainerStyle = getStylesFromColorScheme( - [ styles.emptyStateContainer, customEmptyStateContainerStyles ], + styles.emptyStateContainer, styles.emptyStateContainerDark ); @@ -168,7 +173,10 @@ function MediaPlaceholder( props ) { > From 9036c9e0d3a160a6b7bf764818b46843f3e6378e Mon Sep 17 00:00:00 2001 From: Antonis Lilis Date: Fri, 17 Jul 2020 10:13:15 +0300 Subject: [PATCH 12/13] Simplified media-placeholder props --- .../src/components/media-placeholder/index.native.js | 12 +++--------- .../components/media-placeholder/styles.native.scss | 4 ++-- packages/block-library/src/cover/edit.native.js | 7 +------ packages/block-library/src/cover/style.native.scss | 5 ----- 4 files changed, 6 insertions(+), 22 deletions(-) diff --git a/packages/block-editor/src/components/media-placeholder/index.native.js b/packages/block-editor/src/components/media-placeholder/index.native.js index 59a4daf9b69ff..2315da4ed1f8a 100644 --- a/packages/block-editor/src/components/media-placeholder/index.native.js +++ b/packages/block-editor/src/components/media-placeholder/index.native.js @@ -44,8 +44,7 @@ function MediaPlaceholder( props ) { multiple, value = [], children, - customEmptyStateContainerStyles, - customEmptyStateTitleStyles, + height, } = props; // use ref to keep media array current for callbacks during rerenders @@ -107,12 +106,7 @@ function MediaPlaceholder( props ) { return ( <> { icon } - + { placeholderTitle } { children } @@ -175,7 +169,7 @@ function MediaPlaceholder( props ) { style={ [ [ emptyStateContainerStyle, - customEmptyStateContainerStyles, + height && { height }, ], isAppender && appenderStyle, ] } diff --git a/packages/block-editor/src/components/media-placeholder/styles.native.scss b/packages/block-editor/src/components/media-placeholder/styles.native.scss index c6a8cf00eab2c..ffb0135b66d16 100644 --- a/packages/block-editor/src/components/media-placeholder/styles.native.scss +++ b/packages/block-editor/src/components/media-placeholder/styles.native.scss @@ -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; } diff --git a/packages/block-library/src/cover/edit.native.js b/packages/block-library/src/cover/edit.native.js index 051500e596e56..bf867d4e89b1e 100644 --- a/packages/block-library/src/cover/edit.native.js +++ b/packages/block-library/src/cover/edit.native.js @@ -332,12 +332,7 @@ const Cover = ( { return ( Date: Fri, 17 Jul 2020 10:18:35 +0300 Subject: [PATCH 13/13] Removed unnecessary style --- packages/block-library/src/cover/edit.native.js | 3 --- packages/block-library/src/cover/style.native.scss | 7 ------- .../components/src/color-palette/index.native.js | 13 ++----------- 3 files changed, 2 insertions(+), 21 deletions(-) diff --git a/packages/block-library/src/cover/edit.native.js b/packages/block-library/src/cover/edit.native.js index bf867d4e89b1e..b69b7e861054a 100644 --- a/packages/block-library/src/cover/edit.native.js +++ b/packages/block-library/src/cover/edit.native.js @@ -346,9 +346,6 @@ const Cover = ( { customColorIndicatorStyles={ styles.paletteColorIndicator } - customIndicatorWrapperStyles={ - styles.paletteCustomIndicatorWrapper - } setColor={ setColor } onCustomPress={ noop } defaultSettings={ coverDefaultPalette } diff --git a/packages/block-library/src/cover/style.native.scss b/packages/block-library/src/cover/style.native.scss index 55e8a8c708abc..f7f3e6dfadd20 100644 --- a/packages/block-library/src/cover/style.native.scss +++ b/packages/block-library/src/cover/style.native.scss @@ -87,13 +87,6 @@ height: 32px; } -.paletteCustomIndicatorWrapper { - flex-direction: row; - align-items: center; - width: 32px; - height: 32px; -} - .mediaPlaceholderEmptyStateContainer { height: 300; } diff --git a/packages/components/src/color-palette/index.native.js b/packages/components/src/color-palette/index.native.js index 8b1b5f2646037..16677f3be0e3e 100644 --- a/packages/components/src/color-palette/index.native.js +++ b/packages/components/src/color-palette/index.native.js @@ -43,7 +43,6 @@ function ColorPalette( { shouldShowCustomIndicatorOption = true, shouldShowCustomLabel = true, customColorIndicatorStyles, - customIndicatorWrapperStyles, } ) { const customSwatchGradients = [ 'linear-gradient(120deg, rgba(255,0,0,.8), 0%, rgba(255,255,255,1) 70.71%)', @@ -238,10 +237,7 @@ function ColorPalette( { } ) } { shouldShowCustomIndicator && ( @@ -251,12 +247,7 @@ function ColorPalette( { accessibilityState={ { selected: isSelectedCustom() } } accessibilityHint={ accessibilityHint } > - +