From 178648e592ccd61dbf5642f0149efe39ea7db24b Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Thu, 10 Sep 2020 21:47:38 +0200 Subject: [PATCH 01/92] Add custom header to BottomSheet --- .../src/mobile/bottom-sheet/index.native.js | 34 +++++++++++-------- 1 file changed, 19 insertions(+), 15 deletions(-) diff --git a/packages/components/src/mobile/bottom-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/index.native.js index c937aad9773e43..6c651427f8af2d 100644 --- a/packages/components/src/mobile/bottom-sheet/index.native.js +++ b/packages/components/src/mobile/bottom-sheet/index.native.js @@ -279,6 +279,7 @@ class BottomSheet extends Component { isVisible, leftButton, rightButton, + header, hideHeader, style = {}, contentStyle = {}, @@ -353,21 +354,24 @@ class BottomSheet extends Component { const WrapperView = hasNavigation ? View : ScrollView; - const getHeader = () => ( - <> - - { leftButton } - - { title } - - { rightButton } - - { withHeaderSeparator && } - - ); + const getHeader = () => + header || ( + <> + + { leftButton } + + { title } + + { rightButton } + + { withHeaderSeparator && ( + + ) } + + ); return ( Date: Thu, 10 Sep 2020 21:48:29 +0200 Subject: [PATCH 02/92] SegmentedControl mobile component exported --- packages/components/src/index.native.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/src/index.native.js b/packages/components/src/index.native.js index 6c96e9e646b91a..b86fdaf2cc486f 100644 --- a/packages/components/src/index.native.js +++ b/packages/components/src/index.native.js @@ -78,6 +78,7 @@ export { default as LinkPickerScreen } from './mobile/link-picker/link-picker-sc export { default as LinkSettings } from './mobile/link-settings'; export { default as LinkSettingsScreen } from './mobile/link-settings/link-settings-screen'; export { default as LinkSettingsNavigation } from './mobile/link-settings/link-settings-navigation'; +export { default as SegmentedControl } from './mobile/segmented-control'; export { default as Image, IMAGE_DEFAULT_FOCAL_POINT } from './mobile/image'; export { default as ImageEditingButton } from './mobile/image/image-editing-button'; export { default as InserterButton } from './mobile/inserter-button'; From 463c2575c74efddf674c1582ebbec03c93678a79 Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Thu, 10 Sep 2020 21:56:27 +0200 Subject: [PATCH 03/92] Add Reusable blocks to inserter menu with tabs --- .../src/components/inserter/menu.native.js | 132 +++++++++++++----- .../src/components/inserter/style.native.scss | 1 + 2 files changed, 98 insertions(+), 35 deletions(-) diff --git a/packages/block-editor/src/components/inserter/menu.native.js b/packages/block-editor/src/components/inserter/menu.native.js index 1e466713e5bb95..9d38883052affa 100644 --- a/packages/block-editor/src/components/inserter/menu.native.js +++ b/packages/block-editor/src/components/inserter/menu.native.js @@ -1,3 +1,8 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; + /** * External dependencies */ @@ -26,6 +31,7 @@ import { BottomSheetConsumer, InserterButton, getClipboard, + SegmentedControl, } from '@wordpress/components'; /** @@ -34,6 +40,7 @@ import { import styles from './style.scss'; const MIN_COL_NUM = 3; +const TABS = [ __( 'Child Blocks' ), __( 'Reusable blocks' ) ]; export class InserterMenu extends Component { constructor() { @@ -41,9 +48,15 @@ export class InserterMenu extends Component { this.onClose = this.onClose.bind( this ); this.onLayout = this.onLayout.bind( this ); + this.onChangeTab = this.onChangeTab.bind( this ); this.renderItem = this.renderItem.bind( this ); + this.renderBlocksTab = this.renderBlocksTab.bind( this ); + this.renderReusableBlocksTab = this.renderReusableBlocksTab.bind( + this + ); this.state = { numberOfColumns: MIN_COL_NUM, + tab: 0, }; Dimensions.addEventListener( 'change', this.onLayout ); @@ -116,21 +129,25 @@ export class InserterMenu extends Component { this.setState( { numberOfColumns, itemWidth, maxWidth } ); } + onChangeTab( tab ) { + this.setState( { tab: TABS.indexOf( tab ) } ); + } + /** * Processes the inserter items to check * if there's any copied block in the clipboard * to add it as an extra item */ - getItems() { + getBlockItems() { const { - items: initialItems, + items, canInsertBlockType, destinationRootClientId, getBlockType, } = this.props; // Filter out reusable blocks (they will be added in another tab) - const items = initialItems.filter( + const blockItems = items.filter( ( { name } ) => name !== 'core/block' ); @@ -152,9 +169,15 @@ export class InserterMenu extends Component { initialAttributes: clipboardBlock.attributes, innerBlocks: clipboardBlock.innerBlocks, }, - ...items, + ...blockItems, ] - : items; + : blockItems; + } + + getReusableBlockItems() { + const { items } = this.props; + + return items.filter( ( { name } ) => name === 'core/block' ); } renderItem( { item } ) { @@ -170,46 +193,85 @@ export class InserterMenu extends Component { ); } - render() { + renderBlocksTab( listProps ) { const { numberOfColumns } = this.state; - const items = this.getItems(); + const items = this.getBlockItems(); + + return ( + ( + + + + ) } + keyExtractor={ ( item ) => item.name } + renderItem={ this.renderItem } + { ...listProps } + /> + ); + } + + renderReusableBlocksTab( listProps ) { + const { numberOfColumns } = this.state; + const items = this.getReusableBlockItems(); + + return ( + ( + + + + ) } + keyExtractor={ ( item ) => item.name } + renderItem={ this.renderItem } + { ...listProps } + /> + ); + } + + render() { + const { tab } = this.state; + const reusableBlockItems = this.getReusableBlockItems(); + + const hideHeader = reusableBlockItems.length === 0; return ( + } + hideHeader={ hideHeader } hasNavigation + contentStyle={ styles.list } + isChildrenScrollable > - { ( { listProps, safeAreaBottomInset } ) => ( - ( - - - - ) } - keyExtractor={ ( item ) => item.name } - renderItem={ this.renderItem } - { ...listProps } - contentContainerStyle={ [ - ...listProps.contentContainerStyle, - { - paddingBottom: - safeAreaBottomInset || - styles.list.paddingBottom, - }, - ] } - /> - ) } + { ( { listProps } ) => { + switch ( tab ) { + case 0: + return this.renderBlocksTab( listProps ); + case 1: + return this.renderReusableBlocksTab( + listProps + ); + } + } } diff --git a/packages/block-editor/src/components/inserter/style.native.scss b/packages/block-editor/src/components/inserter/style.native.scss index 77456c9587d1dd..5a1fe9ded51382 100644 --- a/packages/block-editor/src/components/inserter/style.native.scss +++ b/packages/block-editor/src/components/inserter/style.native.scss @@ -18,4 +18,5 @@ .list { padding-bottom: 20; + padding-top: 8; } From 0e164f53a46d53397309f632ef36c4435b1fb093 Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Mon, 14 Sep 2020 22:10:51 +0200 Subject: [PATCH 04/92] Add native version of inserter-list-item --- .../inserter-list-item/index.native.js | 84 +++++++++++++++++++ .../inserter-list-item/style.native.scss | 63 ++++++++++++++ 2 files changed, 147 insertions(+) create mode 100644 packages/block-editor/src/components/inserter-list-item/index.native.js create mode 100644 packages/block-editor/src/components/inserter-list-item/style.native.scss diff --git a/packages/block-editor/src/components/inserter-list-item/index.native.js b/packages/block-editor/src/components/inserter-list-item/index.native.js new file mode 100644 index 00000000000000..185d97963e4ae4 --- /dev/null +++ b/packages/block-editor/src/components/inserter-list-item/index.native.js @@ -0,0 +1,84 @@ +/** + * External dependencies + */ +import { View, TouchableHighlight, Text } from 'react-native'; + +/** + * WordPress dependencies + */ +import { Component } from '@wordpress/element'; +import { Icon } from '@wordpress/components'; +import { withPreferredColorScheme } from '@wordpress/compose'; +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import styles from './style.scss'; + +function InserterListItem( { + getStylesFromColorScheme, + item, + itemWidth, + maxWidth, + onSelect, +} ) { + const onPress = () => { + onSelect( item ); + }; + + const modalIconWrapperStyle = getStylesFromColorScheme( + styles.modalIconWrapper, + styles.modalIconWrapperDark + ); + const modalIconStyle = getStylesFromColorScheme( + styles.modalIcon, + styles.modalIconDark + ); + const modalItemLabelStyle = getStylesFromColorScheme( + styles.modalItemLabel, + styles.modalItemLabelDark + ); + + const clipboardBlockStyles = getStylesFromColorScheme( + styles.clipboardBlock, + styles.clipboardBlockDark + ); + + const isClipboardBlock = item.id === 'clipboard'; + + return ( + + + + + + + + + { isClipboardBlock ? __( 'Copied block' ) : item.title } + + + + ); +} + +export default withPreferredColorScheme( InserterListItem ); diff --git a/packages/block-editor/src/components/inserter-list-item/style.native.scss b/packages/block-editor/src/components/inserter-list-item/style.native.scss new file mode 100644 index 00000000000000..48836bf4888475 --- /dev/null +++ b/packages/block-editor/src/components/inserter-list-item/style.native.scss @@ -0,0 +1,63 @@ +.touchableArea { + border-radius: 8px 8px 8px 8px; +} + +.modalItem { + flex-direction: column; + justify-content: flex-start; + align-items: center; + padding-left: $grid-unit-20 / 2; + padding-right: $grid-unit-20 / 2; + padding-top: 0; + padding-bottom: 0; +} + +.modalIconWrapper { + width: 104px; + height: 64px; + background-color: $gray-light; //#f3f6f8 + border-radius: 8px 8px 8px 8px; + justify-content: center; + align-items: center; +} + +.modalIconWrapperDark { + background-color: rgba( $white, 0.07 ); +} + +.modalIcon { + width: 32px; + height: 32px; + justify-content: center; + align-items: center; + fill: $gray-dark; +} + +.modalIconDark { + fill: $white; +} + +.modalItemLabel { + background-color: transparent; + padding-left: 2; + padding-right: 2; + padding-top: 4; + padding-bottom: 0; + justify-content: center; + font-size: 12; + color: $gray-dark; +} + +.modalItemLabelDark { + color: $white; +} + +.clipboardBlock { + background-color: transparent; + border-width: 1px; + border-color: $light-gray-400; +} + +.clipboardBlockDark { + border-color: $gray-70; +} From c081f764847342bf8547ee76ec9dd05823eaf417 Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Tue, 15 Sep 2020 21:23:03 +0200 Subject: [PATCH 05/92] Add mobile version of block-types-list component --- .../block-types-list/index.native.js | 120 ++++++++++++++++++ .../block-types-list/style.native.scss | 7 + 2 files changed, 127 insertions(+) create mode 100644 packages/block-editor/src/components/block-types-list/index.native.js create mode 100644 packages/block-editor/src/components/block-types-list/style.native.scss diff --git a/packages/block-editor/src/components/block-types-list/index.native.js b/packages/block-editor/src/components/block-types-list/index.native.js new file mode 100644 index 00000000000000..fecd0986fa0b95 --- /dev/null +++ b/packages/block-editor/src/components/block-types-list/index.native.js @@ -0,0 +1,120 @@ +/** + * External dependencies + */ +import { + FlatList, + View, + TouchableWithoutFeedback, + Dimensions, +} from 'react-native'; + +/** + * WordPress dependencies + */ +import { Component } from '@wordpress/element'; +import { BottomSheet } from '@wordpress/components'; + +/** + * Internal dependencies + */ +import InserterListItem from '../inserter-list-item'; +import styles from './style.scss'; + +const MIN_COL_NUM = 3; + +export class BlockTypesList extends Component { + constructor() { + super( ...arguments ); + + this.onLayout = this.onLayout.bind( this ); + this.renderItem = this.renderItem.bind( this ); + + this.state = { + numberOfColumns: MIN_COL_NUM, + }; + + Dimensions.addEventListener( 'change', this.onLayout ); + } + + componentWillUnmount() { + Dimensions.removeEventListener( 'change', this.onLayout ); + } + + calculateMinItemWidth( bottomSheetWidth ) { + const { paddingLeft, paddingRight } = styles.columnPadding; + return ( + ( bottomSheetWidth - 2 * ( paddingLeft + paddingRight ) ) / + MIN_COL_NUM + ); + } + + calculateColumnsProperties() { + const bottomSheetWidth = BottomSheet.getWidth(); + const { paddingLeft, paddingRight } = styles.columnPadding; + const itemTotalWidth = InserterListItem.getWidth(); + const containerTotalWidth = + bottomSheetWidth - ( paddingLeft + paddingRight ); + const numofColumns = Math.floor( containerTotalWidth / itemTotalWidth ); + + if ( numofColumns < MIN_COL_NUM ) { + return { + numOfColumns: MIN_COL_NUM, + itemWidth: this.calculateMinItemWidth( bottomSheetWidth ), + maxWidth: containerTotalWidth / MIN_COL_NUM, + }; + } + return { + numOfColumns: numofColumns, + maxWidth: containerTotalWidth / numofColumns, + }; + } + + onLayout() { + const { + numOfColumns, + itemWidth, + maxWidth, + } = this.calculateColumnsProperties(); + const numberOfColumns = numOfColumns; + + this.setState( { numberOfColumns, itemWidth, maxWidth } ); + } + + renderItem( { item } ) { + const { onSelect } = this.props; + const { itemWidth, maxWidth } = this.state; + return ( + + ); + } + + render() { + const { name, items, listProps } = this.props; + const { numberOfColumns } = this.state; + + return ( + ( + + + + ) } + keyExtractor={ ( item ) => item.name } + renderItem={ this.renderItem } + { ...listProps } + /> + ); + } +} + +export default BlockTypesList; diff --git a/packages/block-editor/src/components/block-types-list/style.native.scss b/packages/block-editor/src/components/block-types-list/style.native.scss new file mode 100644 index 00000000000000..2499c0ff55dbc5 --- /dev/null +++ b/packages/block-editor/src/components/block-types-list/style.native.scss @@ -0,0 +1,7 @@ +.rowSeparator { + height: 12px; +} + +.columnPadding { + padding: $grid-unit-20; +} From 8efbfbb71062019484bf2f03fd18120284b1b65b Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Tue, 15 Sep 2020 21:24:07 +0200 Subject: [PATCH 06/92] Add getWidth to mobile version of inserter-list-item component --- .../components/inserter-list-item/index.native.js | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/inserter-list-item/index.native.js b/packages/block-editor/src/components/inserter-list-item/index.native.js index 185d97963e4ae4..9d48c9db143c19 100644 --- a/packages/block-editor/src/components/inserter-list-item/index.native.js +++ b/packages/block-editor/src/components/inserter-list-item/index.native.js @@ -81,4 +81,17 @@ function InserterListItem( { ); } -export default withPreferredColorScheme( InserterListItem ); +function getWidth() { + const { + paddingLeft: itemPaddingLeft, + paddingRight: itemPaddingRight, + } = styles.modalItem; + const { width: itemWidth } = styles.modalIconWrapper; + return itemWidth + itemPaddingLeft + itemPaddingRight; +} + +const ThemedInserterListItem = withPreferredColorScheme( InserterListItem ); + +ThemedInserterListItem.getWidth = getWidth; + +export default ThemedInserterListItem; From 10106677dfeb4c173d1fcf0044551a5e998b2574 Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Tue, 15 Sep 2020 21:36:03 +0200 Subject: [PATCH 07/92] Add blocks-tab mobile version to inserter component --- .../components/inserter/blocks-tab.native.js | 72 +++++++++++++++++++ 1 file changed, 72 insertions(+) create mode 100644 packages/block-editor/src/components/inserter/blocks-tab.native.js diff --git a/packages/block-editor/src/components/inserter/blocks-tab.native.js b/packages/block-editor/src/components/inserter/blocks-tab.native.js new file mode 100644 index 00000000000000..c87794df258f50 --- /dev/null +++ b/packages/block-editor/src/components/inserter/blocks-tab.native.js @@ -0,0 +1,72 @@ +/** + * External dependencies + */ +import { pick } from 'lodash'; + +/** + * WordPress dependencies + */ +import { rawHandler } from '@wordpress/blocks'; +import { useSelect } from '@wordpress/data'; + +/** + * Internal dependencies + */ +import BlockTypesList from '../block-types-list'; + +const NON_BLOCK_CATEGORIES = [ 'reusable' ]; + +function BlocksTab( { onSelect, rootClientId, listProps } ) { + const { items } = useSelect( + ( select ) => { + const { + getInserterItems, + getSettings, + canInsertBlockType, + } = select( 'core/block-editor' ); + const { getBlockType } = select( 'core/blocks' ); + const { getClipboard } = select( 'core/editor' ); + + const clipboard = getClipboard(); + const clipboardBlock = + clipboard && rawHandler( { HTML: clipboard } )[ 0 ]; + const shouldAddClipboardBlock = + clipboardBlock && + canInsertBlockType( clipboardBlock.name, rootClientId ); + + const allItems = getInserterItems( rootClientId ); + const items = allItems.filter( + ( { category } ) => ! NON_BLOCK_CATEGORIES.includes( category ) + ); + + const itemsWithClipboard = shouldAddClipboardBlock + ? [ + { + ...pick( getBlockType( clipboardBlock.name ), [ + 'name', + 'icon', + ] ), + id: 'clipboard', + initialAttributes: clipboardBlock.attributes, + innerBlocks: clipboardBlock.innerBlocks, + }, + ...items, + ] + : items; + + return { items: itemsWithClipboard }; + }, + [ rootClientId ] + ); + + return ( + + ); +} + +export default BlocksTab; From 2507e95c9201b73a03084666f46ef16148762ffb Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Tue, 15 Sep 2020 21:36:16 +0200 Subject: [PATCH 08/92] Add reusable-blocks-tab mobile version to inserter component --- .../inserter/reusable-blocks-tab.native.js | 50 +++++++++++++++++++ 1 file changed, 50 insertions(+) create mode 100644 packages/block-editor/src/components/inserter/reusable-blocks-tab.native.js diff --git a/packages/block-editor/src/components/inserter/reusable-blocks-tab.native.js b/packages/block-editor/src/components/inserter/reusable-blocks-tab.native.js new file mode 100644 index 00000000000000..02ca18dc14f05d --- /dev/null +++ b/packages/block-editor/src/components/inserter/reusable-blocks-tab.native.js @@ -0,0 +1,50 @@ +/** + * WordPress dependencies + */ +import { useEffect } from '@wordpress/element'; +import { useSelect } from '@wordpress/data'; + +/** + * Internal dependencies + */ +import BlockTypesList from '../block-types-list'; + +const REUSABLE_BLOCKS_CATEGORY = 'reusable'; + +function ReusableBlocksTab( { onSelect, rootClientId, listProps } ) { + const { items, fetchReusableBlocks } = useSelect( + ( select ) => { + const { getInserterItems, getSettings } = select( + 'core/block-editor' + ); + const { __experimentalFetchReusableBlocks } = getSettings(); + const allItems = getInserterItems( rootClientId ); + const items = allItems.filter( + ( { category } ) => category === REUSABLE_BLOCKS_CATEGORY + ); + + return { + items, + fetchReusableBlocks: __experimentalFetchReusableBlocks, + }; + }, + [ rootClientId ] + ); + + useEffect( () => { + if ( fetchReusableBlocks ) { + fetchReusableBlocks(); + } + }, [] ); + + return ( + + ); +} + +export default ReusableBlocksTab; From 9cc6776e6b76d10be9efcffaafdb62cf41d47d03 Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Tue, 15 Sep 2020 21:38:42 +0200 Subject: [PATCH 09/92] Inserter menu mobile version refactor to use new tabs --- .../block-types-list/index.native.js | 17 +- .../components/inserter/blocks-tab.native.js | 17 +- .../src/components/inserter/menu.native.js | 228 +++--------------- .../inserter/reusable-blocks-tab.native.js | 21 +- 4 files changed, 57 insertions(+), 226 deletions(-) diff --git a/packages/block-editor/src/components/block-types-list/index.native.js b/packages/block-editor/src/components/block-types-list/index.native.js index fecd0986fa0b95..67f4a6c42a7ba6 100644 --- a/packages/block-editor/src/components/block-types-list/index.native.js +++ b/packages/block-editor/src/components/block-types-list/index.native.js @@ -12,7 +12,7 @@ import { * WordPress dependencies */ import { Component } from '@wordpress/element'; -import { BottomSheet } from '@wordpress/components'; +import { BottomSheet, InserterButton } from '@wordpress/components'; /** * Internal dependencies @@ -48,10 +48,19 @@ export class BlockTypesList extends Component { ); } + calculateItemWidth() { + const { + paddingLeft: itemPaddingLeft, + paddingRight: itemPaddingRight, + } = InserterButton.Styles.modalItem; + const { width: itemWidth } = InserterButton.Styles.modalIconWrapper; + return itemWidth + itemPaddingLeft + itemPaddingRight; + } + calculateColumnsProperties() { const bottomSheetWidth = BottomSheet.getWidth(); const { paddingLeft, paddingRight } = styles.columnPadding; - const itemTotalWidth = InserterListItem.getWidth(); + const itemTotalWidth = this.calculateItemWidth(); const containerTotalWidth = bottomSheetWidth - ( paddingLeft + paddingRight ); const numofColumns = Math.floor( containerTotalWidth / itemTotalWidth ); @@ -81,10 +90,10 @@ export class BlockTypesList extends Component { } renderItem( { item } ) { - const { onSelect } = this.props; const { itemWidth, maxWidth } = this.state; + const { onSelect } = this.props; return ( - { - const { - getInserterItems, - getSettings, - canInsertBlockType, - } = select( 'core/block-editor' ); + const { getInserterItems, canInsertBlockType } = select( + 'core/block-editor' + ); const { getBlockType } = select( 'core/blocks' ); - const { getClipboard } = select( 'core/editor' ); const clipboard = getClipboard(); const clipboardBlock = @@ -35,10 +33,11 @@ function BlocksTab( { onSelect, rootClientId, listProps } ) { canInsertBlockType( clipboardBlock.name, rootClientId ); const allItems = getInserterItems( rootClientId ); - const items = allItems.filter( + const blockItems = allItems.filter( ( { category } ) => ! NON_BLOCK_CATEGORIES.includes( category ) ); + // Add copied blocks in the clipboard as extra items const itemsWithClipboard = shouldAddClipboardBlock ? [ { @@ -50,9 +49,9 @@ function BlocksTab( { onSelect, rootClientId, listProps } ) { initialAttributes: clipboardBlock.attributes, innerBlocks: clipboardBlock.innerBlocks, }, - ...items, + ...blockItems, ] - : items; + : blockItems; return { items: itemsWithClipboard }; }, diff --git a/packages/block-editor/src/components/inserter/menu.native.js b/packages/block-editor/src/components/inserter/menu.native.js index 9d38883052affa..46db69fc3c40c8 100644 --- a/packages/block-editor/src/components/inserter/menu.native.js +++ b/packages/block-editor/src/components/inserter/menu.native.js @@ -6,60 +6,41 @@ import { __ } from '@wordpress/i18n'; /** * External dependencies */ -import { - FlatList, - View, - TouchableHighlight, - TouchableWithoutFeedback, - Dimensions, -} from 'react-native'; -import { pick } from 'lodash'; +import { TouchableHighlight } from 'react-native'; /** * WordPress dependencies */ import { Component } from '@wordpress/element'; -import { - createBlock, - rawHandler, - store as blocksStore, -} from '@wordpress/blocks'; +import { createBlock, store as blocksStore } from '@wordpress/blocks'; import { withDispatch, withSelect } from '@wordpress/data'; import { withInstanceId, compose } from '@wordpress/compose'; import { BottomSheet, BottomSheetConsumer, - InserterButton, - getClipboard, SegmentedControl, } from '@wordpress/components'; /** * Internal dependencies */ +import BlocksTab from './blocks-tab'; +import ReusableBlocksTab from './reusable-blocks-tab'; import styles from './style.scss'; -const MIN_COL_NUM = 3; -const TABS = [ __( 'Child Blocks' ), __( 'Reusable blocks' ) ]; +const TABS = [ __( 'Blocks' ), __( 'Reusable' ) ]; +const REUSABLE_BLOCKS_CATEGORY = 'reusable'; export class InserterMenu extends Component { constructor() { super( ...arguments ); this.onClose = this.onClose.bind( this ); - this.onLayout = this.onLayout.bind( this ); this.onChangeTab = this.onChangeTab.bind( this ); - this.renderItem = this.renderItem.bind( this ); - this.renderBlocksTab = this.renderBlocksTab.bind( this ); - this.renderReusableBlocksTab = this.renderReusableBlocksTab.bind( - this - ); + this.renderTabs = this.renderTabs.bind( this ); this.state = { - numberOfColumns: MIN_COL_NUM, tab: 0, }; - - Dimensions.addEventListener( 'change', this.onLayout ); } componentDidMount() { @@ -68,45 +49,6 @@ export class InserterMenu extends Component { componentWillUnmount() { this.props.hideInsertionPoint(); - Dimensions.removeEventListener( 'change', this.onLayout ); - } - - calculateMinItemWidth( bottomSheetWidth ) { - const { paddingLeft, paddingRight } = styles.columnPadding; - return ( - ( bottomSheetWidth - 2 * ( paddingLeft + paddingRight ) ) / - MIN_COL_NUM - ); - } - - calculateItemWidth() { - const { - paddingLeft: itemPaddingLeft, - paddingRight: itemPaddingRight, - } = InserterButton.Styles.modalItem; - const { width: itemWidth } = InserterButton.Styles.modalIconWrapper; - return itemWidth + itemPaddingLeft + itemPaddingRight; - } - - calculateColumnsProperties() { - const bottomSheetWidth = BottomSheet.getWidth(); - const { paddingLeft, paddingRight } = styles.columnPadding; - const itemTotalWidth = this.calculateItemWidth(); - const containerTotalWidth = - bottomSheetWidth - ( paddingLeft + paddingRight ); - const numofColumns = Math.floor( containerTotalWidth / itemTotalWidth ); - - if ( numofColumns < MIN_COL_NUM ) { - return { - numOfColumns: MIN_COL_NUM, - itemWidth: this.calculateMinItemWidth( bottomSheetWidth ), - maxWidth: containerTotalWidth / MIN_COL_NUM, - }; - } - return { - numOfColumns: numofColumns, - maxWidth: containerTotalWidth / numofColumns, - }; } onClose() { @@ -118,132 +60,32 @@ export class InserterMenu extends Component { this.props.onDismiss(); } - onLayout() { - const { - numOfColumns, - itemWidth, - maxWidth, - } = this.calculateColumnsProperties(); - const numberOfColumns = numOfColumns; - - this.setState( { numberOfColumns, itemWidth, maxWidth } ); - } - onChangeTab( tab ) { this.setState( { tab: TABS.indexOf( tab ) } ); } - /** - * Processes the inserter items to check - * if there's any copied block in the clipboard - * to add it as an extra item - */ - getBlockItems() { - const { - items, - canInsertBlockType, - destinationRootClientId, - getBlockType, - } = this.props; - - // Filter out reusable blocks (they will be added in another tab) - const blockItems = items.filter( - ( { name } ) => name !== 'core/block' - ); - - const clipboard = getClipboard(); - const clipboardBlock = - clipboard && rawHandler( { HTML: clipboard } )[ 0 ]; - const shouldAddClipboardBlock = - clipboardBlock && - canInsertBlockType( clipboardBlock.name, destinationRootClientId ); - - return shouldAddClipboardBlock - ? [ - { - ...pick( getBlockType( clipboardBlock.name ), [ - 'name', - 'icon', - ] ), - id: 'clipboard', - initialAttributes: clipboardBlock.attributes, - innerBlocks: clipboardBlock.innerBlocks, - }, - ...blockItems, - ] - : blockItems; - } - - getReusableBlockItems() { - const { items } = this.props; - - return items.filter( ( { name } ) => name === 'core/block' ); - } - - renderItem( { item } ) { - const { itemWidth, maxWidth } = this.state; - const { onSelect } = this.props; - return ( - - ); - } - - renderBlocksTab( listProps ) { - const { numberOfColumns } = this.state; - const items = this.getBlockItems(); - - return ( - ( - - - - ) } - keyExtractor={ ( item ) => item.name } - renderItem={ this.renderItem } - { ...listProps } - /> - ); - } + renderTabs( { listProps } ) { + const { onSelect, destinationRootClientId } = this.props; + const { tab } = this.state; - renderReusableBlocksTab( listProps ) { - const { numberOfColumns } = this.state; - const items = this.getReusableBlockItems(); + const tabProps = { + rootClientId: destinationRootClientId, + onSelect, + listProps, + }; - return ( - ( - - - - ) } - keyExtractor={ ( item ) => item.name } - renderItem={ this.renderItem } - { ...listProps } - /> - ); + switch ( tab ) { + case 0: + return ; + case 1: + return ; + } } render() { - const { tab } = this.state; - const reusableBlockItems = this.getReusableBlockItems(); + const { hasReusableBlocks } = this.props; - const hideHeader = reusableBlockItems.length === 0; + const hideHeader = ! hasReusableBlocks; return ( - { ( { listProps } ) => { - switch ( tab ) { - case 0: - return this.renderBlocksTab( listProps ); - case 1: - return this.renderReusableBlocksTab( - listProps - ); - } - } } + { this.renderTabs } @@ -287,9 +120,8 @@ export default compose( getBlockRootClientId, getBlockSelectionEnd, getSettings, - canInsertBlockType, } = select( 'core/block-editor' ); - const { getChildBlockNames, getBlockType } = select( blocksStore ); + const { getChildBlockNames } = select( blocksStore ); let destinationRootClientId = rootClientId; if ( ! destinationRootClientId && ! clientId && ! isAppender ) { @@ -307,13 +139,17 @@ export default compose( __experimentalShouldInsertAtTheTop: shouldInsertAtTheTop, } = getSettings(); + const items = getInserterItems( destinationRootClientId ); + const reusableBlockItems = items.filter( + ( { category } ) => category === REUSABLE_BLOCKS_CATEGORY + ); + return { rootChildBlocks: getChildBlockNames( destinationRootBlockName ), - items: getInserterItems( destinationRootClientId ), + items, + hasReusableBlocks: !! reusableBlockItems.length, destinationRootClientId, shouldInsertAtTheTop, - getBlockType, - canInsertBlockType, }; } ), withDispatch( ( dispatch, ownProps, { select } ) => { diff --git a/packages/block-editor/src/components/inserter/reusable-blocks-tab.native.js b/packages/block-editor/src/components/inserter/reusable-blocks-tab.native.js index 02ca18dc14f05d..e5fb79717af021 100644 --- a/packages/block-editor/src/components/inserter/reusable-blocks-tab.native.js +++ b/packages/block-editor/src/components/inserter/reusable-blocks-tab.native.js @@ -1,7 +1,6 @@ /** * WordPress dependencies */ -import { useEffect } from '@wordpress/element'; import { useSelect } from '@wordpress/data'; /** @@ -12,31 +11,19 @@ import BlockTypesList from '../block-types-list'; const REUSABLE_BLOCKS_CATEGORY = 'reusable'; function ReusableBlocksTab( { onSelect, rootClientId, listProps } ) { - const { items, fetchReusableBlocks } = useSelect( + const { items } = useSelect( ( select ) => { - const { getInserterItems, getSettings } = select( - 'core/block-editor' - ); - const { __experimentalFetchReusableBlocks } = getSettings(); + const { getInserterItems } = select( 'core/block-editor' ); const allItems = getInserterItems( rootClientId ); - const items = allItems.filter( + const reusableBlockItems = allItems.filter( ( { category } ) => category === REUSABLE_BLOCKS_CATEGORY ); - return { - items, - fetchReusableBlocks: __experimentalFetchReusableBlocks, - }; + return { items: reusableBlockItems }; }, [ rootClientId ] ); - useEffect( () => { - if ( fetchReusableBlocks ) { - fetchReusableBlocks(); - } - }, [] ); - return ( Date: Fri, 18 Sep 2020 21:30:14 +0200 Subject: [PATCH 10/92] Lint fixes in inserter menu components --- .../src/components/inserter-list-item/index.native.js | 1 - .../block-editor/src/components/inserter/blocks-tab.native.js | 4 ++-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/inserter-list-item/index.native.js b/packages/block-editor/src/components/inserter-list-item/index.native.js index 9d48c9db143c19..c69912f1ae4ed4 100644 --- a/packages/block-editor/src/components/inserter-list-item/index.native.js +++ b/packages/block-editor/src/components/inserter-list-item/index.native.js @@ -6,7 +6,6 @@ import { View, TouchableHighlight, Text } from 'react-native'; /** * WordPress dependencies */ -import { Component } from '@wordpress/element'; import { Icon } from '@wordpress/components'; import { withPreferredColorScheme } from '@wordpress/compose'; import { __ } from '@wordpress/i18n'; diff --git a/packages/block-editor/src/components/inserter/blocks-tab.native.js b/packages/block-editor/src/components/inserter/blocks-tab.native.js index 0da95cb6b00d01..d00683d5ad10cf 100644 --- a/packages/block-editor/src/components/inserter/blocks-tab.native.js +++ b/packages/block-editor/src/components/inserter/blocks-tab.native.js @@ -38,7 +38,7 @@ function BlocksTab( { onSelect, rootClientId, listProps } ) { ); // Add copied blocks in the clipboard as extra items - const itemsWithClipboard = shouldAddClipboardBlock + const blockItemsWithClipboard = shouldAddClipboardBlock ? [ { ...pick( getBlockType( clipboardBlock.name ), [ @@ -53,7 +53,7 @@ function BlocksTab( { onSelect, rootClientId, listProps } ) { ] : blockItems; - return { items: itemsWithClipboard }; + return { items: blockItemsWithClipboard }; }, [ rootClientId ] ); From b9d9cb96d33c2009956f03f7c3e3be2b0715a1f4 Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Mon, 21 Sep 2020 20:08:48 +0200 Subject: [PATCH 11/92] README of block-types-list component updated with mobile changes --- .../src/components/block-types-list/README.md | 21 ++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/block-types-list/README.md b/packages/block-editor/src/components/block-types-list/README.md index 8fb67bf7266669..c99afd1405e841 100644 --- a/packages/block-editor/src/components/block-types-list/README.md +++ b/packages/block-editor/src/components/block-types-list/README.md @@ -24,7 +24,7 @@ Renders a list of blocks types. ```jsx import { BlockTypesList } from '@wordpress/block-editor'; -const MyBlockTypesList = () => ;; +const MyBlockTypesList = () => ; ``` ### Props @@ -35,6 +35,25 @@ The blocks that will be displayed in the block list. - Type: `Array` - Required: Yes +- Platform: Web | Mobile + +#### name + +Name of the list to be used as part of component's key. + +- Type: `String` +- Required: Yes +- Platform: Mobile + +#### listProps + +Extra `FlatList` props for customizing the list. + +On Mobile usually this component is rendered inside `BottomSheet` component, which already [generates these props](<(https://github.com/WordPress/gutenberg/blob/c3c514ba1123be5a7cf881c223c038cfc31b3f59/packages/components/src/mobile/bottom-sheet/index.native.js#L335-L354)>) for this component. + +- Type: `String` +- Required: No +- Platform: Mobile ## Related components From d29b5c50e31cd84965c5d428908230b5db8a4a39 Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Mon, 21 Sep 2020 20:20:54 +0200 Subject: [PATCH 12/92] modal prefix removed from inserter-list-item style names --- .../inserter-list-item/index.native.js | 33 +++++++++---------- .../inserter-list-item/style.native.scss | 12 +++---- 2 files changed, 21 insertions(+), 24 deletions(-) diff --git a/packages/block-editor/src/components/inserter-list-item/index.native.js b/packages/block-editor/src/components/inserter-list-item/index.native.js index c69912f1ae4ed4..9bda34d3c8f558 100644 --- a/packages/block-editor/src/components/inserter-list-item/index.native.js +++ b/packages/block-editor/src/components/inserter-list-item/index.native.js @@ -26,17 +26,14 @@ function InserterListItem( { onSelect( item ); }; - const modalIconWrapperStyle = getStylesFromColorScheme( - styles.modalIconWrapper, - styles.modalIconWrapperDark + const iconWrapperStyle = getStylesFromColorScheme( + styles.iconWrapper, + styles.iconWrapperDark ); - const modalIconStyle = getStylesFromColorScheme( - styles.modalIcon, - styles.modalIconDark - ); - const modalItemLabelStyle = getStylesFromColorScheme( - styles.modalItemLabel, - styles.modalItemLabelDark + const iconStyle = getStylesFromColorScheme( styles.icon, styles.iconDark ); + const itemLabelStyle = getStylesFromColorScheme( + styles.itemLabel, + styles.itemLabelDark ); const clipboardBlockStyles = getStylesFromColorScheme( @@ -54,25 +51,25 @@ function InserterListItem( { accessibilityLabel={ item.title } onPress={ onPress } > - + - + - + { isClipboardBlock ? __( 'Copied block' ) : item.title } @@ -84,8 +81,8 @@ function getWidth() { const { paddingLeft: itemPaddingLeft, paddingRight: itemPaddingRight, - } = styles.modalItem; - const { width: itemWidth } = styles.modalIconWrapper; + } = styles.item; + const { width: itemWidth } = styles.iconWrapper; return itemWidth + itemPaddingLeft + itemPaddingRight; } diff --git a/packages/block-editor/src/components/inserter-list-item/style.native.scss b/packages/block-editor/src/components/inserter-list-item/style.native.scss index 48836bf4888475..425a29eddc7cf2 100644 --- a/packages/block-editor/src/components/inserter-list-item/style.native.scss +++ b/packages/block-editor/src/components/inserter-list-item/style.native.scss @@ -2,7 +2,7 @@ border-radius: 8px 8px 8px 8px; } -.modalItem { +.item { flex-direction: column; justify-content: flex-start; align-items: center; @@ -12,7 +12,7 @@ padding-bottom: 0; } -.modalIconWrapper { +.iconWrapper { width: 104px; height: 64px; background-color: $gray-light; //#f3f6f8 @@ -25,7 +25,7 @@ background-color: rgba( $white, 0.07 ); } -.modalIcon { +.icon { width: 32px; height: 32px; justify-content: center; @@ -33,11 +33,11 @@ fill: $gray-dark; } -.modalIconDark { +.iconDark { fill: $white; } -.modalItemLabel { +.itemLabel { background-color: transparent; padding-left: 2; padding-right: 2; @@ -48,7 +48,7 @@ color: $gray-dark; } -.modalItemLabelDark { +.itemLabelDark { color: $white; } From 11c59bbb50abb4578b66c690736b261f81eb313c Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Mon, 21 Sep 2020 20:24:26 +0200 Subject: [PATCH 13/92] blocks-tab renamed to block-types-tab in inserter menu --- .../{blocks-tab.native.js => blocks-types-tab.native.js} | 0 packages/block-editor/src/components/inserter/menu.native.js | 4 ++-- 2 files changed, 2 insertions(+), 2 deletions(-) rename packages/block-editor/src/components/inserter/{blocks-tab.native.js => blocks-types-tab.native.js} (100%) diff --git a/packages/block-editor/src/components/inserter/blocks-tab.native.js b/packages/block-editor/src/components/inserter/blocks-types-tab.native.js similarity index 100% rename from packages/block-editor/src/components/inserter/blocks-tab.native.js rename to packages/block-editor/src/components/inserter/blocks-types-tab.native.js diff --git a/packages/block-editor/src/components/inserter/menu.native.js b/packages/block-editor/src/components/inserter/menu.native.js index 46db69fc3c40c8..6f9f7073e974a9 100644 --- a/packages/block-editor/src/components/inserter/menu.native.js +++ b/packages/block-editor/src/components/inserter/menu.native.js @@ -24,7 +24,7 @@ import { /** * Internal dependencies */ -import BlocksTab from './blocks-tab'; +import BlocksTypesTab from './blocks-types-tab'; import ReusableBlocksTab from './reusable-blocks-tab'; import styles from './style.scss'; @@ -76,7 +76,7 @@ export class InserterMenu extends Component { switch ( tab ) { case 0: - return ; + return ; case 1: return ; } From 420dbb65e520c0a9762187417a7454f7287071b3 Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Mon, 21 Sep 2020 21:18:35 +0200 Subject: [PATCH 14/92] add block-types-tab UI test --- .../inserter/test/block-types-tab.native.js | 63 +++++++++++++++++++ 1 file changed, 63 insertions(+) create mode 100644 packages/block-editor/src/components/inserter/test/block-types-tab.native.js diff --git a/packages/block-editor/src/components/inserter/test/block-types-tab.native.js b/packages/block-editor/src/components/inserter/test/block-types-tab.native.js new file mode 100644 index 00000000000000..4992e3f8a99fde --- /dev/null +++ b/packages/block-editor/src/components/inserter/test/block-types-tab.native.js @@ -0,0 +1,63 @@ +/** + * External dependencies + */ +import { shallow } from 'enzyme'; + +/** + * WordPress dependencies + */ +import { useSelect } from '@wordpress/data'; + +/** + * Internal dependencies + */ +import items from './fixtures'; +import BlocksTypesTab from '../blocks-types-tab'; +import BlocksTypesList from '../../block-types-list'; + +jest.mock( '../../block-types-list' ); +jest.mock( '@wordpress/data/src/components/use-select' ); + +const selectMock = { + getInserterItems: jest.fn().mockReturnValue( [] ), + canInsertBlockType: jest.fn(), + getBlockType: jest.fn(), + getClipboard: jest.fn(), +}; + +describe( 'BlocksTypesTab component', () => { + beforeEach( () => { + useSelect.mockImplementation( ( callback ) => + callback( () => selectMock ) + ); + } ); + + it( 'renders without crashing', () => { + const component = shallow( + + ); + expect( component ).toBeTruthy(); + } ); + + it( 'shows block items', () => { + selectMock.getInserterItems.mockReturnValue( items ); + + const blockItems = items.filter( + ( { category } ) => category !== 'reusable' + ); + const component = shallow( + + ); + expect( component.find( BlocksTypesList ).prop( 'items' ) ).toEqual( + blockItems + ); + } ); +} ); From 37ea46ad5fbe9d40bd61243f676b01c5bf3ceda9 Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Tue, 22 Sep 2020 21:04:23 +0200 Subject: [PATCH 15/92] Add reusable-blocks-tab UI test --- .../test/reusable-blocks-tab.native.js | 64 +++++++++++++++++++ 1 file changed, 64 insertions(+) create mode 100644 packages/block-editor/src/components/inserter/test/reusable-blocks-tab.native.js diff --git a/packages/block-editor/src/components/inserter/test/reusable-blocks-tab.native.js b/packages/block-editor/src/components/inserter/test/reusable-blocks-tab.native.js new file mode 100644 index 00000000000000..d8eac0853060f8 --- /dev/null +++ b/packages/block-editor/src/components/inserter/test/reusable-blocks-tab.native.js @@ -0,0 +1,64 @@ +/** + * External dependencies + */ +import { shallow } from 'enzyme'; + +/** + * WordPress dependencies + */ +import { useSelect } from '@wordpress/data'; + +/** + * Internal dependencies + */ +import items from './fixtures'; +import ReusableBlocksTab from '../reusable-blocks-tab'; +import BlocksTypesList from '../../block-types-list'; + +jest.mock( '../../block-types-list' ); +jest.mock( '@wordpress/data/src/components/use-select' ); + +const fetchReusableBlocks = jest.fn(); +const selectMock = { + getInserterItems: jest.fn().mockReturnValue( [] ), + getSettings: jest.fn().mockReturnValue( { + __experimentalFetchReusableBlocks: fetchReusableBlocks, + } ), +}; + +describe( 'ReusableBlocksTab component', () => { + beforeEach( () => { + useSelect.mockImplementation( ( callback ) => + callback( () => selectMock ) + ); + } ); + + it( 'renders without crashing', () => { + const component = shallow( + + ); + expect( component ).toBeTruthy(); + } ); + + it( 'shows reusable block items', () => { + selectMock.getInserterItems.mockReturnValue( items ); + + const reusableBlockItems = items.filter( + ( { category } ) => category === 'reusable' + ); + const component = shallow( + + ); + expect( component.find( BlocksTypesList ).prop( 'items' ) ).toEqual( + reusableBlockItems + ); + } ); +} ); From 83bac66d4e57e41bf3dfeafad845c7d8ee811906 Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Fri, 2 Oct 2020 21:54:08 +0200 Subject: [PATCH 16/92] Remove unused import from block types list --- .../block-editor/src/components/block-types-list/index.native.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/block-editor/src/components/block-types-list/index.native.js b/packages/block-editor/src/components/block-types-list/index.native.js index 67f4a6c42a7ba6..dcf58cab118ebd 100644 --- a/packages/block-editor/src/components/block-types-list/index.native.js +++ b/packages/block-editor/src/components/block-types-list/index.native.js @@ -17,7 +17,6 @@ import { BottomSheet, InserterButton } from '@wordpress/components'; /** * Internal dependencies */ -import InserterListItem from '../inserter-list-item'; import styles from './style.scss'; const MIN_COL_NUM = 3; From 3a5e7e58b0137d52264c7d11b88a30e64283e0f0 Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Mon, 4 Jan 2021 16:45:51 +0100 Subject: [PATCH 17/92] Change key calculation for block types list component Block name's field was being used which is not unique so it has been changed to id field. --- .../src/components/block-types-list/index.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/block-types-list/index.native.js b/packages/block-editor/src/components/block-types-list/index.native.js index dcf58cab118ebd..249a8a74db1304 100644 --- a/packages/block-editor/src/components/block-types-list/index.native.js +++ b/packages/block-editor/src/components/block-types-list/index.native.js @@ -117,7 +117,7 @@ export class BlockTypesList extends Component { ) } - keyExtractor={ ( item ) => item.name } + keyExtractor={ ( item ) => item.id } renderItem={ this.renderItem } { ...listProps } /> From 68ccca7236063bd27402daf453be4f7297541200 Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Mon, 4 Jan 2021 16:50:34 +0100 Subject: [PATCH 18/92] Fix style format issue in inserter list item --- .../src/components/inserter-list-item/style.native.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/inserter-list-item/style.native.scss b/packages/block-editor/src/components/inserter-list-item/style.native.scss index 425a29eddc7cf2..2b00725f63c3f5 100644 --- a/packages/block-editor/src/components/inserter-list-item/style.native.scss +++ b/packages/block-editor/src/components/inserter-list-item/style.native.scss @@ -22,7 +22,7 @@ } .modalIconWrapperDark { - background-color: rgba( $white, 0.07 ); + background-color: rgba($white, 0.07); } .icon { From cc6efdcfd49d26eedbbc265a45ca2b19225f5152 Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Fri, 26 Mar 2021 11:57:09 +0100 Subject: [PATCH 19/92] Add header prop to BottomSheet --- .../src/mobile/bottom-sheet/index.native.js | 23 +++++++++++-------- 1 file changed, 13 insertions(+), 10 deletions(-) diff --git a/packages/components/src/mobile/bottom-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/index.native.js index 2f5aba85f9ab63..6ef186ec46dc6a 100644 --- a/packages/components/src/mobile/bottom-sheet/index.native.js +++ b/packages/components/src/mobile/bottom-sheet/index.native.js @@ -293,6 +293,7 @@ class BottomSheet extends Component { isVisible, leftButton, rightButton, + header, hideHeader, style = {}, contentStyle = {}, @@ -375,16 +376,18 @@ class BottomSheet extends Component { const getHeader = () => ( <> - - { leftButton } - - { title } - - { rightButton } - + { header || ( + + { leftButton } + + { title } + + { rightButton } + + ) } { withHeaderSeparator && } ); From 17ae9a43a2c32c9f388ab63416163584e65b86e1 Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Fri, 26 Mar 2021 12:00:20 +0100 Subject: [PATCH 20/92] Add header height to max height calculation --- .../src/mobile/bottom-sheet/index.native.js | 36 ++++++++++++------- 1 file changed, 24 insertions(+), 12 deletions(-) diff --git a/packages/components/src/mobile/bottom-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/index.native.js index 6ef186ec46dc6a..9d6b248b790c91 100644 --- a/packages/components/src/mobile/bottom-sheet/index.native.js +++ b/packages/components/src/mobile/bottom-sheet/index.native.js @@ -58,6 +58,7 @@ class BottomSheet extends Component { this.setIsFullScreen = this.setIsFullScreen.bind( this ); this.onDimensionsChange = this.onDimensionsChange.bind( this ); + this.onHeaderLayout = this.onHeaderLayout.bind( this ); this.onCloseBottomSheet = this.onCloseBottomSheet.bind( this ); this.onHandleClosingBottomSheet = this.onHandleClosingBottomSheet.bind( this @@ -69,12 +70,14 @@ class BottomSheet extends Component { this.keyboardWillShow = this.keyboardWillShow.bind( this ); this.keyboardDidHide = this.keyboardDidHide.bind( this ); + this.headerHeight = 0; + this.keyboardHeight = 0; + this.state = { safeAreaBottomInset: 0, safeAreaTopInset: 0, bounces: false, maxHeight: 0, - keyboardHeight: 0, scrollEnabled: true, isScrolling: false, handleClosingBottomSheet: null, @@ -92,13 +95,13 @@ class BottomSheet extends Component { keyboardWillShow( e ) { const { height } = e.endCoordinates; - this.setState( { keyboardHeight: height }, () => - this.onSetMaxHeight() - ); + this.keyboardHeight = height; + this.onSetMaxHeight(); } keyboardDidHide() { - this.setState( { keyboardHeight: 0 }, () => this.onSetMaxHeight() ); + this.keyboardHeight = 0; + this.onSetMaxHeight(); } componentDidMount() { @@ -163,7 +166,7 @@ class BottomSheet extends Component { onSetMaxHeight() { const { height, width } = Dimensions.get( 'window' ); - const { safeAreaBottomInset, keyboardHeight } = this.state; + const { safeAreaBottomInset } = this.state; const statusBarHeight = Platform.OS === 'android' ? StatusBar.currentHeight : 0; @@ -171,8 +174,9 @@ class BottomSheet extends Component { const maxHeightWithOpenKeyboard = 0.95 * ( Dimensions.get( 'window' ).height - - keyboardHeight - - statusBarHeight ); + this.keyboardHeight - + statusBarHeight - + this.headerHeight ); // On horizontal mode `maxHeight` has to be set on 90% of width if ( width > height ) { @@ -195,6 +199,12 @@ class BottomSheet extends Component { this.setState( { bounces: false } ); } + onHeaderLayout( { nativeEvent } ) { + const { height } = nativeEvent.layout; + this.headerHeight = height; + this.onSetMaxHeight(); + } + isCloseToBottom( { layoutMeasurement, contentOffset, contentSize } ) { return ( layoutMeasurement.height + contentOffset.y >= @@ -437,10 +447,12 @@ class BottomSheet extends Component { } } keyboardVerticalOffset={ -safeAreaBottomInset } > - { ! ( Platform.OS === 'android' && isFullScreen ) && ( - - ) } - { ! hideHeader && getHeader() } + + { ! ( Platform.OS === 'android' && isFullScreen ) && ( + + ) } + { ! hideHeader && getHeader() } + Date: Fri, 26 Mar 2021 12:04:57 +0100 Subject: [PATCH 21/92] Move inserter search form to bottom sheet header --- .../src/components/inserter/menu.native.js | 28 +++++++++---------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/packages/block-editor/src/components/inserter/menu.native.js b/packages/block-editor/src/components/inserter/menu.native.js index 73bb0e074281b7..f997692ee21ca9 100644 --- a/packages/block-editor/src/components/inserter/menu.native.js +++ b/packages/block-editor/src/components/inserter/menu.native.js @@ -181,26 +181,26 @@ function InserterMenu( { { + setFilterValue( value ); + } } + value={ filterValue } + onLayout={ ( event ) => { + const { height } = event.nativeEvent.layout; + setSearchFormHeight( height ); + } } + /> + ) + } hasNavigation setMinHeightToMaxHeight={ showSearchForm } > { ( { listProps, safeAreaBottomInset } ) => ( - { showSearchForm && ( - { - setFilterValue( value ); - } } - value={ filterValue } - onLayout={ ( event ) => { - const { height } = event.nativeEvent.layout; - setSearchFormHeight( height ); - } } - /> - ) } - { From ad768551b12eb795eae7e21e08dcc79aa0589ba9 Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Fri, 26 Mar 2021 17:06:37 +0100 Subject: [PATCH 22/92] Update BlockTypesList to functional component --- .../block-types-list/index.native.js | 147 +++++++----------- 1 file changed, 58 insertions(+), 89 deletions(-) diff --git a/packages/block-editor/src/components/block-types-list/index.native.js b/packages/block-editor/src/components/block-types-list/index.native.js index 249a8a74db1304..f652f5416cc54c 100644 --- a/packages/block-editor/src/components/block-types-list/index.native.js +++ b/packages/block-editor/src/components/block-types-list/index.native.js @@ -11,7 +11,7 @@ import { /** * WordPress dependencies */ -import { Component } from '@wordpress/element'; +import { useState, useEffect } from '@wordpress/element'; import { BottomSheet, InserterButton } from '@wordpress/components'; /** @@ -21,108 +21,77 @@ import styles from './style.scss'; const MIN_COL_NUM = 3; -export class BlockTypesList extends Component { - constructor() { - super( ...arguments ); +export default function BlockTypesList( { name, items, onSelect, listProps } ) { + const [ numberOfColumns, setNumberOfColumns ] = useState( MIN_COL_NUM ); + const [ itemWidth, setItemWidth ] = useState(); + const [ maxWidth, setMaxWidth ] = useState(); - this.onLayout = this.onLayout.bind( this ); - this.renderItem = this.renderItem.bind( this ); - - this.state = { - numberOfColumns: MIN_COL_NUM, + useEffect( () => { + Dimensions.addEventListener( 'change', onLayout ); + return () => { + Dimensions.removeEventListener( 'change', onLayout ); }; + }, [] ); - Dimensions.addEventListener( 'change', this.onLayout ); - } - - componentWillUnmount() { - Dimensions.removeEventListener( 'change', this.onLayout ); - } - - calculateMinItemWidth( bottomSheetWidth ) { - const { paddingLeft, paddingRight } = styles.columnPadding; - return ( - ( bottomSheetWidth - 2 * ( paddingLeft + paddingRight ) ) / - MIN_COL_NUM - ); - } - - calculateItemWidth() { + function calculateItemWidth() { const { paddingLeft: itemPaddingLeft, paddingRight: itemPaddingRight, } = InserterButton.Styles.modalItem; - const { width: itemWidth } = InserterButton.Styles.modalIconWrapper; - return itemWidth + itemPaddingLeft + itemPaddingRight; + const { width } = InserterButton.Styles.modalIconWrapper; + return width + itemPaddingLeft + itemPaddingRight; } - calculateColumnsProperties() { + function onLayout() { + const sumLeftRightPadding = + styles.columnPadding.paddingLeft + + styles.columnPadding.paddingRight; + const bottomSheetWidth = BottomSheet.getWidth(); - const { paddingLeft, paddingRight } = styles.columnPadding; - const itemTotalWidth = this.calculateItemWidth(); - const containerTotalWidth = - bottomSheetWidth - ( paddingLeft + paddingRight ); - const numofColumns = Math.floor( containerTotalWidth / itemTotalWidth ); + const containerTotalWidth = bottomSheetWidth - sumLeftRightPadding; + const itemTotalWidth = calculateItemWidth(); - if ( numofColumns < MIN_COL_NUM ) { - return { - numOfColumns: MIN_COL_NUM, - itemWidth: this.calculateMinItemWidth( bottomSheetWidth ), - maxWidth: containerTotalWidth / MIN_COL_NUM, - }; - } - return { - numOfColumns: numofColumns, - maxWidth: containerTotalWidth / numofColumns, - }; - } + const columnsFitToWidth = Math.floor( + containerTotalWidth / itemTotalWidth + ); - onLayout() { - const { - numOfColumns, - itemWidth, - maxWidth, - } = this.calculateColumnsProperties(); - const numberOfColumns = numOfColumns; + const numColumns = Math.max( MIN_COL_NUM, columnsFitToWidth ); - this.setState( { numberOfColumns, itemWidth, maxWidth } ); - } + setNumberOfColumns( numColumns ); + setMaxWidth( containerTotalWidth / numColumns ); - renderItem( { item } ) { - const { itemWidth, maxWidth } = this.state; - const { onSelect } = this.props; - return ( - - ); + if ( columnsFitToWidth < MIN_COL_NUM ) { + const updatedItemWidth = + ( bottomSheetWidth - 2 * sumLeftRightPadding ) / MIN_COL_NUM; + setItemWidth( updatedItemWidth ); + } } - render() { - const { name, items, listProps } = this.props; - const { numberOfColumns } = this.state; - - return ( - ( - - - - ) } - keyExtractor={ ( item ) => item.id } - renderItem={ this.renderItem } - { ...listProps } - /> - ); - } + return ( + ( + + + + ) } + keyExtractor={ ( item ) => item.name } + renderItem={ ( { item } ) => ( + + ) } + { ...listProps } + /> + ); } - -export default BlockTypesList; From 005dba91da8c4b07227e82f47931ff7eb08c4f6c Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Fri, 26 Mar 2021 17:07:03 +0100 Subject: [PATCH 23/92] Add use clipboard block hook --- .../inserter/blocks-types-tab.native.js | 45 +++++-------------- .../hooks/use-clipboard-block.native.js | 41 +++++++++++++++++ 2 files changed, 51 insertions(+), 35 deletions(-) create mode 100644 packages/block-editor/src/components/inserter/hooks/use-clipboard-block.native.js diff --git a/packages/block-editor/src/components/inserter/blocks-types-tab.native.js b/packages/block-editor/src/components/inserter/blocks-types-tab.native.js index d00683d5ad10cf..73044b8c25e032 100644 --- a/packages/block-editor/src/components/inserter/blocks-types-tab.native.js +++ b/packages/block-editor/src/components/inserter/blocks-types-tab.native.js @@ -1,59 +1,34 @@ -/** - * External dependencies - */ -import { pick } from 'lodash'; - /** * WordPress dependencies */ -import { rawHandler } from '@wordpress/blocks'; import { useSelect } from '@wordpress/data'; -import { getClipboard } from '@wordpress/components'; /** * Internal dependencies */ import BlockTypesList from '../block-types-list'; +import useClipboardBlock from './hooks/use-clipboard-block'; +import { store as blockEditorStore } from '../../store'; const NON_BLOCK_CATEGORIES = [ 'reusable' ]; function BlocksTab( { onSelect, rootClientId, listProps } ) { + const clipboardBlock = useClipboardBlock( rootClientId ); + const { items } = useSelect( ( select ) => { - const { getInserterItems, canInsertBlockType } = select( - 'core/block-editor' - ); - const { getBlockType } = select( 'core/blocks' ); - - const clipboard = getClipboard(); - const clipboardBlock = - clipboard && rawHandler( { HTML: clipboard } )[ 0 ]; - const shouldAddClipboardBlock = - clipboardBlock && - canInsertBlockType( clipboardBlock.name, rootClientId ); + const { getInserterItems } = select( blockEditorStore ); const allItems = getInserterItems( rootClientId ); const blockItems = allItems.filter( ( { category } ) => ! NON_BLOCK_CATEGORIES.includes( category ) ); - // Add copied blocks in the clipboard as extra items - const blockItemsWithClipboard = shouldAddClipboardBlock - ? [ - { - ...pick( getBlockType( clipboardBlock.name ), [ - 'name', - 'icon', - ] ), - id: 'clipboard', - initialAttributes: clipboardBlock.attributes, - innerBlocks: clipboardBlock.innerBlocks, - }, - ...blockItems, - ] - : blockItems; - - return { items: blockItemsWithClipboard }; + return { + items: clipboardBlock + ? [ clipboardBlock, ...blockItems ] + : blockItems, + }; }, [ rootClientId ] ); diff --git a/packages/block-editor/src/components/inserter/hooks/use-clipboard-block.native.js b/packages/block-editor/src/components/inserter/hooks/use-clipboard-block.native.js new file mode 100644 index 00000000000000..f131eeba35f45d --- /dev/null +++ b/packages/block-editor/src/components/inserter/hooks/use-clipboard-block.native.js @@ -0,0 +1,41 @@ +/** + * WordPress dependencies + */ +import { useSelect } from '@wordpress/data'; +import { rawHandler, store as blocksStore } from '@wordpress/blocks'; +import { getClipboard } from '@wordpress/components'; + +/** + * Internal dependencies + */ +import { store as blockEditorStore } from '../../../store'; + +export default function useClipboardBlock( destinationRootClientId ) { + const { canInsertBlockType } = useSelect( ( select ) => + select( blockEditorStore ) + ); + const { getBlockType } = useSelect( ( select ) => select( blocksStore ) ); + + const clipboard = getClipboard(); + const clipboardBlock = rawHandler( { HTML: clipboard } )[ 0 ]; + + const canAddClipboardBlock = canInsertBlockType( + clipboardBlock?.name, + destinationRootClientId + ); + + if ( ! canAddClipboardBlock ) { + return undefined; + } + + const { icon, name } = getBlockType( clipboardBlock.name ); + const { attributes: initialAttributes, innerBlocks } = clipboardBlock; + + return { + id: 'clipboard', + name, + icon, + initialAttributes, + innerBlocks, + }; +} From 899141f766cbef77d058da346c4b9c74513e7686 Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Fri, 26 Mar 2021 17:09:15 +0100 Subject: [PATCH 24/92] Use block types list in search results --- .../src/components/inserter/menu.native.js | 153 +++++++++--------- .../inserter/search-results.native.js | 116 +++---------- 2 files changed, 92 insertions(+), 177 deletions(-) diff --git a/packages/block-editor/src/components/inserter/menu.native.js b/packages/block-editor/src/components/inserter/menu.native.js index f997692ee21ca9..fc774a1c5ca4e2 100644 --- a/packages/block-editor/src/components/inserter/menu.native.js +++ b/packages/block-editor/src/components/inserter/menu.native.js @@ -1,33 +1,33 @@ /** * External dependencies */ -import { View } from 'react-native'; +import { TouchableHighlight } from 'react-native'; + /** * WordPress dependencies */ import { useEffect, useState, useCallback } from '@wordpress/element'; import { useSelect, useDispatch } from '@wordpress/data'; -import { - createBlock, - rawHandler, - store as blocksStore, -} from '@wordpress/blocks'; +import { createBlock } from '@wordpress/blocks'; import { BottomSheet, BottomSheetConsumer, - getClipboard, + SegmentedControl, } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ - import InserterSearchResults from './search-results'; import InserterSearchForm from './search-form'; import { store as blockEditorStore } from '../../store'; -import { searchItems } from './search-items'; +import BlocksTypesTab from './blocks-types-tab'; +import ReusableBlocksTab from './reusable-blocks-tab'; +import styles from './style.scss'; const MIN_ITEMS_FOR_SEARCH = 2; +const TABS = [ __( 'Blocks' ), __( 'Reusable' ) ]; function InserterMenu( { onSelect, @@ -39,9 +39,9 @@ function InserterMenu( { insertionIndex, } ) { const [ filterValue, setFilterValue ] = useState( '' ); - const [ searchFormHeight, setSearchFormHeight ] = useState( 0 ); // eslint-disable-next-line no-undef const [ showSearchForm, setShowSearchForm ] = useState( __DEV__ ); + const [ tabIndex, setTabIndex ] = useState( 0 ); const { showInsertionPoint, @@ -58,12 +58,13 @@ function InserterMenu( { destinationRootClientId, getBlockOrder, getBlockCount, - canInsertBlockType, + hasReusableBlocks, } = useSelect( ( select ) => { const { getInserterItems, getBlockRootClientId, getBlockSelectionEnd, + getSettings, ...selectBlockEditorStore } = select( blockEditorStore ); @@ -80,12 +81,11 @@ function InserterMenu( { destinationRootClientId: targetRootClientId, getBlockOrder: selectBlockEditorStore.getBlockOrder, getBlockCount: selectBlockEditorStore.getBlockCount, - canInsertBlockType: selectBlockEditorStore.canInsertBlockType, + hasReusableBlocks: !! getSettings().__experimentalReusableBlocks + ?.length, }; } ); - const { getBlockType } = useSelect( ( select ) => select( blocksStore ) ); - useEffect( () => { // Show/Hide insertion point on Mount/Dismount if ( shouldReplaceBlock ) { @@ -107,7 +107,7 @@ function InserterMenu( { showInsertionPoint( destinationRootClientId, insertionIndex ); // Show search form if there are enough items to filter. - if ( getItems()?.length < MIN_ITEMS_FOR_SEARCH ) { + if ( items.length < MIN_ITEMS_FOR_SEARCH ) { setShowSearchForm( false ); } @@ -138,82 +138,77 @@ function InserterMenu( { [ insertBlock, destinationRootClientId, insertionIndex ] ); - /** - * Processes the inserter items to check - * if there's any copied block in the clipboard - * to add it as an extra item - */ - function getItems() { - // Filter out reusable blocks (they will be added in another tab) - let itemsToDisplay = items.filter( - ( { name } ) => name !== 'core/block' - ); - - itemsToDisplay = searchItems( itemsToDisplay, filterValue ); - - const clipboard = getClipboard(); - let clipboardBlock = rawHandler( { HTML: clipboard } )[ 0 ]; - - const canAddClipboardBlock = canInsertBlockType( - clipboardBlock?.name, - destinationRootClientId - ); - - if ( ! canAddClipboardBlock ) { - return itemsToDisplay; - } - - const { icon, name } = getBlockType( clipboardBlock.name ); - const { attributes: initialAttributes, innerBlocks } = clipboardBlock; + const onChangeTab = useCallback( + ( selectedTab ) => { + setTabIndex( TABS.indexOf( selectedTab ) ); + }, + [ setTabIndex ] + ); - clipboardBlock = { - id: 'clipboard', - name, - icon, - initialAttributes, - innerBlocks, - }; + const onSelectItem = useCallback( + ( item ) => { + onInsert( item ); + onSelect( item ); + }, + [ onInsert, onSelect ] + ); - return [ clipboardBlock, ...itemsToDisplay ]; - } + const getCurrentTab = useCallback( + ( listProps ) => { + const tabProps = { + rootClientId, + onSelect: onSelectItem, + listProps, + }; + + switch ( tabIndex ) { + case 0: + return ; + case 1: + return ; + } + }, + [ tabIndex, rootClientId, onSelectItem ] + ); return ( { - setFilterValue( value ); - } } - value={ filterValue } - onLayout={ ( event ) => { - const { height } = event.nativeEvent.layout; - setSearchFormHeight( height ); - } } - /> - ) + <> + { showSearchForm && ( + { + setFilterValue( value ); + } } + value={ filterValue } + /> + ) } + { ! filterValue && hasReusableBlocks && ( + + ) } + } hasNavigation - setMinHeightToMaxHeight={ showSearchForm } + contentStyle={ styles.list } > - { ( { listProps, safeAreaBottomInset } ) => ( - - { - onInsert( item ); - onSelect( item ); - } } - { ...{ - listProps, - safeAreaBottomInset, - searchFormHeight, - } } - /> - + { ( { listProps } ) => ( + + { filterValue ? ( + + ) : ( + getCurrentTab( listProps ) + ) } + ) } diff --git a/packages/block-editor/src/components/inserter/search-results.native.js b/packages/block-editor/src/components/inserter/search-results.native.js index 6499645f794c41..fd556f008fd195 100644 --- a/packages/block-editor/src/components/inserter/search-results.native.js +++ b/packages/block-editor/src/components/inserter/search-results.native.js @@ -1,115 +1,35 @@ -/** - * External dependencies - */ -import { - FlatList, - View, - TouchableHighlight, - TouchableWithoutFeedback, - Dimensions, -} from 'react-native'; - /** * WordPress dependencies */ -import { useState, useEffect } from '@wordpress/element'; -import { BottomSheet, InserterButton } from '@wordpress/components'; +import { useSelect } from '@wordpress/data'; /** * Internal dependencies */ -import styles from './style.scss'; - -const MIN_COL_NUM = 3; +import { searchItems } from './search-items'; +import BlockTypesList from '../block-types-list'; +import { store as blockEditorStore } from '../../store'; function InserterSearchResults( { - items, + filterValue, onSelect, listProps, - safeAreaBottomInset, - searchFormHeight = 0, + rootClientId, } ) { - const [ numberOfColumns, setNumberOfColumns ] = useState( MIN_COL_NUM ); - const [ itemWidth, setItemWidth ] = useState(); - const [ maxWidth, setMaxWidth ] = useState(); - - useEffect( () => { - Dimensions.addEventListener( 'change', onLayout ); - return () => { - Dimensions.removeEventListener( 'change', onLayout ); - }; - }, [] ); - - function calculateItemWidth() { - const { - paddingLeft: itemPaddingLeft, - paddingRight: itemPaddingRight, - } = InserterButton.Styles.modalItem; - const { width } = InserterButton.Styles.modalIconWrapper; - return width + itemPaddingLeft + itemPaddingRight; - } - - function onLayout() { - const sumLeftRightPadding = - styles.columnPadding.paddingLeft + - styles.columnPadding.paddingRight; - - const bottomSheetWidth = BottomSheet.getWidth(); - const containerTotalWidth = bottomSheetWidth - sumLeftRightPadding; - const itemTotalWidth = calculateItemWidth(); - - const columnsFitToWidth = Math.floor( - containerTotalWidth / itemTotalWidth - ); - - const numColumns = Math.max( MIN_COL_NUM, columnsFitToWidth ); - - setNumberOfColumns( numColumns ); - setMaxWidth( containerTotalWidth / numColumns ); - - if ( columnsFitToWidth < MIN_COL_NUM ) { - const updatedItemWidth = - ( bottomSheetWidth - 2 * sumLeftRightPadding ) / MIN_COL_NUM; - setItemWidth( updatedItemWidth ); - } - } + const { items } = useSelect( + ( select ) => { + const allItems = select( blockEditorStore ).getInserterItems( + rootClientId + ); + const filteredItems = searchItems( allItems, filterValue ); + + return { items: filteredItems }; + }, + [ rootClientId, filterValue ] + ); return ( - - ( - - - - ) } - keyExtractor={ ( item ) => item.name } - renderItem={ ( { item } ) => ( - - ) } - { ...listProps } - contentContainerStyle={ [ - ...listProps.contentContainerStyle, - { - paddingBottom: - ( safeAreaBottomInset || - styles.list.paddingBottom ) + searchFormHeight, - }, - ] } - /> - + ); } From 4d3013f299aa41e390cd8196d147fd1af5b6cc67 Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Fri, 26 Mar 2021 17:18:31 +0100 Subject: [PATCH 25/92] Remove inserter list item native files --- .../inserter-list-item/index.native.js | 93 ------------------- .../inserter-list-item/style.native.scss | 63 ------------- 2 files changed, 156 deletions(-) delete mode 100644 packages/block-editor/src/components/inserter-list-item/index.native.js delete mode 100644 packages/block-editor/src/components/inserter-list-item/style.native.scss diff --git a/packages/block-editor/src/components/inserter-list-item/index.native.js b/packages/block-editor/src/components/inserter-list-item/index.native.js deleted file mode 100644 index 9bda34d3c8f558..00000000000000 --- a/packages/block-editor/src/components/inserter-list-item/index.native.js +++ /dev/null @@ -1,93 +0,0 @@ -/** - * External dependencies - */ -import { View, TouchableHighlight, Text } from 'react-native'; - -/** - * WordPress dependencies - */ -import { Icon } from '@wordpress/components'; -import { withPreferredColorScheme } from '@wordpress/compose'; -import { __ } from '@wordpress/i18n'; - -/** - * Internal dependencies - */ -import styles from './style.scss'; - -function InserterListItem( { - getStylesFromColorScheme, - item, - itemWidth, - maxWidth, - onSelect, -} ) { - const onPress = () => { - onSelect( item ); - }; - - const iconWrapperStyle = getStylesFromColorScheme( - styles.iconWrapper, - styles.iconWrapperDark - ); - const iconStyle = getStylesFromColorScheme( styles.icon, styles.iconDark ); - const itemLabelStyle = getStylesFromColorScheme( - styles.itemLabel, - styles.itemLabelDark - ); - - const clipboardBlockStyles = getStylesFromColorScheme( - styles.clipboardBlock, - styles.clipboardBlockDark - ); - - const isClipboardBlock = item.id === 'clipboard'; - - return ( - - - - - - - - - { isClipboardBlock ? __( 'Copied block' ) : item.title } - - - - ); -} - -function getWidth() { - const { - paddingLeft: itemPaddingLeft, - paddingRight: itemPaddingRight, - } = styles.item; - const { width: itemWidth } = styles.iconWrapper; - return itemWidth + itemPaddingLeft + itemPaddingRight; -} - -const ThemedInserterListItem = withPreferredColorScheme( InserterListItem ); - -ThemedInserterListItem.getWidth = getWidth; - -export default ThemedInserterListItem; diff --git a/packages/block-editor/src/components/inserter-list-item/style.native.scss b/packages/block-editor/src/components/inserter-list-item/style.native.scss deleted file mode 100644 index 2b00725f63c3f5..00000000000000 --- a/packages/block-editor/src/components/inserter-list-item/style.native.scss +++ /dev/null @@ -1,63 +0,0 @@ -.touchableArea { - border-radius: 8px 8px 8px 8px; -} - -.item { - flex-direction: column; - justify-content: flex-start; - align-items: center; - padding-left: $grid-unit-20 / 2; - padding-right: $grid-unit-20 / 2; - padding-top: 0; - padding-bottom: 0; -} - -.iconWrapper { - width: 104px; - height: 64px; - background-color: $gray-light; //#f3f6f8 - border-radius: 8px 8px 8px 8px; - justify-content: center; - align-items: center; -} - -.modalIconWrapperDark { - background-color: rgba($white, 0.07); -} - -.icon { - width: 32px; - height: 32px; - justify-content: center; - align-items: center; - fill: $gray-dark; -} - -.iconDark { - fill: $white; -} - -.itemLabel { - background-color: transparent; - padding-left: 2; - padding-right: 2; - padding-top: 4; - padding-bottom: 0; - justify-content: center; - font-size: 12; - color: $gray-dark; -} - -.itemLabelDark { - color: $white; -} - -.clipboardBlock { - background-color: transparent; - border-width: 1px; - border-color: $light-gray-400; -} - -.clipboardBlockDark { - border-color: $gray-70; -} From a412058839162181f0a31f7e4c164095f888a1cd Mon Sep 17 00:00:00 2001 From: Carlos Garcia Date: Fri, 26 Mar 2021 17:18:51 +0100 Subject: [PATCH 26/92] Cleanup inserter native styles --- .../src/components/inserter/style.native.scss | 8 -------- 1 file changed, 8 deletions(-) diff --git a/packages/block-editor/src/components/inserter/style.native.scss b/packages/block-editor/src/components/inserter/style.native.scss index 01d69cf7197ab2..3fb88ff020d353 100644 --- a/packages/block-editor/src/components/inserter/style.native.scss +++ b/packages/block-editor/src/components/inserter/style.native.scss @@ -1,9 +1,5 @@ /** @format */ -.rowSeparator { - height: 12px; -} - .addBlockButton { color: $blue-wordpress; } @@ -12,10 +8,6 @@ color: $blue-30; } -.columnPadding { - padding: $grid-unit-20; -} - .list { padding-bottom: 20; padding-top: 8; From a3c3ca8948df0982b91ca426ac57e96beab5925a Mon Sep 17 00:00:00 2001 From: jhnstn Date: Wed, 7 Apr 2021 21:32:11 -0700 Subject: [PATCH 27/92] Update platform specific styles --- .../components/inserter/search-form.native.js | 191 +++++++++++++----- .../inserter/searchFormStyles.android.scss | 7 + .../inserter/searchFormStyles.ios.scss | 11 + .../src/components/inserter/style.native.scss | 38 +++- 4 files changed, 190 insertions(+), 57 deletions(-) create mode 100644 packages/block-editor/src/components/inserter/searchFormStyles.android.scss create mode 100644 packages/block-editor/src/components/inserter/searchFormStyles.ios.scss diff --git a/packages/block-editor/src/components/inserter/search-form.native.js b/packages/block-editor/src/components/inserter/search-form.native.js index 8178aef4affc65..b04c9f4e0aeebc 100644 --- a/packages/block-editor/src/components/inserter/search-form.native.js +++ b/packages/block-editor/src/components/inserter/search-form.native.js @@ -1,7 +1,13 @@ /** * External dependencies */ -import { TextInput, View, TouchableHighlight } from 'react-native'; +import { + TextInput, + Text, + View, + TouchableHighlight, + Platform, +} from 'react-native'; /** * WordPress dependencies @@ -15,74 +21,165 @@ import { cancelCircleFilled, arrowLeft, search as searchIcon, + close, } from '@wordpress/icons'; /** * Internal dependencies */ import styles from './style.scss'; +import platformStyles from './searchFormStyles'; function InserterSearchForm( { value, onChange, onLayout = () => {} } ) { const [ isActive, setIsActive ] = useState( false ); + const isIOS = Platform.OS === 'ios'; + const inputRef = useRef(); - const searchFormStyle = usePreferredColorSchemeStyle( - styles.searchForm, - styles.searchFormDark + function isInactive() { + return ! value && ! isActive; + } + + const containerStyle = usePreferredColorSchemeStyle( + styles[ 'inserter-search-form__container' ], + styles[ 'inserter-search-form__container--dark' ] ); - const searchFormInputStyle = usePreferredColorSchemeStyle( - styles.searchFormInput, - styles.searchFormInputDark + const containerActiveStyle = { + ...containerStyle, + ...usePreferredColorSchemeStyle( + platformStyles[ 'inserter-search-form__container--active' ], + platformStyles[ 'inserter-search-form__container--active-dark' ] + ), + }; + + const formStyle = { + ...usePreferredColorSchemeStyle( + styles[ 'inserter-search-form__form' ], + styles[ 'inserter-search-form__form--dark' ] + ), + ...usePreferredColorSchemeStyle( + platformStyles[ 'inserter-search-form__form' ], + platformStyles[ 'inserter-search-form__form--dark' ] + ), + }; + + const formActiveStyle = { + ...formStyle, + ...usePreferredColorSchemeStyle( + platformStyles[ 'inserter-search-form__form--active' ], + platformStyles[ 'inserter-search-form__form--active-dark' ] + ), + }; + const formInputStyle = usePreferredColorSchemeStyle( + styles[ 'inserter-search-form__form-input' ], + styles[ 'inserter-search-form__form-input--dark' ] ); + const formInputActiveStyle = { + ...formInputStyle, + ...usePreferredColorSchemeStyle( + platformStyles[ 'inserter-search-form__form-input--active' ], + platformStyles[ 'inserter-search-form__form-input--active-dark' ] + ), + }; + const placeholderStyle = usePreferredColorSchemeStyle( - styles.searchFormPlaceholder, - styles.searchFormPlaceholderDark + styles[ 'inserter-search-form__form-input-placeholder' ], + styles[ 'inserter-search-form__form-input-placeholder--dark' ] ); - return ( - - - { isActive ? ( - { - inputRef.current.blur(); - onChange( '' ); - setIsActive( false ); - } } - /> - ) : ( - { - inputRef.current.focus(); - setIsActive( true ); - } } - /> - ) } - setIsActive( true ) } - value={ value } - placeholder={ __( 'Search blocks' ) } + const cancelButtonStyle = styles[ 'inserter-search-form__cancel-button' ]; + + const cancelButtonTextStyle = usePreferredColorSchemeStyle( + styles[ 'inserter-search-form__cancel-button-text' ], + styles[ 'inserter-search-form__cancel-button-text--dark' ] + ); + + function onCancel() { + inputRef.current.blur(); + onChange( '' ); + setIsActive( false ); + } + + function onActivate() { + inputRef.current.focus(); + setIsActive( true ); + } + + function renderLeftButton() { + if ( ! isIOS && isActive ) { + return ( + + ); + } + + return ( + + ); + } - { !! value && ( - } - onClick={ () => { - onChange( '' ); - } } + function renderRightButton() { + if ( isInactive() ) { + return ( + + ); + } + + if ( !! value ) { + return ( + + } + onClick={ () => { + onChange( '' ); + } } + /> + ); + } + } + + return ( + + + + { renderLeftButton() } + setIsActive( true ) } + value={ value } + placeholder={ __( 'Search blocks' ) } /> + { renderRightButton() } + + { isActive && isIOS && ( + + + { __( 'Cancel' ) } + + ) } diff --git a/packages/block-editor/src/components/inserter/searchFormStyles.android.scss b/packages/block-editor/src/components/inserter/searchFormStyles.android.scss new file mode 100644 index 00000000000000..ab6e13ae8af063 --- /dev/null +++ b/packages/block-editor/src/components/inserter/searchFormStyles.android.scss @@ -0,0 +1,7 @@ +.inserter-search-form__form { + border: 1px $gray-light; +} + +.inserter-search-form__form--active { + border: none; +} diff --git a/packages/block-editor/src/components/inserter/searchFormStyles.ios.scss b/packages/block-editor/src/components/inserter/searchFormStyles.ios.scss new file mode 100644 index 00000000000000..c3288a0fdf989a --- /dev/null +++ b/packages/block-editor/src/components/inserter/searchFormStyles.ios.scss @@ -0,0 +1,11 @@ +.inserter-search-form__container--active { + margin-right: 0; +} + +.inserter-search-form__form { + background-color: $gray-light; +} + +.inserter-search-form__form-input--active { + flex: 1; +} diff --git a/packages/block-editor/src/components/inserter/style.native.scss b/packages/block-editor/src/components/inserter/style.native.scss index 55063f811cc784..067133aa18b093 100644 --- a/packages/block-editor/src/components/inserter/style.native.scss +++ b/packages/block-editor/src/components/inserter/style.native.scss @@ -20,33 +20,51 @@ padding-bottom: 20; } -.searchForm { +.inserter-search-form__container { height: 46px; + margin: 0 $grid-unit-30 $grid-unit-10; + margin-right: $grid-unit-30; + flex-direction: row; + justify-content: space-between; +} + +.inserter-search-form__form { + height: 100%; border-radius: 8px; color: $gray-dark; - margin: $grid-unit-30; - background-color: $gray-light; flex-direction: row; justify-content: space-between; + flex: 4; } -.searchFormDark { +.inserter-search-form__form--dark { background-color: rgba($white, 0.07); } - -.searchFormInput { +.inserter-search-form__form-input { color: $gray-dark; - flex: 2; + text-align: left; + flex: 1; } -.searchFormInputDark { +.inserter-search-form__form-input--dark { color: $white; } -.searchFormPlaceholder { +.inserter-search-form__form-input-placeholder { color: $gray; } -.searchFormPlaceholderDark { +.inserter-search-form__form-input-placeholder--dark { color: rgba($white, 0.8); } + +.inserter-search-form__cancel-button { + height: 100%; + justify-content: center; + align-items: center; + flex: 1; +} + +.inserter-search-form__cancel-button-text { + color: $blue-wordpress; +} From a5a6beb13923b80cac6ae99797dde272c9341a48 Mon Sep 17 00:00:00 2001 From: jhnstn Date: Thu, 8 Apr 2021 17:21:00 -0700 Subject: [PATCH 28/92] Fix styles import --- .../block-editor/src/components/inserter/search-form.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/inserter/search-form.native.js b/packages/block-editor/src/components/inserter/search-form.native.js index b04c9f4e0aeebc..24c72e60f7ce89 100644 --- a/packages/block-editor/src/components/inserter/search-form.native.js +++ b/packages/block-editor/src/components/inserter/search-form.native.js @@ -28,7 +28,7 @@ import { * Internal dependencies */ import styles from './style.scss'; -import platformStyles from './searchFormStyles'; +import platformStyles from './searchFormStyles.scss'; function InserterSearchForm( { value, onChange, onLayout = () => {} } ) { const [ isActive, setIsActive ] = useState( false ); From 6aa2a115bb2307e1e100ba9df8cdb3623d2d5f47 Mon Sep 17 00:00:00 2001 From: jhnstn Date: Fri, 9 Apr 2021 14:43:08 -0700 Subject: [PATCH 29/92] Update android input --- .../components/inserter/search-form.native.js | 18 ++++++++++++++---- .../inserter/searchFormStyles.android.scss | 11 ++++++++++- .../src/components/inserter/style.native.scss | 2 -- 3 files changed, 24 insertions(+), 7 deletions(-) diff --git a/packages/block-editor/src/components/inserter/search-form.native.js b/packages/block-editor/src/components/inserter/search-form.native.js index 24c72e60f7ce89..3461b60ffdaf02 100644 --- a/packages/block-editor/src/components/inserter/search-form.native.js +++ b/packages/block-editor/src/components/inserter/search-form.native.js @@ -52,6 +52,9 @@ function InserterSearchForm( { value, onChange, onLayout = () => {} } ) { platformStyles[ 'inserter-search-form__container--active' ], platformStyles[ 'inserter-search-form__container--active-dark' ] ), + ...{ + border: '1px blue', + }, }; const formStyle = { @@ -72,10 +75,17 @@ function InserterSearchForm( { value, onChange, onLayout = () => {} } ) { platformStyles[ 'inserter-search-form__form--active-dark' ] ), }; - const formInputStyle = usePreferredColorSchemeStyle( - styles[ 'inserter-search-form__form-input' ], - styles[ 'inserter-search-form__form-input--dark' ] - ); + + const formInputStyle = { + ...usePreferredColorSchemeStyle( + styles[ 'inserter-search-form__form-input' ], + styles[ 'inserter-search-form__form-input--dark' ] + ), + ...usePreferredColorSchemeStyle( + platformStyles[ 'inserter-search-form__form-input' ], + platformStyles[ 'inserter-search-form__form-input--dark' ] + ), + }; const formInputActiveStyle = { ...formInputStyle, diff --git a/packages/block-editor/src/components/inserter/searchFormStyles.android.scss b/packages/block-editor/src/components/inserter/searchFormStyles.android.scss index ab6e13ae8af063..2de6ce476bdafc 100644 --- a/packages/block-editor/src/components/inserter/searchFormStyles.android.scss +++ b/packages/block-editor/src/components/inserter/searchFormStyles.android.scss @@ -1,7 +1,16 @@ .inserter-search-form__form { border: 1px $gray-light; } - +.inserter-search-form__form-input { + flex: 1; +} .inserter-search-form__form--active { border: none; } + +.inserter-search-form__container--active { + border-bottom-color: $gray-light; + border-bottom-width: 2px; + margin-left: 0; + margin-right: 0; +} diff --git a/packages/block-editor/src/components/inserter/style.native.scss b/packages/block-editor/src/components/inserter/style.native.scss index 067133aa18b093..9e28d6a9322613 100644 --- a/packages/block-editor/src/components/inserter/style.native.scss +++ b/packages/block-editor/src/components/inserter/style.native.scss @@ -23,7 +23,6 @@ .inserter-search-form__container { height: 46px; margin: 0 $grid-unit-30 $grid-unit-10; - margin-right: $grid-unit-30; flex-direction: row; justify-content: space-between; } @@ -43,7 +42,6 @@ .inserter-search-form__form-input { color: $gray-dark; text-align: left; - flex: 1; } .inserter-search-form__form-input--dark { From b28f2761a6b46bc1cb5cb0f807fce822a67b5a66 Mon Sep 17 00:00:00 2001 From: jhnstn Date: Fri, 9 Apr 2021 16:21:42 -0700 Subject: [PATCH 30/92] Replace search icone with Gridicon --- .../src/components/inserter/search-form.native.js | 10 ++++------ packages/components/src/index.native.js | 2 +- .../components/src/mobile/gridicons/index.native.js | 12 +++++++++++- 3 files changed, 16 insertions(+), 8 deletions(-) diff --git a/packages/block-editor/src/components/inserter/search-form.native.js b/packages/block-editor/src/components/inserter/search-form.native.js index 3461b60ffdaf02..9424182a74c2d2 100644 --- a/packages/block-editor/src/components/inserter/search-form.native.js +++ b/packages/block-editor/src/components/inserter/search-form.native.js @@ -15,15 +15,15 @@ import { import { useState, useRef } from '@wordpress/element'; import { usePreferredColorSchemeStyle } from '@wordpress/compose'; import { __ } from '@wordpress/i18n'; -import { ToolbarButton } from '@wordpress/components'; +import { ToolbarButton, Gridicons } from '@wordpress/components'; import { Icon, cancelCircleFilled, arrowLeft, - search as searchIcon, close, } from '@wordpress/icons'; + /** * Internal dependencies */ @@ -31,6 +31,7 @@ import styles from './style.scss'; import platformStyles from './searchFormStyles.scss'; function InserterSearchForm( { value, onChange, onLayout = () => {} } ) { + const [ isActive, setIsActive ] = useState( false ); const isIOS = Platform.OS === 'ios'; @@ -52,9 +53,6 @@ function InserterSearchForm( { value, onChange, onLayout = () => {} } ) { platformStyles[ 'inserter-search-form__container--active' ], platformStyles[ 'inserter-search-form__container--active-dark' ] ), - ...{ - border: '1px blue', - }, }; const formStyle = { @@ -132,7 +130,7 @@ function InserterSearchForm( { value, onChange, onLayout = () => {} } ) { return ( ); diff --git a/packages/components/src/index.native.js b/packages/components/src/index.native.js index e4fe68573ceda2..4cad7504dbbfd3 100644 --- a/packages/components/src/index.native.js +++ b/packages/components/src/index.native.js @@ -96,7 +96,7 @@ export { ALIGNMENT_BREAKPOINTS, alignmentHelpers, } from './mobile/utils/alignments'; - +export { default as Gridicons } from './mobile/gridicons'; // Hooks export { convertUnitToMobile, diff --git a/packages/components/src/mobile/gridicons/index.native.js b/packages/components/src/mobile/gridicons/index.native.js index 43af41f5b39f53..03aadebb59799a 100644 --- a/packages/components/src/mobile/gridicons/index.native.js +++ b/packages/components/src/mobile/gridicons/index.native.js @@ -18,7 +18,17 @@ export const pages = fromPathData24x24( export const refresh = fromPathData24x24( 'M17.91 14c-.478 2.833-2.943 5-5.91 5-3.308 0-6-2.692-6-6s2.692-6 6-6h2.172l-2.086 2.086L13.5 10.5 18 6l-4.5-4.5-1.414 1.414L14.172 5H12c-4.418 0-8 3.582-8 8s3.582 8 8 8c4.08 0 7.438-3.055 7.93-7h-2.02z' ); - +export const search = fromPathData24x24( + 'M21,19l-5.154-5.154C16.574,12.742,17,11.421,17,10c0-3.866-3.134-7-7-7s-7,3.134-7,7c0,3.866,3.134,7,7,7 c1.421,0,2.742-0.426,3.846-1.154L19,21L21,19z M5,10c0-2.757,2.243-5,5-5s5,2.243,5,5s-2.243,5-5,5S5,12.757,5,10z' +); export const empty = ( ); + +export default { + posts, + pages, + refresh, + search, + empty, +}; From ed09983528d06550681f5b2687399507e65f80fa Mon Sep 17 00:00:00 2001 From: jhnstn Date: Fri, 9 Apr 2021 18:00:02 -0700 Subject: [PATCH 31/92] Remove touchable highlight component It wasn't doing much --- .../components/inserter/search-form.native.js | 62 ++++++++----------- 1 file changed, 25 insertions(+), 37 deletions(-) diff --git a/packages/block-editor/src/components/inserter/search-form.native.js b/packages/block-editor/src/components/inserter/search-form.native.js index 9424182a74c2d2..37f88d2b5efd7e 100644 --- a/packages/block-editor/src/components/inserter/search-form.native.js +++ b/packages/block-editor/src/components/inserter/search-form.native.js @@ -5,7 +5,6 @@ import { TextInput, Text, View, - TouchableHighlight, Platform, } from 'react-native'; @@ -16,13 +15,7 @@ import { useState, useRef } from '@wordpress/element'; import { usePreferredColorSchemeStyle } from '@wordpress/compose'; import { __ } from '@wordpress/i18n'; import { ToolbarButton, Gridicons } from '@wordpress/components'; -import { - Icon, - cancelCircleFilled, - arrowLeft, - close, -} from '@wordpress/icons'; - +import { Icon, cancelCircleFilled, arrowLeft, close } from '@wordpress/icons'; /** * Internal dependencies @@ -31,7 +24,6 @@ import styles from './style.scss'; import platformStyles from './searchFormStyles.scss'; function InserterSearchForm( { value, onChange, onLayout = () => {} } ) { - const [ isActive, setIsActive ] = useState( false ); const isIOS = Platform.OS === 'ios'; @@ -162,35 +154,31 @@ function InserterSearchForm( { value, onChange, onLayout = () => {} } ) { } return ( - - - - { renderLeftButton() } - setIsActive( true ) } - value={ value } - placeholder={ __( 'Search blocks' ) } - /> - { renderRightButton() } - - { isActive && isIOS && ( - - - { __( 'Cancel' ) } - - - ) } + + + { renderLeftButton() } + setIsActive( true ) } + value={ value } + placeholder={ __( 'Search blocks' ) } + /> + { renderRightButton() } - + { isActive && isIOS && ( + + + { __( 'Cancel' ) } + + + ) } + ); } From f63dd6306f419193028f00fcf48053b3ae7e2e6f Mon Sep 17 00:00:00 2001 From: jhnstn Date: Mon, 12 Apr 2021 17:10:58 -0700 Subject: [PATCH 32/92] Refactor input form --- .../components/inserter/search-form.native.js | 48 ++++++++----------- .../src/components/inserter/style.native.scss | 7 +++ 2 files changed, 27 insertions(+), 28 deletions(-) diff --git a/packages/block-editor/src/components/inserter/search-form.native.js b/packages/block-editor/src/components/inserter/search-form.native.js index 37f88d2b5efd7e..68490d5709fb2d 100644 --- a/packages/block-editor/src/components/inserter/search-form.native.js +++ b/packages/block-editor/src/components/inserter/search-form.native.js @@ -6,6 +6,7 @@ import { Text, View, Platform, + TouchableOpacity, } from 'react-native'; /** @@ -14,7 +15,7 @@ import { import { useState, useRef } from '@wordpress/element'; import { usePreferredColorSchemeStyle } from '@wordpress/compose'; import { __ } from '@wordpress/i18n'; -import { ToolbarButton, Gridicons } from '@wordpress/components'; +import { ToolbarButton, Gridicons, Button } from '@wordpress/components'; import { Icon, cancelCircleFilled, arrowLeft, close } from '@wordpress/icons'; /** @@ -30,10 +31,6 @@ function InserterSearchForm( { value, onChange, onLayout = () => {} } ) { const inputRef = useRef(); - function isInactive() { - return ! value && ! isActive; - } - const containerStyle = usePreferredColorSchemeStyle( styles[ 'inserter-search-form__container' ], styles[ 'inserter-search-form__container--dark' ] @@ -90,6 +87,11 @@ function InserterSearchForm( { value, onChange, onLayout = () => {} } ) { styles[ 'inserter-search-form__form-input-placeholder--dark' ] ); + const iconStyle = usePreferredColorSchemeStyle( + styles[ 'inserter-search-form__icon' ], + styles[ 'inserter-search-form__icon--dark' ] + ); + const cancelButtonStyle = styles[ 'inserter-search-form__cancel-button' ]; const cancelButtonTextStyle = usePreferredColorSchemeStyle( @@ -103,15 +105,10 @@ function InserterSearchForm( { value, onChange, onLayout = () => {} } ) { setIsActive( false ); } - function onActivate() { - inputRef.current.focus(); - setIsActive( true ); - } - function renderLeftButton() { if ( ! isIOS && isActive ) { return ( - {} } ) { ); } - return ( - - ); + return ; } function renderRightButton() { - if ( isInactive() ) { - return ( - - ); + // Add a View element to properly center the input placeholder via flexbox + if ( isIOS && ! isActive ) { + return ; } if ( !! value ) { @@ -154,12 +141,17 @@ function InserterSearchForm( { value, onChange, onLayout = () => {} } ) { } return ( - { + setIsActive( true ); + inputRef.current.focus(); + } } onLayout={ onLayout } + activeOpacity={ isActive ? 1 : 0.2 } > - { renderLeftButton() } + { renderLeftButton() } {} } ) { ) } - + ); } diff --git a/packages/block-editor/src/components/inserter/style.native.scss b/packages/block-editor/src/components/inserter/style.native.scss index 9e28d6a9322613..e85d328064382b 100644 --- a/packages/block-editor/src/components/inserter/style.native.scss +++ b/packages/block-editor/src/components/inserter/style.native.scss @@ -42,6 +42,7 @@ .inserter-search-form__form-input { color: $gray-dark; text-align: left; + font-size: 17px; } .inserter-search-form__form-input--dark { @@ -65,4 +66,10 @@ .inserter-search-form__cancel-button-text { color: $blue-wordpress; + font-size: 17px; +} + +.inserter-search-form__icon { + padding: 0 16px; + justify-content: center; } From 851079f435991f7f5d1ee56848d71ccd00953bed Mon Sep 17 00:00:00 2001 From: jhnstn Date: Tue, 13 Apr 2021 16:38:52 -0700 Subject: [PATCH 33/92] Clean up style generation --- .../components/inserter/search-form.native.js | 149 ++++++++++++++---- .../inserter/searchFormStyles.ios.scss | 4 + .../src/components/inserter/style.native.scss | 10 +- 3 files changed, 128 insertions(+), 35 deletions(-) diff --git a/packages/block-editor/src/components/inserter/search-form.native.js b/packages/block-editor/src/components/inserter/search-form.native.js index 68490d5709fb2d..c178416f528441 100644 --- a/packages/block-editor/src/components/inserter/search-form.native.js +++ b/packages/block-editor/src/components/inserter/search-form.native.js @@ -15,7 +15,7 @@ import { import { useState, useRef } from '@wordpress/element'; import { usePreferredColorSchemeStyle } from '@wordpress/compose'; import { __ } from '@wordpress/i18n'; -import { ToolbarButton, Gridicons, Button } from '@wordpress/components'; +import { Gridicons } from '@wordpress/components'; import { Icon, cancelCircleFilled, arrowLeft, close } from '@wordpress/icons'; /** @@ -24,6 +24,20 @@ import { Icon, cancelCircleFilled, arrowLeft, close } from '@wordpress/icons'; import styles from './style.scss'; import platformStyles from './searchFormStyles.scss'; +function IconButton( { icon, label, hint, ...props } ) { + return ( + + + + ); +} + function InserterSearchForm( { value, onChange, onLayout = () => {} } ) { const [ isActive, setIsActive ] = useState( false ); @@ -31,13 +45,23 @@ function InserterSearchForm( { value, onChange, onLayout = () => {} } ) { const inputRef = useRef(); - const containerStyle = usePreferredColorSchemeStyle( - styles[ 'inserter-search-form__container' ], - styles[ 'inserter-search-form__container--dark' ] - ); + const containerStyle = { + ...usePreferredColorSchemeStyle( + styles[ 'inserter-search-form__container' ], + styles[ 'inserter-search-form__container--dark' ] + ), + ...usePreferredColorSchemeStyle( + platformStyles[ 'inserter-search-form__container' ], + platformStyles[ 'inserter-search-form__container--dark' ] + ), + }; const containerActiveStyle = { ...containerStyle, + ...usePreferredColorSchemeStyle( + styles[ 'inserter-search-form__container--active' ], + styles[ 'inserter-search-form__container--active-dark' ] + ), ...usePreferredColorSchemeStyle( platformStyles[ 'inserter-search-form__container--active' ], platformStyles[ 'inserter-search-form__container--active-dark' ] @@ -57,6 +81,10 @@ function InserterSearchForm( { value, onChange, onLayout = () => {} } ) { const formActiveStyle = { ...formStyle, + ...usePreferredColorSchemeStyle( + styles[ 'inserter-search-form__form--active' ], + styles[ 'inserter-search-form__form--active-dark' ] + ), ...usePreferredColorSchemeStyle( platformStyles[ 'inserter-search-form__form--active' ], platformStyles[ 'inserter-search-form__form--active-dark' ] @@ -76,42 +104,89 @@ function InserterSearchForm( { value, onChange, onLayout = () => {} } ) { const formInputActiveStyle = { ...formInputStyle, + ...usePreferredColorSchemeStyle( + styles[ 'inserter-search-form__form-input--active' ], + styles[ 'inserter-search-form__form-input--active-dark' ] + ), ...usePreferredColorSchemeStyle( platformStyles[ 'inserter-search-form__form-input--active' ], platformStyles[ 'inserter-search-form__form-input--active-dark' ] ), }; - const placeholderStyle = usePreferredColorSchemeStyle( - styles[ 'inserter-search-form__form-input-placeholder' ], - styles[ 'inserter-search-form__form-input-placeholder--dark' ] - ); + const placeholderStyle = { + ...usePreferredColorSchemeStyle( + styles[ 'inserter-search-form__placeholder' ], + styles[ 'inserter-search-form__placeholder--dark' ] + ), + ...usePreferredColorSchemeStyle( + platformStyles[ 'inserter-search-form__placeholder' ], + platformStyles[ 'inserter-search-form__placeholder--dark' ] + ), + }; - const iconStyle = usePreferredColorSchemeStyle( - styles[ 'inserter-search-form__icon' ], - styles[ 'inserter-search-form__icon--dark' ] - ); + const iconStyle = { + ...usePreferredColorSchemeStyle( + styles[ 'inserter-search-form__icon' ], + styles[ 'inserter-search-form__icon--dark' ] + ), + ...usePreferredColorSchemeStyle( + platformStyles[ 'inserter-search-form__icon' ], + platformStyles[ 'inserter-search-form__icon--dark' ] + ), + }; - const cancelButtonStyle = styles[ 'inserter-search-form__cancel-button' ]; + const iconActiveStyle = { + ...iconStyle, + ...usePreferredColorSchemeStyle( + styles[ 'inserter-search-form__icon--active' ], + styles[ 'inserter-search-form__icon--active-dark' ] + ), + ...usePreferredColorSchemeStyle( + platformStyles[ 'inserter-search-form__icon--active' ], + platformStyles[ 'inserter-search-form__icon--active-dark' ] + ), + }; - const cancelButtonTextStyle = usePreferredColorSchemeStyle( - styles[ 'inserter-search-form__cancel-button-text' ], - styles[ 'inserter-search-form__cancel-button-text--dark' ] - ); + const cancelButtonStyle = { + ...usePreferredColorSchemeStyle( + styles[ 'inserter-search-form__cancel-button' ], + styles[ 'inserter-search-form__cancel-button--dark' ] + ), + ...usePreferredColorSchemeStyle( + platformStyles[ 'inserter-search-form__cancel-button' ], + platformStyles[ 'inserter-search-form__cancel-button--dark' ] + ), + }; + + const cancelButtonTextStyle = { + ...usePreferredColorSchemeStyle( + styles[ 'inserter-search-form__cancel-button-text' ], + styles[ 'inserter-search-form__cancel-button-text--dark' ] + ), + ...usePreferredColorSchemeStyle( + platformStyles[ 'inserter-search-form__cancel-button-text' ], + platformStyles[ 'inserter-search-form__cancel-button-text--dark' ] + ), + }; + + function clearInput() { + onChange( '' ); + } function onCancel() { inputRef.current.blur(); - onChange( '' ); + clearInput(); setIsActive( false ); } function renderLeftButton() { if ( ! isIOS && isActive ) { return ( -