diff --git a/packages/block-editor/src/components/block-settings/container.native.js b/packages/block-editor/src/components/block-settings/container.native.js index c51a42b39de6d..1b59377f29161 100644 --- a/packages/block-editor/src/components/block-settings/container.native.js +++ b/packages/block-editor/src/components/block-settings/container.native.js @@ -6,12 +6,18 @@ import { withSelect, withDispatch } from '@wordpress/data'; import { compose } from '@wordpress/compose'; import { InspectorControls } from '@wordpress/block-editor'; +/** + * Internal dependencies + */ +import styles from './container.native.scss'; + function BottomSheetSettings( { editorSidebarOpened, closeGeneralSidebar, ...props } ) { return ( diff --git a/packages/block-editor/src/components/block-settings/container.native.scss b/packages/block-editor/src/components/block-settings/container.native.scss new file mode 100644 index 0000000000000..2eed1c9e3f2d0 --- /dev/null +++ b/packages/block-editor/src/components/block-settings/container.native.scss @@ -0,0 +1,4 @@ +.content { + padding-left: 0; + padding-right: 0; +} diff --git a/packages/block-library/src/image/edit.native.js b/packages/block-library/src/image/edit.native.js index 3e08ed18a2361..be86e880ff2a7 100644 --- a/packages/block-library/src/image/edit.native.js +++ b/packages/block-library/src/image/edit.native.js @@ -22,6 +22,7 @@ import { Toolbar, ToolbarButton, PanelBody, + PanelActions, } from '@wordpress/components'; import { @@ -240,6 +241,8 @@ export class ImageEdit extends React.Component { const { attributes, isSelected } = this.props; const { url, height, width, alt, href, id, linkTarget, sizeSlug } = attributes; + const actions = [ { label: __( 'Clear All Settings' ), onPress: this.onClearSettings } ]; + const getToolbarEditButton = ( open ) => ( @@ -286,16 +289,11 @@ export class ImageEdit extends React.Component { label={ __( 'Alt Text' ) } value={ alt || '' } valuePlaceholder={ __( 'None' ) } - separatorType={ 'fullWidth' } - onChange={ this.updateAlt } - /> - + ); diff --git a/packages/block-library/src/image/styles.native.scss b/packages/block-library/src/image/styles.native.scss index 9c5a9cbf5c45e..731e7e9e26312 100644 --- a/packages/block-library/src/image/styles.native.scss +++ b/packages/block-library/src/image/styles.native.scss @@ -18,10 +18,6 @@ align-items: center; } -.clearSettingsButton { - color: $alert-red; -} - .modalIcon { width: 80px; height: 80px; diff --git a/packages/components/src/index.native.js b/packages/components/src/index.native.js index c2c52ba08f0e5..3fada7034deeb 100644 --- a/packages/components/src/index.native.js +++ b/packages/components/src/index.native.js @@ -11,6 +11,7 @@ export { createSlotFill, Slot, Fill, Provider as SlotFillProvider } from './slot export { default as BaseControl } from './base-control'; export { default as TextareaControl } from './textarea-control'; export { default as PanelBody } from './panel/body'; +export { default as PanelActions } from './panel/actions'; export { default as Button } from './button'; export { default as TextControl } from './text-control'; export { default as ToggleControl } from './toggle-control'; diff --git a/packages/components/src/mobile/bottom-sheet/cell.native.js b/packages/components/src/mobile/bottom-sheet/cell.native.js index 5c97e762f3d48..52ff00b6b5b85 100644 --- a/packages/components/src/mobile/bottom-sheet/cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/cell.native.js @@ -63,6 +63,7 @@ class BottomSheetCell extends Component { const defaultLabelStyle = showValue || icon !== undefined ? cellLabelStyle : defaultMissingIconAndValue; const drawSeparator = ( separatorType && separatorType !== 'none' ) || separatorStyle === undefined; + const drawTopSeparator = drawSeparator && separatorType === 'topFullWidth'; const onCellPress = () => { if ( isValueEditable ) { @@ -91,6 +92,7 @@ class BottomSheetCell extends Component { case 'leftMargin': return leftMarginStyle; case 'fullWidth': + case 'topFullWidth': return defaultSeparatorStyle; case 'none': return undefined; @@ -169,6 +171,9 @@ class BottomSheetCell extends Component { onPress={ onCellPress } style={ { ...styles.clipToBounds, ...style } } > + { drawTopSeparator && ( + + ) } { icon && ( @@ -177,14 +182,14 @@ class BottomSheetCell extends Component { ) } - + { label } { showValue && getValueComponent() } { children } - { drawSeparator && ( + { ! drawTopSeparator && ( ) } diff --git a/packages/components/src/panel/actions.native.js b/packages/components/src/panel/actions.native.js new file mode 100644 index 0000000000000..02031bf53cb85 --- /dev/null +++ b/packages/components/src/panel/actions.native.js @@ -0,0 +1,36 @@ +/** + * External dependencies + */ +import { View } from 'react-native'; + +/** + * WordPress dependencies + */ +import { + TextControl, +} from '@wordpress/components'; + +/** + * Internal dependencies + */ +import styles from './actions.scss'; + +function PanelActions( { actions } ) { + return ( + + { actions.map( ( { label, onPress } ) => { + return ( + + ); + } ) } + + ); +} + +export default PanelActions; diff --git a/packages/components/src/panel/actions.native.scss b/packages/components/src/panel/actions.native.scss new file mode 100644 index 0000000000000..ed226c13883be --- /dev/null +++ b/packages/components/src/panel/actions.native.scss @@ -0,0 +1,7 @@ +.panelActionsContainer { + padding-top: 24; +} + +.defaultLabelStyle { + color: $alert-red; +} diff --git a/packages/components/src/panel/body.native.js b/packages/components/src/panel/body.native.js index aeeccc77a06c1..314650f945278 100644 --- a/packages/components/src/panel/body.native.js +++ b/packages/components/src/panel/body.native.js @@ -1,12 +1,16 @@ /** * External dependencies */ -import { View } from 'react-native'; +import { Text, View } from 'react-native'; /** * WordPress dependencies */ import { Component } from '@wordpress/element'; +/** + * Internal dependencies + */ +import styles from './body.scss'; export class PanelBody extends Component { constructor( ) { @@ -15,9 +19,11 @@ export class PanelBody extends Component { } render() { - const { children } = this.props; + const { children, title } = this.props; + return ( - + + { title && { title } } { children } ); diff --git a/packages/components/src/panel/body.native.scss b/packages/components/src/panel/body.native.scss new file mode 100644 index 0000000000000..a30c4df4c15df --- /dev/null +++ b/packages/components/src/panel/body.native.scss @@ -0,0 +1,11 @@ +.panelContainer { + padding: 0 16px; +} + +.sectionHeaderText { + color: #87a6bc; + padding-top: 24; + padding-bottom: 8; + font-size: 14; + font-weight: 500; +}