From ed434d9851d63df0c78d1f043c31c671fb62e1ee Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Mon, 29 Jun 2020 16:11:31 +0200 Subject: [PATCH 01/20] Initial work on column percentage mechanism --- .../components/block-list/style.native.scss | 2 +- .../block-library/src/column/edit.native.js | 35 +++++++++++++++++-- .../block-library/src/columns/edit.native.js | 1 + 3 files changed, 35 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/block-list/style.native.scss b/packages/block-editor/src/components/block-list/style.native.scss index f2b07c5226916e..8beb72b50fb309 100644 --- a/packages/block-editor/src/components/block-list/style.native.scss +++ b/packages/block-editor/src/components/block-list/style.native.scss @@ -7,7 +7,7 @@ .horizontalContentContainer { flex-direction: row; flex-wrap: wrap; - justify-content: space-between; + justify-content: flex-start; align-items: stretch; max-width: $content-width; overflow: visible; diff --git a/packages/block-library/src/column/edit.native.js b/packages/block-library/src/column/edit.native.js index 70d519ca2e78c6..992a55956070c3 100644 --- a/packages/block-library/src/column/edit.native.js +++ b/packages/block-library/src/column/edit.native.js @@ -12,22 +12,26 @@ import { InnerBlocks, BlockControls, BlockVerticalAlignmentToolbar, + InspectorControls, } from '@wordpress/block-editor'; +import { PanelBody, RangeControl } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ import styles from './editor.scss'; function ColumnEdit( { - attributes, + attributes: { verticalAlignment, width }, setAttributes, hasChildren, isSelected, getStylesFromColorScheme, isParentSelected, contentStyle, + parentWidth, } ) { - const { verticalAlignment } = attributes; + const hasWidth = Number.isFinite( width ); const updateAlignment = ( alignment ) => { setAttributes( { verticalAlignment: alignment } ); @@ -44,6 +48,11 @@ function ColumnEdit( { ), contentStyle, styles.columnPlaceholderNotSelected, + hasWidth && { + width: parentWidth * ( width / 100 ), + maxWidth: parentWidth, + minWidth: 36, + }, ] } > ); @@ -57,10 +66,32 @@ function ColumnEdit( { value={ verticalAlignment } /> + + + { + setAttributes( { + width: Number( nextWidth.toFixed( 1 ) ), + } ); + } } + toFixed={ 1 } + /> + + ) } From dddd80ea577d126c8007af23ae51bf2ce13ad5a6 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Wed, 8 Jul 2020 12:10:42 +0200 Subject: [PATCH 02/20] Revert width changes --- packages/block-library/src/column/edit.native.js | 16 +--------------- 1 file changed, 1 insertion(+), 15 deletions(-) diff --git a/packages/block-library/src/column/edit.native.js b/packages/block-library/src/column/edit.native.js index 992a55956070c3..9b9549bb727769 100644 --- a/packages/block-library/src/column/edit.native.js +++ b/packages/block-library/src/column/edit.native.js @@ -29,10 +29,7 @@ function ColumnEdit( { getStylesFromColorScheme, isParentSelected, contentStyle, - parentWidth, } ) { - const hasWidth = Number.isFinite( width ); - const updateAlignment = ( alignment ) => { setAttributes( { verticalAlignment: alignment } ); }; @@ -48,11 +45,6 @@ function ColumnEdit( { ), contentStyle, styles.columnPlaceholderNotSelected, - hasWidth && { - width: parentWidth * ( width / 100 ), - maxWidth: parentWidth, - minWidth: 36, - }, ] } > ); @@ -76,10 +68,9 @@ function ColumnEdit( { value={ width || 50 } onChange={ ( nextWidth ) => { setAttributes( { - width: Number( nextWidth.toFixed( 1 ) ), + width: nextWidth, } ); } } - toFixed={ 1 } /> @@ -87,11 +78,6 @@ function ColumnEdit( { style={ [ contentStyle, isSelected && hasChildren && styles.innerBlocksBottomSpace, - hasWidth && { - width: parentWidth * ( width / 100 ), - maxWidth: parentWidth, - minWidth: 36, - }, ] } > Date: Thu, 9 Jul 2020 13:44:32 +0200 Subject: [PATCH 03/20] Add columns presets --- .../block-variation-picker/index.native.js | 90 +++++++++++++++ .../block-variation-picker/style.native.scss | 13 +++ .../src/components/index.native.js | 1 + .../components/inserter/menu-item.native.js | 109 ++++++++++++++++++ .../src/components/inserter/menu.native.js | 66 ++--------- .../block-library/src/column/edit.native.js | 16 ++- .../block-library/src/columns/edit.native.js | 78 +++++++++++-- .../src/mobile/bottom-sheet/index.native.js | 19 ++- .../mobile/bottom-sheet/range-cell.native.js | 4 +- .../mobile/bottom-sheet/styles.native.scss | 1 + .../unsupported-footer-cell.native.js | 4 +- .../index.native.js | 2 + 12 files changed, 322 insertions(+), 81 deletions(-) create mode 100644 packages/block-editor/src/components/block-variation-picker/index.native.js create mode 100644 packages/block-editor/src/components/block-variation-picker/style.native.scss create mode 100644 packages/block-editor/src/components/inserter/menu-item.native.js diff --git a/packages/block-editor/src/components/block-variation-picker/index.native.js b/packages/block-editor/src/components/block-variation-picker/index.native.js new file mode 100644 index 00000000000000..f88b2fe02830ef --- /dev/null +++ b/packages/block-editor/src/components/block-variation-picker/index.native.js @@ -0,0 +1,90 @@ +/** + * External dependencies + */ +import { ScrollView } from 'react-native'; +import { map } from 'lodash'; + +/** + * WordPress dependencies + */ + +import { withSelect, useDispatch } from '@wordpress/data'; +import { compose, withPreferredColorScheme } from '@wordpress/compose'; +import { createBlock } from '@wordpress/blocks'; +import { __ } from '@wordpress/i18n'; +import { + PanelBody, + BottomSheet, + UnsupportedFooterControl, +} from '@wordpress/components'; +/** + * Internal dependencies + */ +import InserterMenuItem from '../inserter/menu-item'; +import styles from './style.scss'; + +function BlockVariationPicker( { isVisible, onClose, clientId, variations } ) { + const createBlocksFromInnerBlocksTemplate = ( innerBlocksTemplate ) => { + return map( + innerBlocksTemplate, + ( [ name, attributes, innerBlocks = [] ] ) => + createBlock( + name, + attributes, + createBlocksFromInnerBlocksTemplate( innerBlocks ) + ) + ); + }; + const { replaceInnerBlocks } = useDispatch( 'core/block-editor' ); + + return ( + + + { variations.map( ( v ) => { + return ( + { + replaceInnerBlocks( + clientId, + createBlocksFromInnerBlocksTemplate( + v.innerBlocks + ) + ); + onClose(); + } } + /> + ); + } ) } + + + + + + ); +} + +export default compose( + withSelect( ( select, {} ) => { + const { getBlockVariations } = select( 'core/blocks' ); + + return { + date: getBlockVariations( 'core/columns', 'block' ), + }; + } ), + withPreferredColorScheme +)( BlockVariationPicker ); diff --git a/packages/block-editor/src/components/block-variation-picker/style.native.scss b/packages/block-editor/src/components/block-variation-picker/style.native.scss new file mode 100644 index 00000000000000..b48460f40cca7c --- /dev/null +++ b/packages/block-editor/src/components/block-variation-picker/style.native.scss @@ -0,0 +1,13 @@ +.contentContainerStyle { + flex-direction: row; + padding-bottom: 20px; +} + +.containerStyle { + padding-top: 12px; +} + +.contentStyle { + padding-left: 0; + padding-right: 0; +} diff --git a/packages/block-editor/src/components/index.native.js b/packages/block-editor/src/components/index.native.js index b2c91bc8655db9..8e7576bf66359a 100644 --- a/packages/block-editor/src/components/index.native.js +++ b/packages/block-editor/src/components/index.native.js @@ -47,6 +47,7 @@ export { export { default as BlockList } from './block-list'; export { default as BlockMover } from './block-mover'; export { default as BlockToolbar } from './block-toolbar'; +export { default as BlockVariationPicker } from './block-variation-picker'; export { default as DefaultBlockAppender } from './default-block-appender'; export { default as __unstableEditorStyles } from './editor-styles'; export { default as Inserter } from './inserter'; diff --git a/packages/block-editor/src/components/inserter/menu-item.native.js b/packages/block-editor/src/components/inserter/menu-item.native.js new file mode 100644 index 00000000000000..fd7f1b3a8869e6 --- /dev/null +++ b/packages/block-editor/src/components/inserter/menu-item.native.js @@ -0,0 +1,109 @@ +/** + * External dependencies + */ +import { View, Text, TouchableHighlight } from 'react-native'; + +/** + * WordPress dependencies + */ +import { withPreferredColorScheme } from '@wordpress/compose'; +import { BottomSheet, Icon } from '@wordpress/components'; + +/** + * Internal dependencies + */ +import styles from './style.scss'; + +const MIN_COL_NUM = 3; + +function InserterMenuItem( { getStylesFromColorScheme, onSelect, item } ) { + function calculateMinItemWidth( bottomSheetWidth ) { + const { paddingLeft, paddingRight } = styles.columnPadding; + return ( + ( bottomSheetWidth - 2 * ( paddingLeft + paddingRight ) ) / + MIN_COL_NUM + ); + } + + function calculateItemWidth() { + const { + paddingLeft: itemPaddingLeft, + paddingRight: itemPaddingRight, + } = styles.modalItem; + const { width: itemWidth } = styles.modalIconWrapper; + return itemWidth + itemPaddingLeft + itemPaddingRight; + } + + function calculateColumnsProperties() { + const bottomSheetWidth = BottomSheet.getWidth(); + const { paddingLeft, paddingRight } = styles.columnPadding; + const itemTotalWidth = calculateItemWidth(); + const containerTotalWidth = + bottomSheetWidth - ( paddingLeft + paddingRight ); + const numofColumns = Math.floor( containerTotalWidth / itemTotalWidth ); + + if ( numofColumns < MIN_COL_NUM ) { + return { + numOfColumns: MIN_COL_NUM, + itemWidth: calculateMinItemWidth( bottomSheetWidth ), + maxWidth: containerTotalWidth / MIN_COL_NUM, + }; + } + return { + numOfColumns: numofColumns, + maxWidth: containerTotalWidth / numofColumns, + }; + } + + const modalIconWrapperStyle = getStylesFromColorScheme( + styles.modalIconWrapper, + styles.modalIconWrapperDark + ); + const modalIconStyle = getStylesFromColorScheme( + styles.modalIcon, + styles.modalIconDark + ); + const modalItemLabelStyle = getStylesFromColorScheme( + styles.modalItemLabel, + styles.modalItemLabelDark + ); + + const columnProperties = calculateColumnsProperties(); + + return ( + onSelect( item ) } + > + + + + + + + { item.title } + + + ); +} + +export default withPreferredColorScheme( InserterMenuItem ); diff --git a/packages/block-editor/src/components/inserter/menu.native.js b/packages/block-editor/src/components/inserter/menu.native.js index 0ecfba8e84e709..9b6b3f434db576 100644 --- a/packages/block-editor/src/components/inserter/menu.native.js +++ b/packages/block-editor/src/components/inserter/menu.native.js @@ -1,13 +1,7 @@ /** * External dependencies */ -import { - FlatList, - View, - Text, - TouchableHighlight, - Dimensions, -} from 'react-native'; +import { FlatList, View, TouchableHighlight, Dimensions } from 'react-native'; /** * WordPress dependencies @@ -20,11 +14,12 @@ import { compose, withPreferredColorScheme, } from '@wordpress/compose'; -import { BottomSheet, Icon } from '@wordpress/components'; +import { BottomSheet } from '@wordpress/components'; /** * Internal dependencies */ +import InserterMenuItem from './menu-item'; import styles from './style.scss'; const MIN_COL_NUM = 3; @@ -106,24 +101,10 @@ export class InserterMenu extends Component { } render() { - const { getStylesFromColorScheme, items, onSelect } = this.props; + const { items, onSelect } = this.props; const { numberOfColumns } = this.state; const bottomPadding = styles.contentBottomPadding; - const modalIconWrapperStyle = getStylesFromColorScheme( - styles.modalIconWrapper, - styles.modalIconWrapperDark - ); - const modalIconStyle = getStylesFromColorScheme( - styles.modalIcon, - styles.modalIconDark - ); - const modalItemLabelStyle = getStylesFromColorScheme( - styles.modalItemLabel, - styles.modalItemLabelDark - ); - - const columnProperties = this.calculateColumnsProperties(); return ( item.name } renderItem={ ( { item } ) => ( - onSelect( item ) } - > - - - - - - - - { item.title } - - - + onSelect( item ) } + /> ) } /> diff --git a/packages/block-library/src/column/edit.native.js b/packages/block-library/src/column/edit.native.js index 9b9549bb727769..564370e5b223e3 100644 --- a/packages/block-library/src/column/edit.native.js +++ b/packages/block-library/src/column/edit.native.js @@ -14,7 +14,11 @@ import { BlockVerticalAlignmentToolbar, InspectorControls, } from '@wordpress/block-editor'; -import { PanelBody, RangeControl } from '@wordpress/components'; +import { + PanelBody, + RangeControl, + UnsupportedFooterControl, +} from '@wordpress/components'; import { __ } from '@wordpress/i18n'; /** * Internal dependencies @@ -46,7 +50,7 @@ function ColumnEdit( { contentStyle, styles.columnPlaceholderNotSelected, ] } - > + /> ); } @@ -73,6 +77,14 @@ function ColumnEdit( { } } /> + + + { - const newColumnCount = ! columnCount ? DEFAULT_COLUMNS : columnCount; + const newColumnCount = ! columnCount + ? DEFAULT_COLUMNS_NUM + : columnCount; updateColumns( columnCount, newColumnCount ); if ( width ) { setColumnsInRow( getColumnsInRow( width, newColumnCount ) ); @@ -84,7 +104,11 @@ function ColumnsEditContainer( { let columnWidth = columnBaseWidth; if ( columnsInRow > 1 ) { - const margins = columnsInRow * 2 * styles.columnMargin.marginLeft; + const margins = + columnsInRow * + Math.min( columnsInRow, MAX_COLUMNS_NUM_IN_ROW ) * + styles.columnMargin.marginLeft; + columnWidth = ( minWidth - margins ) / columnsInRow; } return { width: columnWidth }; @@ -95,8 +119,11 @@ function ColumnsEditContainer( { // show only 1 Column in row for mobile breakpoint container width return 1; } else if ( containerWidth < BREAKPOINTS.large ) { - // show 2 Column in row for large breakpoint container width - return Math.min( Math.max( 1, columnCount ), 2 ); + // show the maximum number of columns in a row for large breakpoint container width + return Math.min( + Math.max( 1, columnCount ), + MAX_COLUMNS_NUM_IN_ROW + ); } // show all Column in one row return Math.max( 1, columnsNumber ); @@ -124,11 +151,19 @@ function ColumnsEditContainer( { onChange={ ( value ) => updateColumns( columnCount, value ) } - min={ MIN_COLUMNS_NUMBER } + min={ MIN_COLUMNS_NUM } max={ columnCount + 1 } type="stepper" /> + + + { - const { clientId } = props; + const { clientId, isSelected } = props; const { columnCount } = useSelect( ( select ) => { const { getBlockCount } = select( 'core/block-editor' ); @@ -275,8 +310,27 @@ const ColumnsEdit = ( props ) => { [ clientId ] ); + const [ isVisible, setIsVisible ] = useState( false ); + + useEffect( () => { + if ( isSelected ) { + setIsVisible( true ); + } + }, [] ); + return ( - + <> + + setIsVisible( false ) } + clientId={ clientId } + isVisible={ isVisible } + /> + ); }; diff --git a/packages/components/src/mobile/bottom-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/index.native.js index 655e2d414dad63..b0773d7cb9b662 100644 --- a/packages/components/src/mobile/bottom-sheet/index.native.js +++ b/packages/components/src/mobile/bottom-sheet/index.native.js @@ -270,6 +270,7 @@ class BottomSheet extends Component { getStylesFromColorScheme, onDismiss, children, + withHeaderSeparator = false, ...rest } = this.props; const { @@ -301,14 +302,17 @@ class BottomSheet extends Component { const getHeader = () => ( - + { leftButton } - - { title } - + + { title } + { rightButton } - + { withHeaderSeparator && } ); @@ -317,6 +321,11 @@ class BottomSheet extends Component { styles.backgroundDark ); + const bottomSheetHeaderTitleStyle = getStylesFromColorScheme( + styles.bottomSheetHeaderTitle, + styles.bottomSheetHeaderTitleDark + ); + return ( diff --git a/packages/components/src/mobile/bottom-sheet/styles.native.scss b/packages/components/src/mobile/bottom-sheet/styles.native.scss index 50c8693eb8ee09..722c58c81d9b91 100644 --- a/packages/components/src/mobile/bottom-sheet/styles.native.scss +++ b/packages/components/src/mobile/bottom-sheet/styles.native.scss @@ -169,6 +169,7 @@ .unsupportedFooterCell { font-size: $text-editor-font-size; color: $gray; + flex: 1; } // Color Cell diff --git a/packages/components/src/mobile/bottom-sheet/unsupported-footer-cell.native.js b/packages/components/src/mobile/bottom-sheet/unsupported-footer-cell.native.js index af86f307d18b16..914fd10e621965 100644 --- a/packages/components/src/mobile/bottom-sheet/unsupported-footer-cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/unsupported-footer-cell.native.js @@ -9,7 +9,7 @@ import Cell from './cell'; import styles from './styles.scss'; function UnsupportedFooterCell( props ) { - const { ...cellProps } = props; + const { textAlign = 'left', ...cellProps } = props; return ( ); } diff --git a/packages/components/src/unsupported-footer-control/index.native.js b/packages/components/src/unsupported-footer-control/index.native.js index 26985dd58a6816..8a49198b588c29 100644 --- a/packages/components/src/unsupported-footer-control/index.native.js +++ b/packages/components/src/unsupported-footer-control/index.native.js @@ -8,6 +8,7 @@ function UnsupportedFooterControl( { help, instanceId, className, + textAlign, ...props } ) { const id = `inspector-unsupported-footer-control-${ instanceId }`; @@ -19,6 +20,7 @@ function UnsupportedFooterControl( { help={ help } className={ className } aria-describedby={ !! help ? id + '__help' : undefined } + textAlign={ textAlign } { ...props } /> ); From 67fbb8d6a13b7a5b4bb5e7a4ffd66a98327565a4 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Thu, 9 Jul 2020 15:10:40 +0200 Subject: [PATCH 04/20] Add toFixed in RangeCell --- .../block-library/src/column/edit.native.js | 1 + .../mobile/bottom-sheet/range-cell.native.js | 20 ++++++++++++++----- 2 files changed, 16 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/column/edit.native.js b/packages/block-library/src/column/edit.native.js index 564370e5b223e3..8efe47c704befc 100644 --- a/packages/block-library/src/column/edit.native.js +++ b/packages/block-library/src/column/edit.native.js @@ -75,6 +75,7 @@ function ColumnEdit( { width: nextWidth, } ); } } + toFixed={ 1 } /> diff --git a/packages/components/src/mobile/bottom-sheet/range-cell.native.js b/packages/components/src/mobile/bottom-sheet/range-cell.native.js index f17e6f43ca7383..62b7be3ac42a5e 100644 --- a/packages/components/src/mobile/bottom-sheet/range-cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/range-cell.native.js @@ -59,6 +59,12 @@ class BottomSheetRangeCell extends Component { AppState.removeEventListener( 'change', this.handleChangePixelRatio ); } + toFixed( num ) { + const { toFixed = 0 } = this.props; + const fixed = Math.pow( 10, toFixed ); + return Math.floor( num * fixed ) / fixed; + } + getFontScale() { return PixelRatio.getFontScale() < 1 ? 1 : PixelRatio.getFontScale(); } @@ -70,8 +76,11 @@ class BottomSheetRangeCell extends Component { } handleChange( text ) { + const { hasFocus } = this.state; if ( ! isNaN( Number( text ) ) ) { - this.setState( { sliderValue: text } ); + this.setState( { + sliderValue: ! hasFocus ? this.toFixed( text ) : text, + } ); this.announceCurrentValue( text ); } } @@ -81,7 +90,7 @@ class BottomSheetRangeCell extends Component { if ( validateInput ) { const sliderValue = this.validateInput( this.state.sliderValue ); - this.handleValueSave( sliderValue ); + this.handleValueSave( this.toFixed( sliderValue ) ); } this.setState( newState ); @@ -106,9 +115,10 @@ class BottomSheetRangeCell extends Component { handleValueSave( text ) { if ( ! isNaN( Number( text ) ) ) { - this.onChangeValue( text ); - this.setState( { sliderValue: text } ); - this.announceCurrentValue( text ); + const value = this.toFixed( text ); + this.onChangeValue( value ); + this.setState( { sliderValue: value } ); + this.announceCurrentValue( value ); } } From 9e03916da900a795f3329efd018a88763b39e6db Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Fri, 10 Jul 2020 11:52:16 +0200 Subject: [PATCH 05/20] Code refactor, adjusting to comments --- .../block-variation-picker/index.native.js | 51 ++++++++++++++++--- .../block-variation-picker/style.native.scss | 17 ++++++- .../block-library/src/column/edit.native.js | 6 ++- .../mobile/bottom-sheet/range-cell.native.js | 13 ++--- 4 files changed, 72 insertions(+), 15 deletions(-) diff --git a/packages/block-editor/src/components/block-variation-picker/index.native.js b/packages/block-editor/src/components/block-variation-picker/index.native.js index 144c823cb17298..d901ff2644bb51 100644 --- a/packages/block-editor/src/components/block-variation-picker/index.native.js +++ b/packages/block-editor/src/components/block-variation-picker/index.native.js @@ -1,15 +1,20 @@ /** * External dependencies */ -import { ScrollView } from 'react-native'; +import { + ScrollView, + View, + Text, + TouchableWithoutFeedback, + Platform, +} from 'react-native'; import { map } from 'lodash'; /** * WordPress dependencies */ - import { withSelect, useDispatch } from '@wordpress/data'; -import { compose, withPreferredColorScheme } from '@wordpress/compose'; +import { compose, usePreferredColorSchemeStyle } from '@wordpress/compose'; import { createBlock } from '@wordpress/blocks'; import { __ } from '@wordpress/i18n'; import { @@ -17,6 +22,8 @@ import { BottomSheet, UnsupportedFooterControl, } from '@wordpress/components'; +import { Icon, close } from '@wordpress/icons'; + /** * Internal dependencies */ @@ -36,13 +43,43 @@ function BlockVariationPicker( { isVisible, onClose, clientId, variations } ) { ); }; const { replaceInnerBlocks } = useDispatch( 'core/block-editor' ); + const hitSlop = { top: 22, bottom: 22, left: 22, right: 22 }; + const isIOS = Platform.OS === 'ios'; + + const cancelButtonStyle = usePreferredColorSchemeStyle( + styles.cancelButton, + styles.cancelButtonDark + ); return ( + + { isIOS ? ( + + { __( 'Cancel' ) } + + ) : ( + + ) } + + + } > { setAttributes( { verticalAlignment: alignment } ); @@ -69,7 +70,7 @@ function ColumnEdit( { min={ 1 } max={ 100 } step={ 0.1 } - value={ width || 50 } + value={ width || 100 / columnCount } onChange={ ( nextWidth ) => { setAttributes( { width: nextWidth, @@ -135,6 +136,8 @@ export default compose( [ const parentId = getBlockRootClientId( clientId ); const hasChildren = !! getBlockCount( clientId ); + const columnCount = getBlockCount( parentId ); + const isParentSelected = selectedBlockClientId && selectedBlockClientId === parentId; @@ -142,6 +145,7 @@ export default compose( [ hasChildren, isParentSelected, isSelected, + columnCount, }; } ), withPreferredColorScheme, diff --git a/packages/components/src/mobile/bottom-sheet/range-cell.native.js b/packages/components/src/mobile/bottom-sheet/range-cell.native.js index 62b7be3ac42a5e..1738988a5e2896 100644 --- a/packages/components/src/mobile/bottom-sheet/range-cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/range-cell.native.js @@ -76,10 +76,14 @@ class BottomSheetRangeCell extends Component { } handleChange( text ) { - const { hasFocus } = this.state; + text = + typeof text === 'number' + ? this.toFixed( text ) + : text.replace( ',', '.' ); + if ( ! isNaN( Number( text ) ) ) { this.setState( { - sliderValue: ! hasFocus ? this.toFixed( text ) : text, + sliderValue: text, } ); this.announceCurrentValue( text ); } @@ -105,10 +109,7 @@ class BottomSheetRangeCell extends Component { return Math.min( Math.max( text, minimumValue ), maximumValue ); } return Math.min( - Math.max( - text.replace( /[^0-9]\./g, '' ).replace( /^0+(?=\d)/, '' ), - minimumValue - ), + Math.max( text.replace( /[^0-9.]\,/g, '' ), minimumValue ), maximumValue ); } From 789902cc1b937910809f6784410e75aa3cf39b87 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Tue, 14 Jul 2020 12:52:43 +0200 Subject: [PATCH 06/20] Fix paddings and typo --- .../src/components/block-variation-picker/style.native.scss | 6 +++--- packages/components/src/notice/list.native.js | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/components/block-variation-picker/style.native.scss b/packages/block-editor/src/components/block-variation-picker/style.native.scss index 255ca31f080c5c..fa322db435aed2 100644 --- a/packages/block-editor/src/components/block-variation-picker/style.native.scss +++ b/packages/block-editor/src/components/block-variation-picker/style.native.scss @@ -1,8 +1,8 @@ .contentContainerStyle { flex-direction: row; - padding-bottom: 20px; - padding-left: $grid-unit-20; - padding-right: $grid-unit-20; + padding-bottom: $grid-unit-15; + padding-left: $grid-unit-20 / 2; + padding-right: $grid-unit-20 / 2; } .containerStyle { diff --git a/packages/components/src/notice/list.native.js b/packages/components/src/notice/list.native.js index b91a21407c6c3f..6c43e25abbd60c 100644 --- a/packages/components/src/notice/list.native.js +++ b/packages/components/src/notice/list.native.js @@ -35,7 +35,7 @@ class NoticeList extends Component { } return ( - + { shouldStack ? ( notices .reverse() From 2192e43b1681a1b9e6750fd4b73d3362bce18978 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Wed, 15 Jul 2020 10:49:50 +0200 Subject: [PATCH 07/20] Display layout picker only for default columns --- packages/block-library/src/columns/edit.native.js | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/columns/edit.native.js b/packages/block-library/src/columns/edit.native.js index c0f5b4183e7080..c8f890a0777714 100644 --- a/packages/block-library/src/columns/edit.native.js +++ b/packages/block-library/src/columns/edit.native.js @@ -2,7 +2,7 @@ * External dependencies */ import { View } from 'react-native'; -import { dropRight, times } from 'lodash'; +import { dropRight, times, map, compact } from 'lodash'; /** * WordPress dependencies @@ -298,12 +298,19 @@ const ColumnsEditContainerWrapper = withDispatch( const ColumnsEdit = ( props ) => { const { clientId, isSelected } = props; - const { columnCount } = useSelect( + const { columnCount, isDefaultColumns } = useSelect( ( select ) => { - const { getBlockCount } = select( 'core/block-editor' ); + const { getBlockCount, getBlock } = select( 'core/block-editor' ); + const block = getBlock( clientId ); + const innerBlocks = block?.innerBlocks; + const isContentEmpty = map( + innerBlocks, + ( innerBlock ) => innerBlock.innerBlocks.length + ); return { columnCount: getBlockCount( clientId ), + isDefaultColumns: ! compact( isContentEmpty ).length, }; }, [ clientId ] @@ -312,7 +319,7 @@ const ColumnsEdit = ( props ) => { const [ isVisible, setIsVisible ] = useState( false ); useEffect( () => { - if ( isSelected ) { + if ( isSelected && isDefaultColumns ) { setIsVisible( true ); } }, [] ); From b11bee45316684e6ff37b8d333fb1ae4a6cbe3d1 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Wed, 15 Jul 2020 13:58:46 +0200 Subject: [PATCH 08/20] Add styles in menu item --- .../src/components/block-variation-picker/index.native.js | 1 + .../src/components/block-variation-picker/style.native.scss | 5 +++++ .../block-editor/src/components/inserter/menu-item.native.js | 5 ++++- packages/block-library/src/columns/edit.native.js | 4 +--- 4 files changed, 11 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/components/block-variation-picker/index.native.js b/packages/block-editor/src/components/block-variation-picker/index.native.js index d901ff2644bb51..a10e313c058da5 100644 --- a/packages/block-editor/src/components/block-variation-picker/index.native.js +++ b/packages/block-editor/src/components/block-variation-picker/index.native.js @@ -92,6 +92,7 @@ function BlockVariationPicker( { isVisible, onClose, clientId, variations } ) { { replaceInnerBlocks( clientId, diff --git a/packages/block-editor/src/components/block-variation-picker/style.native.scss b/packages/block-editor/src/components/block-variation-picker/style.native.scss index fa322db435aed2..7ddf274df52f4c 100644 --- a/packages/block-editor/src/components/block-variation-picker/style.native.scss +++ b/packages/block-editor/src/components/block-variation-picker/style.native.scss @@ -26,3 +26,8 @@ .closeIcon { color: $gray; } + +.menuItem { + padding-left: $grid-unit-20 / 3; + padding-right: $grid-unit-20 / 3; +} diff --git a/packages/block-editor/src/components/inserter/menu-item.native.js b/packages/block-editor/src/components/inserter/menu-item.native.js index be47452eae1fb9..775a35ea786a2e 100644 --- a/packages/block-editor/src/components/inserter/menu-item.native.js +++ b/packages/block-editor/src/components/inserter/menu-item.native.js @@ -34,6 +34,7 @@ class MenuItem extends Component { item, itemWidth, maxWidth, + style, } = this.props; const modalIconWrapperStyle = getStylesFromColorScheme( @@ -64,7 +65,9 @@ class MenuItem extends Component { accessibilityLabel={ item.title } onPress={ this.onPress } > - + { return { columnCount: getBlockCount( clientId ), - isDefaultColumns: - innerBlocks.length === DEFAULT_COLUMNS_NUM && - ! compact( isContentEmpty ).length, + isDefaultColumns: ! compact( isContentEmpty ).length, }; }, [ clientId ] From 01c4dc8c8f8340cea090ae7131dedf80867dbcf7 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Fri, 24 Jul 2020 14:56:57 +0200 Subject: [PATCH 09/20] Create columns preview --- .../block-library/src/column/edit.native.js | 15 +++++++++++ .../mobile/bottom-sheet/range-cell.native.js | 25 +++++++++++++++++++ .../bottom-sheet/range-cell.native.scss | 17 +++++++++++++ 3 files changed, 57 insertions(+) diff --git a/packages/block-library/src/column/edit.native.js b/packages/block-library/src/column/edit.native.js index f20f1841570d9f..524b382291389d 100644 --- a/packages/block-library/src/column/edit.native.js +++ b/packages/block-library/src/column/edit.native.js @@ -34,6 +34,8 @@ function ColumnEdit( { isParentSelected, contentStyle, columnCount, + columnWidths, + columnIndex, } ) { const updateAlignment = ( alignment ) => { setAttributes( { verticalAlignment: alignment } ); @@ -77,6 +79,7 @@ function ColumnEdit( { } ); } } toFixed={ 1 } + columnsPreview={ { columnWidths, columnIndex } } /> @@ -128,6 +131,8 @@ export default compose( [ getBlockCount, getBlockRootClientId, getSelectedBlockClientId, + getBlocks, + getBlockOrder, } = select( 'core/block-editor' ); const selectedBlockClientId = getSelectedBlockClientId(); @@ -138,6 +143,14 @@ export default compose( [ const columnCount = getBlockCount( parentId ); + const blockOrder = getBlockOrder( parentId ); + + const columnIndex = blockOrder.indexOf( clientId ); + + const columnWidths = getBlocks( parentId ).map( + ( block ) => block.attributes.width || 100 / columnCount + ); + const isParentSelected = selectedBlockClientId && selectedBlockClientId === parentId; @@ -146,6 +159,8 @@ export default compose( [ isParentSelected, isSelected, columnCount, + columnWidths, + columnIndex, }; } ), withPreferredColorScheme, diff --git a/packages/components/src/mobile/bottom-sheet/range-cell.native.js b/packages/components/src/mobile/bottom-sheet/range-cell.native.js index bb1828ce8b27e6..751e0736532c44 100644 --- a/packages/components/src/mobile/bottom-sheet/range-cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/range-cell.native.js @@ -167,6 +167,7 @@ class BottomSheetRangeCell extends Component { : '#909090', thumbTintColor = Platform.OS === 'android' && '#00669b', getStylesFromColorScheme, + columnsPreview, ...cellProps } = this.props; @@ -187,6 +188,11 @@ class BottomSheetRangeCell extends Component { styles.sliderDarkTextInput ); + const columnsPreviewStyle = getStylesFromColorScheme( + styles.columnsPreview, + styles.columnsPreviewDark + ); + return ( + { columnsPreview && ( + + { columnsPreview.columnWidths.map( + ( columnWidth, index ) => { + return ( + + ); + } + ) } + + ) } Date: Mon, 27 Jul 2020 14:48:26 +0200 Subject: [PATCH 10/20] Columns refactor --- .../block-variation-picker/index.native.js | 21 ++++----- .../block-variation-picker/style.native.scss | 5 -- .../components/inserter/menu-item.native.js | 5 +- .../block-library/src/column/edit.native.js | 47 ++++++++++--------- .../block-library/src/columns/edit.native.js | 1 + .../mobile/bottom-sheet/range-cell.native.js | 8 ++-- 6 files changed, 43 insertions(+), 44 deletions(-) diff --git a/packages/block-editor/src/components/block-variation-picker/index.native.js b/packages/block-editor/src/components/block-variation-picker/index.native.js index a10e313c058da5..ac80b049504c53 100644 --- a/packages/block-editor/src/components/block-variation-picker/index.native.js +++ b/packages/block-editor/src/components/block-variation-picker/index.native.js @@ -51,6 +51,15 @@ function BlockVariationPicker( { isVisible, onClose, clientId, variations } ) { styles.cancelButtonDark ); + const onVariationSelect = ( variation ) => { + replaceInnerBlocks( + clientId, + createBlocksFromInnerBlocksTemplate( variation.innerBlocks ), + false + ); + onClose(); + }; + return ( { - replaceInnerBlocks( - clientId, - createBlocksFromInnerBlocksTemplate( - v.innerBlocks - ), - false - ); - onClose(); - } } + onSelect={ () => onVariationSelect( v ) } /> ); } ) } diff --git a/packages/block-editor/src/components/block-variation-picker/style.native.scss b/packages/block-editor/src/components/block-variation-picker/style.native.scss index 7ddf274df52f4c..fa322db435aed2 100644 --- a/packages/block-editor/src/components/block-variation-picker/style.native.scss +++ b/packages/block-editor/src/components/block-variation-picker/style.native.scss @@ -26,8 +26,3 @@ .closeIcon { color: $gray; } - -.menuItem { - padding-left: $grid-unit-20 / 3; - padding-right: $grid-unit-20 / 3; -} diff --git a/packages/block-editor/src/components/inserter/menu-item.native.js b/packages/block-editor/src/components/inserter/menu-item.native.js index 775a35ea786a2e..be47452eae1fb9 100644 --- a/packages/block-editor/src/components/inserter/menu-item.native.js +++ b/packages/block-editor/src/components/inserter/menu-item.native.js @@ -34,7 +34,6 @@ class MenuItem extends Component { item, itemWidth, maxWidth, - style, } = this.props; const modalIconWrapperStyle = getStylesFromColorScheme( @@ -65,9 +64,7 @@ class MenuItem extends Component { accessibilityLabel={ item.title } onPress={ this.onPress } > - + { setAttributes( { verticalAlignment: alignment } ); }; + const onWidthChange = ( width ) => { + setAttributes( { + width, + } ); + }; + if ( ! isSelected && ! hasChildren ) { return ( { - setAttributes( { - width: nextWidth, - } ); - } } + value={ getEffectiveColumnWidth( block, columnCount ) } + onChange={ onWidthChange } toFixed={ 1 } - columnsPreview={ { columnWidths, columnIndex } } + columnsPreview={ columnsPreview } /> @@ -133,6 +138,7 @@ export default compose( [ getSelectedBlockClientId, getBlocks, getBlockOrder, + getBlock, } = select( 'core/block-editor' ); const selectedBlockClientId = getSelectedBlockClientId(); @@ -140,27 +146,26 @@ export default compose( [ const parentId = getBlockRootClientId( clientId ); const hasChildren = !! getBlockCount( clientId ); + const isParentSelected = + selectedBlockClientId && selectedBlockClientId === parentId; - const columnCount = getBlockCount( parentId ); - + const block = getBlock( selectedBlockClientId ); const blockOrder = getBlockOrder( parentId ); - const columnIndex = blockOrder.indexOf( clientId ); - - const columnWidths = getBlocks( parentId ).map( - ( block ) => block.attributes.width || 100 / columnCount + const selectedColumnIndex = blockOrder.indexOf( clientId ); + const columnCount = getBlockCount( parentId ); + const columnWidths = getBlocks( parentId ).map( ( column ) => + getEffectiveColumnWidth( column, columnCount ) ); - - const isParentSelected = - selectedBlockClientId && selectedBlockClientId === parentId; + const columnsPreview = { columnWidths, selectedColumnIndex }; return { hasChildren, isParentSelected, isSelected, columnCount, - columnWidths, - columnIndex, + columnsPreview, + block, }; } ), withPreferredColorScheme, diff --git a/packages/block-library/src/columns/edit.native.js b/packages/block-library/src/columns/edit.native.js index f04841c63b37af..cfb1f0125262e7 100644 --- a/packages/block-library/src/columns/edit.native.js +++ b/packages/block-library/src/columns/edit.native.js @@ -79,6 +79,7 @@ function ColumnsEditContainer( { } ) { const [ resizeListener, sizes ] = useResizeObserver(); const [ columnsInRow, setColumnsInRow ] = useState( MIN_COLUMNS_NUM ); + const { verticalAlignment } = attributes; const { width } = sizes || {}; diff --git a/packages/components/src/mobile/bottom-sheet/range-cell.native.js b/packages/components/src/mobile/bottom-sheet/range-cell.native.js index 7502c79d330f92..bc4cca2b5452a1 100644 --- a/packages/components/src/mobile/bottom-sheet/range-cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/range-cell.native.js @@ -109,7 +109,7 @@ class BottomSheetRangeCell extends Component { return Math.min( Math.max( text, minimumValue ), maximumValue ); } return Math.min( - Math.max( text.replace( /[^0-9.]\,/g, '' ), minimumValue ), + Math.max( text.replace( /[^0-9.]/g, '' ), minimumValue ), maximumValue ); } @@ -214,11 +214,13 @@ class BottomSheetRangeCell extends Component { { columnsPreview.columnWidths.map( ( columnWidth, index ) => { + const isSelected = + index === + columnsPreview.selectedColumnIndex; return ( Date: Tue, 28 Jul 2020 14:45:47 +0200 Subject: [PATCH 11/20] Refactor columns preview --- .../block-variation-picker/index.native.js | 4 +++- packages/block-library/src/column/edit.native.js | 2 +- packages/block-library/src/columns/edit.native.js | 2 +- .../src/mobile/bottom-sheet/range-cell.native.js | 7 ++++++- .../mobile/bottom-sheet/range-cell.native.scss | 15 ++++++++++----- 5 files changed, 21 insertions(+), 9 deletions(-) diff --git a/packages/block-editor/src/components/block-variation-picker/index.native.js b/packages/block-editor/src/components/block-variation-picker/index.native.js index ac80b049504c53..7eb3ff1b032b01 100644 --- a/packages/block-editor/src/components/block-variation-picker/index.native.js +++ b/packages/block-editor/src/components/block-variation-picker/index.native.js @@ -108,7 +108,9 @@ function BlockVariationPicker( { isVisible, onClose, clientId, variations } ) { diff --git a/packages/block-library/src/column/edit.native.js b/packages/block-library/src/column/edit.native.js index cf537d001a7917..1bfaa5dab4ac0d 100644 --- a/packages/block-library/src/column/edit.native.js +++ b/packages/block-library/src/column/edit.native.js @@ -90,7 +90,7 @@ function ColumnEdit( { diff --git a/packages/block-library/src/columns/edit.native.js b/packages/block-library/src/columns/edit.native.js index cfb1f0125262e7..472fe45e42810f 100644 --- a/packages/block-library/src/columns/edit.native.js +++ b/packages/block-library/src/columns/edit.native.js @@ -159,7 +159,7 @@ function ColumnsEditContainer( { diff --git a/packages/components/src/mobile/bottom-sheet/range-cell.native.js b/packages/components/src/mobile/bottom-sheet/range-cell.native.js index bc4cca2b5452a1..4703f5517afe34 100644 --- a/packages/components/src/mobile/bottom-sheet/range-cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/range-cell.native.js @@ -192,6 +192,11 @@ class BottomSheetRangeCell extends Component { styles.columnsPreviewDark ); + const columnIndicatorStyle = getStylesFromColorScheme( + styles.columnIndicator, + styles.columnIndicatorDark + ); + return ( Date: Wed, 29 Jul 2020 12:22:13 +0200 Subject: [PATCH 12/20] Refactor after CR --- .../block-variation-picker/index.native.js | 72 ++++++++++--------- .../block-library/src/column/edit.native.js | 46 +++++++++--- .../src/column/editor.native.scss | 22 ++++++ .../mobile/bottom-sheet/range-cell.native.js | 34 +-------- .../bottom-sheet/range-cell.native.scss | 21 ------ 5 files changed, 96 insertions(+), 99 deletions(-) diff --git a/packages/block-editor/src/components/block-variation-picker/index.native.js b/packages/block-editor/src/components/block-variation-picker/index.native.js index 7eb3ff1b032b01..e9b6a427170322 100644 --- a/packages/block-editor/src/components/block-variation-picker/index.native.js +++ b/packages/block-editor/src/components/block-variation-picker/index.native.js @@ -23,6 +23,7 @@ import { UnsupportedFooterControl, } from '@wordpress/components'; import { Icon, close } from '@wordpress/icons'; +import { useMemo } from '@wordpress/element'; /** * Internal dependencies @@ -30,20 +31,22 @@ import { Icon, close } from '@wordpress/icons'; import MenuItem from '../inserter/menu-item'; import styles from './style.scss'; +const hitSlop = { top: 22, bottom: 22, left: 22, right: 22 }; + +function createBlocksFromInnerBlocksTemplate( innerBlocksTemplate ) { + return map( + innerBlocksTemplate, + ( [ name, attributes, innerBlocks = [] ] ) => + createBlock( + name, + attributes, + createBlocksFromInnerBlocksTemplate( innerBlocks ) + ) + ); +} + function BlockVariationPicker( { isVisible, onClose, clientId, variations } ) { - const createBlocksFromInnerBlocksTemplate = ( innerBlocksTemplate ) => { - return map( - innerBlocksTemplate, - ( [ name, attributes, innerBlocks = [] ] ) => - createBlock( - name, - attributes, - createBlocksFromInnerBlocksTemplate( innerBlocks ) - ) - ); - }; const { replaceInnerBlocks } = useDispatch( 'core/block-editor' ); - const hitSlop = { top: 22, bottom: 22, left: 22, right: 22 }; const isIOS = Platform.OS === 'ios'; const cancelButtonStyle = usePreferredColorSchemeStyle( @@ -51,6 +54,27 @@ function BlockVariationPicker( { isVisible, onClose, clientId, variations } ) { styles.cancelButtonDark ); + const leftButton = useMemo( () => ( + + + { isIOS ? ( + + { __( 'Cancel' ) } + + ) : ( + + ) } + + + ) ); + const onVariationSelect = ( variation ) => { replaceInnerBlocks( clientId, @@ -66,29 +90,7 @@ function BlockVariationPicker( { isVisible, onClose, clientId, variations } ) { onClose={ onClose } title={ __( 'Select a layout' ) } contentStyle={ styles.contentStyle } - leftButton={ - - - { isIOS ? ( - - { __( 'Cancel' ) } - - ) : ( - - ) } - - - } + leftButton={ leftButton } > { + const columnsPreviewStyle = getStylesFromColorScheme( + styles.columnsPreview, + styles.columnsPreviewDark + ); + + const columnIndicatorStyle = getStylesFromColorScheme( + styles.columnIndicator, + styles.columnIndicatorDark + ); + + return ( + + { columnWidths.map( ( width, index ) => { + const isSelectedColumn = index === selectedColumnIndex; + return ( + + ); + } ) } + + ); + }; + return ( <> @@ -81,10 +109,10 @@ function ColumnEdit( { min={ 1 } max={ 100 } step={ 0.1 } - value={ getEffectiveColumnWidth( block, columnCount ) } + value={ columnWidths[ selectedColumnIndex ] } onChange={ onWidthChange } toFixed={ 1 } - columnsPreview={ columnsPreview } + rangePreview={ getRangePreview() } /> @@ -138,7 +166,6 @@ export default compose( [ getSelectedBlockClientId, getBlocks, getBlockOrder, - getBlock, } = select( 'core/block-editor' ); const selectedBlockClientId = getSelectedBlockClientId(); @@ -149,7 +176,6 @@ export default compose( [ const isParentSelected = selectedBlockClientId && selectedBlockClientId === parentId; - const block = getBlock( selectedBlockClientId ); const blockOrder = getBlockOrder( parentId ); const selectedColumnIndex = blockOrder.indexOf( clientId ); @@ -157,15 +183,13 @@ export default compose( [ const columnWidths = getBlocks( parentId ).map( ( column ) => getEffectiveColumnWidth( column, columnCount ) ); - const columnsPreview = { columnWidths, selectedColumnIndex }; return { hasChildren, isParentSelected, isSelected, - columnCount, - columnsPreview, - block, + selectedColumnIndex, + columnWidths, }; } ), withPreferredColorScheme, diff --git a/packages/block-library/src/column/editor.native.scss b/packages/block-library/src/column/editor.native.scss index ec9579c63234b1..3bf4ce4abc97d3 100644 --- a/packages/block-library/src/column/editor.native.scss +++ b/packages/block-library/src/column/editor.native.scss @@ -34,3 +34,25 @@ .flexBase { flex: 1; } + +.columnsPreview { + min-height: 18px; + min-width: 24px; + border-color: $toolbar-button; + flex-direction: row; + margin-right: 10px; + border-width: $border-width; + border-radius: $radius-block-ui; +} + +.columnsPreviewDark { + border-color: $gray-20; +} + +.columnIndicator { + background-color: $toolbar-button; +} + +.columnIndicatorDark { + background-color: $gray-20; +} diff --git a/packages/components/src/mobile/bottom-sheet/range-cell.native.js b/packages/components/src/mobile/bottom-sheet/range-cell.native.js index 4703f5517afe34..e9731153b74ade 100644 --- a/packages/components/src/mobile/bottom-sheet/range-cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/range-cell.native.js @@ -166,7 +166,7 @@ class BottomSheetRangeCell extends Component { : '#909090', thumbTintColor = Platform.OS === 'android' && '#00669b', getStylesFromColorScheme, - columnsPreview, + rangePreview, ...cellProps } = this.props; @@ -187,16 +187,6 @@ class BottomSheetRangeCell extends Component { styles.sliderDarkTextInput ); - const columnsPreviewStyle = getStylesFromColorScheme( - styles.columnsPreview, - styles.columnsPreviewDark - ); - - const columnIndicatorStyle = getStylesFromColorScheme( - styles.columnIndicator, - styles.columnIndicatorDark - ); - return ( - { columnsPreview && ( - - { columnsPreview.columnWidths.map( - ( columnWidth, index ) => { - const isSelected = - index === - columnsPreview.selectedColumnIndex; - return ( - - ); - } - ) } - - ) } + { rangePreview } Date: Thu, 30 Jul 2020 14:20:39 +0200 Subject: [PATCH 13/20] Extract column preview to the separate file --- .../src/column/column-preview.native.js | 45 ++++++++++++++++ .../block-library/src/column/edit.native.js | 53 ++++++------------- 2 files changed, 62 insertions(+), 36 deletions(-) create mode 100644 packages/block-library/src/column/column-preview.native.js diff --git a/packages/block-library/src/column/column-preview.native.js b/packages/block-library/src/column/column-preview.native.js new file mode 100644 index 00000000000000..2b942be96dfe83 --- /dev/null +++ b/packages/block-library/src/column/column-preview.native.js @@ -0,0 +1,45 @@ +/** + * External dependencies + */ +import { View } from 'react-native'; + +/** + * WordPress dependencies + */ +import { usePreferredColorSchemeStyle } from '@wordpress/compose'; + +/** + * Internal dependencies + */ +import styles from './editor.scss'; + +function ColumnsPreview( { columnWidths, selectedColumnIndex } ) { + const columnsPreviewStyle = usePreferredColorSchemeStyle( + styles.columnsPreview, + styles.columnsPreviewDark + ); + + const columnIndicatorStyle = usePreferredColorSchemeStyle( + styles.columnIndicator, + styles.columnIndicatorDark + ); + + return ( + + { columnWidths.map( ( width, index ) => { + const isSelectedColumn = index === selectedColumnIndex; + return ( + + ); + } ) } + + ); +} + +export default ColumnsPreview; diff --git a/packages/block-library/src/column/edit.native.js b/packages/block-library/src/column/edit.native.js index 234d772f4c73c4..849acf46a17c2f 100644 --- a/packages/block-library/src/column/edit.native.js +++ b/packages/block-library/src/column/edit.native.js @@ -24,7 +24,8 @@ import { __ } from '@wordpress/i18n'; * Internal dependencies */ import styles from './editor.scss'; -import { getEffectiveColumnWidth } from '../columns/utils'; +import ColumnsPreview from './column-preview'; +import { getColumnWidths } from '../columns/utils'; function ColumnEdit( { attributes, @@ -34,7 +35,8 @@ function ColumnEdit( { getStylesFromColorScheme, isParentSelected, contentStyle, - columnWidths, + columns, + columnCount, selectedColumnIndex, } ) { const { verticalAlignment } = attributes; @@ -49,6 +51,10 @@ function ColumnEdit( { } ); }; + const columnWidths = Object.values( + getColumnWidths( columns, columnCount ) + ); + if ( ! isSelected && ! hasChildren ) { return ( { - const columnsPreviewStyle = getStylesFromColorScheme( - styles.columnsPreview, - styles.columnsPreviewDark - ); - - const columnIndicatorStyle = getStylesFromColorScheme( - styles.columnIndicator, - styles.columnIndicatorDark - ); - - return ( - - { columnWidths.map( ( width, index ) => { - const isSelectedColumn = index === selectedColumnIndex; - return ( - - ); - } ) } - - ); - }; - return ( <> @@ -112,7 +89,12 @@ function ColumnEdit( { value={ columnWidths[ selectedColumnIndex ] } onChange={ onWidthChange } toFixed={ 1 } - rangePreview={ getRangePreview() } + rangePreview={ + + } /> @@ -180,16 +162,15 @@ export default compose( [ const selectedColumnIndex = blockOrder.indexOf( clientId ); const columnCount = getBlockCount( parentId ); - const columnWidths = getBlocks( parentId ).map( ( column ) => - getEffectiveColumnWidth( column, columnCount ) - ); + const columns = getBlocks( parentId ); return { hasChildren, isParentSelected, isSelected, selectedColumnIndex, - columnWidths, + columns, + columnCount, }; } ), withPreferredColorScheme, From 54db5487e52dc9a5d9520a0729d7501d9132e26f Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Fri, 31 Jul 2020 15:30:00 +0200 Subject: [PATCH 14/20] Correct useMemo in variation picker --- .../block-variation-picker/index.native.js | 43 ++++++++++--------- 1 file changed, 23 insertions(+), 20 deletions(-) diff --git a/packages/block-editor/src/components/block-variation-picker/index.native.js b/packages/block-editor/src/components/block-variation-picker/index.native.js index e9b6a427170322..59c1db9c39cce4 100644 --- a/packages/block-editor/src/components/block-variation-picker/index.native.js +++ b/packages/block-editor/src/components/block-variation-picker/index.native.js @@ -54,26 +54,29 @@ function BlockVariationPicker( { isVisible, onClose, clientId, variations } ) { styles.cancelButtonDark ); - const leftButton = useMemo( () => ( - - - { isIOS ? ( - - { __( 'Cancel' ) } - - ) : ( - - ) } - - - ) ); + const leftButton = useMemo( + () => ( + + + { isIOS ? ( + + { __( 'Cancel' ) } + + ) : ( + + ) } + + + ), + [ onClose, cancelButtonStyle ] + ); const onVariationSelect = ( variation ) => { replaceInnerBlocks( From 2453eefac272938e0e59bd1366a146c99ebbfad6 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Mon, 3 Aug 2020 10:44:32 +0200 Subject: [PATCH 15/20] Change button color and slider step --- .../src/components/block-variation-picker/style.native.scss | 4 ++-- packages/block-library/src/column/edit.native.js | 1 - packages/block-library/src/columns/edit.native.js | 3 ++- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/components/block-variation-picker/style.native.scss b/packages/block-editor/src/components/block-variation-picker/style.native.scss index fa322db435aed2..8c86b4506cc4b1 100644 --- a/packages/block-editor/src/components/block-variation-picker/style.native.scss +++ b/packages/block-editor/src/components/block-variation-picker/style.native.scss @@ -15,12 +15,12 @@ } .cancelButton { - color: #d63638; + color: $blue-wordpress; font-size: 16px; } .cancelButtonDark { - color: #f86368; + color: $blue-30; } .closeIcon { diff --git a/packages/block-library/src/column/edit.native.js b/packages/block-library/src/column/edit.native.js index 849acf46a17c2f..9e1dad11a09413 100644 --- a/packages/block-library/src/column/edit.native.js +++ b/packages/block-library/src/column/edit.native.js @@ -85,7 +85,6 @@ function ColumnEdit( { label={ __( 'Percentage width' ) } min={ 1 } max={ 100 } - step={ 0.1 } value={ columnWidths[ selectedColumnIndex ] } onChange={ onWidthChange } toFixed={ 1 } diff --git a/packages/block-library/src/columns/edit.native.js b/packages/block-library/src/columns/edit.native.js index 472fe45e42810f..2db3543b91c7a0 100644 --- a/packages/block-library/src/columns/edit.native.js +++ b/packages/block-library/src/columns/edit.native.js @@ -246,7 +246,8 @@ const ColumnsEditContainerWrapper = withDispatch( if ( isAddingColumn ) { // Get verticalAlignment from Columns block to set the same to new Column - const { verticalAlignment } = getBlockAttributes( clientId ); + const { verticalAlignment } = + getBlockAttributes( clientId ) || {}; innerBlocks = [ ...innerBlocks, From a6d1feb2f5face0cf26f08c1256bed77b227f35d Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Tue, 4 Aug 2020 11:28:12 +0200 Subject: [PATCH 16/20] Change width label --- packages/block-library/src/column/edit.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/column/edit.native.js b/packages/block-library/src/column/edit.native.js index 9e1dad11a09413..d356396a20d9b5 100644 --- a/packages/block-library/src/column/edit.native.js +++ b/packages/block-library/src/column/edit.native.js @@ -82,7 +82,7 @@ function ColumnEdit( { Date: Wed, 5 Aug 2020 15:41:06 +0200 Subject: [PATCH 17/20] Refactor styles --- .../components/src/mobile/bottom-sheet/index.native.js | 8 ++++---- .../components/src/mobile/bottom-sheet/styles.native.scss | 4 ++++ 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/components/src/mobile/bottom-sheet/index.native.js b/packages/components/src/mobile/bottom-sheet/index.native.js index 1b0dcf50274d6d..f617098f2ac352 100644 --- a/packages/components/src/mobile/bottom-sheet/index.native.js +++ b/packages/components/src/mobile/bottom-sheet/index.native.js @@ -343,19 +343,19 @@ class BottomSheet extends Component { const WrapperView = isChildrenScrollable ? View : ScrollView; const getHeader = () => ( - + <> - { leftButton } + { leftButton } { title } - { rightButton } + { rightButton } { withHeaderSeparator && } - + ); return ( diff --git a/packages/components/src/mobile/bottom-sheet/styles.native.scss b/packages/components/src/mobile/bottom-sheet/styles.native.scss index dd8b56eb46159f..de2e9b4f006f18 100644 --- a/packages/components/src/mobile/bottom-sheet/styles.native.scss +++ b/packages/components/src/mobile/bottom-sheet/styles.native.scss @@ -252,3 +252,7 @@ .arrowLeftIconDark { color: $dark-secondary; } + +.flex { + flex: 1; +} From 249a71c5fb25fdf555e6a0d23a1e06490fd57823 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Fri, 7 Aug 2020 15:52:30 +0200 Subject: [PATCH 18/20] Use FooterMessageControl --- .../block-variation-picker/index.native.js | 4 +-- .../block-library/src/columns/edit.native.js | 4 +-- .../index.native.js | 29 ------------------- 3 files changed, 4 insertions(+), 33 deletions(-) delete mode 100644 packages/components/src/unsupported-footer-control/index.native.js diff --git a/packages/block-editor/src/components/block-variation-picker/index.native.js b/packages/block-editor/src/components/block-variation-picker/index.native.js index 59c1db9c39cce4..2650e23227f985 100644 --- a/packages/block-editor/src/components/block-variation-picker/index.native.js +++ b/packages/block-editor/src/components/block-variation-picker/index.native.js @@ -20,7 +20,7 @@ import { __ } from '@wordpress/i18n'; import { PanelBody, BottomSheet, - UnsupportedFooterControl, + FooterMessageControl, } from '@wordpress/components'; import { Icon, close } from '@wordpress/icons'; import { useMemo } from '@wordpress/element'; @@ -112,7 +112,7 @@ function BlockVariationPicker( { isVisible, onClose, clientId, variations } ) { } ) } - - - ); -} - -export default UnsupportedFooterControl; From c569bd2f1b4d00b01a35b63698c8e5ba539cd3ed Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Fri, 7 Aug 2020 15:57:31 +0200 Subject: [PATCH 19/20] Change styles name --- packages/block-library/src/column/edit.native.js | 4 ++-- .../src/mobile/bottom-sheet/footer-message-cell.native.js | 2 +- .../components/src/mobile/bottom-sheet/styles.native.scss | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/column/edit.native.js b/packages/block-library/src/column/edit.native.js index d356396a20d9b5..ae530dec63ca2b 100644 --- a/packages/block-library/src/column/edit.native.js +++ b/packages/block-library/src/column/edit.native.js @@ -17,7 +17,7 @@ import { import { PanelBody, RangeControl, - UnsupportedFooterControl, + FooterMessageControl, } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; /** @@ -97,7 +97,7 @@ function ColumnEdit( { /> - ); } diff --git a/packages/components/src/mobile/bottom-sheet/styles.native.scss b/packages/components/src/mobile/bottom-sheet/styles.native.scss index 0a40d622084f4c..700212f8584556 100644 --- a/packages/components/src/mobile/bottom-sheet/styles.native.scss +++ b/packages/components/src/mobile/bottom-sheet/styles.native.scss @@ -168,9 +168,9 @@ color: #c3c4c7; } -// Unsupported Footer Cell +// Footer Message Cell -.unsupportedFooterCell { +.footerMessageCell { font-size: $text-editor-font-size; color: $gray; flex: 1; From bc3234937b25ab7fc77465c7eca7b60ca7ced37b Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Fri, 7 Aug 2020 16:11:04 +0200 Subject: [PATCH 20/20] Set textAlign=center as a default in FooterMessageControl --- .../src/components/block-variation-picker/index.native.js | 1 - packages/block-library/src/column/edit.native.js | 1 - packages/block-library/src/columns/edit.native.js | 1 - .../src/mobile/bottom-sheet/footer-message-cell.native.js | 2 +- packages/components/src/mobile/link-settings/index.native.js | 5 ++++- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/block-editor/src/components/block-variation-picker/index.native.js b/packages/block-editor/src/components/block-variation-picker/index.native.js index 2650e23227f985..0884b5aebdaed2 100644 --- a/packages/block-editor/src/components/block-variation-picker/index.native.js +++ b/packages/block-editor/src/components/block-variation-picker/index.native.js @@ -116,7 +116,6 @@ function BlockVariationPicker( { isVisible, onClose, clientId, variations } ) { label={ __( 'Note: Column layout may vary between themes and screen sizes' ) } - textAlign="center" /> diff --git a/packages/block-library/src/column/edit.native.js b/packages/block-library/src/column/edit.native.js index ae530dec63ca2b..cd125ef7ac153e 100644 --- a/packages/block-library/src/column/edit.native.js +++ b/packages/block-library/src/column/edit.native.js @@ -101,7 +101,6 @@ function ColumnEdit( { label={ __( 'Note: Column layout may vary between themes and screen sizes' ) } - textAlign="center" /> diff --git a/packages/block-library/src/columns/edit.native.js b/packages/block-library/src/columns/edit.native.js index c2ecab1f123867..2b47dbe6675dff 100644 --- a/packages/block-library/src/columns/edit.native.js +++ b/packages/block-library/src/columns/edit.native.js @@ -161,7 +161,6 @@ function ColumnsEditContainer( { label={ __( 'Note: Column layout may vary between themes and screen sizes' ) } - textAlign="center" /> diff --git a/packages/components/src/mobile/bottom-sheet/footer-message-cell.native.js b/packages/components/src/mobile/bottom-sheet/footer-message-cell.native.js index 85717987dd33a3..2163224074c1d3 100644 --- a/packages/components/src/mobile/bottom-sheet/footer-message-cell.native.js +++ b/packages/components/src/mobile/bottom-sheet/footer-message-cell.native.js @@ -8,7 +8,7 @@ import { withPreferredColorScheme } from '@wordpress/compose'; import Cell from './cell'; import styles from './styles.scss'; -function FooterMessageCell( { textAlign, ...props } ) { +function FooterMessageCell( { textAlign = 'center', ...props } ) { return ( { options.footer && ( - + ) } { actions && }