Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Refactor BlockToolbar out of BlockList #16677

Merged
merged 24 commits into from
Aug 5, 2019
Merged

Refactor BlockToolbar out of BlockList #16677

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
644e045
Move BlockToolbar from BlockList to Layout
Tug Jul 17, 2019
0dd26db
Remove BlockEditorProvider from BlockList and add native version of E…
Tug Jul 19, 2019
0c7efb4
Revert BlockListAppender and InsertionPoint additions
Tug Jul 19, 2019
7ca3711
Fix dismissing block picker
Tug Jul 19, 2019
c2240cc
Add missing function in BlockList
Tug Jul 19, 2019
416754e
Disable add block in HTML mode and show hide keyboard button only whe…
Tug Jul 21, 2019
bd813eb
Fix bringing back finishInsertingOrReplacingBlock
Tug Jul 21, 2019
1d6fa06
Merge remote-tracking branch 'origin/master' into rnmobile/refactor/b…
Tug Jul 25, 2019
5ece15a
Fix inserting block in first position when post title is selected
Tug Jul 26, 2019
82b5e3c
Show insertion point before block if its replaceable
Tug Jul 26, 2019
24c7348
Fix missing shouldPreventAutomaticScroll props for iOS
Tug Jul 26, 2019
716b47a
Merge remote-tracking branch 'origin/master' into rnmobile/refactor/b…
Tug Jul 29, 2019
d6df25a
Fix native tests
Tug Jul 29, 2019
b81cccf
Add back bottom View to push block list up
Tug Jul 29, 2019
8532b6f
Improve defining toolbar height
Tug Jul 31, 2019
9de00bd
Merge remote-tracking branch 'origin/master' into rnmobile/refactor/b…
Tug Jul 31, 2019
59f0431
Make html view a flexbax
Tug Jul 31, 2019
fb3c590
Quickly hide the modal to let the keyboard show up after inserting a …
Tug Jul 31, 2019
3713aba
Let's unmount the modal instead to make sure we don't have timing errors
Tug Jul 31, 2019
ff28025
revert to defining the toolbar height in the component itsef
Tug Jul 31, 2019
d862d1f
Revert "Make html view a flexbax"
Tug Jul 31, 2019
032ca6d
Simplify layout
Tug Aug 1, 2019
42967a5
Fix dismiss keyboard on iOS
Tug Aug 1, 2019
cb940d4
Merge remote-tracking branch 'origin/master' into rnmobile/refactor/b…
Tug Aug 2, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 0 additions & 3 deletions packages/block-editor/src/components/block-list/block.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,8 +118,6 @@ class BlockListBlock extends Component {
const accessibilityLabel = this.getAccessibilityLabel();

return (
// accessible prop needs to be false to access children
// https://facebook.github.io/react-native/docs/accessibility#accessible-ios-android
<TouchableWithoutFeedback
onPress={ this.onFocus }
accessible={ ! isSelected }
Expand All @@ -138,7 +136,6 @@ class BlockListBlock extends Component {
</View>
{ isSelected && <BlockMobileToolbar clientId={ clientId } /> }
</View>

</TouchableWithoutFeedback>
);
}
Expand Down
149 changes: 26 additions & 123 deletions packages/block-editor/src/components/block-list/index.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,30 +2,26 @@
* External dependencies
*/
import { identity } from 'lodash';
import { Text, View, Keyboard, SafeAreaView, Platform, TouchableWithoutFeedback } from 'react-native';
import { subscribeMediaAppend } from 'react-native-gutenberg-bridge';
import { Text, View, Platform, TouchableWithoutFeedback } from 'react-native';

/**
* WordPress dependencies
*/
import { Component, Fragment } from '@wordpress/element';
import { Component } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { withDispatch, withSelect } from '@wordpress/data';
import { compose } from '@wordpress/compose';
import { createBlock, isUnmodifiedDefaultBlock } from '@wordpress/blocks';
import { HTMLTextInput, KeyboardAvoidingView, KeyboardAwareFlatList, ReadableContentView } from '@wordpress/components';
import { KeyboardAwareFlatList, ReadableContentView } from '@wordpress/components';

/**
* Internal dependencies
*/
import styles from './style.scss';
import BlockListBlock from './block';
import BlockToolbar from '../block-toolbar';
import DefaultBlockAppender from '../default-block-appender';
import Inserter from '../inserter';

const blockMobileToolbarHeight = 44;
const toolbarHeight = 44;
const innerToolbarHeight = 44;

export class BlockList extends Component {
constructor() {
Expand All @@ -34,34 +30,11 @@ export class BlockList extends Component {
this.renderItem = this.renderItem.bind( this );
this.renderAddBlockSeparator = this.renderAddBlockSeparator.bind( this );
this.renderBlockListFooter = this.renderBlockListFooter.bind( this );
this.shouldFlatListPreventAutomaticScroll = this.shouldFlatListPreventAutomaticScroll.bind( this );
this.renderDefaultBlockAppender = this.renderDefaultBlockAppender.bind( this );
this.onBlockTypeSelected = this.onBlockTypeSelected.bind( this );
this.keyboardDidShow = this.keyboardDidShow.bind( this );
this.keyboardDidHide = this.keyboardDidHide.bind( this );
this.onCaretVerticalPositionChange = this.onCaretVerticalPositionChange.bind( this );
this.scrollViewInnerRef = this.scrollViewInnerRef.bind( this );
this.getNewBlockInsertionIndex = this.getNewBlockInsertionIndex.bind( this );

this.state = {
blockTypePickerVisible: false,
isKeyboardVisible: false,
};
}

// TODO: in the near future this will likely be changed to onShowBlockTypePicker and bound to this.props
// once we move the action to the toolbar
showBlockTypePicker( show ) {
this.setState( { blockTypePickerVisible: show } );
}

onBlockTypeSelected( itemValue ) {
this.setState( { blockTypePickerVisible: false } );

// create an empty block of the selected type
const newBlock = createBlock( itemValue );

this.finishBlockAppendingOrReplacing( newBlock );
this.shouldFlatListPreventAutomaticScroll = this.shouldFlatListPreventAutomaticScroll.bind( this );
}

finishBlockAppendingOrReplacing( newBlock ) {
Expand All @@ -88,48 +61,7 @@ export class BlockList extends Component {
}

blockHolderBorderStyle() {
return this.state.isFullyBordered ? styles.blockHolderFullBordered : styles.blockHolderSemiBordered;
}

componentDidMount() {
this._isMounted = true;
Keyboard.addListener( 'keyboardDidShow', this.keyboardDidShow );
Keyboard.addListener( 'keyboardDidHide', this.keyboardDidHide );

this.subscriptionParentMediaAppend = subscribeMediaAppend( ( payload ) => {
// create an empty media block
const newMediaBlock = createBlock( 'core/' + payload.mediaType );

// now set the url and id
if ( payload.mediaType === 'image' ) {
newMediaBlock.attributes.url = payload.mediaUrl;
} else if ( payload.mediaType === 'video' ) {
newMediaBlock.attributes.src = payload.mediaUrl;
}

newMediaBlock.attributes.id = payload.mediaId;

// finally append or replace as appropriate
this.finishBlockAppendingOrReplacing( newMediaBlock );
} );
}

componentWillUnmount() {
Keyboard.removeListener( 'keyboardDidShow', this.keyboardDidShow );
Keyboard.removeListener( 'keyboardDidHide', this.keyboardDidHide );

if ( this.subscriptionParentMediaAppend ) {
this.subscriptionParentMediaAppend.remove();
}
this._isMounted = false;
}

keyboardDidShow() {
this.setState( { isKeyboardVisible: true } );
}

keyboardDidHide() {
this.setState( { isKeyboardVisible: false } );
return this.props.isFullyBordered ? styles.blockHolderFullBordered : styles.blockHolderSemiBordered;
}

onCaretVerticalPositionChange( targetId, caretY, previousCaretY ) {
Expand All @@ -141,7 +73,7 @@ export class BlockList extends Component {
}

shouldFlatListPreventAutomaticScroll() {
return this.state.blockTypePickerVisible;
return this.props.isBlockInsertionPointVisible;
}

renderDefaultBlockAppender() {
Expand All @@ -159,7 +91,7 @@ export class BlockList extends Component {
);
}

renderList() {
render() {
return (
<View
style={ { flex: 1 } }
Expand All @@ -169,10 +101,7 @@ export class BlockList extends Component {
{ ...( Platform.OS === 'android' ? { removeClippedSubviews: false } : {} ) } // Disable clipping on Android to fix focus losing. See https://github.com/wordpress-mobile/gutenberg-mobile/pull/741#issuecomment-472746541
accessibilityLabel="block-list"
innerRef={ this.scrollViewInnerRef }
blockToolbarHeight={ toolbarHeight }
innerToolbarHeight={ blockMobileToolbarHeight }
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we need this to be able to show the block toolbar when we are focused on the last line of the text

safeAreaBottomInset={ this.props.safeAreaBottomInset }
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we need this to be able to scroll properly in iPhone X variety devices

parentHeight={ this.props.rootViewHeight }
extraScrollHeight={ innerToolbarHeight + 10 }
Copy link
Contributor

@pinarol pinarol Aug 6, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what does "+10" refer to?

keyboardShouldPersistTaps="always"
style={ styles.list }
data={ this.props.blockClientIds }
Expand All @@ -185,53 +114,21 @@ export class BlockList extends Component {
ListEmptyComponent={ this.renderDefaultBlockAppender }
ListFooterComponent={ this.renderBlockListFooter }
/>
<SafeAreaView>
<View style={ { height: toolbarHeight } } />
</SafeAreaView>
<KeyboardAvoidingView
style={ styles.blockToolbarKeyboardAvoidingView }
parentHeight={ this.props.rootViewHeight }
>
<BlockToolbar
onInsertClick={ () => {
this.showBlockTypePicker( true );
} }
showKeyboardHideButton={ this.state.isKeyboardVisible }
/>
</KeyboardAvoidingView>
</View>
);
}

render() {
return (
<Fragment>
{ this.renderList() }
{ this.state.blockTypePickerVisible && (
<Inserter
onDismiss={ () => this.showBlockTypePicker( false ) }
onValueSelected={ this.onBlockTypeSelected }
isReplacement={ this.isReplaceable( this.props.selectedBlock ) }
addExtraBottomPadding={ this.props.safeAreaBottomInset === 0 }
/>
) }
</Fragment>
);
}

isReplaceable( block ) {
if ( ! block ) {
return false;
}
return isUnmodifiedDefaultBlock( block );
}

renderItem( { item: clientId, index } ) {
const shouldShowAddBlockSeparator = this.state.blockTypePickerVisible && ( this.props.isBlockSelected( clientId ) || ( index === 0 && this.props.isPostTitleSelected ) );
const shouldPutAddBlockSeparatorAboveBlock = this.isReplaceable( this.props.selectedBlock ) || this.props.isPostTitleSelected;

renderItem( { item: clientId } ) {
return (
<ReadableContentView reversed={ shouldPutAddBlockSeparatorAboveBlock }>
<ReadableContentView>
{ this.props.shouldShowInsertionPoint( clientId ) && this.renderAddBlockSeparator() }
<BlockListBlock
key={ clientId }
showTitle={ false }
Expand All @@ -241,7 +138,6 @@ export class BlockList extends Component {
borderStyle={ this.blockHolderBorderStyle() }
focusedBorderColor={ styles.blockHolderFocused.borderColor }
/>
{ shouldShowAddBlockSeparator && this.renderAddBlockSeparator() }
</ReadableContentView>
);
}
Expand All @@ -266,12 +162,6 @@ export class BlockList extends Component {
</TouchableWithoutFeedback>
);
}

renderHTML() {
return (
<HTMLTextInput { ...this.props } parentHeight={ this.props.rootViewHeight } />
);
}
}

export default compose( [
Expand All @@ -284,15 +174,28 @@ export default compose( [
getSelectedBlock,
getSelectedBlockClientId,
isBlockSelected,
getBlockInsertionPoint,
isBlockInsertionPointVisible,
} = select( 'core/block-editor' );

const selectedBlockClientId = getSelectedBlockClientId();
const blockClientIds = getBlockOrder( rootClientId );
const insertionPoint = getBlockInsertionPoint();
const shouldShowInsertionPoint = ( clientId ) => {
return (
isBlockInsertionPointVisible() &&
insertionPoint.rootClientId === rootClientId &&
blockClientIds[ insertionPoint.index ] === clientId
);
};

return {
blockClientIds: getBlockOrder( rootClientId ),
blockClientIds,
blockCount: getBlockCount( rootClientId ),
getBlockName,
isBlockSelected,
isBlockInsertionPointVisible: isBlockInsertionPointVisible(),
shouldShowInsertionPoint,
selectedBlock: getSelectedBlock(),
selectedBlockClientId,
selectedBlockOrder: getBlockIndex( selectedBlockClientId ),
Expand Down
8 changes: 0 additions & 8 deletions packages/block-editor/src/components/block-list/style.native.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,13 +40,6 @@
background-color: $white;
}

.blockToolbarKeyboardAvoidingView {
position: absolute;
bottom: 0;
right: 0;
left: 0;
}

.blockHolderSemiBordered {
border-top-width: 1px;
border-bottom-width: 1px;
Expand All @@ -61,7 +54,6 @@
border-right-width: 1px;
}


.blockContainerFocused {
background-color: $white;
padding-left: 16;
Expand Down
Loading