From a17a5c624f9f134c2e1068f58e38f428b5ef8edd Mon Sep 17 00:00:00 2001 From: Sergio Estevao Date: Mon, 9 Mar 2020 18:00:38 +0000 Subject: [PATCH 01/12] Refactor heading block to share more code with web version. --- .../components/colors/use-colors.native.js | 10 +++ packages/block-library/src/heading/edit.js | 13 ++- .../block-library/src/heading/edit.native.js | 81 ------------------- packages/components/src/index.native.js | 1 + packages/components/src/text/emotion-css.js | 6 ++ .../components/src/text/emotion-css.native.js | 6 ++ packages/components/src/text/mixins.js | 5 +- 7 files changed, 33 insertions(+), 89 deletions(-) create mode 100644 packages/block-editor/src/components/colors/use-colors.native.js delete mode 100644 packages/block-library/src/heading/edit.native.js create mode 100644 packages/components/src/text/emotion-css.js create mode 100644 packages/components/src/text/emotion-css.native.js diff --git a/packages/block-editor/src/components/colors/use-colors.native.js b/packages/block-editor/src/components/colors/use-colors.native.js new file mode 100644 index 00000000000000..49a29b6404836e --- /dev/null +++ b/packages/block-editor/src/components/colors/use-colors.native.js @@ -0,0 +1,10 @@ +const TextColor = ( props ) => <>{ props.children }; + +const InspectorControlsColorPanel = () => null; + +export default function __experimentalUseColors() { + return { + TextColor, + InspectorControlsColorPanel, + }; +} diff --git a/packages/block-library/src/heading/edit.js b/packages/block-library/src/heading/edit.js index 2b19391b7a038d..864baaf1875a57 100644 --- a/packages/block-library/src/heading/edit.js +++ b/packages/block-library/src/heading/edit.js @@ -12,7 +12,7 @@ import HeadingToolbar from './heading-toolbar'; * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { PanelBody } from '@wordpress/components'; +import { PanelBody, __experimentalText as Text } from '@wordpress/components'; import { createBlock } from '@wordpress/blocks'; import { AlignmentToolbar, @@ -22,7 +22,7 @@ import { __experimentalUseColors, __experimentalBlock as Block, } from '@wordpress/block-editor'; -import { useRef } from '@wordpress/element'; +import { useRef, Platform } from '@wordpress/element'; function HeadingEdit( { attributes, @@ -54,17 +54,19 @@ function HeadingEdit( { onChange={ ( newLevel ) => setAttributes( { level: newLevel } ) } + isCollapsed={ Platform.OS === 'web' } /> { setAttributes( { align: nextAlign } ); } } + isCollapsed={ Platform.OS === 'web' } /> -

{ __( 'Level' ) }

+ { __( 'Level' ) } setAttributes( { content: value } ) @@ -103,6 +107,7 @@ function HeadingEdit( { [ `has-text-align-${ align }` ]: align, } ) } placeholder={ placeholder || __( 'Write heading…' ) } + textAlign={ align } /> diff --git a/packages/block-library/src/heading/edit.native.js b/packages/block-library/src/heading/edit.native.js deleted file mode 100644 index 8d8d8b49aef99a..00000000000000 --- a/packages/block-library/src/heading/edit.native.js +++ /dev/null @@ -1,81 +0,0 @@ -/** - * Internal dependencies - */ -import HeadingToolbar from './heading-toolbar'; - -/** - * External dependencies - */ -import { View } from 'react-native'; - -/** - * WordPress dependencies - */ -import { __ } from '@wordpress/i18n'; -import { - RichText, - BlockControls, - __experimentalUseColors, -} from '@wordpress/block-editor'; -import { createBlock } from '@wordpress/blocks'; - -const HeadingEdit = ( { - attributes, - mergeBlocks, - onFocus, - onReplace, - setAttributes, - style, -} ) => { - const { align, content, level, placeholder } = attributes; - - /* eslint-disable @wordpress/no-unused-vars-before-return */ - const { TextColor } = __experimentalUseColors( [ - { name: 'textColor', property: 'color' }, - ] ); - /* eslint-enable @wordpress/no-unused-vars-before-return */ - - return ( - - - - setAttributes( { level: newLevel } ) - } - isCollapsed={ false } - /> - - - - setAttributes( { content: value } ) - } - onMerge={ mergeBlocks } - onSplit={ ( value ) => { - if ( ! value ) { - return createBlock( 'core/paragraph' ); - } - - return createBlock( 'core/heading', { - ...attributes, - content: value, - } ); - } } - onReplace={ onReplace } - onRemove={ () => onReplace( [] ) } - placeholder={ placeholder || __( 'Write heading…' ) } - textAlign={ align } - /> - - - ); -}; - -export default HeadingEdit; diff --git a/packages/components/src/index.native.js b/packages/components/src/index.native.js index 58a0ad7765cbc2..b944d8b1688723 100644 --- a/packages/components/src/index.native.js +++ b/packages/components/src/index.native.js @@ -44,6 +44,7 @@ export { default as withFocusOutside } from './higher-order/with-focus-outside'; export { default as withFocusReturn } from './higher-order/with-focus-return'; export { default as withNotices } from './higher-order/with-notices'; export { default as withSpokenMessages } from './higher-order/with-spoken-messages'; +export * from './text'; // Mobile Components export { default as BottomSheet } from './mobile/bottom-sheet'; diff --git a/packages/components/src/text/emotion-css.js b/packages/components/src/text/emotion-css.js new file mode 100644 index 00000000000000..d674885a21d292 --- /dev/null +++ b/packages/components/src/text/emotion-css.js @@ -0,0 +1,6 @@ +/** + * External dependencies + */ +import css from '@emotion/css'; + +export default css; diff --git a/packages/components/src/text/emotion-css.native.js b/packages/components/src/text/emotion-css.native.js new file mode 100644 index 00000000000000..11ea92e4e705c3 --- /dev/null +++ b/packages/components/src/text/emotion-css.native.js @@ -0,0 +1,6 @@ +/** + * External dependencies + */ +import { css } from '@emotion/native'; + +export default css; diff --git a/packages/components/src/text/mixins.js b/packages/components/src/text/mixins.js index dfa3dfecc38979..79d6ddaa18511b 100644 --- a/packages/components/src/text/mixins.js +++ b/packages/components/src/text/mixins.js @@ -1,11 +1,8 @@ -/** - * External dependencies - */ -import css from '@emotion/css'; /** * Internal dependencies */ import { fontFamily } from './font-family'; +import css from './emotion-css'; const fontWeightNormal = `font-weight: 400;`; const fontWeightSemibold = `font-weight: 600;`; From 28350f5d5dd21bc47824160131dc1bbb5f6093cd Mon Sep 17 00:00:00 2001 From: Sergio Estevao Date: Wed, 11 Mar 2020 09:54:15 +0000 Subject: [PATCH 02/12] Remove branching for RN. We now have an implementation of Block for RN. --- packages/block-library/src/heading/edit.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/block-library/src/heading/edit.js b/packages/block-library/src/heading/edit.js index 216e74d2c839b8..60ac1d493b0ec8 100644 --- a/packages/block-library/src/heading/edit.js +++ b/packages/block-library/src/heading/edit.js @@ -77,9 +77,7 @@ function HeadingEdit( { attributes, setAttributes, mergeBlocks, onReplace } ) { setAttributes( { content: value } ) From d8fb1e8fce0f74c7eeb1085a73878c2d948d991f Mon Sep 17 00:00:00 2001 From: Sergio Estevao Date: Wed, 11 Mar 2020 13:56:39 +0000 Subject: [PATCH 03/12] Remove platform checks at block level. --- packages/block-library/src/heading/edit.js | 8 +++----- packages/components/src/toolbar-group/index.js | 4 ++-- 2 files changed, 5 insertions(+), 7 deletions(-) diff --git a/packages/block-library/src/heading/edit.js b/packages/block-library/src/heading/edit.js index 60ac1d493b0ec8..a06d7cb2a7479c 100644 --- a/packages/block-library/src/heading/edit.js +++ b/packages/block-library/src/heading/edit.js @@ -22,7 +22,7 @@ import { __experimentalUseColors, __experimentalBlock as Block, } from '@wordpress/block-editor'; -import { useRef, Platform } from '@wordpress/element'; +import { useRef } from '@wordpress/element'; function HeadingEdit( { attributes, setAttributes, mergeBlocks, onReplace } ) { const ref = useRef(); @@ -47,15 +47,13 @@ function HeadingEdit( { attributes, setAttributes, mergeBlocks, onReplace } ) { selectedLevel={ level } onChange={ ( newLevel ) => setAttributes( { level: newLevel } ) - } - isCollapsed={ Platform.OS === 'web' } + } /> { setAttributes( { align: nextAlign } ); - } } - isCollapsed={ Platform.OS === 'web' } + } } /> diff --git a/packages/components/src/toolbar-group/index.js b/packages/components/src/toolbar-group/index.js index 50d69ccbf89eb4..3d8cd1421cb8ab 100644 --- a/packages/components/src/toolbar-group/index.js +++ b/packages/components/src/toolbar-group/index.js @@ -7,7 +7,7 @@ import { flatMap } from 'lodash'; /** * WordPress dependencies */ -import { useContext } from '@wordpress/element'; +import { useContext, Platform } from '@wordpress/element'; /** * Internal dependencies @@ -79,7 +79,7 @@ function ToolbarGroup( { controlSets = [ controlSets ]; } - if ( isCollapsed ) { + if ( isCollapsed && Platform.OS === 'web') { return ( Date: Wed, 11 Mar 2020 22:14:48 +0000 Subject: [PATCH 04/12] Fix lint-errors. --- packages/block-library/src/heading/edit.js | 4 ++-- packages/components/src/toolbar-group/index.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/heading/edit.js b/packages/block-library/src/heading/edit.js index a06d7cb2a7479c..694d201ad063f2 100644 --- a/packages/block-library/src/heading/edit.js +++ b/packages/block-library/src/heading/edit.js @@ -47,13 +47,13 @@ function HeadingEdit( { attributes, setAttributes, mergeBlocks, onReplace } ) { selectedLevel={ level } onChange={ ( newLevel ) => setAttributes( { level: newLevel } ) - } + } /> { setAttributes( { align: nextAlign } ); - } } + } } /> diff --git a/packages/components/src/toolbar-group/index.js b/packages/components/src/toolbar-group/index.js index 3d8cd1421cb8ab..69a28261063b4e 100644 --- a/packages/components/src/toolbar-group/index.js +++ b/packages/components/src/toolbar-group/index.js @@ -79,7 +79,7 @@ function ToolbarGroup( { controlSets = [ controlSets ]; } - if ( isCollapsed && Platform.OS === 'web') { + if ( isCollapsed && Platform.OS === 'web' ) { return ( Date: Sat, 21 Mar 2020 22:36:17 +0000 Subject: [PATCH 05/12] Implement Dropdown menu for React Native. --- .../src/dropdown-menu/index.native.js | 174 +++++++++++++++++- .../src/mobile/bottom-sheet/cell.native.js | 6 +- .../components/src/toolbar-group/index.js | 4 +- 3 files changed, 178 insertions(+), 6 deletions(-) diff --git a/packages/components/src/dropdown-menu/index.native.js b/packages/components/src/dropdown-menu/index.native.js index 6243847023227e..08ff63cad0c17e 100644 --- a/packages/components/src/dropdown-menu/index.native.js +++ b/packages/components/src/dropdown-menu/index.native.js @@ -1,5 +1,173 @@ -function DropdownMenu() { - return null; +/** + * External dependencies + */ +import classnames from 'classnames'; +import { flatMap, isEmpty, isFunction } from 'lodash'; +/** + * WordPress dependencies + */ +import { DOWN } from '@wordpress/keycodes'; +import deprecated from '@wordpress/deprecated'; +import { BottomSheet, PanelBody } from '@wordpress/components'; +import { withPreferredColorScheme } from '@wordpress/compose'; + +/** + * Internal dependencies + */ +import Button from '../button'; +import Dropdown from '../dropdown'; + +function mergeProps( defaultProps = {}, props = {} ) { + const mergedProps = { + ...defaultProps, + ...props, + }; + + if ( props.className && defaultProps.className ) { + mergedProps.className = classnames( + props.className, + defaultProps.className + ); + } + + return mergedProps; +} + +function DropdownMenu( { + children, + className, + controls, + icon = 'menu', + label, + popoverProps, + toggleProps, + // The following props exist for backward compatibility. + menuLabel, + position, +} ) { + if ( menuLabel ) { + deprecated( '`menuLabel` prop in `DropdownComponent`', { + alternative: '`menuProps` object and its `aria-label` property', + plugin: 'Gutenberg', + } ); + } + + if ( position ) { + deprecated( '`position` prop in `DropdownComponent`', { + alternative: '`popoverProps` object and its `position` property', + plugin: 'Gutenberg', + } ); + } + + if ( isEmpty( controls ) && ! isFunction( children ) ) { + return null; + } + + // Normalize controls to nested array of objects (sets of controls) + let controlSets; + if ( ! isEmpty( controls ) ) { + controlSets = controls; + if ( ! Array.isArray( controlSets[ 0 ] ) ) { + controlSets = [ controlSets ]; + } + } + const mergedPopoverProps = mergeProps( + { + className: 'components-dropdown-menu__popover', + position, + }, + popoverProps + ); + + return ( + { + const openOnArrowDown = ( event ) => { + if ( ! isOpen && event.keyCode === DOWN ) { + event.preventDefault(); + event.stopPropagation(); + onToggle(); + } + }; + const mergedToggleProps = mergeProps( + { + className: classnames( + 'components-dropdown-menu__toggle', + { + 'is-opened': isOpen, + } + ), + }, + toggleProps + ); + + return ( + + ); + } } + renderContent={ ( { isOpen, onClose, ...props } ) => { + return ( + + { isFunction( children ) ? children( props ) : null } + + { flatMap( + controlSets, + ( controlSet, indexOfSet ) => + controlSet.map( + ( control, indexOfControl ) => ( + { + onClose(); + if ( control.onClick ) { + control.onClick(); + } + } } + editable={ false } + icon={ control.icon } + leftAlign={ true } + isSelected={ control.isActive } + /> + ) + ) + ) } + + + ); + } } + /> + ); } -export default DropdownMenu; +export default withPreferredColorScheme( DropdownMenu ); diff --git a/packages/components/src/mobile/bottom-sheet/cell.native.js b/packages/components/src/mobile/bottom-sheet/cell.native.js index e1bea1ac3bea34..2aabf103db0463 100644 --- a/packages/components/src/mobile/bottom-sheet/cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/cell.native.js @@ -15,6 +15,7 @@ import { isEmpty } from 'lodash'; * WordPress dependencies */ import { Icon } from '@wordpress/components'; +import { check } from '@wordpress/icons'; import { Component } from '@wordpress/element'; import { __, _x, sprintf } from '@wordpress/i18n'; import { withPreferredColorScheme } from '@wordpress/compose'; @@ -100,6 +101,7 @@ class BottomSheetCell extends Component { onChangeValue, children, editable = true, + isSelected = false, separatorType, style = {}, getStylesFromColorScheme, @@ -127,7 +129,7 @@ class BottomSheetCell extends Component { ? cellLabelLeftAlignNoIconStyle : cellLabelCenteredStyle; const defaultLabelStyle = - showValue || icon !== undefined || customActionButton + showValue || customActionButton ? cellLabelStyle : defaultMissingIconAndValue; @@ -300,6 +302,7 @@ class BottomSheetCell extends Component { icon={ icon } size={ 24 } color={ iconStyle.color } + isPressed={ false } /> + { isSelected && } { customActionButton && ( Date: Sat, 21 Mar 2020 22:36:43 +0000 Subject: [PATCH 06/12] Increase headers icon size. --- packages/block-library/src/heading/heading-level-icon.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/heading/heading-level-icon.js b/packages/block-library/src/heading/heading-level-icon.js index 29a60cd93d7217..eef2b3af3b5e7e 100644 --- a/packages/block-library/src/heading/heading-level-icon.js +++ b/packages/block-library/src/heading/heading-level-icon.js @@ -18,8 +18,8 @@ export default function HeadingLevelIcon( { level, isPressed = false } ) { return ( Date: Sat, 21 Mar 2020 22:45:12 +0000 Subject: [PATCH 07/12] Show all heading levels on the block controls in RN We also hide the headings settings in RN because all of them are available in the block controls. --- packages/block-library/src/heading/edit.js | 36 ++++++++++++---------- 1 file changed, 19 insertions(+), 17 deletions(-) diff --git a/packages/block-library/src/heading/edit.js b/packages/block-library/src/heading/edit.js index 694d201ad063f2..cc68a15f0d79b5 100644 --- a/packages/block-library/src/heading/edit.js +++ b/packages/block-library/src/heading/edit.js @@ -22,7 +22,7 @@ import { __experimentalUseColors, __experimentalBlock as Block, } from '@wordpress/block-editor'; -import { useRef } from '@wordpress/element'; +import { useRef, Platform } from '@wordpress/element'; function HeadingEdit( { attributes, setAttributes, mergeBlocks, onReplace } ) { const ref = useRef(); @@ -42,8 +42,8 @@ function HeadingEdit( { attributes, setAttributes, mergeBlocks, onReplace } ) { <> setAttributes( { level: newLevel } ) @@ -56,20 +56,22 @@ function HeadingEdit( { attributes, setAttributes, mergeBlocks, onReplace } ) { } } /> - - - { __( 'Level' ) } - - setAttributes( { level: newLevel } ) - } - /> - - + { Platform.OS === 'web' && ( + + + { __( 'Level' ) } + + setAttributes( { level: newLevel } ) + } + /> + + + ) } { InspectorControlsColorPanel } Date: Tue, 24 Mar 2020 23:13:38 +0000 Subject: [PATCH 08/12] Style separators to have left margin. --- packages/components/src/dropdown-menu/index.native.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/components/src/dropdown-menu/index.native.js b/packages/components/src/dropdown-menu/index.native.js index 08ff63cad0c17e..8ab597da27368e 100644 --- a/packages/components/src/dropdown-menu/index.native.js +++ b/packages/components/src/dropdown-menu/index.native.js @@ -158,6 +158,12 @@ function DropdownMenu( { icon={ control.icon } leftAlign={ true } isSelected={ control.isActive } + separatorType={ + indexOfControl < + controlSet.length - 1 + ? 'leftMargin' + : 'none' + } /> ) ) From 09886344876fb6203e73ebeb6b87cdbb31ff75f6 Mon Sep 17 00:00:00 2001 From: Sergio Estevao Date: Wed, 25 Mar 2020 00:03:39 +0000 Subject: [PATCH 09/12] Color selected checkmark on cell --- packages/components/src/mobile/bottom-sheet/cell.native.js | 7 ++++++- .../src/mobile/bottom-sheet/cellStyles.android.scss | 4 ++++ .../components/src/mobile/bottom-sheet/cellStyles.ios.scss | 4 ++++ 3 files changed, 14 insertions(+), 1 deletion(-) diff --git a/packages/components/src/mobile/bottom-sheet/cell.native.js b/packages/components/src/mobile/bottom-sheet/cell.native.js index b0ae3525c58a75..deb6cdd5f8f216 100644 --- a/packages/components/src/mobile/bottom-sheet/cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/cell.native.js @@ -317,8 +317,13 @@ class BottomSheetCell extends Component { { label } + { isSelected && ( + + ) } - { isSelected && } { customActionButton && ( Date: Wed, 25 Mar 2020 00:13:41 +0000 Subject: [PATCH 10/12] Add separators for dropdown menus --- .../toolbar-group-collapsed.native.js | 32 +++++++++++++++++-- 1 file changed, 29 insertions(+), 3 deletions(-) diff --git a/packages/components/src/toolbar-group/toolbar-group-collapsed.native.js b/packages/components/src/toolbar-group/toolbar-group-collapsed.native.js index a890645928854a..411a4e6edbd604 100644 --- a/packages/components/src/toolbar-group/toolbar-group-collapsed.native.js +++ b/packages/components/src/toolbar-group/toolbar-group-collapsed.native.js @@ -1,10 +1,36 @@ +/** + * External dependencies + */ +import { View } from 'react-native'; +/** + * WordPress dependencies + */ +import { withPreferredColorScheme } from '@wordpress/compose'; /** * Internal dependencies */ import DropdownMenu from '../dropdown-menu'; +import styles from './style.scss'; -function ToolbarGroupCollapsed( { controls = [], ...props } ) { - return ; +function ToolbarGroupCollapsed( { + controls = [], + getStylesFromColorScheme, + passedStyle, + ...props +} ) { + return ( + + + + ); } -export default ToolbarGroupCollapsed; +export default withPreferredColorScheme( ToolbarGroupCollapsed ); From 3d7e0070d7e0652fc21724c010363796c5c14b0c Mon Sep 17 00:00:00 2001 From: Sergio Estevao Date: Wed, 25 Mar 2020 01:18:50 +0000 Subject: [PATCH 11/12] Remove extra padding on panel for dropdown --- packages/components/src/dropdown-menu/index.native.js | 5 ++++- packages/components/src/panel/body.native.js | 4 ++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/components/src/dropdown-menu/index.native.js b/packages/components/src/dropdown-menu/index.native.js index 8ab597da27368e..2bf49ff1d77332 100644 --- a/packages/components/src/dropdown-menu/index.native.js +++ b/packages/components/src/dropdown-menu/index.native.js @@ -136,7 +136,10 @@ function DropdownMenu( { onClose={ onClose } > { isFunction( children ) ? children( props ) : null } - + { flatMap( controlSets, ( controlSet, indexOfSet ) => diff --git a/packages/components/src/panel/body.native.js b/packages/components/src/panel/body.native.js index 87c5eeb60bac7f..36126ea76a9f5b 100644 --- a/packages/components/src/panel/body.native.js +++ b/packages/components/src/panel/body.native.js @@ -19,10 +19,10 @@ export class PanelBody extends Component { } render() { - const { children, title } = this.props; + const { children, title, style = {} } = this.props; return ( - + { title && ( { title } ) } From bc3ca73ad6cc0387976dc9a7c6a07da2fd67d7e8 Mon Sep 17 00:00:00 2001 From: Sergio Estevao Date: Wed, 25 Mar 2020 17:33:14 +0000 Subject: [PATCH 12/12] Fix separator on iOS and Android. --- packages/components/src/dropdown-menu/index.native.js | 10 ++++++---- .../src/mobile/bottom-sheet/styles.native.scss | 2 +- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/components/src/dropdown-menu/index.native.js b/packages/components/src/dropdown-menu/index.native.js index 2bf49ff1d77332..d665e37e49cae3 100644 --- a/packages/components/src/dropdown-menu/index.native.js +++ b/packages/components/src/dropdown-menu/index.native.js @@ -3,6 +3,7 @@ */ import classnames from 'classnames'; import { flatMap, isEmpty, isFunction } from 'lodash'; +import { Platform } from 'react-native'; /** * WordPress dependencies */ @@ -162,10 +163,11 @@ function DropdownMenu( { leftAlign={ true } isSelected={ control.isActive } separatorType={ - indexOfControl < - controlSet.length - 1 - ? 'leftMargin' - : 'none' + indexOfControl === + controlSet.length - 1 || + Platform.OS === 'android' + ? 'none' + : 'leftMargin' } /> ) diff --git a/packages/components/src/mobile/bottom-sheet/styles.native.scss b/packages/components/src/mobile/bottom-sheet/styles.native.scss index 254817bfb44490..c781949317b28a 100644 --- a/packages/components/src/mobile/bottom-sheet/styles.native.scss +++ b/packages/components/src/mobile/bottom-sheet/styles.native.scss @@ -137,7 +137,7 @@ font-size: 17px; color: #2e4453; flex: 1; - margin-left: 12px; + margin-left: 0; } .cellValue {