From fd7c7eb7d53ffde3d8994c8f4658f35e7faca0a5 Mon Sep 17 00:00:00 2001 From: etoledom Date: Wed, 30 Jan 2019 15:19:34 +0100 Subject: [PATCH 01/32] rnmobile: Implement image settings button using InspectorControls.Slot pattern. --- packages/block-library/src/image/edit.native.js | 17 ++++++++++++++++- packages/editor/src/components/index.native.js | 1 + 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index 6c5fad9b7b05e..703e456f115f1 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -14,7 +14,7 @@ import { /** * Internal dependencies */ -import { MediaPlaceholder, RichText, BlockControls } from '@wordpress/editor'; +import { MediaPlaceholder, RichText, BlockControls, InspectorControls } from '@wordpress/editor'; import { Toolbar, ToolbarButton, Spinner } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import ImageSize from './image-size'; @@ -143,6 +143,10 @@ export default class ImageEdit extends React.Component { ); } + const onImageSettingsButtonPressed = () => { + + } + const toolbarEditButton = ( ); + const inlineToolbarButtons = ( + + ); + const showSpinner = this.state.isUploadInProgress; const opacity = this.state.isUploadInProgress ? 0.3 : 1; const progress = this.state.progress * 100; @@ -163,6 +175,9 @@ export default class ImageEdit extends React.Component { { toolbarEditButton } + + { inlineToolbarButtons } + { ( sizes ) => { const { diff --git a/packages/editor/src/components/index.native.js b/packages/editor/src/components/index.native.js index d226b4fe46480..07bd4c9993e6d 100644 --- a/packages/editor/src/components/index.native.js +++ b/packages/editor/src/components/index.native.js @@ -10,3 +10,4 @@ export { default as DefaultBlockAppender } from './default-block-appender'; export { default as PostTitle } from './post-title'; export { default as EditorHistoryRedo } from './editor-history/redo'; export { default as EditorHistoryUndo } from './editor-history/undo'; +export { default as InspectorControls } from './inspector-controls'; From abdfd03e0e7036e5c76d219910c2cdb0ff8d0900 Mon Sep 17 00:00:00 2001 From: etoledom Date: Wed, 30 Jan 2019 15:30:43 +0100 Subject: [PATCH 02/32] rnmobile: Add missing semicolon --- packages/block-library/src/image/edit.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index 703e456f115f1..7413978f2e012 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -145,7 +145,7 @@ export default class ImageEdit extends React.Component { const onImageSettingsButtonPressed = () => { - } + }; const toolbarEditButton = ( From 1a4e35a38f3ab7a80cce8946c2c2c9b8bd19310a Mon Sep 17 00:00:00 2001 From: etoledom Date: Wed, 30 Jan 2019 17:47:51 +0100 Subject: [PATCH 03/32] rnmobile: Adding bottom-sheet component to mobile --- .../block-library/src/image/edit.native.js | 26 +++- .../src/image/inspector-styles.native.scss | 20 +++ .../editor/src/components/index.native.js | 1 + .../mobile/bottom-sheet/button.native.js | 24 ++++ .../mobile/bottom-sheet/index.native.js | 130 +++++++++++++++++ .../mobile/bottom-sheet/styles.android.scss | 131 ++++++++++++++++++ .../mobile/bottom-sheet/styles.ios.scss | 128 +++++++++++++++++ 7 files changed, 457 insertions(+), 3 deletions(-) create mode 100644 packages/block-library/src/image/inspector-styles.native.scss create mode 100644 packages/editor/src/components/mobile/bottom-sheet/button.native.js create mode 100644 packages/editor/src/components/mobile/bottom-sheet/index.native.js create mode 100644 packages/editor/src/components/mobile/bottom-sheet/styles.android.scss create mode 100644 packages/editor/src/components/mobile/bottom-sheet/styles.ios.scss diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index 7413978f2e012..e999156bff340 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -2,7 +2,7 @@ * External dependencies */ import React from 'react'; -import { View, Image, TextInput } from 'react-native'; +import { View, Image, TextInput, Text, TouchableOpacity } from 'react-native'; import { subscribeMediaUpload, requestMediaPickFromMediaLibrary, @@ -14,11 +14,12 @@ import { /** * Internal dependencies */ -import { MediaPlaceholder, RichText, BlockControls, InspectorControls } from '@wordpress/editor'; +import { MediaPlaceholder, RichText, BlockControls, InspectorControls, BottomSheet } from '@wordpress/editor'; import { Toolbar, ToolbarButton, Spinner } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import ImageSize from './image-size'; import { isURL } from '@wordpress/url'; +import inspectorStyles from './inspector-styles.scss' const MEDIA_ULOAD_STATE_UPLOADING = 1; const MEDIA_ULOAD_STATE_SUCCEEDED = 2; @@ -31,6 +32,7 @@ export default class ImageEdit extends React.Component { this.state = { progress: 0, isUploadInProgress: false, + showSettings: false, }; this.mediaUpload = this.mediaUpload.bind( this ); @@ -144,9 +146,13 @@ export default class ImageEdit extends React.Component { } const onImageSettingsButtonPressed = () => { - + this.setState( { showSettings: true } ) }; + const onImageSettingsClose = () => { + this.setState( { showSettings: false } ) + } + const toolbarEditButton = ( ); + const getInspectorControls = () => ( + + { } }> + { __( "Alt Text" ) } + { __( "None" ) } + + + ) + const showSpinner = this.state.isUploadInProgress; const opacity = this.state.isUploadInProgress ? 0.3 : 1; const progress = this.state.progress * 100; @@ -197,6 +216,7 @@ export default class ImageEdit extends React.Component { return ( + { getInspectorControls() } + + { children } + + + ); + } \ No newline at end of file diff --git a/packages/editor/src/components/mobile/bottom-sheet/index.native.js b/packages/editor/src/components/mobile/bottom-sheet/index.native.js new file mode 100644 index 0000000000000..679b9f00e3bc9 --- /dev/null +++ b/packages/editor/src/components/mobile/bottom-sheet/index.native.js @@ -0,0 +1,130 @@ +/** + * External dependencies + */ +import React from 'react'; +import { Switch, Text, TextInput, View } from 'react-native'; +import Modal from 'react-native-modal'; +import SafeArea from 'react-native-safe-area'; + +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { Component } from '@wordpress/element'; +import { URLInput } from '@wordpress/editor'; +import { prependHTTP } from '@wordpress/url'; + +import { + create, + insert, + isCollapsed, + applyFormat, + getTextContent, + slice, +} from '@wordpress/rich-text'; + +/** + * Internal dependencies + */ +import styles from './styles.scss'; +import Button from './button' + +class BottomSheet extends Component { + constructor( props ) { + super( ...arguments ); + this.onSafeAreaInsetsUpdate = this.onSafeAreaInsetsUpdate.bind( this ); + this.state = { + safeAreaBottomInset: 0, + }; + + SafeArea.getSafeAreaInsetsForRootView().then( this.onSafeAreaInsetsUpdate ); + } + + componentDidMount() { + SafeArea.addEventListener( 'safeAreaInsetsForRootViewDidChange', this.onSafeAreaInsetsUpdate ); + } + + componentWillUnmount() { + SafeArea.removeEventListener( 'safeAreaInsetsForRootViewDidChange', this.onSafeAreaInsetsUpdate ); + } + + onLeftButtonPressed() { + + } + + onRightButtonPressed() { + + } + + headerButton(text, color, handler) { + return( + + ) + } + + onSafeAreaInsetsUpdate( result ) { + const { safeAreaInsets } = result; + if ( this.state.safeAreaBottomInset !== safeAreaInsets.bottom ) { + this.setState( { safeAreaBottomInset: safeAreaInsets.bottom } ); + } + } + + render() { + const { isVisible } = this.props; + const { hideLeftButton, hideRightButton } = this.props; + + return ( + + + + + { hideLeftButton || this.headerButton(__( "Remove" ), "red", this.onLeftButtonPressed) } + + { this.props.title } + + { hideRightButton || this.headerButton(__("Done"), "#0087be", this.onRightButtonPressed) } + + + { this.props.children } + + + + + ); + } +} + +export default BottomSheet; + +export function TitleValueCell(props) { + const { + title, + value, + onPress, + } = props; + + return ( + + ) +} diff --git a/packages/editor/src/components/mobile/bottom-sheet/styles.android.scss b/packages/editor/src/components/mobile/bottom-sheet/styles.android.scss new file mode 100644 index 0000000000000..e43092631ac84 --- /dev/null +++ b/packages/editor/src/components/mobile/bottom-sheet/styles.android.scss @@ -0,0 +1,131 @@ +//Bottom Sheet + +.bottomModal { + justify-content: flex-end; + margin: 0; +} + +.dragIndicator { + background-color: $light-gray-400; + height: 4px; + width: 10%; + top: -12px; + margin: auto; + border-radius: 2px; +} + +.separator { + background-color: $light-gray-400; + height: 1px; + width: 95%; + margin: auto; +} + +.content { + background-color: $white; + padding: 18px 10px 5px 10px; + justify-content: center; + border-top-right-radius: 8px; + border-top-left-radius: 8px; + min-height: 200px; +} + +.head { + flex-direction: row; + width: 100%; + margin-bottom: 5px; + justify-content: space-between; + align-items: center; + align-content: center; +} + +.title { + color: $dark-gray-600; + font-size: 18px; + font-weight: 600; + flex: 1; + text-align: center; +} + +// Modal + +.modal { + margin: 0; +} + +.modalHead { + flex-direction: row; + width: 100%; + margin-bottom: 5px; + justify-content: space-between; + align-items: center; + align-content: center; +} + +.modalContent { + background-color: $white; + padding: 18px 10px 5px 10px; + justify-content: center; + margin: 0px 20px 0px 20px +} + +.modalTitle { + color: $dark-gray-600; + font-size: 18px; + font-weight: 600; + flex: 1; + margin-bottom: 10px; +} + +.modalActionButton { + color: #0087be; + font-size: 17px; +} + +// Button + +.buttonText { + font-size: 18px; + padding: 5px; +} + +// Inline + +.inlineInput { + width: 100%; + margin: 0 0; +} + +.inlineInputLabel { + color: $dark-gray-600; + font-size: 14px; + font-weight: bold; +} + +.inlineInputValue { + font-size: 18px; + align-items: stretch; + padding: 4px; +} + +.inlineInputValueSwitch { + padding: 5px; +} + +// Cells + +.cellLabel { + padding: 10px 10px; + color: $dark-gray-600; + font-size: 16px; + font-weight: bold; +} + +.cellValue { + flex-grow: 1; + font-size: 16px; + text-align: right; + align-items: stretch; + align-self: flex-end; + padding: 10px; +} \ No newline at end of file diff --git a/packages/editor/src/components/mobile/bottom-sheet/styles.ios.scss b/packages/editor/src/components/mobile/bottom-sheet/styles.ios.scss new file mode 100644 index 0000000000000..96f85e349da7d --- /dev/null +++ b/packages/editor/src/components/mobile/bottom-sheet/styles.ios.scss @@ -0,0 +1,128 @@ +//Bottom Sheet + +.bottomModal { + justify-content: flex-end; + margin: 0; +} + +.dragIndicator { + background-color: $light-gray-400; + height: 4px; + width: 10%; + top: -12px; + margin: auto; + border-radius: 2px; +} + +.separator { + background-color: $light-gray-400; + height: 1px; + width: 95%; + margin: auto; +} + +.content { + background-color: $white; + padding: 18px 10px 5px 10px; + justify-content: center; + border-top-right-radius: 8px; + border-top-left-radius: 8px; +} + +.head { + flex-direction: row; + width: 100%; + margin-bottom: 5px; + justify-content: space-between; + align-items: center; + align-content: center; +} + +.title { + color: $dark-gray-600; + font-size: 18px; + font-weight: 600; + flex: 1; + text-align: center; +} + +// Modal + +.modal { + margin: 0; +} + +.modalHead { + flex-direction: row; + width: 100%; + margin-bottom: 5px; + justify-content: space-between; + align-items: center; + align-content: center; +} + +.modalContent { + flex: 1; + background-color: $white; +} + +.modalTitle { + color: $dark-gray-600; + font-size: 18px; + font-weight: 600; + flex: 1; + margin-bottom: 10px; +} + +.modalActionButton { + color: #0087be; + font-size: 17px; +} + +// Button + +.buttonText { + font-size: 18px; + padding: 5px; +} + +// Inline + +.inlineInput { + width: 100%; + margin: 0 0; +} + +.inlineInputLabel { + color: $dark-gray-600; + font-size: 14px; + font-weight: bold; +} + +.inlineInputValue { + font-size: 18px; + align-items: stretch; + padding: 4px; +} + +.inlineInputValueSwitch { + padding: 5px; +} + +// Cells + +.cellLabel { + padding: 10px 10px; + color: $dark-gray-600; + font-size: 16px; + font-weight: bold; +} + +.cellValue { + flex-grow: 1; + font-size: 16px; + text-align: right; + align-items: stretch; + align-self: flex-end; + padding: 10px; +} \ No newline at end of file From 4352c7ad4f59dbb0018d31ebc37ce59778d227a3 Mon Sep 17 00:00:00 2001 From: etoledom Date: Wed, 30 Jan 2019 18:08:37 +0100 Subject: [PATCH 04/32] rnmobile: Styling bottom-sheet header --- .../mobile/bottom-sheet/button.native.js | 2 +- .../mobile/bottom-sheet/index.native.js | 19 ++- .../mobile/bottom-sheet/styles.android.scss | 131 ------------------ .../{styles.ios.scss => styles.scss} | 1 - 4 files changed, 14 insertions(+), 139 deletions(-) delete mode 100644 packages/editor/src/components/mobile/bottom-sheet/styles.android.scss rename packages/editor/src/components/mobile/bottom-sheet/{styles.ios.scss => styles.scss} (99%) diff --git a/packages/editor/src/components/mobile/bottom-sheet/button.native.js b/packages/editor/src/components/mobile/bottom-sheet/button.native.js index acf24309eb6b5..1d9190d788f97 100644 --- a/packages/editor/src/components/mobile/bottom-sheet/button.native.js +++ b/packages/editor/src/components/mobile/bottom-sheet/button.native.js @@ -16,7 +16,7 @@ onPress={ onPress } disabled={ disabled } > - + { children } diff --git a/packages/editor/src/components/mobile/bottom-sheet/index.native.js b/packages/editor/src/components/mobile/bottom-sheet/index.native.js index 679b9f00e3bc9..2751b9246f72c 100644 --- a/packages/editor/src/components/mobile/bottom-sheet/index.native.js +++ b/packages/editor/src/components/mobile/bottom-sheet/index.native.js @@ -92,18 +92,25 @@ class BottomSheet extends Component { - { hideLeftButton || this.headerButton(__( "Remove" ), "red", this.onLeftButtonPressed) } - - { this.props.title } - - { hideRightButton || this.headerButton(__("Done"), "#0087be", this.onRightButtonPressed) } + + { hideLeftButton || this.headerButton(__( "Remove" ), "red", this.onLeftButtonPressed) } + + + + { this.props.title } + + + + { hideRightButton || this.headerButton(__("Done"), "#0087be", this.onRightButtonPressed) } + + { this.props.children } - + ); } } diff --git a/packages/editor/src/components/mobile/bottom-sheet/styles.android.scss b/packages/editor/src/components/mobile/bottom-sheet/styles.android.scss deleted file mode 100644 index e43092631ac84..0000000000000 --- a/packages/editor/src/components/mobile/bottom-sheet/styles.android.scss +++ /dev/null @@ -1,131 +0,0 @@ -//Bottom Sheet - -.bottomModal { - justify-content: flex-end; - margin: 0; -} - -.dragIndicator { - background-color: $light-gray-400; - height: 4px; - width: 10%; - top: -12px; - margin: auto; - border-radius: 2px; -} - -.separator { - background-color: $light-gray-400; - height: 1px; - width: 95%; - margin: auto; -} - -.content { - background-color: $white; - padding: 18px 10px 5px 10px; - justify-content: center; - border-top-right-radius: 8px; - border-top-left-radius: 8px; - min-height: 200px; -} - -.head { - flex-direction: row; - width: 100%; - margin-bottom: 5px; - justify-content: space-between; - align-items: center; - align-content: center; -} - -.title { - color: $dark-gray-600; - font-size: 18px; - font-weight: 600; - flex: 1; - text-align: center; -} - -// Modal - -.modal { - margin: 0; -} - -.modalHead { - flex-direction: row; - width: 100%; - margin-bottom: 5px; - justify-content: space-between; - align-items: center; - align-content: center; -} - -.modalContent { - background-color: $white; - padding: 18px 10px 5px 10px; - justify-content: center; - margin: 0px 20px 0px 20px -} - -.modalTitle { - color: $dark-gray-600; - font-size: 18px; - font-weight: 600; - flex: 1; - margin-bottom: 10px; -} - -.modalActionButton { - color: #0087be; - font-size: 17px; -} - -// Button - -.buttonText { - font-size: 18px; - padding: 5px; -} - -// Inline - -.inlineInput { - width: 100%; - margin: 0 0; -} - -.inlineInputLabel { - color: $dark-gray-600; - font-size: 14px; - font-weight: bold; -} - -.inlineInputValue { - font-size: 18px; - align-items: stretch; - padding: 4px; -} - -.inlineInputValueSwitch { - padding: 5px; -} - -// Cells - -.cellLabel { - padding: 10px 10px; - color: $dark-gray-600; - font-size: 16px; - font-weight: bold; -} - -.cellValue { - flex-grow: 1; - font-size: 16px; - text-align: right; - align-items: stretch; - align-self: flex-end; - padding: 10px; -} \ No newline at end of file diff --git a/packages/editor/src/components/mobile/bottom-sheet/styles.ios.scss b/packages/editor/src/components/mobile/bottom-sheet/styles.scss similarity index 99% rename from packages/editor/src/components/mobile/bottom-sheet/styles.ios.scss rename to packages/editor/src/components/mobile/bottom-sheet/styles.scss index 96f85e349da7d..252148a832ae5 100644 --- a/packages/editor/src/components/mobile/bottom-sheet/styles.ios.scss +++ b/packages/editor/src/components/mobile/bottom-sheet/styles.scss @@ -42,7 +42,6 @@ color: $dark-gray-600; font-size: 18px; font-weight: 600; - flex: 1; text-align: center; } From f132158769a2339389a6327b83297bdc68633396 Mon Sep 17 00:00:00 2001 From: etoledom Date: Wed, 30 Jan 2019 18:25:25 +0100 Subject: [PATCH 05/32] rnmobile: Bottom-sheet clean up --- .../block-library/src/image/edit.native.js | 1 + .../mobile/bottom-sheet/index.native.js | 65 +++------------- .../mobile/bottom-sheet/styles.scss | 76 +------------------ 3 files changed, 17 insertions(+), 125 deletions(-) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index e999156bff340..df558b17f7363 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -176,6 +176,7 @@ export default class ImageEdit extends React.Component { isVisible={ this.state.showSettings } title={ __("Image Settings") } onClose={ onImageSettingsClose } + rightButtonConfig={ { text: __("Done"), color: "#0087be", onPress: onImageSettingsClose } } > { } }> { __( "Alt Text" ) } diff --git a/packages/editor/src/components/mobile/bottom-sheet/index.native.js b/packages/editor/src/components/mobile/bottom-sheet/index.native.js index 2751b9246f72c..0edcf15877ccf 100644 --- a/packages/editor/src/components/mobile/bottom-sheet/index.native.js +++ b/packages/editor/src/components/mobile/bottom-sheet/index.native.js @@ -1,27 +1,14 @@ /** * External dependencies */ -import React from 'react'; -import { Switch, Text, TextInput, View } from 'react-native'; +import { Text, View } from 'react-native'; import Modal from 'react-native-modal'; import SafeArea from 'react-native-safe-area'; /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; import { Component } from '@wordpress/element'; -import { URLInput } from '@wordpress/editor'; -import { prependHTTP } from '@wordpress/url'; - -import { - create, - insert, - isCollapsed, - applyFormat, - getTextContent, - slice, -} from '@wordpress/rich-text'; /** * Internal dependencies @@ -48,19 +35,11 @@ class BottomSheet extends Component { SafeArea.removeEventListener( 'safeAreaInsetsForRootViewDidChange', this.onSafeAreaInsetsUpdate ); } - onLeftButtonPressed() { - - } - - onRightButtonPressed() { - - } - - headerButton(text, color, handler) { - return( - ) @@ -74,8 +53,7 @@ class BottomSheet extends Component { } render() { - const { isVisible } = this.props; - const { hideLeftButton, hideRightButton } = this.props; + const { isVisible, leftButtonConfig, rightButtonConfig } = this.props; return ( - { hideLeftButton || this.headerButton(__( "Remove" ), "red", this.onLeftButtonPressed) } + { leftButtonConfig && this.headerButton(leftButtonConfig) } - + { this.props.title } - - { hideRightButton || this.headerButton(__("Done"), "#0087be", this.onRightButtonPressed) } + + { rightButtonConfig && this.headerButton(rightButtonConfig) } @@ -110,28 +88,9 @@ class BottomSheet extends Component { - + ); } } export default BottomSheet; - -export function TitleValueCell(props) { - const { - title, - value, - onPress, - } = props; - - return ( - - ) -} diff --git a/packages/editor/src/components/mobile/bottom-sheet/styles.scss b/packages/editor/src/components/mobile/bottom-sheet/styles.scss index 252148a832ae5..b4acb9275d40d 100644 --- a/packages/editor/src/components/mobile/bottom-sheet/styles.scss +++ b/packages/editor/src/components/mobile/bottom-sheet/styles.scss @@ -17,7 +17,7 @@ .separator { background-color: $light-gray-400; height: 1px; - width: 95%; + width: 100%; margin: auto; } @@ -45,83 +45,15 @@ text-align: center; } -// Modal - -.modal { - margin: 0; -} - -.modalHead { - flex-direction: row; - width: 100%; - margin-bottom: 5px; - justify-content: space-between; - align-items: center; +.titleContainer { + justify-content: center; + flex: 2; align-content: center; } -.modalContent { - flex: 1; - background-color: $white; -} - -.modalTitle { - color: $dark-gray-600; - font-size: 18px; - font-weight: 600; - flex: 1; - margin-bottom: 10px; -} - -.modalActionButton { - color: #0087be; - font-size: 17px; -} - // Button .buttonText { font-size: 18px; padding: 5px; } - -// Inline - -.inlineInput { - width: 100%; - margin: 0 0; -} - -.inlineInputLabel { - color: $dark-gray-600; - font-size: 14px; - font-weight: bold; -} - -.inlineInputValue { - font-size: 18px; - align-items: stretch; - padding: 4px; -} - -.inlineInputValueSwitch { - padding: 5px; -} - -// Cells - -.cellLabel { - padding: 10px 10px; - color: $dark-gray-600; - font-size: 16px; - font-weight: bold; -} - -.cellValue { - flex-grow: 1; - font-size: 16px; - text-align: right; - align-items: stretch; - align-self: flex-end; - padding: 10px; -} \ No newline at end of file From 7bd8a4f9d44954f1fd6c8a00b118b0f1a616a47d Mon Sep 17 00:00:00 2001 From: etoledom Date: Wed, 30 Jan 2019 18:35:25 +0100 Subject: [PATCH 06/32] rnmobile: Fix lint issues on bottom-sheet related code. --- package-lock.json | 46 ++++--------- .../block-library/src/image/edit.native.js | 20 +++--- .../src/image/inspector-styles.native.scss | 6 +- packages/components/src/button/style.scss | 9 +-- .../editor/src/components/index.native.js | 2 +- .../mobile/bottom-sheet/button.native.js | 42 ++++++------ .../mobile/bottom-sheet/index.native.js | 38 +++++------ .../mobile/bottom-sheet/styles.scss | 64 +++++++++---------- 8 files changed, 100 insertions(+), 127 deletions(-) diff --git a/package-lock.json b/package-lock.json index 30246ca516f38..6f5a5fe1c963b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2975,7 +2975,6 @@ "resolved": "https://registry.npmjs.org/align-text/-/align-text-0.1.4.tgz", "integrity": "sha1-DNkKVhCT810KmSVsIrcGlDP60Rc=", "dev": true, - "optional": true, "requires": { "kind-of": "^3.0.2", "longest": "^1.0.1", @@ -2987,7 +2986,6 @@ "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz", "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=", "dev": true, - "optional": true, "requires": { "is-buffer": "^1.1.5" } @@ -8050,8 +8048,7 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "aproba": { "version": "1.2.0", @@ -8072,14 +8069,12 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -8094,20 +8089,17 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "core-util-is": { "version": "1.0.2", @@ -8224,8 +8216,7 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "ini": { "version": "1.3.5", @@ -8237,7 +8228,6 @@ "version": "1.0.0", "bundled": true, "dev": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -8252,7 +8242,6 @@ "version": "3.0.4", "bundled": true, "dev": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -8260,14 +8249,12 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "minipass": { "version": "2.2.4", "bundled": true, "dev": true, - "optional": true, "requires": { "safe-buffer": "^5.1.1", "yallist": "^3.0.0" @@ -8286,7 +8273,6 @@ "version": "0.5.1", "bundled": true, "dev": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -8367,8 +8353,7 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "object-assign": { "version": "4.1.1", @@ -8380,7 +8365,6 @@ "version": "1.4.0", "bundled": true, "dev": true, - "optional": true, "requires": { "wrappy": "1" } @@ -8466,8 +8450,7 @@ "safe-buffer": { "version": "5.1.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "safer-buffer": { "version": "2.1.2", @@ -8503,7 +8486,6 @@ "version": "1.0.2", "bundled": true, "dev": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -8523,7 +8505,6 @@ "version": "3.0.1", "bundled": true, "dev": true, - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -8567,14 +8548,12 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "yallist": { "version": "3.0.2", "bundled": true, - "dev": true, - "optional": true + "dev": true } } }, @@ -12678,8 +12657,7 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/longest/-/longest-1.0.1.tgz", "integrity": "sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=", - "dev": true, - "optional": true + "dev": true }, "longest-streak": { "version": "2.0.2", diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index df558b17f7363..dec6eaa80e56f 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -19,7 +19,7 @@ import { Toolbar, ToolbarButton, Spinner } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import ImageSize from './image-size'; import { isURL } from '@wordpress/url'; -import inspectorStyles from './inspector-styles.scss' +import inspectorStyles from './inspector-styles.scss'; const MEDIA_ULOAD_STATE_UPLOADING = 1; const MEDIA_ULOAD_STATE_SUCCEEDED = 2; @@ -146,12 +146,12 @@ export default class ImageEdit extends React.Component { } const onImageSettingsButtonPressed = () => { - this.setState( { showSettings: true } ) + this.setState( { showSettings: true } ); }; const onImageSettingsClose = () => { - this.setState( { showSettings: false } ) - } + this.setState( { showSettings: false } ); + }; const toolbarEditButton = ( @@ -172,18 +172,18 @@ export default class ImageEdit extends React.Component { ); const getInspectorControls = () => ( - { } }> - { __( "Alt Text" ) } - { __( "None" ) } + { __( 'Alt Text' ) } + { __( 'None' ) } - ) + ); const showSpinner = this.state.isUploadInProgress; const opacity = this.state.isUploadInProgress ? 0.3 : 1; diff --git a/packages/block-library/src/image/inspector-styles.native.scss b/packages/block-library/src/image/inspector-styles.native.scss index 4dbad2b1bb804..56a56028e84a1 100644 --- a/packages/block-library/src/image/inspector-styles.native.scss +++ b/packages/block-library/src/image/inspector-styles.native.scss @@ -1,7 +1,7 @@ //Bottom Sheet .bottomSheetCell { - flex-direction: row; + flex-direction: row; min-height: 60; justify-content: space-between; padding-left: 12; @@ -11,10 +11,10 @@ .bottomSheetCellLabel { font-size: 18px; - color: black; + color: #000; } .bottomSheetCellValue { font-size: 18px; - color: gray; + color: $dark-gray-400; } diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss index 0f49a9625519b..edd6a8bc7514f 100644 --- a/packages/components/src/button/style.scss +++ b/packages/components/src/button/style.scss @@ -114,13 +114,8 @@ background-size: 100px 100%; // Disable reason: This function call looks nicer when each argument is on its own line. /* stylelint-disable */ - background-image: linear-gradient( - -45deg, - theme(primary) 28%, - color(theme(primary) shade(30%)) 28%, - color(theme(primary) shade(30%)) 72%, - theme(primary) 72% - ); + background-image: + linear-gradient(-45deg, theme(primary) 28%, color(theme(primary) shade(30%)) 28%, color(theme(primary) shade(30%)) 72%, theme(primary) 72%); /* stylelint-enable */ border-color: color(theme(primary) shade(50%)); } diff --git a/packages/editor/src/components/index.native.js b/packages/editor/src/components/index.native.js index 2726eba6add57..ebb3fb5b3e94e 100644 --- a/packages/editor/src/components/index.native.js +++ b/packages/editor/src/components/index.native.js @@ -11,4 +11,4 @@ export { default as PostTitle } from './post-title'; export { default as EditorHistoryRedo } from './editor-history/redo'; export { default as EditorHistoryUndo } from './editor-history/undo'; export { default as InspectorControls } from './inspector-controls'; -export { default as BottomSheet } from './mobile/bottom-sheet' +export { default as BottomSheet } from './mobile/bottom-sheet'; diff --git a/packages/editor/src/components/mobile/bottom-sheet/button.native.js b/packages/editor/src/components/mobile/bottom-sheet/button.native.js index 1d9190d788f97..7379459746529 100644 --- a/packages/editor/src/components/mobile/bottom-sheet/button.native.js +++ b/packages/editor/src/components/mobile/bottom-sheet/button.native.js @@ -1,24 +1,24 @@ /** * External dependencies */ - import { TouchableOpacity, View } from 'react-native'; - - export default function Button( props ) { - const { - children, - onPress, - disabled, - } = props; - - return ( - - - { children } - - - ); - } \ No newline at end of file +import { TouchableOpacity, View } from 'react-native'; + +export default function Button( props ) { + const { + children, + onPress, + disabled, + } = props; + + return ( + + + { children } + + + ); +} diff --git a/packages/editor/src/components/mobile/bottom-sheet/index.native.js b/packages/editor/src/components/mobile/bottom-sheet/index.native.js index 0edcf15877ccf..548473e048d15 100644 --- a/packages/editor/src/components/mobile/bottom-sheet/index.native.js +++ b/packages/editor/src/components/mobile/bottom-sheet/index.native.js @@ -14,10 +14,10 @@ import { Component } from '@wordpress/element'; * Internal dependencies */ import styles from './styles.scss'; -import Button from './button' +import Button from './button'; class BottomSheet extends Component { - constructor( props ) { + constructor() { super( ...arguments ); this.onSafeAreaInsetsUpdate = this.onSafeAreaInsetsUpdate.bind( this ); this.state = { @@ -42,7 +42,7 @@ class BottomSheet extends Component { { config.text } - ) + ); } onSafeAreaInsetsUpdate( result ) { @@ -69,24 +69,24 @@ class BottomSheet extends Component { > - - - { leftButtonConfig && this.headerButton(leftButtonConfig) } - - - - { this.props.title } - - - - { rightButtonConfig && this.headerButton(rightButtonConfig) } - + + + { leftButtonConfig && this.headerButton( leftButtonConfig ) } + + + + { this.props.title } + + + + { rightButtonConfig && this.headerButton( rightButtonConfig ) } + - - { this.props.children } - - + + { this.props.children } + + ); diff --git a/packages/editor/src/components/mobile/bottom-sheet/styles.scss b/packages/editor/src/components/mobile/bottom-sheet/styles.scss index b4acb9275d40d..74c303a91e33f 100644 --- a/packages/editor/src/components/mobile/bottom-sheet/styles.scss +++ b/packages/editor/src/components/mobile/bottom-sheet/styles.scss @@ -1,59 +1,59 @@ //Bottom Sheet .bottomModal { - justify-content: flex-end; - margin: 0; + justify-content: flex-end; + margin: 0; } .dragIndicator { - background-color: $light-gray-400; - height: 4px; - width: 10%; - top: -12px; - margin: auto; - border-radius: 2px; + background-color: $light-gray-400; + height: 4px; + width: 10%; + top: -12px; + margin: auto; + border-radius: 2px; } .separator { - background-color: $light-gray-400; - height: 1px; - width: 100%; - margin: auto; + background-color: $light-gray-400; + height: 1px; + width: 100%; + margin: auto; } .content { - background-color: $white; - padding: 18px 10px 5px 10px; - justify-content: center; - border-top-right-radius: 8px; - border-top-left-radius: 8px; + background-color: $white; + padding: 18px 10px 5px 10px; + justify-content: center; + border-top-right-radius: 8px; + border-top-left-radius: 8px; } .head { - flex-direction: row; - width: 100%; - margin-bottom: 5px; - justify-content: space-between; - align-items: center; - align-content: center; + flex-direction: row; + width: 100%; + margin-bottom: 5px; + justify-content: space-between; + align-items: center; + align-content: center; } .title { - color: $dark-gray-600; - font-size: 18px; - font-weight: 600; - text-align: center; + color: $dark-gray-600; + font-size: 18px; + font-weight: 600; + text-align: center; } .titleContainer { - justify-content: center; - flex: 2; - align-content: center; + justify-content: center; + flex: 2; + align-content: center; } // Button .buttonText { - font-size: 18px; - padding: 5px; + font-size: 18px; + padding: 5px; } From 541db3bf8e0149dee35dfb771da71fee9587e54f Mon Sep 17 00:00:00 2001 From: etoledom Date: Thu, 31 Jan 2019 08:35:33 +0100 Subject: [PATCH 07/32] rnmobile: Fix small lint issues --- packages/components/src/button/style.scss | 9 +++++++-- .../src/components/mobile/bottom-sheet/button.native.js | 4 ++-- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss index edd6a8bc7514f..fe8875cba23d5 100644 --- a/packages/components/src/button/style.scss +++ b/packages/components/src/button/style.scss @@ -114,8 +114,13 @@ background-size: 100px 100%; // Disable reason: This function call looks nicer when each argument is on its own line. /* stylelint-disable */ - background-image: - linear-gradient(-45deg, theme(primary) 28%, color(theme(primary) shade(30%)) 28%, color(theme(primary) shade(30%)) 72%, theme(primary) 72%); + background-image: linear-gradient( + -45deg, + theme(primary) 28%, + color(theme(primary) shade(30%)) 28%, + color(theme(primary) shade(30%)) 72%, + theme(primary) 72% + ); /* stylelint-enable */ border-color: color(theme(primary) shade(50%)); } diff --git a/packages/editor/src/components/mobile/bottom-sheet/button.native.js b/packages/editor/src/components/mobile/bottom-sheet/button.native.js index 7379459746529..8629963836448 100644 --- a/packages/editor/src/components/mobile/bottom-sheet/button.native.js +++ b/packages/editor/src/components/mobile/bottom-sheet/button.native.js @@ -1,6 +1,6 @@ /** - * External dependencies - */ +* External dependencies +*/ import { TouchableOpacity, View } from 'react-native'; export default function Button( props ) { From b8e5dcfd3777e770d3e979c35a068205b623d277 Mon Sep 17 00:00:00 2001 From: etoledom Date: Thu, 31 Jan 2019 08:37:09 +0100 Subject: [PATCH 08/32] rnmobile: Move inline toolbar button definition out of constant. --- packages/block-library/src/image/edit.native.js | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index dec6eaa80e56f..1d903aeae80a6 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -163,14 +163,6 @@ export default class ImageEdit extends React.Component { ); - const inlineToolbarButtons = ( - - ); - const getInspectorControls = () => ( - { inlineToolbarButtons } + { ( sizes ) => { From 92e5357a5d34133f34749b2b0ef67aae322b862d Mon Sep 17 00:00:00 2001 From: etoledom Date: Thu, 31 Jan 2019 08:49:54 +0100 Subject: [PATCH 09/32] rnmobile: Remove extra white-spaces --- packages/components/src/button/style.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss index fe8875cba23d5..0f49a9625519b 100644 --- a/packages/components/src/button/style.scss +++ b/packages/components/src/button/style.scss @@ -115,10 +115,10 @@ // Disable reason: This function call looks nicer when each argument is on its own line. /* stylelint-disable */ background-image: linear-gradient( - -45deg, - theme(primary) 28%, - color(theme(primary) shade(30%)) 28%, - color(theme(primary) shade(30%)) 72%, + -45deg, + theme(primary) 28%, + color(theme(primary) shade(30%)) 28%, + color(theme(primary) shade(30%)) 72%, theme(primary) 72% ); /* stylelint-enable */ From b7236e0eda865cfd0c7376e74b388f069fc53438 Mon Sep 17 00:00:00 2001 From: etoledom Date: Thu, 31 Jan 2019 08:54:35 +0100 Subject: [PATCH 10/32] revert package-lock.json changes --- package-lock.json | 46 ++++++++++++++++++++++++++++++++++------------ 1 file changed, 34 insertions(+), 12 deletions(-) diff --git a/package-lock.json b/package-lock.json index 6f5a5fe1c963b..30246ca516f38 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2975,6 +2975,7 @@ "resolved": "https://registry.npmjs.org/align-text/-/align-text-0.1.4.tgz", "integrity": "sha1-DNkKVhCT810KmSVsIrcGlDP60Rc=", "dev": true, + "optional": true, "requires": { "kind-of": "^3.0.2", "longest": "^1.0.1", @@ -2986,6 +2987,7 @@ "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz", "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=", "dev": true, + "optional": true, "requires": { "is-buffer": "^1.1.5" } @@ -8048,7 +8050,8 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -8069,12 +8072,14 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -8089,17 +8094,20 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -8216,7 +8224,8 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -8228,6 +8237,7 @@ "version": "1.0.0", "bundled": true, "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -8242,6 +8252,7 @@ "version": "3.0.4", "bundled": true, "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -8249,12 +8260,14 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.2.4", "bundled": true, "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.1", "yallist": "^3.0.0" @@ -8273,6 +8286,7 @@ "version": "0.5.1", "bundled": true, "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -8353,7 +8367,8 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -8365,6 +8380,7 @@ "version": "1.4.0", "bundled": true, "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -8450,7 +8466,8 @@ "safe-buffer": { "version": "5.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -8486,6 +8503,7 @@ "version": "1.0.2", "bundled": true, "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -8505,6 +8523,7 @@ "version": "3.0.1", "bundled": true, "dev": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -8548,12 +8567,14 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "yallist": { "version": "3.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true } } }, @@ -12657,7 +12678,8 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/longest/-/longest-1.0.1.tgz", "integrity": "sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=", - "dev": true + "dev": true, + "optional": true }, "longest-streak": { "version": "2.0.2", From 09582b7e8177e3cc7674a3be3644ff059563b8da Mon Sep 17 00:00:00 2001 From: etoledom Date: Thu, 31 Jan 2019 09:31:56 +0100 Subject: [PATCH 11/32] rnmobile: Fix merge issue --- .../block-library/src/image/edit.native.js | 21 ------------------- 1 file changed, 21 deletions(-) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index cc69cecc3eb7e..1d903aeae80a6 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -14,11 +14,7 @@ import { /** * Internal dependencies */ -<<<<<<< HEAD import { MediaPlaceholder, RichText, BlockControls, InspectorControls, BottomSheet } from '@wordpress/editor'; -======= -import { MediaPlaceholder, RichText, BlockControls, InspectorControls } from '@wordpress/editor'; ->>>>>>> master import { Toolbar, ToolbarButton, Spinner } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import ImageSize from './image-size'; @@ -150,15 +146,11 @@ export default class ImageEdit extends React.Component { } const onImageSettingsButtonPressed = () => { -<<<<<<< HEAD this.setState( { showSettings: true } ); }; const onImageSettingsClose = () => { this.setState( { showSettings: false } ); -======= - ->>>>>>> master }; const toolbarEditButton = ( @@ -171,7 +163,6 @@ export default class ImageEdit extends React.Component { ); -<<<<<<< HEAD const getInspectorControls = () => ( { __( 'None' ) } -======= - const inlineToolbarButtons = ( - ->>>>>>> master ); const showSpinner = this.state.isUploadInProgress; @@ -205,15 +188,11 @@ export default class ImageEdit extends React.Component { { toolbarEditButton } -<<<<<<< HEAD -======= - { inlineToolbarButtons } ->>>>>>> master { ( sizes ) => { From a1db59a273210da77a07f1f6c8508797b1af2fe0 Mon Sep 17 00:00:00 2001 From: etoledom Date: Thu, 31 Jan 2019 13:37:29 +0100 Subject: [PATCH 12/32] rnmobile: Imported BaseControl and TextinputControl to be used on Alt Image Settings --- .../block-library/src/image/edit.native.js | 17 ++++++++++--- .../src/base-control/index.native.js | 18 ++++++++++++++ packages/components/src/index.native.js | 2 ++ .../src/textarea-control/index.native.js | 24 +++++++++++++++++++ 4 files changed, 58 insertions(+), 3 deletions(-) create mode 100644 packages/components/src/base-control/index.native.js create mode 100644 packages/components/src/textarea-control/index.native.js diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index 1d903aeae80a6..fffff0597129c 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -15,7 +15,7 @@ import { * Internal dependencies */ import { MediaPlaceholder, RichText, BlockControls, InspectorControls, BottomSheet } from '@wordpress/editor'; -import { Toolbar, ToolbarButton, Spinner } from '@wordpress/components'; +import { Toolbar, ToolbarButton, Spinner, TextareaControl } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import ImageSize from './image-size'; import { isURL } from '@wordpress/url'; @@ -40,6 +40,7 @@ export default class ImageEdit extends React.Component { this.removeMediaUploadListener = this.removeMediaUploadListener.bind( this ); this.finishMediaUploadWithSuccess = this.finishMediaUploadWithSuccess.bind( this ); this.finishMediaUploadWithFailure = this.finishMediaUploadWithFailure.bind( this ); + this.updateAlt = this.updateAlt.bind( this ); } componentDidMount() { @@ -105,9 +106,13 @@ export default class ImageEdit extends React.Component { } } + updateAlt( newAlt ) { + this.props.setAttributes( { alt: newAlt } ); + } + render() { const { attributes, isSelected, setAttributes } = this.props; - const { url, caption, height, width } = attributes; + const { url, caption, height, width, alt } = attributes; const onMediaLibraryButtonPressed = () => { requestMediaPickFromMediaLibrary( ( mediaId, mediaUrl ) => { @@ -172,8 +177,14 @@ export default class ImageEdit extends React.Component { > { } }> { __( 'Alt Text' ) } - { __( 'None' ) } + { alt || __( 'None' ) } + ); diff --git a/packages/components/src/base-control/index.native.js b/packages/components/src/base-control/index.native.js new file mode 100644 index 0000000000000..4bd84f7ec3a7d --- /dev/null +++ b/packages/components/src/base-control/index.native.js @@ -0,0 +1,18 @@ +/** + * External dependencies + */ +import { Text, View } from 'react-native'; + +export default function BaseControl( { id, label, help, className, children } ) { + return ( + + { label && { label } } + { children } + { help && { help } } + + ); +} \ No newline at end of file diff --git a/packages/components/src/index.native.js b/packages/components/src/index.native.js index 65dd41e713fa3..b66663af05285 100644 --- a/packages/components/src/index.native.js +++ b/packages/components/src/index.native.js @@ -7,6 +7,8 @@ export { default as withSpokenMessages } from './higher-order/with-spoken-messag export { default as IconButton } from './icon-button'; export { default as Spinner } from './spinner'; export { createSlotFill, Slot, Fill, Provider as SlotFillProvider } from './slot-fill'; +export { default as BaseControl } from './base-control'; +export { default as TextareaControl } from './textarea-control'; // Higher-Order Components export { default as withFilters } from './higher-order/with-filters'; diff --git a/packages/components/src/textarea-control/index.native.js b/packages/components/src/textarea-control/index.native.js new file mode 100644 index 0000000000000..cfbc53a6b0392 --- /dev/null +++ b/packages/components/src/textarea-control/index.native.js @@ -0,0 +1,24 @@ +/** + * External dependencies + */ +import { View, TextInput } from 'react-native'; + +/** + * Internal dependencies + */ +import BaseControl from '../base-control'; + +function TextareaControl( { label, value, help, onChange, rows = 4, ...props } ) { + return ( + + 1 } + /> + + ); +} + +export default TextareaControl; From d335a84f58a530034e0568842affb543c15fcac2 Mon Sep 17 00:00:00 2001 From: etoledom Date: Thu, 31 Jan 2019 19:53:48 +0100 Subject: [PATCH 13/32] rnmobile: exporting component BottomSheet.Button to be used as bottom-sheet header buttons --- packages/block-library/src/image/edit.native.js | 10 ++++++++-- .../mobile/bottom-sheet/button.native.js | 14 +++++++++++--- .../mobile/bottom-sheet/index.native.js | 17 ++++------------- 3 files changed, 23 insertions(+), 18 deletions(-) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index 1d903aeae80a6..4268d07495232 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -2,7 +2,7 @@ * External dependencies */ import React from 'react'; -import { View, Image, TextInput, Text, TouchableOpacity } from 'react-native'; +import { View, Image, TextInput, Text, TouchableOpacity, Switch } from 'react-native'; import { subscribeMediaUpload, requestMediaPickFromMediaLibrary, @@ -168,7 +168,13 @@ export default class ImageEdit extends React.Component { isVisible={ this.state.showSettings } title={ __( 'Image Settings' ) } onClose={ onImageSettingsClose } - rightButtonConfig={ { text: __( 'Done' ), color: '#0087be', onPress: onImageSettingsClose } } + rightButton={ + + } > { } }> { __( 'Alt Text' ) } diff --git a/packages/editor/src/components/mobile/bottom-sheet/button.native.js b/packages/editor/src/components/mobile/bottom-sheet/button.native.js index 8629963836448..94f24b747ae77 100644 --- a/packages/editor/src/components/mobile/bottom-sheet/button.native.js +++ b/packages/editor/src/components/mobile/bottom-sheet/button.native.js @@ -1,13 +1,19 @@ /** * External dependencies */ -import { TouchableOpacity, View } from 'react-native'; +import { TouchableOpacity, View, Text } from 'react-native'; + +/** + * Internal dependencies + */ +import styles from './styles.scss' export default function Button( props ) { const { - children, onPress, disabled, + text, + color, } = props; return ( @@ -17,7 +23,9 @@ export default function Button( props ) { disabled={ disabled } > - { children } + + { text } + ); diff --git a/packages/editor/src/components/mobile/bottom-sheet/index.native.js b/packages/editor/src/components/mobile/bottom-sheet/index.native.js index 548473e048d15..c4bc222332754 100644 --- a/packages/editor/src/components/mobile/bottom-sheet/index.native.js +++ b/packages/editor/src/components/mobile/bottom-sheet/index.native.js @@ -35,16 +35,6 @@ class BottomSheet extends Component { SafeArea.removeEventListener( 'safeAreaInsetsForRootViewDidChange', this.onSafeAreaInsetsUpdate ); } - headerButton( config ) { - return ( - - ); - } - onSafeAreaInsetsUpdate( result ) { const { safeAreaInsets } = result; if ( this.state.safeAreaBottomInset !== safeAreaInsets.bottom ) { @@ -53,7 +43,7 @@ class BottomSheet extends Component { } render() { - const { isVisible, leftButtonConfig, rightButtonConfig } = this.props; + const { isVisible, leftButton, rightButton } = this.props; return ( - { leftButtonConfig && this.headerButton( leftButtonConfig ) } + { leftButton } @@ -79,7 +69,7 @@ class BottomSheet extends Component { - { rightButtonConfig && this.headerButton( rightButtonConfig ) } + { rightButton } @@ -93,4 +83,5 @@ class BottomSheet extends Component { } } +BottomSheet.Button = Button; export default BottomSheet; From 67c2ffc665e06677a926f3cc2f179583bc363952 Mon Sep 17 00:00:00 2001 From: etoledom Date: Thu, 31 Jan 2019 20:32:46 +0100 Subject: [PATCH 14/32] rnmobile: Adding BottomSheet.Cell component as an extraction for BottomSheet users. --- .../block-library/src/image/edit.native.js | 9 +++---- .../src/image/inspector-styles.native.scss | 20 ---------------- .../mobile/bottom-sheet/cell.native.js | 24 +++++++++++++++++++ .../mobile/bottom-sheet/index.native.js | 3 +++ .../mobile/bottom-sheet/styles.scss | 23 ++++++++++++++++++ 5 files changed, 53 insertions(+), 26 deletions(-) delete mode 100644 packages/block-library/src/image/inspector-styles.native.scss create mode 100644 packages/editor/src/components/mobile/bottom-sheet/cell.native.js diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index 4268d07495232..969e29f8c200f 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -2,7 +2,7 @@ * External dependencies */ import React from 'react'; -import { View, Image, TextInput, Text, TouchableOpacity, Switch } from 'react-native'; +import { View, Image, TextInput, Text, TouchableOpacity, Switch, Picker } from 'react-native'; import { subscribeMediaUpload, requestMediaPickFromMediaLibrary, @@ -19,7 +19,6 @@ import { Toolbar, ToolbarButton, Spinner } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import ImageSize from './image-size'; import { isURL } from '@wordpress/url'; -import inspectorStyles from './inspector-styles.scss'; const MEDIA_ULOAD_STATE_UPLOADING = 1; const MEDIA_ULOAD_STATE_SUCCEEDED = 2; @@ -176,10 +175,8 @@ export default class ImageEdit extends React.Component { /> } > - { } }> - { __( 'Alt Text' ) } - { __( 'None' ) } - + {} } /> + {} } /> ); diff --git a/packages/block-library/src/image/inspector-styles.native.scss b/packages/block-library/src/image/inspector-styles.native.scss deleted file mode 100644 index 56a56028e84a1..0000000000000 --- a/packages/block-library/src/image/inspector-styles.native.scss +++ /dev/null @@ -1,20 +0,0 @@ -//Bottom Sheet - -.bottomSheetCell { - flex-direction: row; - min-height: 60; - justify-content: space-between; - padding-left: 12; - padding-right: 12; - align-items: center; -} - -.bottomSheetCellLabel { - font-size: 18px; - color: #000; -} - -.bottomSheetCellValue { - font-size: 18px; - color: $dark-gray-400; -} diff --git a/packages/editor/src/components/mobile/bottom-sheet/cell.native.js b/packages/editor/src/components/mobile/bottom-sheet/cell.native.js new file mode 100644 index 0000000000000..6ace4fe60c03d --- /dev/null +++ b/packages/editor/src/components/mobile/bottom-sheet/cell.native.js @@ -0,0 +1,24 @@ +/** +* External dependencies +*/ +import { TouchableOpacity, Text } from 'react-native'; + +/** + * Internal dependencies + */ +import styles from './styles.scss' + +export default function Cell( props ) { + const { + onPress, + label, + value, + } = props; + + return ( + + { label } + { value } + + ) +} \ No newline at end of file diff --git a/packages/editor/src/components/mobile/bottom-sheet/index.native.js b/packages/editor/src/components/mobile/bottom-sheet/index.native.js index c4bc222332754..781eb01337e4c 100644 --- a/packages/editor/src/components/mobile/bottom-sheet/index.native.js +++ b/packages/editor/src/components/mobile/bottom-sheet/index.native.js @@ -15,6 +15,7 @@ import { Component } from '@wordpress/element'; */ import styles from './styles.scss'; import Button from './button'; +import Cell from './cell'; class BottomSheet extends Component { constructor() { @@ -84,4 +85,6 @@ class BottomSheet extends Component { } BottomSheet.Button = Button; +BottomSheet.Cell = Cell; + export default BottomSheet; diff --git a/packages/editor/src/components/mobile/bottom-sheet/styles.scss b/packages/editor/src/components/mobile/bottom-sheet/styles.scss index 74c303a91e33f..1062ebceaa8e3 100644 --- a/packages/editor/src/components/mobile/bottom-sheet/styles.scss +++ b/packages/editor/src/components/mobile/bottom-sheet/styles.scss @@ -57,3 +57,26 @@ font-size: 18px; padding: 5px; } + +// Cell + +//Bottom Sheet + +.cellContainer { + flex-direction: row; + min-height: 50; + justify-content: space-between; + padding-left: 12; + padding-right: 12; + align-items: center; +} + +.cellLabel { + font-size: 18px; + color: #000; +} + +.cellValue { + font-size: 18px; + color: $dark-gray-400; +} From edcd79b87f1b31eafc581ffba47ebf555bdcbc8a Mon Sep 17 00:00:00 2001 From: etoledom Date: Thu, 31 Jan 2019 20:44:34 +0100 Subject: [PATCH 15/32] Fix lint issues --- package-lock.json | 46 +++++-------------- .../block-library/src/image/edit.native.js | 10 ++-- .../mobile/bottom-sheet/button.native.js | 4 +- .../mobile/bottom-sheet/cell.native.js | 6 +-- 4 files changed, 22 insertions(+), 44 deletions(-) diff --git a/package-lock.json b/package-lock.json index 83491b6775a23..4af334996808c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2975,7 +2975,6 @@ "resolved": "https://registry.npmjs.org/align-text/-/align-text-0.1.4.tgz", "integrity": "sha1-DNkKVhCT810KmSVsIrcGlDP60Rc=", "dev": true, - "optional": true, "requires": { "kind-of": "^3.0.2", "longest": "^1.0.1", @@ -2987,7 +2986,6 @@ "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz", "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=", "dev": true, - "optional": true, "requires": { "is-buffer": "^1.1.5" } @@ -8105,8 +8103,7 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "aproba": { "version": "1.2.0", @@ -8127,14 +8124,12 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -8149,20 +8144,17 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "core-util-is": { "version": "1.0.2", @@ -8279,8 +8271,7 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "ini": { "version": "1.3.5", @@ -8292,7 +8283,6 @@ "version": "1.0.0", "bundled": true, "dev": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -8307,7 +8297,6 @@ "version": "3.0.4", "bundled": true, "dev": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -8315,14 +8304,12 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "minipass": { "version": "2.2.4", "bundled": true, "dev": true, - "optional": true, "requires": { "safe-buffer": "^5.1.1", "yallist": "^3.0.0" @@ -8341,7 +8328,6 @@ "version": "0.5.1", "bundled": true, "dev": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -8422,8 +8408,7 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "object-assign": { "version": "4.1.1", @@ -8435,7 +8420,6 @@ "version": "1.4.0", "bundled": true, "dev": true, - "optional": true, "requires": { "wrappy": "1" } @@ -8521,8 +8505,7 @@ "safe-buffer": { "version": "5.1.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "safer-buffer": { "version": "2.1.2", @@ -8558,7 +8541,6 @@ "version": "1.0.2", "bundled": true, "dev": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -8578,7 +8560,6 @@ "version": "3.0.1", "bundled": true, "dev": true, - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -8622,14 +8603,12 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "yallist": { "version": "3.0.2", "bundled": true, - "dev": true, - "optional": true + "dev": true } } }, @@ -12727,8 +12706,7 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/longest/-/longest-1.0.1.tgz", "integrity": "sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=", - "dev": true, - "optional": true + "dev": true }, "longest-streak": { "version": "2.0.2", diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index 969e29f8c200f..61602fbc58f3c 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -2,7 +2,7 @@ * External dependencies */ import React from 'react'; -import { View, Image, TextInput, Text, TouchableOpacity, Switch, Picker } from 'react-native'; +import { View, Image, TextInput } from 'react-native'; import { subscribeMediaUpload, requestMediaPickFromMediaLibrary, @@ -167,16 +167,16 @@ export default class ImageEdit extends React.Component { isVisible={ this.state.showSettings } title={ __( 'Image Settings' ) } onClose={ onImageSettingsClose } - rightButton={ + rightButton={ + /> } > - {} } /> - {} } /> + {} } /> + {} } /> ); diff --git a/packages/editor/src/components/mobile/bottom-sheet/button.native.js b/packages/editor/src/components/mobile/bottom-sheet/button.native.js index 94f24b747ae77..439e056b93187 100644 --- a/packages/editor/src/components/mobile/bottom-sheet/button.native.js +++ b/packages/editor/src/components/mobile/bottom-sheet/button.native.js @@ -6,7 +6,7 @@ import { TouchableOpacity, View, Text } from 'react-native'; /** * Internal dependencies */ -import styles from './styles.scss' +import styles from './styles.scss'; export default function Button( props ) { const { @@ -23,7 +23,7 @@ export default function Button( props ) { disabled={ disabled } > - + { text } diff --git a/packages/editor/src/components/mobile/bottom-sheet/cell.native.js b/packages/editor/src/components/mobile/bottom-sheet/cell.native.js index 6ace4fe60c03d..7ad3a2db4b693 100644 --- a/packages/editor/src/components/mobile/bottom-sheet/cell.native.js +++ b/packages/editor/src/components/mobile/bottom-sheet/cell.native.js @@ -6,7 +6,7 @@ import { TouchableOpacity, Text } from 'react-native'; /** * Internal dependencies */ -import styles from './styles.scss' +import styles from './styles.scss'; export default function Cell( props ) { const { @@ -20,5 +20,5 @@ export default function Cell( props ) { { label } { value } - ) -} \ No newline at end of file + ); +} From fc1043aceaced0acb853769251e716ff546df8d3 Mon Sep 17 00:00:00 2001 From: etoledom Date: Thu, 31 Jan 2019 20:46:42 +0100 Subject: [PATCH 16/32] Reverting changes to package-lock.json --- package-lock.json | 46 ++++++++++++++++++++++++++++++++++------------ 1 file changed, 34 insertions(+), 12 deletions(-) diff --git a/package-lock.json b/package-lock.json index 4af334996808c..83491b6775a23 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2975,6 +2975,7 @@ "resolved": "https://registry.npmjs.org/align-text/-/align-text-0.1.4.tgz", "integrity": "sha1-DNkKVhCT810KmSVsIrcGlDP60Rc=", "dev": true, + "optional": true, "requires": { "kind-of": "^3.0.2", "longest": "^1.0.1", @@ -2986,6 +2987,7 @@ "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz", "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=", "dev": true, + "optional": true, "requires": { "is-buffer": "^1.1.5" } @@ -8103,7 +8105,8 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -8124,12 +8127,14 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -8144,17 +8149,20 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -8271,7 +8279,8 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -8283,6 +8292,7 @@ "version": "1.0.0", "bundled": true, "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -8297,6 +8307,7 @@ "version": "3.0.4", "bundled": true, "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -8304,12 +8315,14 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.2.4", "bundled": true, "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.1", "yallist": "^3.0.0" @@ -8328,6 +8341,7 @@ "version": "0.5.1", "bundled": true, "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -8408,7 +8422,8 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -8420,6 +8435,7 @@ "version": "1.4.0", "bundled": true, "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -8505,7 +8521,8 @@ "safe-buffer": { "version": "5.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -8541,6 +8558,7 @@ "version": "1.0.2", "bundled": true, "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -8560,6 +8578,7 @@ "version": "3.0.1", "bundled": true, "dev": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -8603,12 +8622,14 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "yallist": { "version": "3.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true } } }, @@ -12706,7 +12727,8 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/longest/-/longest-1.0.1.tgz", "integrity": "sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=", - "dev": true + "dev": true, + "optional": true }, "longest-streak": { "version": "2.0.2", From 4d7a80c72a86bc1e4e870e81207574537587e072 Mon Sep 17 00:00:00 2001 From: etoledom Date: Thu, 31 Jan 2019 20:57:05 +0100 Subject: [PATCH 17/32] Fix merge issues --- packages/block-library/src/image/edit.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index 0d2f6791adf2e..8ab944d274fe5 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -200,7 +200,6 @@ export default class ImageEdit extends React.Component { } > {} } /> - {} } /> ); @@ -241,6 +240,7 @@ export default class ImageEdit extends React.Component { return ( + { getInspectorControls() } Date: Thu, 31 Jan 2019 21:06:06 +0100 Subject: [PATCH 18/32] Remove Done button from Image settings bottom sheet --- packages/block-library/src/image/edit.native.js | 7 ------- 1 file changed, 7 deletions(-) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index 865e9a7254609..18ee01dd36e42 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -196,13 +196,6 @@ export default class ImageEdit extends React.Component { isVisible={ this.state.showSettings } title={ __( 'Image Settings' ) } onClose={ onImageSettingsClose } - rightButton={ - - } > {} } /> Date: Thu, 31 Jan 2019 22:13:02 +0100 Subject: [PATCH 19/32] Make bottom-sheet avoid being behind keyboard --- .../components/src/textarea-control/index.native.js | 7 +++++-- .../src/components/mobile/bottom-sheet/cell.native.js | 4 ++-- .../src/components/mobile/bottom-sheet/index.native.js | 10 +++++++--- .../src/components/mobile/bottom-sheet/styles.scss | 5 +++-- 4 files changed, 17 insertions(+), 9 deletions(-) diff --git a/packages/components/src/textarea-control/index.native.js b/packages/components/src/textarea-control/index.native.js index cfbc53a6b0392..7e8dc29761412 100644 --- a/packages/components/src/textarea-control/index.native.js +++ b/packages/components/src/textarea-control/index.native.js @@ -1,21 +1,24 @@ /** * External dependencies */ -import { View, TextInput } from 'react-native'; +import { View, TextInput, KeyboardAvoidingView } from 'react-native'; /** * Internal dependencies */ import BaseControl from '../base-control'; +import styles from './style'; function TextareaControl( { label, value, help, onChange, rows = 4, ...props } ) { return ( - 1 } + textAlignVertical="top" /> ); diff --git a/packages/editor/src/components/mobile/bottom-sheet/cell.native.js b/packages/editor/src/components/mobile/bottom-sheet/cell.native.js index 7ad3a2db4b693..ca57ec004b739 100644 --- a/packages/editor/src/components/mobile/bottom-sheet/cell.native.js +++ b/packages/editor/src/components/mobile/bottom-sheet/cell.native.js @@ -17,8 +17,8 @@ export default function Cell( props ) { return ( - { label } - { value } + { label } + { value } ); } diff --git a/packages/editor/src/components/mobile/bottom-sheet/index.native.js b/packages/editor/src/components/mobile/bottom-sheet/index.native.js index 781eb01337e4c..e8b34b1b07a8e 100644 --- a/packages/editor/src/components/mobile/bottom-sheet/index.native.js +++ b/packages/editor/src/components/mobile/bottom-sheet/index.native.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { Text, View } from 'react-native'; +import { Text, View, KeyboardAvoidingView, Platform } from 'react-native'; import Modal from 'react-native-modal'; import SafeArea from 'react-native-safe-area'; @@ -58,7 +58,10 @@ class BottomSheet extends Component { onSwipe={ this.props.onClose } swipeDirection="down" > - + @@ -78,8 +81,9 @@ class BottomSheet extends Component { { this.props.children } - + + ); } } diff --git a/packages/editor/src/components/mobile/bottom-sheet/styles.scss b/packages/editor/src/components/mobile/bottom-sheet/styles.scss index 1062ebceaa8e3..727bb1f85c5a3 100644 --- a/packages/editor/src/components/mobile/bottom-sheet/styles.scss +++ b/packages/editor/src/components/mobile/bottom-sheet/styles.scss @@ -66,14 +66,15 @@ flex-direction: row; min-height: 50; justify-content: space-between; - padding-left: 12; - padding-right: 12; + margin-left: 12; + margin-right: 12; align-items: center; } .cellLabel { font-size: 18px; color: #000; + margin-right: 12px; } .cellValue { From 30ed40cf83743041a1072dc42ec577b4f20e74c2 Mon Sep 17 00:00:00 2001 From: etoledom Date: Fri, 1 Feb 2019 13:36:53 +0100 Subject: [PATCH 20/32] Fix lint issues --- packages/components/src/base-control/index.native.js | 5 ++--- .../components/src/textarea-control/index.native.js | 11 +++++------ .../components/mobile/bottom-sheet/index.native.js | 6 +++--- 3 files changed, 10 insertions(+), 12 deletions(-) diff --git a/packages/components/src/base-control/index.native.js b/packages/components/src/base-control/index.native.js index 4bd84f7ec3a7d..ddf4067054d83 100644 --- a/packages/components/src/base-control/index.native.js +++ b/packages/components/src/base-control/index.native.js @@ -3,16 +3,15 @@ */ import { Text, View } from 'react-native'; -export default function BaseControl( { id, label, help, className, children } ) { +export default function BaseControl( { label, help, children } ) { return ( { label && { label } } { children } { help && { help } } ); -} \ No newline at end of file +} diff --git a/packages/components/src/textarea-control/index.native.js b/packages/components/src/textarea-control/index.native.js index 7e8dc29761412..059eea86728d7 100644 --- a/packages/components/src/textarea-control/index.native.js +++ b/packages/components/src/textarea-control/index.native.js @@ -1,20 +1,19 @@ /** * External dependencies */ -import { View, TextInput, KeyboardAvoidingView } from 'react-native'; +import { TextInput } from 'react-native'; /** * Internal dependencies */ import BaseControl from '../base-control'; -import styles from './style'; -function TextareaControl( { label, value, help, onChange, rows = 4, ...props } ) { +function TextareaControl( { label, value, help, onChange, rows = 4 } ) { return ( - + 1 } diff --git a/packages/editor/src/components/mobile/bottom-sheet/index.native.js b/packages/editor/src/components/mobile/bottom-sheet/index.native.js index e8b34b1b07a8e..c6b5cf99aaa8e 100644 --- a/packages/editor/src/components/mobile/bottom-sheet/index.native.js +++ b/packages/editor/src/components/mobile/bottom-sheet/index.native.js @@ -58,8 +58,8 @@ class BottomSheet extends Component { onSwipe={ this.props.onClose } swipeDirection="down" > - @@ -83,7 +83,7 @@ class BottomSheet extends Component { - + ); } } From 5c6cd81f92deafcf0ce037ff577e2c0a8f0a9ba7 Mon Sep 17 00:00:00 2001 From: etoledom Date: Fri, 1 Feb 2019 17:10:41 +0100 Subject: [PATCH 21/32] Making BottomSheet.Cell value editable as textinput. --- .../block-library/src/image/edit.native.js | 10 ++---- .../mobile/bottom-sheet/cell.native.js | 31 ++++++++++++++----- .../mobile/bottom-sheet/index.native.js | 1 - .../mobile/bottom-sheet/styles.scss | 1 + 4 files changed, 28 insertions(+), 15 deletions(-) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index bb2a6dcffe353..e17fb4a87a199 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -200,15 +200,11 @@ export default class ImageEdit extends React.Component { {} } /> - { + isValueEditable ? + valueTextInput.focus() : + onPress(); + } return ( - + { icon && ( @@ -40,10 +51,16 @@ export default function Cell( props ) { { label } - { value && ( - - { value } - + { showValue && ( + valueTextInput = c } + numberOfLines={ 1 } + style={ { ...styles.cellValue, ...valueStyle } } + value={ value } + placeholder={ valuePlaceholder } + onChangeText={ onChangeValue } + editable={ isValueEditable } + /> ) } { drawSeparator && ( diff --git a/packages/editor/src/components/mobile/bottom-sheet/index.native.js b/packages/editor/src/components/mobile/bottom-sheet/index.native.js index 5ee6e18190781..e89bc50d44e28 100644 --- a/packages/editor/src/components/mobile/bottom-sheet/index.native.js +++ b/packages/editor/src/components/mobile/bottom-sheet/index.native.js @@ -81,7 +81,6 @@ class BottomSheet extends Component { ) } - { this.props.children } diff --git a/packages/editor/src/components/mobile/bottom-sheet/styles.scss b/packages/editor/src/components/mobile/bottom-sheet/styles.scss index 3d843edeb959c..f02aa77fe4498 100644 --- a/packages/editor/src/components/mobile/bottom-sheet/styles.scss +++ b/packages/editor/src/components/mobile/bottom-sheet/styles.scss @@ -95,4 +95,5 @@ .cellValue { font-size: 18px; color: $dark-gray-400; + text-align: right; } From a3f44ba383bf1c7faa65f2e664ebb3e134477756 Mon Sep 17 00:00:00 2001 From: etoledom Date: Fri, 1 Feb 2019 17:16:36 +0100 Subject: [PATCH 22/32] Remove unnecesary onPress prop from Alt cell. --- packages/block-library/src/image/edit.native.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index e17fb4a87a199..94172e8de4a10 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -203,7 +203,6 @@ export default class ImageEdit extends React.Component { value={ alt || '' } valuePlaceholder={ __( 'None' ) } onChangeValue={ this.updateAlt } - onPress={ () => {} } /> Date: Mon, 4 Feb 2019 09:20:45 +0100 Subject: [PATCH 23/32] Image Settings: Added Link To setting to bottom-sheet --- .../block-library/src/image/edit.native.js | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index 94172e8de4a10..1c70a93de5edf 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -28,6 +28,8 @@ const MEDIA_UPLOAD_STATE_SUCCEEDED = 2; const MEDIA_UPLOAD_STATE_FAILED = 3; const MEDIA_UPLOAD_STATE_RESET = 4; +const LINK_DESTINATION_CUSTOM = 'custom'; + export default class ImageEdit extends React.Component { constructor( props ) { super( props ); @@ -45,6 +47,7 @@ export default class ImageEdit extends React.Component { this.finishMediaUploadWithSuccess = this.finishMediaUploadWithSuccess.bind( this ); this.finishMediaUploadWithFailure = this.finishMediaUploadWithFailure.bind( this ); this.updateAlt = this.updateAlt.bind( this ); + this.onSetLinkDestination = this.onSetLinkDestination.bind( this ); this.onImagePressed = this.onImagePressed.bind( this ); } @@ -133,9 +136,16 @@ export default class ImageEdit extends React.Component { this.props.setAttributes( { alt: newAlt } ); } + onSetLinkDestination( href ) { + this.props.setAttributes( { + linkDestination: LINK_DESTINATION_CUSTOM, + href, + } ); + } + render() { const { attributes, isSelected, setAttributes } = this.props; - const { url, caption, height, width, alt } = attributes; + const { url, caption, height, width, alt, href } = attributes; const onMediaLibraryButtonPressed = () => { requestMediaPickFromMediaLibrary( ( mediaId, mediaUrl ) => { @@ -197,6 +207,13 @@ export default class ImageEdit extends React.Component { onClose={ onImageSettingsClose } hideHeader > + Date: Mon, 4 Feb 2019 09:54:59 +0100 Subject: [PATCH 24/32] BottomSheet desing details --- .../block-library/src/image/edit.native.js | 2 +- .../mobile/bottom-sheet/cell.native.js | 8 +++--- .../mobile/bottom-sheet/styles.scss | 26 ++++++++++++------- 3 files changed, 23 insertions(+), 13 deletions(-) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index 1c70a93de5edf..75b856044acdb 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -223,7 +223,7 @@ export default class ImageEdit extends React.Component { /> {} } /> diff --git a/packages/editor/src/components/mobile/bottom-sheet/cell.native.js b/packages/editor/src/components/mobile/bottom-sheet/cell.native.js index 738010ea5a046..e5719a891ce4e 100644 --- a/packages/editor/src/components/mobile/bottom-sheet/cell.native.js +++ b/packages/editor/src/components/mobile/bottom-sheet/cell.native.js @@ -29,6 +29,7 @@ export default function Cell( props ) { const showValue = value !== undefined; const isValueEditable = onChangeValue !== undefined; const defaultLabelStyle = showValue ? styles.cellLabel : styles.cellLabelCentered; + const separatorStyle = showValue ? styles.cellSeparator : styles.separator; let valueTextInput; const onCellPress = () => { @@ -38,12 +39,12 @@ export default function Cell( props ) { } return ( - + { icon && ( - + ) } @@ -58,13 +59,14 @@ export default function Cell( props ) { style={ { ...styles.cellValue, ...valueStyle } } value={ value } placeholder={ valuePlaceholder } + placeholderTextColor={ '#87a6bc' } onChangeText={ onChangeValue } editable={ isValueEditable } /> ) } { drawSeparator && ( - + ) } ); diff --git a/packages/editor/src/components/mobile/bottom-sheet/styles.scss b/packages/editor/src/components/mobile/bottom-sheet/styles.scss index f02aa77fe4498..83c69b6536f85 100644 --- a/packages/editor/src/components/mobile/bottom-sheet/styles.scss +++ b/packages/editor/src/components/mobile/bottom-sheet/styles.scss @@ -3,6 +3,7 @@ .bottomModal { justify-content: flex-end; margin: 0; + padding: 0; } .dragIndicator { @@ -63,13 +64,20 @@ .cellContainer { flex-direction: row; - min-height: 50; + min-height: 48; justify-content: space-between; - margin-left: 12; - margin-right: 12; + margin-left: 16; + margin-right: 16; align-items: center; } +.cellSeparator { + background-color: #c8d7e1; + height: 1px; + width: 100%; + margin-left: 52px; +} + .cellRowContainer { flex-direction: row; align-items: center; @@ -80,20 +88,20 @@ } .cellLabel { - font-size: 18px; - color: #000; + font-size: 17px; + color: #2e4453; margin-right: 12px; } .cellLabelCentered { - font-size: 18px; - color: #000; + font-size: 17px; + color: #2e4453; flex: 1; text-align: center; } .cellValue { - font-size: 18px; - color: $dark-gray-400; + font-size: 17px; + color: #2e4453; text-align: right; } From 90988081e6d2281cb8f556d199cf268e1db760a2 Mon Sep 17 00:00:00 2001 From: etoledom Date: Mon, 4 Feb 2019 10:38:35 +0100 Subject: [PATCH 25/32] Fix bottom-sheet cell value growing larger than container --- .../mobile/bottom-sheet/cell.native.js | 6 +++--- .../components/mobile/bottom-sheet/styles.scss | 16 +++++----------- 2 files changed, 8 insertions(+), 14 deletions(-) diff --git a/packages/editor/src/components/mobile/bottom-sheet/cell.native.js b/packages/editor/src/components/mobile/bottom-sheet/cell.native.js index e5719a891ce4e..245f4b2ea4276 100644 --- a/packages/editor/src/components/mobile/bottom-sheet/cell.native.js +++ b/packages/editor/src/components/mobile/bottom-sheet/cell.native.js @@ -35,11 +35,11 @@ export default function Cell( props ) { const onCellPress = () => { isValueEditable ? valueTextInput.focus() : - onPress(); + onPress && onPress(); } return ( - + { icon && ( @@ -53,7 +53,7 @@ export default function Cell( props ) { { showValue && ( - valueTextInput = c } numberOfLines={ 1 } style={ { ...styles.cellValue, ...valueStyle } } diff --git a/packages/editor/src/components/mobile/bottom-sheet/styles.scss b/packages/editor/src/components/mobile/bottom-sheet/styles.scss index 83c69b6536f85..fa40c39666db9 100644 --- a/packages/editor/src/components/mobile/bottom-sheet/styles.scss +++ b/packages/editor/src/components/mobile/bottom-sheet/styles.scss @@ -3,14 +3,12 @@ .bottomModal { justify-content: flex-end; margin: 0; - padding: 0; } .dragIndicator { background-color: $light-gray-400; height: 4px; width: 10%; - top: -12px; margin: auto; border-radius: 2px; } @@ -22,9 +20,8 @@ } .content { + padding: 6px 16px 0px 16px; background-color: $white; - padding: 18px 10px 5px 10px; - justify-content: center; border-top-right-radius: 8px; border-top-left-radius: 8px; } @@ -65,17 +62,14 @@ .cellContainer { flex-direction: row; min-height: 48; - justify-content: space-between; - margin-left: 16; - margin-right: 16; align-items: center; } .cellSeparator { - background-color: #c8d7e1; + background-color: $light-gray-400; height: 1px; width: 100%; - margin-left: 52px; + margin-left: 36px; } .cellRowContainer { @@ -84,13 +78,12 @@ } .cellIcon { - padding-right: 30; + padding-right: 0; } .cellLabel { font-size: 17px; color: #2e4453; - margin-right: 12px; } .cellLabelCentered { @@ -104,4 +97,5 @@ font-size: 17px; color: #2e4453; text-align: right; + flex: 1; } From 4643b01e713e050829088d6bb45b7c1115b64f42 Mon Sep 17 00:00:00 2001 From: etoledom Date: Mon, 4 Feb 2019 11:06:02 +0100 Subject: [PATCH 26/32] Bottom-sheet: Fix bottom safe-area inset with keyboard showing --- .../editor/src/components/mobile/bottom-sheet/index.native.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/editor/src/components/mobile/bottom-sheet/index.native.js b/packages/editor/src/components/mobile/bottom-sheet/index.native.js index e89bc50d44e28..d4754a3909dfa 100644 --- a/packages/editor/src/components/mobile/bottom-sheet/index.native.js +++ b/packages/editor/src/components/mobile/bottom-sheet/index.native.js @@ -61,6 +61,7 @@ class BottomSheet extends Component { { hideHeader || ( From 7e391bae54031ad579caa1fd63a052bbde405091 Mon Sep 17 00:00:00 2001 From: etoledom Date: Mon, 4 Feb 2019 11:19:06 +0100 Subject: [PATCH 27/32] Fix lint issues --- packages/block-library/src/image/edit.native.js | 2 +- .../components/mobile/bottom-sheet/cell.native.js | 14 ++++++++------ 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index 94172e8de4a10..daad9b0df5dde 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -17,7 +17,7 @@ import { * Internal dependencies */ import { MediaPlaceholder, RichText, BlockControls, InspectorControls, BottomSheet } from '@wordpress/editor'; -import { Toolbar, ToolbarButton, Spinner, Dashicon, TextareaControl } from '@wordpress/components'; +import { Toolbar, ToolbarButton, Spinner, Dashicon } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import ImageSize from './image-size'; import { isURL } from '@wordpress/url'; diff --git a/packages/editor/src/components/mobile/bottom-sheet/cell.native.js b/packages/editor/src/components/mobile/bottom-sheet/cell.native.js index 738010ea5a046..6dc8ff4b26ef2 100644 --- a/packages/editor/src/components/mobile/bottom-sheet/cell.native.js +++ b/packages/editor/src/components/mobile/bottom-sheet/cell.native.js @@ -32,10 +32,12 @@ export default function Cell( props ) { let valueTextInput; const onCellPress = () => { - isValueEditable ? - valueTextInput.focus() : + if ( isValueEditable ) { + valueTextInput.focus(); + } else { onPress(); - } + } + }; return ( @@ -52,9 +54,9 @@ export default function Cell( props ) { { showValue && ( - valueTextInput = c } - numberOfLines={ 1 } + valueTextInput = c } + numberOfLines={ 1 } style={ { ...styles.cellValue, ...valueStyle } } value={ value } placeholder={ valuePlaceholder } From a6efb9ac6602001ed1d81812a0586d583485a944 Mon Sep 17 00:00:00 2001 From: etoledom Date: Mon, 4 Feb 2019 12:34:47 +0100 Subject: [PATCH 28/32] Adding textinput props to bottom-sheet cell value. --- packages/block-library/src/image/edit.native.js | 1 + .../editor/src/components/mobile/bottom-sheet/cell.native.js | 2 ++ .../editor/src/components/mobile/bottom-sheet/styles.scss | 4 ++-- 3 files changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index 359b1820d37b6..03f29b36bffad 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -213,6 +213,7 @@ export default class ImageEdit extends React.Component { value={ href || '' } valuePlaceholder={ __( 'Add URL' ) } onChangeValue={ this.onSetLinkDestination } + autoCapitalize={ 'none' } /> ) } diff --git a/packages/editor/src/components/mobile/bottom-sheet/styles.scss b/packages/editor/src/components/mobile/bottom-sheet/styles.scss index fa40c39666db9..34724895f1078 100644 --- a/packages/editor/src/components/mobile/bottom-sheet/styles.scss +++ b/packages/editor/src/components/mobile/bottom-sheet/styles.scss @@ -17,6 +17,7 @@ background-color: $light-gray-400; height: 1px; width: 100%; + margin-bottom: 14px; } .content { @@ -57,8 +58,6 @@ // Cell -//Bottom Sheet - .cellContainer { flex-direction: row; min-height: 48; @@ -84,6 +83,7 @@ .cellLabel { font-size: 17px; color: #2e4453; + margin-right: 12px; } .cellLabelCentered { From b0fc6163f63673bf7ca976e9367e7944e681d2d5 Mon Sep 17 00:00:00 2001 From: etoledom Date: Mon, 4 Feb 2019 12:42:56 +0100 Subject: [PATCH 29/32] Removing autocorrect from link-setting text input. --- packages/block-library/src/image/edit.native.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index 03f29b36bffad..9dad8b89ca3ac 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -213,7 +213,8 @@ export default class ImageEdit extends React.Component { value={ href || '' } valuePlaceholder={ __( 'Add URL' ) } onChangeValue={ this.onSetLinkDestination } - autoCapitalize={ 'none' } + autoCapitalize='none' + autoCorrect={ false } /> Date: Mon, 4 Feb 2019 12:51:59 +0100 Subject: [PATCH 30/32] Fix lint issues --- packages/block-library/src/image/edit.native.js | 2 +- .../editor/src/components/mobile/bottom-sheet/cell.native.js | 4 ++-- .../editor/src/components/mobile/bottom-sheet/styles.scss | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index 9dad8b89ca3ac..10d0976186337 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -213,7 +213,7 @@ export default class ImageEdit extends React.Component { value={ href || '' } valuePlaceholder={ __( 'Add URL' ) } onChangeValue={ this.onSetLinkDestination } - autoCapitalize='none' + autoCapitalize="none" autoCorrect={ false } /> { if ( isValueEditable ) { valueTextInput.focus(); - } else { - onPress && onPress(); + } else if ( onPress !== undefined ) { + onPress(); } }; diff --git a/packages/editor/src/components/mobile/bottom-sheet/styles.scss b/packages/editor/src/components/mobile/bottom-sheet/styles.scss index 34724895f1078..139c79d88de56 100644 --- a/packages/editor/src/components/mobile/bottom-sheet/styles.scss +++ b/packages/editor/src/components/mobile/bottom-sheet/styles.scss @@ -21,7 +21,7 @@ } .content { - padding: 6px 16px 0px 16px; + padding: 6px 16px 0 16px; background-color: $white; border-top-right-radius: 8px; border-top-left-radius: 8px; From 0dee9bf3d836a1ec6f8ee58c11c9e2a638c53ba7 Mon Sep 17 00:00:00 2001 From: etoledom Date: Mon, 4 Feb 2019 16:45:50 +0100 Subject: [PATCH 31/32] Fixing label texts on Image Settings bottom-sheet --- packages/block-library/src/image/edit.native.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index 10d0976186337..9cf3e424fffc3 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -209,7 +209,7 @@ export default class ImageEdit extends React.Component { > {} } From 5849829919a047530f1f88d3b23533e1456fcc63 Mon Sep 17 00:00:00 2001 From: etoledom Date: Tue, 5 Feb 2019 17:01:35 +0100 Subject: [PATCH 32/32] Mobile ImageEdit color using global definition. --- packages/block-library/src/image/edit.native.js | 2 +- packages/block-library/src/image/styles.native.scss | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index 9cf3e424fffc3..dcb94957af70c 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -225,7 +225,7 @@ export default class ImageEdit extends React.Component { /> {} } /> diff --git a/packages/block-library/src/image/styles.native.scss b/packages/block-library/src/image/styles.native.scss index 833b8126bfc1a..95dacc3cd4c50 100644 --- a/packages/block-library/src/image/styles.native.scss +++ b/packages/block-library/src/image/styles.native.scss @@ -15,3 +15,7 @@ flex-direction: column; align-items: center; } + +.resetSettingsButton { + color: $alert-red; +}