[RNMobile] Buttons block (#20191)

* Merge Button changes into Buttons block * Correct expanding button inside buttons * Adjust logic for removing last button from buttons * Correct styles import * Refactor adding Button logic inside Buttons * Correct appender * Correct flex prop initial value * Pass flex prop, correct styles * Add functionality for custom onDelete * Create customOnAdd function * Unblock Buttons for testing * Revert inserter changes * Do not display insertion line * Inline appender refactor * Refactor icons and focusing richtext * Correct inline appender and fix deleting behavior * Support created before Buttons, change dimmed opacity value * Pass prop for rendering footer appender * Refactor setting maxWidth function * Correct setting maxWidth condition * Remove redundant logic to fix test, set dimming opacity to 1.0 * Correct current logic for Android * Try avoid buttons jumping * Adjust Button for Android * Avoid setting state in onLayout frequently * Revert opacity changes, refactor alignment styles * Correct isFlex prop * Adjust Buttons after bordering * Correct buttons styles * Correct border on Android * Refactor on add/remove block func, move horizontal alignment * Refactor alignment options * Use useResizeObserver for calculating parent widt * Refactor useResizeObserver usage * onDelete function refactor * Calculate placeholder text width * Simplify getPlaceholdeWith function * Refactor floating appender,rename horizontalDirection into isStackedHorizontally * Add renderFooterAppender
WordPress · Apr 20, 2020 · 3ce4265 · 3ce4265
1 parent 4f17612
commit 3ce4265
Show file tree

Hide file tree

Showing 17 changed files with 389 additions and 72 deletions.
diff --git a/packages/block-editor/src/components/block-list/block.native.js b/packages/block-editor/src/components/block-list/block.native.js
@@ -66,7 +66,9 @@ class BlockListBlock extends Component {
 					this.props.onCaretVerticalPositionChange
 				}
 				clientId={ this.props.clientId }
+				parentWidth={ this.props.parentWidth }
 				contentStyle={ this.props.contentStyle }
+				onDeleteBlock={ this.props.onDeleteBlock }
 			/>
 		);
 	}
@@ -93,7 +95,7 @@ class BlockListBlock extends Component {
 			isDimmed,
 			isTouchable,
 			onDeleteBlock,
-			horizontalDirection,
+			isStackedHorizontally,
 			hasParent,
 			isParentSelected,
 			onSelect,
@@ -180,7 +182,9 @@ class BlockListBlock extends Component {
 								<BlockMobileToolbar
 									clientId={ clientId }
 									onDelete={ onDeleteBlock }
-									horizontalDirection={ horizontalDirection }
+									isStackedHorizontally={
+										isStackedHorizontally
+									}
 								/>
 							) }
 						</View>

