From a89a0caea2c3042f4db2cfae83d5f7439fb560d0 Mon Sep 17 00:00:00 2001 From: Antonis Lilis Date: Wed, 8 Jul 2020 18:27:40 +0300 Subject: [PATCH 1/5] Adds Clear media button in block settings --- packages/block-library/src/cover/edit.native.js | 13 +++++++++++++ packages/block-library/src/cover/style.native.scss | 4 ++++ packages/components/src/index.native.js | 1 + 3 files changed, 18 insertions(+) diff --git a/packages/block-library/src/cover/edit.native.js b/packages/block-library/src/cover/edit.native.js index df81a2f9b1d1e..fbe1ae3efd8a1 100644 --- a/packages/block-library/src/cover/edit.native.js +++ b/packages/block-library/src/cover/edit.native.js @@ -18,6 +18,7 @@ import { ImageWithFocalPoint, PanelBody, RangeControl, + BottomSheetButton, ToolbarButton, ToolbarGroup, Gradient, @@ -225,6 +226,18 @@ const Cover = ( { style={ styles.rangeCellContainer } /> + + { url ? ( + + { + setAttributes( { id: undefined, url: undefined } ); + } } + /> + + ) : null } ); diff --git a/packages/block-library/src/cover/style.native.scss b/packages/block-library/src/cover/style.native.scss index 59d23d8999b31..9f556ecac2786 100644 --- a/packages/block-library/src/cover/style.native.scss +++ b/packages/block-library/src/cover/style.native.scss @@ -71,3 +71,7 @@ width: 100%; height: 100%; } + +.clearMediaButton { + color: $alert-red; +} diff --git a/packages/components/src/index.native.js b/packages/components/src/index.native.js index 02913c7aa8541..331a841b932a1 100644 --- a/packages/components/src/index.native.js +++ b/packages/components/src/index.native.js @@ -70,6 +70,7 @@ export { default as ImageWithFocalPoint } from './mobile/image-with-focalpoint'; export { default as Gradient } from './mobile/gradient'; export { default as ColorSettings } from './mobile/color-settings'; export { default as LinkSettings } from './mobile/link-settings'; +export { default as BottomSheetButton } from './mobile/bottom-sheet/button'; // Utils export { colorsUtils } from './mobile/color-settings/utils'; From 164e34cad3f52b4e8ecb65d06066f221f6d12cb7 Mon Sep 17 00:00:00 2001 From: Antonis Lilis Date: Fri, 10 Jul 2020 09:20:49 +0300 Subject: [PATCH 2/5] Align clear media button to the left --- .../block-library/src/cover/edit.native.js | 3 +++ .../block-library/src/cover/style.native.scss | 1 + .../src/mobile/bottom-sheet/button.native.js | 20 ++++++++++++++++--- 3 files changed, 21 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/cover/edit.native.js b/packages/block-library/src/cover/edit.native.js index fbe1ae3efd8a1..b42f5fe9f50fd 100644 --- a/packages/block-library/src/cover/edit.native.js +++ b/packages/block-library/src/cover/edit.native.js @@ -232,6 +232,9 @@ const Cover = ( { { setAttributes( { id: undefined, url: undefined } ); } } diff --git a/packages/block-library/src/cover/style.native.scss b/packages/block-library/src/cover/style.native.scss index 9f556ecac2786..95682a63d1a68 100644 --- a/packages/block-library/src/cover/style.native.scss +++ b/packages/block-library/src/cover/style.native.scss @@ -74,4 +74,5 @@ .clearMediaButton { color: $alert-red; + justify-content: flex-start; } diff --git a/packages/components/src/mobile/bottom-sheet/button.native.js b/packages/components/src/mobile/bottom-sheet/button.native.js index a9c88f18fb770..1557c8ee07da9 100644 --- a/packages/components/src/mobile/bottom-sheet/button.native.js +++ b/packages/components/src/mobile/bottom-sheet/button.native.js @@ -8,14 +8,28 @@ import { TouchableOpacity, View, Text } from 'react-native'; */ import styles from './styles.scss'; -const BottomSheetButton = ( { onPress, disabled, text, color } ) => ( +const BottomSheetButton = ( { + onPress, + disabled, + text, + color, + justifyContent, +} ) => ( - - { text } + + + { text } + ); From 7cd7a4edbaacf842b3c123300f6df0e0cd468e42 Mon Sep 17 00:00:00 2001 From: Antonis Lilis Date: Mon, 13 Jul 2020 13:40:07 +0300 Subject: [PATCH 3/5] Fixes bug leaving the bottom sheet open and incorporates review feedabck --- .../block-library/src/cover/edit.native.js | 24 ++++++++++++------- .../block-library/src/cover/style.native.scss | 1 - 2 files changed, 16 insertions(+), 9 deletions(-) diff --git a/packages/block-library/src/cover/edit.native.js b/packages/block-library/src/cover/edit.native.js index b42f5fe9f50fd..4aeab08404b73 100644 --- a/packages/block-library/src/cover/edit.native.js +++ b/packages/block-library/src/cover/edit.native.js @@ -18,7 +18,7 @@ import { ImageWithFocalPoint, PanelBody, RangeControl, - BottomSheetButton, + BottomSheet, ToolbarButton, ToolbarGroup, Gradient, @@ -36,7 +36,7 @@ import { __experimentalUseGradient, } from '@wordpress/block-editor'; import { compose, withPreferredColorScheme } from '@wordpress/compose'; -import { withSelect } from '@wordpress/data'; +import { withSelect, withDispatch } from '@wordpress/data'; import { useEffect, useState } from '@wordpress/element'; import { cover as icon, replace } from '@wordpress/icons'; import { getProtocol } from '@wordpress/url'; @@ -76,6 +76,7 @@ const Cover = ( { onFocus, overlayColor, setAttributes, + closeSettingsBottomSheet, } ) => { const { backgroundType, @@ -229,14 +230,13 @@ const Cover = ( { { url ? ( - { setAttributes( { id: undefined, url: undefined } ); + closeSettingsBottomSheet(); } } /> @@ -380,5 +380,13 @@ export default compose( [ isParentSelected: selectedBlockClientId === clientId, }; } ), + withDispatch( ( dispatch ) => { + return { + closeSettingsBottomSheet() { + dispatch( 'core/edit-post' ).closeGeneralSidebar(); + }, + }; + } ), + withPreferredColorScheme, ] )( Cover ); diff --git a/packages/block-library/src/cover/style.native.scss b/packages/block-library/src/cover/style.native.scss index 95682a63d1a68..9f556ecac2786 100644 --- a/packages/block-library/src/cover/style.native.scss +++ b/packages/block-library/src/cover/style.native.scss @@ -74,5 +74,4 @@ .clearMediaButton { color: $alert-red; - justify-content: flex-start; } From df34ddd9beb001444e979dfb401a08eae4d10359 Mon Sep 17 00:00:00 2001 From: Antonis Lilis Date: Mon, 13 Jul 2020 13:50:26 +0300 Subject: [PATCH 4/5] Removes unneeded export --- packages/components/src/index.native.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/components/src/index.native.js b/packages/components/src/index.native.js index 331a841b932a1..02913c7aa8541 100644 --- a/packages/components/src/index.native.js +++ b/packages/components/src/index.native.js @@ -70,7 +70,6 @@ export { default as ImageWithFocalPoint } from './mobile/image-with-focalpoint'; export { default as Gradient } from './mobile/gradient'; export { default as ColorSettings } from './mobile/color-settings'; export { default as LinkSettings } from './mobile/link-settings'; -export { default as BottomSheetButton } from './mobile/bottom-sheet/button'; // Utils export { colorsUtils } from './mobile/color-settings/utils'; From 5142aa91cf5f17bfda38732c386950bf3aa40f4f Mon Sep 17 00:00:00 2001 From: Antonis Lilis Date: Mon, 13 Jul 2020 14:38:22 +0300 Subject: [PATCH 5/5] Discarts BottomSheetButton customization --- .../src/mobile/bottom-sheet/button.native.js | 20 +++---------------- 1 file changed, 3 insertions(+), 17 deletions(-) diff --git a/packages/components/src/mobile/bottom-sheet/button.native.js b/packages/components/src/mobile/bottom-sheet/button.native.js index 1557c8ee07da9..a9c88f18fb770 100644 --- a/packages/components/src/mobile/bottom-sheet/button.native.js +++ b/packages/components/src/mobile/bottom-sheet/button.native.js @@ -8,28 +8,14 @@ import { TouchableOpacity, View, Text } from 'react-native'; */ import styles from './styles.scss'; -const BottomSheetButton = ( { - onPress, - disabled, - text, - color, - justifyContent, -} ) => ( +const BottomSheetButton = ( { onPress, disabled, text, color } ) => ( - - - { text } - + + { text } );