From ebd884246c1905fec3205f6b1d53de36ea9d4400 Mon Sep 17 00:00:00 2001 From: Tugdual de Kerviler Date: Fri, 14 Jun 2019 12:11:13 +0200 Subject: [PATCH 1/7] Port InlineToolbar to Gutenberg as BlockMobileToolbar --- gutenberg | 2 +- src/block-management/block-holder.js | 66 +++++----------------------- 2 files changed, 11 insertions(+), 57 deletions(-) diff --git a/gutenberg b/gutenberg index 8589bc1733..6e07ee5bee 160000 --- a/gutenberg +++ b/gutenberg @@ -1 +1 @@ -Subproject commit 8589bc1733359aa5cf38dafad195d54c4616b102 +Subproject commit 6e07ee5bee0112917ad5a3b0d8a9f61185c73515 diff --git a/src/block-management/block-holder.js b/src/block-management/block-holder.js index 9832996e32..8afe7b6a3f 100644 --- a/src/block-management/block-holder.js +++ b/src/block-management/block-holder.js @@ -24,7 +24,7 @@ import { withDispatch, withSelect } from '@wordpress/data'; import { compose } from '@wordpress/compose'; import { addAction, hasAction, removeAction } from '@wordpress/hooks'; import { getBlockType } from '@wordpress/blocks'; -import { BlockEdit, BlockInvalidWarning } from '@wordpress/block-editor'; +import { BlockEdit, BlockInvalidWarning, BlockMobileToolbar } from '@wordpress/block-editor'; import { __, sprintf } from '@wordpress/i18n'; import { coreBlocks } from '@wordpress/block-library'; @@ -33,7 +33,6 @@ import { coreBlocks } from '@wordpress/block-library'; */ import type { BlockType } from '../store/types'; import styles from './block-holder.scss'; -import InlineToolbar, { InlineToolbarActions } from './inline-toolbar'; type PropsType = BlockType & { icon: mixed, @@ -70,40 +69,22 @@ export class BlockHolder extends React.Component { constructor( props: PropsType ) { super( props ); + addAction( 'blocks.onRemoveBlockCheckUpload', 'gutenberg-mobile/blocks', requestImageUploadCancel ); + this.state = { isFullyBordered: false, }; } - onFocus = () => { - if ( ! this.props.isSelected ) { - this.props.onSelect(); - } - }; - - onRemoveBlockCheckUpload = ( mediaId: number ) => { + componentWillUnmount() { if ( hasAction( 'blocks.onRemoveBlockCheckUpload' ) ) { - // now remove the action as it's a one-shot use and won't be needed anymore removeAction( 'blocks.onRemoveBlockCheckUpload', 'gutenberg-mobile/blocks' ); - requestImageUploadCancel( mediaId ); } - }; + } - onInlineToolbarButtonPressed = ( button: number ) => { - Keyboard.dismiss(); - switch ( button ) { - case InlineToolbarActions.UP: - this.props.moveBlockUp(); - break; - case InlineToolbarActions.DOWN: - this.props.moveBlockDown(); - break; - case InlineToolbarActions.DELETE: - // adding a action that will exist for as long as it takes for the block to be removed and the component unmounted - // this acts as a flag for the code using the action to know of its existence - addAction( 'blocks.onRemoveBlockCheckUpload', 'gutenberg-mobile/blocks', this.onRemoveBlockCheckUpload ); - this.props.removeBlock(); - break; + onFocus = () => { + if ( ! this.props.isSelected ) { + this.props.onSelect(); } }; @@ -116,21 +97,6 @@ export class BlockHolder extends React.Component { } }; - renderToolbar() { - if ( ! this.props.isSelected ) { - return null; - } - - return ( - - ); - } - getBlockForType() { return ( { } render() { - const { isSelected, borderStyle, focusedBorderColor, isValid, title, icon } = this.props; + const { clientId, isSelected, borderStyle, focusedBorderColor, isValid, title, icon } = this.props; const borderColor = isSelected ? focusedBorderColor : 'transparent'; @@ -207,7 +173,7 @@ export class BlockHolder extends React.Component { } - { this.renderToolbar() } + { isSelected && } @@ -258,9 +224,6 @@ export default compose( [ const { insertBlocks, mergeBlocks, - moveBlocksDown, - moveBlocksUp, - removeBlock, replaceBlocks, selectBlock, updateBlockAttributes, @@ -286,15 +249,6 @@ export default compose( [ } } }, - moveBlockDown() { - moveBlocksDown( ownProps.clientId ); - }, - moveBlockUp() { - moveBlocksUp( ownProps.clientId ); - }, - removeBlock() { - removeBlock( ownProps.clientId ); - }, onInsertBlocks( blocks: Array, index: number ) { insertBlocks( blocks, index, ownProps.rootClientId ); }, From c04dd828b76ceafdd449345f20ef2169fda8c8e6 Mon Sep 17 00:00:00 2001 From: Tugdual de Kerviler Date: Fri, 14 Jun 2019 12:27:49 +0200 Subject: [PATCH 2/7] Fix eslint checks --- src/block-management/block-holder.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/block-management/block-holder.js b/src/block-management/block-holder.js index 8afe7b6a3f..0638cc1400 100644 --- a/src/block-management/block-holder.js +++ b/src/block-management/block-holder.js @@ -11,7 +11,6 @@ import { View, Text, TouchableWithoutFeedback, - Keyboard, } from 'react-native'; import { requestImageUploadCancel, @@ -173,7 +172,7 @@ export class BlockHolder extends React.Component { } - { isSelected && } + { isSelected && } From 6dcf940c004ca466784ef8adaddec25b23ebe3e6 Mon Sep 17 00:00:00 2001 From: Tugdual de Kerviler Date: Fri, 14 Jun 2019 17:31:51 +0200 Subject: [PATCH 3/7] Remove obsolete InlineToolbar component --- .../inline-toolbar/actions.js | 12 -- src/block-management/inline-toolbar/button.js | 50 -------- src/block-management/inline-toolbar/index.js | 118 ------------------ .../inline-toolbar/style.scss | 29 ----- 4 files changed, 209 deletions(-) delete mode 100644 src/block-management/inline-toolbar/actions.js delete mode 100644 src/block-management/inline-toolbar/button.js delete mode 100644 src/block-management/inline-toolbar/index.js delete mode 100644 src/block-management/inline-toolbar/style.scss diff --git a/src/block-management/inline-toolbar/actions.js b/src/block-management/inline-toolbar/actions.js deleted file mode 100644 index f6aceebb6a..0000000000 --- a/src/block-management/inline-toolbar/actions.js +++ /dev/null @@ -1,12 +0,0 @@ -/** - * @format - * @flow - */ - -const InlineToolbarActions = { - UP: 1, - DOWN: 2, - DELETE: 3, -}; - -export default InlineToolbarActions; diff --git a/src/block-management/inline-toolbar/button.js b/src/block-management/inline-toolbar/button.js deleted file mode 100644 index 7c02b4a441..0000000000 --- a/src/block-management/inline-toolbar/button.js +++ /dev/null @@ -1,50 +0,0 @@ -/** @flow - * @format */ - -/** - * External dependencies - */ -import React from 'react'; -import { View, TouchableOpacity } from 'react-native'; - -/** - * WordPress dependencies - */ -import { Dashicon } from '@wordpress/components'; - -/** - * Internal dependencies - */ -import styles from './style.scss'; - -type PropsType = { - disabled: boolean, - icon: string, - onPress: () => void, -}; - -export default class InlineToolbarButton extends React.Component { - static defaultProps = { - disabled: false, - }; - - render() { - const { disabled, icon, onPress } = this.props; - - // There are better ways to write this, but it looks like RNSVG - // can't take an array of styles without crashing so we're doing - // that work instead ¯\_(ツ)_/¯ - let iconStyle = styles.icon; - if ( disabled ) { - iconStyle = { ...iconStyle, ...styles.iconDisabled }; - } - - return ( - - - - - - ); - } -} diff --git a/src/block-management/inline-toolbar/index.js b/src/block-management/inline-toolbar/index.js deleted file mode 100644 index e1f4f9bcdc..0000000000 --- a/src/block-management/inline-toolbar/index.js +++ /dev/null @@ -1,118 +0,0 @@ -/** @flow - * @format */ - -/** - * External dependencies - */ -import React from 'react'; -import { View } from 'react-native'; - -/** - * WordPress dependencies - */ -import { withSelect } from '@wordpress/data'; -import { compose } from '@wordpress/compose'; -import { ToolbarButton } from '@wordpress/components'; -import { __, sprintf } from '@wordpress/i18n'; -import { InspectorControls } from '@wordpress/block-editor'; - -/** - * Internal dependencies - */ -import styles from './style.scss'; -import InlineToolbarActions from './actions'; - -export { InlineToolbarActions }; - -type PropsType = { - canMoveUp: boolean, - canMoveDown: boolean, - onButtonPressed: ( button: number ) => void, - order: number, -}; - -export class InlineToolbar extends React.Component { - constructor() { - super( ...arguments ); - // Flow gets picky about reassigning methods on classes - // https://github.com/facebook/flow/issues/1517#issuecomment-194538151 - ( this: any ).onUpPressed = this.onUpPressed.bind( this ); - ( this: any ).onDownPressed = this.onDownPressed.bind( this ); - ( this: any ).onDeletePressed = this.onDeletePressed.bind( this ); - } - - onUpPressed() { - this.props.onButtonPressed( InlineToolbarActions.UP ); - } - - onDownPressed() { - this.props.onButtonPressed( InlineToolbarActions.DOWN ); - } - - onDeletePressed() { - this.props.onButtonPressed( InlineToolbarActions.DELETE ); - } - - render() { - const { order } = this.props; - const moveUpButtonTitle = this.props.canMoveUp ? sprintf( - /* translators: accessibility text. %1: current block position (number). %2: next block position (number) */ - __( 'Move block up from row %1$s to row %2$s' ), - order, - order - 1 ) : __( 'Move block up' ); - - const moveDownButtonTitle = this.props.canMoveUp ? sprintf( - /* translators: accessibility text. %1: current block position (number). %2: next block position (number) */ - __( 'Move block down from row %1$s to row %2$s' ), - order, - order + 1 ) : __( 'Move block down' ); - - const removeButtonTitle = sprintf( - /* translators: accessibility text. %s: current block position (number). */ - __( 'Remove block at row %s' ), - order ); - - return ( - - - - - - - - - - - - ); - } -} - -export default compose( [ - withSelect( ( select, { clientId } ) => { - const { - getBlockIndex, - } = select( 'core/block-editor' ); - - return { - order: getBlockIndex( clientId ) + 1, - }; - } ), -] )( InlineToolbar ); diff --git a/src/block-management/inline-toolbar/style.scss b/src/block-management/inline-toolbar/style.scss deleted file mode 100644 index 13889c9135..0000000000 --- a/src/block-management/inline-toolbar/style.scss +++ /dev/null @@ -1,29 +0,0 @@ -/** @format */ - -.toolbar { - flex-direction: row; - height: 44px; - align-items: flex-start; - margin-left: 2px; - margin-right: 2px; -} - -.spacer { - flex-grow: 1; -} - -.button { - width: 44px; - height: 44px; - justify-content: center; - align-items: center; -} - -.icon { - color: $toolbar-button; - fill: currentColor; -} - -.iconDisabled { - color: $toolbar-button-disabled; -} \ No newline at end of file From 15a6d00c061679911b669a765520f7305ecab672 Mon Sep 17 00:00:00 2001 From: Tugdual de Kerviler Date: Fri, 14 Jun 2019 17:32:33 +0200 Subject: [PATCH 4/7] Set innerToolbarHeight as a const and update remove hook handling --- gutenberg | 2 +- src/block-management/block-holder.js | 8 -------- src/block-management/block-manager.js | 5 +++-- 3 files changed, 4 insertions(+), 11 deletions(-) diff --git a/gutenberg b/gutenberg index 6e07ee5bee..d4254c489e 160000 --- a/gutenberg +++ b/gutenberg @@ -1 +1 @@ -Subproject commit 6e07ee5bee0112917ad5a3b0d8a9f61185c73515 +Subproject commit d4254c489eafda39c39b6c4841268e14f9454587 diff --git a/src/block-management/block-holder.js b/src/block-management/block-holder.js index 0638cc1400..fc80761283 100644 --- a/src/block-management/block-holder.js +++ b/src/block-management/block-holder.js @@ -68,19 +68,11 @@ export class BlockHolder extends React.Component { constructor( props: PropsType ) { super( props ); - addAction( 'blocks.onRemoveBlockCheckUpload', 'gutenberg-mobile/blocks', requestImageUploadCancel ); - this.state = { isFullyBordered: false, }; } - componentWillUnmount() { - if ( hasAction( 'blocks.onRemoveBlockCheckUpload' ) ) { - removeAction( 'blocks.onRemoveBlockCheckUpload', 'gutenberg-mobile/blocks' ); - } - } - onFocus = () => { if ( ! this.props.isSelected ) { this.props.onSelect(); diff --git a/src/block-management/block-manager.js b/src/block-management/block-manager.js index ff57ffc9dc..112344dbf7 100644 --- a/src/block-management/block-manager.js +++ b/src/block-management/block-manager.js @@ -29,12 +29,13 @@ import BlockHolder from './block-holder'; import type { BlockType } from '../store/types'; import styles from './block-manager.scss'; import blockHolderStyles from './block-holder.scss'; -import inlineToolbarStyles from './inline-toolbar/style.scss'; import toolbarStyles from './block-toolbar.scss'; import HTMLTextInput from '../components/html-text-input'; import BlockToolbar from './block-toolbar'; import SafeArea from 'react-native-safe-area'; +const blockMobileToolbarHeight = 44; + type PropsType = { rootClientId: ?string, blockClientIds: Array, @@ -257,7 +258,7 @@ export class BlockManager extends React.Component { accessibilityLabel="block-list" innerRef={ this.scrollViewInnerRef } blockToolbarHeight={ toolbarStyles.container.height } - innerToolbarHeight={ inlineToolbarStyles.toolbar.height } + innerToolbarHeight={ blockMobileToolbarHeight } safeAreaBottomInset={ this.state.safeAreaBottomInset } parentHeight={ this.state.rootViewHeight } keyboardShouldPersistTaps="always" From 2eec6cd0b89da85e2134e98bc2b17e239fafb772 Mon Sep 17 00:00:00 2001 From: Tugdual de Kerviler Date: Fri, 14 Jun 2019 17:33:37 +0200 Subject: [PATCH 5/7] Cleanup BlockHolder --- src/block-management/block-holder.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/block-management/block-holder.js b/src/block-management/block-holder.js index fc80761283..91f0e9b8fe 100644 --- a/src/block-management/block-holder.js +++ b/src/block-management/block-holder.js @@ -12,16 +12,12 @@ import { Text, TouchableWithoutFeedback, } from 'react-native'; -import { - requestImageUploadCancel, -} from 'react-native-gutenberg-bridge'; /** * WordPress dependencies */ import { withDispatch, withSelect } from '@wordpress/data'; import { compose } from '@wordpress/compose'; -import { addAction, hasAction, removeAction } from '@wordpress/hooks'; import { getBlockType } from '@wordpress/blocks'; import { BlockEdit, BlockInvalidWarning, BlockMobileToolbar } from '@wordpress/block-editor'; import { __, sprintf } from '@wordpress/i18n'; From f12fba3b0be847b773a141a51550cb163a2c214a Mon Sep 17 00:00:00 2001 From: Tugdual de Kerviler Date: Mon, 17 Jun 2019 21:33:04 +0200 Subject: [PATCH 6/7] Update gutenberg ref --- gutenberg | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/gutenberg b/gutenberg index 4de9db12d2..89654e49dd 160000 --- a/gutenberg +++ b/gutenberg @@ -1 +1 @@ -Subproject commit 4de9db12d28cf4eaa00cb5260efa71037e60a51b +Subproject commit 89654e49ddbddffa2f8af624808d0547d4c39b0c From 68a92ce0c115e9951b73752420a2fe43feb24f73 Mon Sep 17 00:00:00 2001 From: Tugdual de Kerviler Date: Tue, 18 Jun 2019 15:54:31 +0200 Subject: [PATCH 7/7] Update gutenberg ref after merge --- gutenberg | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/gutenberg b/gutenberg index 8611c43f27..f7bbf58bcc 160000 --- a/gutenberg +++ b/gutenberg @@ -1 +1 @@ -Subproject commit 8611c43f27f94e8661b8c50da42bb11f2f9c14b5 +Subproject commit f7bbf58bcc9d968f5112a7383c04b3b0aabe189e