diff --git a/packages/block-editor/src/components/block-list/index.native.js b/packages/block-editor/src/components/block-list/index.native.js
@@ -86,6 +86,7 @@ export class BlockList extends Component {
 
 	shouldShowInnerBlockAppender() {
 		const { blockClientIds, renderAppender } = this.props;
+
 		return renderAppender && blockClientIds.length > 0;
 	}
 
@@ -95,14 +96,15 @@ export class BlockList extends Component {
 			blockClientIds,
 			title,
 			header,
-			withFooter = true,
 			isReadOnly,
 			isRootList,
 			horizontal,
 			shouldShowInsertionPointBefore,
 			shouldShowInsertionPointAfter,
 			marginVertical = styles.defaultBlock.marginTop,
 			marginHorizontal = styles.defaultBlock.marginLeft,
+			isStackedHorizontally,
+			horizontalAlignment,
 		} = this.props;
 
 		const { blockToolbar, blockBorder, headerToolbar } = styles;
@@ -143,7 +145,12 @@ export class BlockList extends Component {
 					contentContainerStyle={
 						horizontal && styles.horizontalContentContainer
 					}
-					style={ ! isRootList && styles.overflowVisible }
+					style={ [
+						! isRootList && styles.overflowVisible,
+						isStackedHorizontally && styles.horizontal,
+						horizontalAlignment &&
+							styles[ `is-aligned-${ horizontalAlignment }` ],
+					] }
 					data={ blockClientIds }
 					keyExtractor={ identity }
 					extraData={ forceRefresh }
@@ -156,9 +163,7 @@ export class BlockList extends Component {
 					ListEmptyComponent={
 						! isReadOnly && this.renderDefaultBlockAppender
 					}
-					ListFooterComponent={
-						! isReadOnly && withFooter && this.renderBlockListFooter
-					}
+					ListFooterComponent={ this.renderBlockListFooter }
 				/>
 
 				{ this.shouldShowInnerBlockAppender() && (
@@ -187,7 +192,7 @@ export class BlockList extends Component {
 			shouldShowInsertionPointAfter,
 			marginVertical = styles.defaultBlock.marginTop,
 			marginHorizontal = styles.defaultBlock.marginLeft,
-			horizontalDirection,
+			isStackedHorizontally,
 			contentResizeMode,
 			contentStyle,
 			onAddBlock,
@@ -217,7 +222,8 @@ export class BlockList extends Component {
 						onCaretVerticalPositionChange={
 							this.onCaretVerticalPositionChange
 						}
-						horizontalDirection={ horizontalDirection }
+						parentWidth={ this.props.parentWidth }
+						isStackedHorizontally={ isStackedHorizontally }
 						contentStyle={ contentStyle }
 						onAddBlock={ onAddBlock }
 						onDeleteBlock={ onDeleteBlock }
@@ -233,18 +239,29 @@ export class BlockList extends Component {
 
 	renderBlockListFooter() {
 		const paragraphBlock = createBlock( 'core/paragraph' );
-		return (
-			<>
-				<TouchableWithoutFeedback
-					accessibilityLabel={ __( 'Add paragraph block' ) }
-					onPress={ () => {
-						this.addBlockToEndOfPost( paragraphBlock );
-					} }
-				>
-					<View style={ styles.blockListFooter } />
-				</TouchableWithoutFeedback>
-			</>
-		);
+		const {
+			isReadOnly,
+			withFooter = true,
+			renderFooterAppender,
+		} = this.props;
+
+		if ( ! isReadOnly && withFooter ) {
+			return (
+				<>
+					<TouchableWithoutFeedback
+						accessibilityLabel={ __( 'Add paragraph block' ) }
+						onPress={ () => {
+							this.addBlockToEndOfPost( paragraphBlock );
+						} }
+					>
+						<View style={ styles.blockListFooter } />
+					</TouchableWithoutFeedback>
+				</>
+			);
+		} else if ( renderFooterAppender ) {
+			return renderFooterAppender();
+		}
+		return null;
 	}
 }
 
@@ -259,7 +276,7 @@ export default compose( [
 			getSettings,
 		} = select( 'core/block-editor' );
 
-		const horizontalDirection =
+		const isStackedHorizontally =
 			__experimentalMoverDirection === 'horizontal';
 
 		const selectedBlockClientId = getSelectedBlockClientId();
@@ -268,7 +285,7 @@ export default compose( [
 		const blockInsertionPointIsVisible = isBlockInsertionPointVisible();
 		const shouldShowInsertionPointBefore = ( clientId ) => {
 			return (
-				! horizontalDirection &&
+				! isStackedHorizontally &&
 				blockInsertionPointIsVisible &&
 				insertionPoint.rootClientId === rootClientId &&
 				// if list is empty, show the insertion point (via the default appender)
@@ -279,7 +296,7 @@ export default compose( [
 		};
 		const shouldShowInsertionPointAfter = ( clientId ) => {
 			return (
-				! horizontalDirection &&
+				! isStackedHorizontally &&
 				blockInsertionPointIsVisible &&
 				insertionPoint.rootClientId === rootClientId &&
 				// if the insertion point is at the end of the list
@@ -300,7 +317,7 @@ export default compose( [
 			selectedBlockClientId,
 			isReadOnly,
 			isRootList: rootClientId === undefined,
-			horizontalDirection,
+			isStackedHorizontally,
 		};
 	} ),
 	withDispatch( ( dispatch ) => {

diff --git a/packages/block-editor/src/components/block-list/style.native.scss b/packages/block-editor/src/components/block-list/style.native.scss
@@ -81,6 +81,23 @@
 	height: $mobile-block-toolbar-height;
 }
 
+.horizontal {
+	flex-direction: row;
+	flex-wrap: wrap;
+}
+
+.is-aligned-left {
+	justify-content: flex-start;
+}
+
+.is-aligned-center {
+	justify-content: center;
+}
+
+.is-aligned-right {
+	justify-content: flex-end;
+}
+
 .overflowVisible {
 	overflow: visible;
 }
diff --git a/packages/block-editor/src/components/block-mobile-toolbar/index.native.js b/packages/block-editor/src/components/block-mobile-toolbar/index.native.js
@@ -23,12 +23,12 @@ const BlockMobileToolbar = ( {
 	clientId,
 	onDelete,
 	order,
-	horizontalDirection,
+	isStackedHorizontally,
 } ) => (
 	<View style={ styles.toolbar }>
 		<BlockMover
 			clientIds={ [ clientId ] }
-			horizontalDirection={ horizontalDirection }
+			isStackedHorizontally={ isStackedHorizontally }
 		/>
 
 		<View style={ styles.spacer } />

diff --git a/packages/block-editor/src/components/block-mover/index.native.js b/packages/block-editor/src/components/block-mover/index.native.js
@@ -52,7 +52,7 @@ const BlockMover = ( {
 	onMoveUp,
 	firstIndex,
 	rootClientId,
-	horizontalDirection,
+	isStackedHorizontally,
 } ) => {
 	const {
 		backwardButtonIcon,
@@ -61,7 +61,7 @@ const BlockMover = ( {
 		forwardButtonHint,
 		firstBlockTitle,
 		lastBlockTitle,
-	} = horizontalDirection ? horizontalMover : verticalMover;
+	} = isStackedHorizontally ? horizontalMover : verticalMover;
 
 	if ( isLocked || ( isFirst && isLast && ! rootClientId ) ) {
 		return null;
@@ -72,7 +72,7 @@ const BlockMover = ( {
 		forwardButtonProp,
 		backwardButtonProp
 	) => {
-		if ( isRTL && horizontalDirection ) {
+		if ( isRTL && isStackedHorizontally ) {
 			// for RTL and horizontal direction switch prop between forward and backward button
 			if ( isBackwardButton ) {
 				return forwardButtonProp; // set forwardButtonProp for backward button
@@ -89,9 +89,10 @@ const BlockMover = ( {
 		const direction = isBackwardButton ? -1 : 1;
 		const toIndex = fromIndex + direction; // position after move
 
-		const { backwardButtonTitle, forwardButtonTitle } = horizontalDirection
-			? horizontalMover
-			: verticalMover;
+		const {
+			backwardButtonTitle,
+			forwardButtonTitle,
+		} = isStackedHorizontally ? horizontalMover : verticalMover;
 
 		const buttonTitle = switchButtonPropIfRTL(
 			isBackwardButton,

diff --git a/packages/block-editor/src/components/button-block-appender/index.native.js b/packages/block-editor/src/components/button-block-appender/index.native.js
@@ -20,6 +20,7 @@ function ButtonBlockAppender( {
 	rootClientId,
 	getStylesFromColorScheme,
 	showSeparator,
+	isFloating = false,
 	onAddBlock,
 } ) {
 	const appenderStyle = {
@@ -31,7 +32,9 @@ function ButtonBlockAppender( {
 	};
 	const addBlockButtonStyle = getStylesFromColorScheme(
 		styles.addBlockButton,
-		styles.addBlockButtonDark
+		isFloating
+			? styles.floatingAddBlockButtonDark
+			: styles.addBlockButtonDark
 	);
 
 	return (
@@ -45,7 +48,12 @@ function ButtonBlockAppender( {
 						disabled={ disabled }
 						fixedRatio={ false }
 					>
-						<View style={ appenderStyle }>
+						<View
+							style={ [
+								appenderStyle,
+								isFloating && styles.floatingAppender,
+							] }
+						>
 							<Icon
 								icon={ plusCircleFilled }
 								style={ addBlockButtonStyle }

diff --git a/packages/block-editor/src/components/button-block-appender/styles.native.scss b/packages/block-editor/src/components/button-block-appender/styles.native.scss
@@ -8,6 +8,12 @@
 	border-radius: 4px;
 }
 
+.floatingAppender {
+	flex: none;
+	background-color: transparent;
+	border-width: 0;
+}
+
 .appenderLight {
 	background-color: $white;
 	border: $border-width solid $light-gray-500;
@@ -30,3 +36,8 @@
 	color: $background-dark-secondary;
 	background-color: $gray-40;
 }
+
+.floatingAddBlockButtonDark {
+	color: $black;
+	background-color: $gray-40;
+}
diff --git a/packages/block-editor/src/components/inner-blocks/button-block-appender.js b/packages/block-editor/src/components/inner-blocks/button-block-appender.js
@@ -7,12 +7,14 @@ import withClientId from './with-client-id';
 export const ButtonBlockAppender = ( {
 	clientId,
 	showSeparator,
+	isFloating,
 	onAddBlock,
 } ) => {
 	return (
 		<BaseButtonBlockAppender
 			rootClientId={ clientId }
 			showSeparator={ showSeparator }
+			isFloating={ isFloating }
 			onAddBlock={ onAddBlock }
 		/>
 	);

diff --git a/packages/block-editor/src/components/inner-blocks/index.native.js b/packages/block-editor/src/components/inner-blocks/index.native.js
@@ -20,10 +20,6 @@ import { compose } from '@wordpress/compose';
  */
 import ButtonBlockAppender from './button-block-appender';
 import DefaultBlockAppender from './default-block-appender';
-
-/**
- * Internal dependencies
- */
 import BlockList from '../block-list';
 import { withBlockEditContext } from '../block-edit/context';
 
@@ -112,14 +108,17 @@ class InnerBlocks extends Component {
 		const {
 			clientId,
 			renderAppender,
+			renderFooterAppender,
 			__experimentalMoverDirection,
+			parentWidth,
 			horizontal,
 			contentResizeMode,
 			contentStyle,
 			onAddBlock,
 			onDeleteBlock,
 			marginVertical,
 			marginHorizontal,
+			horizontalAlignment,
 		} = this.props;
 		const { templateInProcess } = this.state;
 
@@ -131,10 +130,13 @@ class InnerBlocks extends Component {
 						marginHorizontal={ marginHorizontal }
 						rootClientId={ clientId }
 						renderAppender={ renderAppender }
+						renderFooterAppender={ renderFooterAppender }
 						withFooter={ false }
 						__experimentalMoverDirection={
 							__experimentalMoverDirection
 						}
+						parentWidth={ parentWidth }
+						horizontalAlignment={ horizontalAlignment }
 						horizontal={ horizontal }
 						contentResizeMode={ contentResizeMode }
 						contentStyle={ contentStyle }

diff --git a/packages/block-editor/src/hooks/index.native.js b/packages/block-editor/src/hooks/index.native.js
@@ -1,6 +1,8 @@
 /**
  * Internal dependencies
  */
+export { AlignmentHookSettingsProvider } from './align';
+
 import './custom-class-name';
 import './generated-class-name';
 import './style';