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 0000000000000..49a29b6404836 --- /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 3e43660a300ef..cc68a15f0d79b 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, 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 } 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 8d8d8b49aef99..0000000000000 --- 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/block-library/src/heading/heading-level-icon.js b/packages/block-library/src/heading/heading-level-icon.js index 29a60cd93d721..eef2b3af3b5e7 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 ( { + 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 } + separatorType={ + indexOfControl === + controlSet.length - 1 || + Platform.OS === 'android' + ? 'none' + : 'leftMargin' + } + /> + ) + ) + ) } + + + ); + } } + /> + ); } -export default DropdownMenu; +export default withPreferredColorScheme( DropdownMenu ); diff --git a/packages/components/src/index.native.js b/packages/components/src/index.native.js index abb7b278dc572..7d9f14269364c 100644 --- a/packages/components/src/index.native.js +++ b/packages/components/src/index.native.js @@ -46,6 +46,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/mobile/bottom-sheet/cell.native.js b/packages/components/src/mobile/bottom-sheet/cell.native.js index 37228c481eb59..deb6cdd5f8f21 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; @@ -303,6 +305,7 @@ class BottomSheetCell extends Component { icon={ icon } size={ 24 } color={ iconStyle.color } + isPressed={ false } /> { label } + { isSelected && ( + + ) } { customActionButton && ( + { title && ( { title } ) } diff --git a/packages/components/src/text/emotion-css.js b/packages/components/src/text/emotion-css.js new file mode 100644 index 0000000000000..d674885a21d29 --- /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 0000000000000..11ea92e4e705c --- /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 9d4abca2bad12..8d35dbe3b5d70 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;`; 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 a890645928854..411a4e6edbd60 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 );