From 094f8ebe46fbdcd906d93315a9158133ceb8a810 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Wed, 12 Feb 2020 16:07:59 +0100 Subject: [PATCH 01/45] Merge Button changes into Buttons block --- .../src/components/block-list/block.native.js | 1 + .../src/components/block-list/index.native.js | 73 +++++++++++++++---- .../button-block-appender/index.native.js | 50 ++----------- .../styled-button-appender.native.js | 55 ++++++++++++++ .../inner-blocks/buttons-block-appender.js | 41 +++++++++++ .../components/inner-blocks/index.native.js | 15 ++-- .../inner-blocks/styles.native.scss | 3 + .../block-library/src/buttons/edit.native.js | 25 +++++++ packages/block-library/src/index.native.js | 3 + 9 files changed, 202 insertions(+), 64 deletions(-) create mode 100644 packages/block-editor/src/components/button-block-appender/styled-button-appender.native.js create mode 100644 packages/block-editor/src/components/inner-blocks/buttons-block-appender.js create mode 100644 packages/block-editor/src/components/inner-blocks/styles.native.scss create mode 100644 packages/block-library/src/buttons/edit.native.js diff --git a/packages/block-editor/src/components/block-list/block.native.js b/packages/block-editor/src/components/block-list/block.native.js index 87b23502fe9ad4..d9b58e1527dffc 100644 --- a/packages/block-editor/src/components/block-list/block.native.js +++ b/packages/block-editor/src/components/block-list/block.native.js @@ -67,6 +67,7 @@ class BlockListBlock extends Component { this.props.onCaretVerticalPositionChange } clientId={ this.props.clientId } + parentWidth={ this.props.parentWidth } /> ); } diff --git a/packages/block-editor/src/components/block-list/index.native.js b/packages/block-editor/src/components/block-list/index.native.js index 3270fbcb40c3f2..7e1c391520e3e9 100644 --- a/packages/block-editor/src/components/block-list/index.native.js +++ b/packages/block-editor/src/components/block-list/index.native.js @@ -43,9 +43,14 @@ export class BlockList extends Component { this.shouldFlatListPreventAutomaticScroll = this.shouldFlatListPreventAutomaticScroll.bind( this ); + this.onLayout = this.onLayout.bind( this ); this.shouldShowInnerBlockAppender = this.shouldShowInnerBlockAppender.bind( this ); + + this.state = { + maxWidth: null, + }; } addBlockToEndOfPost( newBlock ) { @@ -69,6 +74,12 @@ export class BlockList extends Component { return this.props.isBlockInsertionPointVisible; } + onLayout( { nativeEvent } ) { + const { width } = nativeEvent.layout; + + this.setState( { maxWidth: width } ); + } + renderDefaultBlockAppender() { const { shouldShowInsertionPointBefore } = this.props; const willShowInsertionPoint = shouldShowInsertionPointBefore(); // call without the client_id argument since this is the appender @@ -84,8 +95,15 @@ export class BlockList extends Component { } shouldShowInnerBlockAppender() { - const { blockClientIds, renderAppender } = this.props; - return renderAppender && blockClientIds.length > 0; + const { + blockClientIds, + renderAppender, + isSelectedButtonsBlock, + } = this.props; + if ( ! isSelectedButtonsBlock ) { + return renderAppender && blockClientIds.length > 0; + } + return false; } render() { @@ -94,7 +112,6 @@ export class BlockList extends Component { blockClientIds, title, header, - withFooter = true, isReadOnly, isRootList, } = this.props; @@ -103,6 +120,7 @@ export class BlockList extends Component { @@ -164,6 +187,7 @@ export class BlockList extends Component { onCaretVerticalPositionChange={ this.onCaretVerticalPositionChange } + parentWidth={ this.state.maxWidth } /> { ! this.shouldShowInnerBlockAppender() && shouldShowInsertionPointAfter( clientId ) && ( @@ -176,17 +200,29 @@ export class BlockList extends Component { renderBlockListFooter() { const paragraphBlock = createBlock( 'core/paragraph' ); - return ( - <> - { - this.addBlockToEndOfPost( paragraphBlock ); - } } - > - - - - ); + const { + isReadOnly, + withFooter = true, + isSelectedButtonsBlock, + renderAppender, + } = this.props; + + if ( ! isReadOnly && withFooter ) { + return ( + <> + { + this.addBlockToEndOfPost( paragraphBlock ); + } } + > + + + + ); + } else if ( isSelectedButtonsBlock && renderAppender ) { + return renderAppender(); + } + return null; } } @@ -199,9 +235,11 @@ export default compose( [ getBlockInsertionPoint, isBlockInsertionPointVisible, getSettings, + getBlock, } = select( 'core/block-editor' ); const selectedBlockClientId = getSelectedBlockClientId(); + const selectedBlock = getBlock( selectedBlockClientId ); const blockClientIds = getBlockOrder( rootClientId ); const insertionPoint = getBlockInsertionPoint(); const blockInsertionPointIsVisible = isBlockInsertionPointVisible(); @@ -226,6 +264,8 @@ export default compose( [ ); }; + const isSelectedButtonsBlock = + selectedBlock && selectedBlock.name === 'core/buttons'; const isReadOnly = getSettings().readOnly; return { @@ -237,6 +277,7 @@ export default compose( [ selectedBlockClientId, isReadOnly, isRootList: rootClientId === undefined, + isSelectedButtonsBlock, }; } ), withDispatch( ( dispatch ) => { diff --git a/packages/block-editor/src/components/button-block-appender/index.native.js b/packages/block-editor/src/components/button-block-appender/index.native.js index 070993d3d9848f..078201c4d749eb 100644 --- a/packages/block-editor/src/components/button-block-appender/index.native.js +++ b/packages/block-editor/src/components/button-block-appender/index.native.js @@ -1,57 +1,20 @@ -/** - * External dependencies - */ -import { View } from 'react-native'; - -/** - * WordPress dependencies - */ -import { withPreferredColorScheme } from '@wordpress/compose'; -import { Button, Dashicon } from '@wordpress/components'; - /** * Internal dependencies */ import Inserter from '../inserter'; -import styles from './styles.scss'; - -function ButtonBlockAppender( { - rootClientId, - getStylesFromColorScheme, - showSeparator, -} ) { - const appenderStyle = { - ...styles.appender, - ...getStylesFromColorScheme( - styles.appenderLight, - styles.appenderDark - ), - }; - const addBlockButtonStyle = getStylesFromColorScheme( - styles.addBlockButton, - styles.addBlockButtonDark - ); +import StyledButtonAppender from './styled-button-appender'; +function ButtonBlockAppender( { rootClientId, showSeparator } ) { return ( <> ( - + /> ) } isAppender showSeparator={ showSeparator } @@ -63,4 +26,5 @@ function ButtonBlockAppender( { /** * @see https://github.com/WordPress/gutenberg/blob/master/packages/block-editor/src/components/button-block-appender/README.md */ -export default withPreferredColorScheme( ButtonBlockAppender ); +export default ButtonBlockAppender; +export { StyledButtonAppender }; diff --git a/packages/block-editor/src/components/button-block-appender/styled-button-appender.native.js b/packages/block-editor/src/components/button-block-appender/styled-button-appender.native.js new file mode 100644 index 00000000000000..752e7e336f6c11 --- /dev/null +++ b/packages/block-editor/src/components/button-block-appender/styled-button-appender.native.js @@ -0,0 +1,55 @@ +/** + * External dependencies + */ +import { View } from 'react-native'; + +/** + * WordPress dependencies + */ +import { withPreferredColorScheme } from '@wordpress/compose'; +import { Button, Dashicon } from '@wordpress/components'; + +/** + * Internal dependencies + */ +import styles from './styles.scss'; + +function StyledButtonAppender( { + onClick, + isOpen, + disabled, + style, + getStylesFromColorScheme, +} ) { + const appenderStyle = { + ...styles.appender, + ...getStylesFromColorScheme( + styles.appenderLight, + styles.appenderDark + ), + }; + const addBlockButtonStyle = getStylesFromColorScheme( + styles.addBlockButton, + styles.addBlockButtonDark + ); + + return ( + + ); +} + +export default withPreferredColorScheme( StyledButtonAppender ); diff --git a/packages/block-editor/src/components/inner-blocks/buttons-block-appender.js b/packages/block-editor/src/components/inner-blocks/buttons-block-appender.js new file mode 100644 index 00000000000000..000aa614810cb5 --- /dev/null +++ b/packages/block-editor/src/components/inner-blocks/buttons-block-appender.js @@ -0,0 +1,41 @@ +/** + * WordPress dependencies + */ +import { withDispatch } from '@wordpress/data'; +import { compose, withPreferredColorScheme } from '@wordpress/compose'; +import { createBlock } from '@wordpress/blocks'; +/** + * Internal dependencies + */ +import withClientId from './with-client-id'; +import styles from './style'; +import { StyledButtonAppender } from '../button-block-appender'; + +function ButtonsAppender( { onAddNextButton } ) { + return ( + + ); +} + +export default compose( [ + withPreferredColorScheme, + withClientId, + withDispatch( ( dispatch, { clientId }, registry ) => { + const { replaceInnerBlocks } = dispatch( 'core/block-editor' ); + const { getBlocks } = registry.select( 'core/block-editor' ); + const innerBlocks = getBlocks( clientId ); + + const extendedInnerBlocks = [ + ...innerBlocks, + createBlock( 'core/button' ), + ]; + + return { + onAddNextButton: () => + replaceInnerBlocks( clientId, extendedInnerBlocks, false ), + }; + } ), +] )( ButtonsAppender ); diff --git a/packages/block-editor/src/components/inner-blocks/index.native.js b/packages/block-editor/src/components/inner-blocks/index.native.js index 5ec57dea4e5545..c285188c441fc0 100644 --- a/packages/block-editor/src/components/inner-blocks/index.native.js +++ b/packages/block-editor/src/components/inner-blocks/index.native.js @@ -20,10 +20,7 @@ import { compose } from '@wordpress/compose'; */ import ButtonBlockAppender from './button-block-appender'; import DefaultBlockAppender from './default-block-appender'; - -/** - * Internal dependencies - */ +import ButtonsBlockAppender from './buttons-block-appender'; import BlockList from '../block-list'; import { withBlockEditContext } from '../block-edit/context'; @@ -109,7 +106,11 @@ class InnerBlocks extends Component { } render() { - const { clientId, renderAppender } = this.props; + const { + clientId, + renderAppender, + __experimentalMoverDirection, + } = this.props; const { templateInProcess } = this.state; return ( @@ -119,6 +120,9 @@ class InnerBlocks extends Component { rootClientId={ clientId } renderAppender={ renderAppender } withFooter={ false } + __experimentalMoverDirection={ + __experimentalMoverDirection + } /> ) } @@ -180,6 +184,7 @@ InnerBlocks = compose( [ // Expose default appender placeholders as components. InnerBlocks.DefaultBlockAppender = DefaultBlockAppender; InnerBlocks.ButtonBlockAppender = ButtonBlockAppender; +InnerBlocks.ButtonsBlockAppender = ButtonsBlockAppender; InnerBlocks.Content = withBlockContentContext( ( { BlockContent } ) => ( diff --git a/packages/block-editor/src/components/inner-blocks/styles.native.scss b/packages/block-editor/src/components/inner-blocks/styles.native.scss new file mode 100644 index 00000000000000..7725bf7338e4ea --- /dev/null +++ b/packages/block-editor/src/components/inner-blocks/styles.native.scss @@ -0,0 +1,3 @@ +.appender { + flex: none; +} diff --git a/packages/block-library/src/buttons/edit.native.js b/packages/block-library/src/buttons/edit.native.js new file mode 100644 index 00000000000000..55d7661cb5c16d --- /dev/null +++ b/packages/block-library/src/buttons/edit.native.js @@ -0,0 +1,25 @@ +/** + * WordPress dependencies + */ +import { InnerBlocks } from '@wordpress/block-editor'; + +/** + * Internal dependencies + */ +import { name as buttonBlockName } from '../button/'; + +const ALLOWED_BLOCKS = [ buttonBlockName ]; +const BUTTONS_TEMPLATE = [ [ 'core/button' ] ]; + +function ButtonsEdit( { isSelected } ) { + return ( + + ); +} + +export default ButtonsEdit; diff --git a/packages/block-library/src/index.native.js b/packages/block-library/src/index.native.js index 4d2a5f9e7b17ab..3a3817dd9fe570 100644 --- a/packages/block-library/src/index.native.js +++ b/packages/block-library/src/index.native.js @@ -50,6 +50,7 @@ import * as verse from './verse'; import * as video from './video'; import * as tagCloud from './tag-cloud'; import * as group from './group'; +import * as buttons from './buttons'; export const coreBlocks = [ // Common blocks are grouped at the top to prioritize their display @@ -96,6 +97,7 @@ export const coreBlocks = [ textColumns, verse, video, + buttons, ].reduce( ( accumulator, block ) => { accumulator[ block.name ] = block; return accumulator; @@ -152,6 +154,7 @@ export const registerCoreBlocks = () => { devOnly( button ), spacer, shortcode, + devOnly( buttons ), ].forEach( registerBlock ); setDefaultBlockName( paragraph.name ); From 35e0cb6f2fb58d9b20c24d5fa3788d0d08242437 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Mon, 17 Feb 2020 09:40:06 +0100 Subject: [PATCH 02/45] Correct expanding button inside buttons --- .../src/components/block-list/block.native.js | 5 ++++- .../{styles.native.scss => style.native.scss} | 0 packages/block-library/src/button/edit.native.js | 13 ++++++++++--- packages/block-library/src/button/index.native.js | 11 ----------- 4 files changed, 14 insertions(+), 15 deletions(-) rename packages/block-editor/src/components/inner-blocks/{styles.native.scss => style.native.scss} (100%) delete mode 100644 packages/block-library/src/button/index.native.js diff --git a/packages/block-editor/src/components/block-list/block.native.js b/packages/block-editor/src/components/block-list/block.native.js index d9b58e1527dffc..3ce3da134c9ccb 100644 --- a/packages/block-editor/src/components/block-list/block.native.js +++ b/packages/block-editor/src/components/block-list/block.native.js @@ -112,6 +112,7 @@ class BlockListBlock extends Component { hasParent, getStylesFromColorScheme, isLastBlock, + name, } = this.props; // if block does not have parent apply neutral or full @@ -138,7 +139,9 @@ class BlockListBlock extends Component { ? styles.childOfSelected : styles.childOfSelectedLeaf ), ...dashedBorderStyle, - ...( ! isLastBlock && styles.marginVerticalChild ), + ...( ! isLastBlock && + name !== 'core/button' && + styles.marginVerticalChild ), }; } diff --git a/packages/block-editor/src/components/inner-blocks/styles.native.scss b/packages/block-editor/src/components/inner-blocks/style.native.scss similarity index 100% rename from packages/block-editor/src/components/inner-blocks/styles.native.scss rename to packages/block-editor/src/components/inner-blocks/style.native.scss diff --git a/packages/block-library/src/button/edit.native.js b/packages/block-library/src/button/edit.native.js index c011907d4e3e02..47bac00e2130d7 100644 --- a/packages/block-library/src/button/edit.native.js +++ b/packages/block-library/src/button/edit.native.js @@ -78,9 +78,14 @@ class ButtonEdit extends Component { setAttributes, editorSidebarOpened, attributes: { url }, + parentWidth, } = this.props; const { isLinkSheetVisible, isButtonFocused } = this.state; + if ( prevProps.parentWidth !== parentWidth ) { + this.onLayout(); + } + // Get initial value for `isEditingURL` when closing link settings sheet or button settings sheet if ( ( prevProps.editorSidebarOpened && ! editorSidebarOpened ) || @@ -220,11 +225,13 @@ class ButtonEdit extends Component { this.setState( { isLinkSheetVisible: false } ); } - onLayout( { nativeEvent } ) { - const { width } = nativeEvent.layout; + onLayout() { + const { parentWidth } = this.props; const { marginRight } = styles.button; const buttonSpacing = 2 * marginRight; - this.setState( { maxWidth: width - buttonSpacing } ); + this.setState( { + maxWidth: parentWidth - 2 * buttonSpacing, + } ); } getLinkSettings( url, rel, linkTarget, isCompatibleWithSettings ) { diff --git a/packages/block-library/src/button/index.native.js b/packages/block-library/src/button/index.native.js deleted file mode 100644 index b3a3b7c131dfe1..00000000000000 --- a/packages/block-library/src/button/index.native.js +++ /dev/null @@ -1,11 +0,0 @@ -/** - * Internal dependencies - */ -import { settings as webSettings } from './index.js'; - -export { metadata, name } from './index.js'; - -export const settings = { - ...webSettings, - parent: undefined, -}; From 2ef3544ae18159af1d189301396f841cb51792ea Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Mon, 17 Feb 2020 11:32:36 +0100 Subject: [PATCH 03/45] Adjust logic for removing last button from buttons --- .../src/components/block-list/index.native.js | 8 ++-- .../components/inner-blocks/index.native.js | 2 + .../block-editor/src/hooks/index.native.js | 1 + .../block-library/src/button/edit.native.js | 30 +++++++++++-- .../block-library/src/buttons/edit.native.js | 45 +++++++++++++++---- 5 files changed, 72 insertions(+), 14 deletions(-) diff --git a/packages/block-editor/src/components/block-list/index.native.js b/packages/block-editor/src/components/block-list/index.native.js index 7e1c391520e3e9..715650a4c4a1b2 100644 --- a/packages/block-editor/src/components/block-list/index.native.js +++ b/packages/block-editor/src/components/block-list/index.native.js @@ -114,6 +114,7 @@ export class BlockList extends Component { header, isReadOnly, isRootList, + style, } = this.props; return ( @@ -144,13 +145,14 @@ export class BlockList extends Component { ! isReadOnly && this.renderDefaultBlockAppender } ListFooterComponent={ this.renderBlockListFooter } - style={ + style={ [ this.props.__experimentalMoverDirection === 'horizontal' && { flexDirection: 'row', flexWrap: 'wrap', - } - } + }, + style, + ] } /> { this.shouldShowInnerBlockAppender() && ( diff --git a/packages/block-editor/src/components/inner-blocks/index.native.js b/packages/block-editor/src/components/inner-blocks/index.native.js index c285188c441fc0..cf3c2930393020 100644 --- a/packages/block-editor/src/components/inner-blocks/index.native.js +++ b/packages/block-editor/src/components/inner-blocks/index.native.js @@ -110,6 +110,7 @@ class InnerBlocks extends Component { clientId, renderAppender, __experimentalMoverDirection, + style, } = this.props; const { templateInProcess } = this.state; @@ -123,6 +124,7 @@ class InnerBlocks extends Component { __experimentalMoverDirection={ __experimentalMoverDirection } + style={ style } /> ) } diff --git a/packages/block-editor/src/hooks/index.native.js b/packages/block-editor/src/hooks/index.native.js index d85f61d596d93b..a396efa936c1c0 100644 --- a/packages/block-editor/src/hooks/index.native.js +++ b/packages/block-editor/src/hooks/index.native.js @@ -3,3 +3,4 @@ */ import './custom-class-name'; import './generated-class-name'; +import './align'; diff --git a/packages/block-library/src/button/edit.native.js b/packages/block-library/src/button/edit.native.js index 47bac00e2130d7..c30d11271d61bd 100644 --- a/packages/block-library/src/button/edit.native.js +++ b/packages/block-library/src/button/edit.native.js @@ -24,7 +24,7 @@ import { BottomSheet, } from '@wordpress/components'; import { Component } from '@wordpress/element'; -import { withSelect } from '@wordpress/data'; +import { withSelect, withDispatch } from '@wordpress/data'; import { isURL, prependHTTP } from '@wordpress/url'; import { link, external } from '@wordpress/icons'; @@ -56,6 +56,7 @@ class ButtonEdit extends Component { this.onToggleLinkSettings = this.onToggleLinkSettings.bind( this ); this.onToggleButtonFocus = this.onToggleButtonFocus.bind( this ); this.setRef = this.setRef.bind( this ); + this.onRemove = this.onRemove.bind( this ); // `isEditingURL` property is used to prevent from automatically pasting // URL from clipboard while trying to clear `Button URL` field and then @@ -234,6 +235,16 @@ class ButtonEdit extends Component { } ); } + onRemove() { + const { numOfButtons, onDelete, onReplace } = this.props; + + if ( numOfButtons === 1 ) { + onDelete(); + } else { + onReplace( [] ); + } + } + getLinkSettings( url, rel, linkTarget, isCompatibleWithSettings ) { return ( <> @@ -372,7 +383,7 @@ class ButtonEdit extends Component { __unstableMobileNoFocusOnMount={ ! isSelected } selectionColor={ textColor.color || '#fff' } onReplace={ onReplace } - onRemove={ () => onReplace( [] ) } + onRemove={ this.onRemove } /> @@ -436,17 +447,30 @@ export default compose( [ withColors( 'backgroundColor', { textColor: 'color' } ), withSelect( ( select ) => { const { isEditorSidebarOpened } = select( 'core/edit-post' ); - const { getSelectedBlockClientId, getBlockParents } = select( + const { getSelectedBlockClientId, getBlockParents, getBlock } = select( 'core/block-editor' ); const selectedId = getSelectedBlockClientId(); + const parentId = getBlockParents( selectedId )[ 0 ]; const hasParents = getBlockParents( selectedId ).length > 0; + const buttonsBlock = getBlock( parentId ); + const numOfButtons = buttonsBlock && buttonsBlock.innerBlocks.length; return { selectedId, editorSidebarOpened: isEditorSidebarOpened(), hasParents, + parentId, + numOfButtons, + }; + } ), + withDispatch( ( dispatch, { parentId } ) => { + const { removeBlock } = dispatch( 'core/block-editor' ); + return { + onDelete: () => { + removeBlock( parentId ); + }, }; } ), ] )( ButtonEdit ); diff --git a/packages/block-library/src/buttons/edit.native.js b/packages/block-library/src/buttons/edit.native.js index 55d7661cb5c16d..e678813931a67c 100644 --- a/packages/block-library/src/buttons/edit.native.js +++ b/packages/block-library/src/buttons/edit.native.js @@ -1,7 +1,11 @@ /** * WordPress dependencies */ -import { InnerBlocks } from '@wordpress/block-editor'; +import { + InnerBlocks, + BlockControls, + AlignmentToolbar, +} from '@wordpress/block-editor'; /** * Internal dependencies @@ -10,15 +14,40 @@ import { name as buttonBlockName } from '../button/'; const ALLOWED_BLOCKS = [ buttonBlockName ]; const BUTTONS_TEMPLATE = [ [ 'core/button' ] ]; +const ALIGNMENT_MAP = { + left: 'flex-start', + center: 'center', + right: 'flex-end', +}; + +function ButtonsEdit( { isSelected, attributes, setAttributes } ) { + const { align } = attributes; + + function updateAlignment( nextAlign ) { + setAttributes( { align: nextAlign } ); + } + + const buttonsStyle = { justifyContent: ALIGNMENT_MAP[ align ] }; -function ButtonsEdit( { isSelected } ) { return ( - + <> + + + + + ); } From 754ec3a255ea28ae5fc18b5307bb7383a7001b2a Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Mon, 17 Feb 2020 15:28:21 +0100 Subject: [PATCH 04/45] Correct styles import --- .../src/components/inner-blocks/buttons-block-appender.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/inner-blocks/buttons-block-appender.js b/packages/block-editor/src/components/inner-blocks/buttons-block-appender.js index 000aa614810cb5..4aabf81bfb09d8 100644 --- a/packages/block-editor/src/components/inner-blocks/buttons-block-appender.js +++ b/packages/block-editor/src/components/inner-blocks/buttons-block-appender.js @@ -8,7 +8,7 @@ import { createBlock } from '@wordpress/blocks'; * Internal dependencies */ import withClientId from './with-client-id'; -import styles from './style'; +import styles from './style.scss'; import { StyledButtonAppender } from '../button-block-appender'; function ButtonsAppender( { onAddNextButton } ) { From 865e37f7bf5fc0842bc4e5d1418e5e7c32b170a1 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Tue, 18 Feb 2020 16:33:34 +0100 Subject: [PATCH 05/45] Refactor adding Button logic inside Buttons --- .../button-block-appender/index.native.js | 50 +++++++++-- .../styled-button-appender.native.js | 56 ------------ .../inner-blocks/buttons-block-appender.js | 41 --------- .../components/inner-blocks/index.native.js | 2 - .../components/inner-blocks/style.native.scss | 3 - .../src/components/inserter/index.native.js | 88 ++++++++++++++----- .../block-library/src/button/edit.native.js | 40 +++++---- .../src/button/editor.native.scss | 4 + .../block-library/src/buttons/edit.native.js | 4 +- 9 files changed, 138 insertions(+), 150 deletions(-) delete mode 100644 packages/block-editor/src/components/button-block-appender/styled-button-appender.native.js delete mode 100644 packages/block-editor/src/components/inner-blocks/buttons-block-appender.js delete mode 100644 packages/block-editor/src/components/inner-blocks/style.native.scss diff --git a/packages/block-editor/src/components/button-block-appender/index.native.js b/packages/block-editor/src/components/button-block-appender/index.native.js index 078201c4d749eb..070993d3d9848f 100644 --- a/packages/block-editor/src/components/button-block-appender/index.native.js +++ b/packages/block-editor/src/components/button-block-appender/index.native.js @@ -1,20 +1,57 @@ +/** + * External dependencies + */ +import { View } from 'react-native'; + +/** + * WordPress dependencies + */ +import { withPreferredColorScheme } from '@wordpress/compose'; +import { Button, Dashicon } from '@wordpress/components'; + /** * Internal dependencies */ import Inserter from '../inserter'; -import StyledButtonAppender from './styled-button-appender'; +import styles from './styles.scss'; + +function ButtonBlockAppender( { + rootClientId, + getStylesFromColorScheme, + showSeparator, +} ) { + const appenderStyle = { + ...styles.appender, + ...getStylesFromColorScheme( + styles.appenderLight, + styles.appenderDark + ), + }; + const addBlockButtonStyle = getStylesFromColorScheme( + styles.addBlockButton, + styles.addBlockButtonDark + ); -function ButtonBlockAppender( { rootClientId, showSeparator } ) { return ( <> ( - + fixedRatio={ false } + > + + + + ) } isAppender showSeparator={ showSeparator } @@ -26,5 +63,4 @@ function ButtonBlockAppender( { rootClientId, showSeparator } ) { /** * @see https://github.com/WordPress/gutenberg/blob/master/packages/block-editor/src/components/button-block-appender/README.md */ -export default ButtonBlockAppender; -export { StyledButtonAppender }; +export default withPreferredColorScheme( ButtonBlockAppender ); diff --git a/packages/block-editor/src/components/button-block-appender/styled-button-appender.native.js b/packages/block-editor/src/components/button-block-appender/styled-button-appender.native.js deleted file mode 100644 index e4f4c47d7929b5..00000000000000 --- a/packages/block-editor/src/components/button-block-appender/styled-button-appender.native.js +++ /dev/null @@ -1,56 +0,0 @@ -/** - * External dependencies - */ -import { View } from 'react-native'; - -/** - * WordPress dependencies - */ -import { withPreferredColorScheme } from '@wordpress/compose'; -import { Button } from '@wordpress/components'; -import { Icon, plusCircleFilled } from '@wordpress/icons'; - -/** - * Internal dependencies - */ -import styles from './styles.scss'; - -function StyledButtonAppender( { - onClick, - isOpen, - disabled, - style, - getStylesFromColorScheme, -} ) { - const appenderStyle = { - ...styles.appender, - ...getStylesFromColorScheme( - styles.appenderLight, - styles.appenderDark - ), - }; - const addBlockButtonStyle = getStylesFromColorScheme( - styles.addBlockButton, - styles.addBlockButtonDark - ); - - return ( - - ); -} - -export default withPreferredColorScheme( StyledButtonAppender ); diff --git a/packages/block-editor/src/components/inner-blocks/buttons-block-appender.js b/packages/block-editor/src/components/inner-blocks/buttons-block-appender.js deleted file mode 100644 index 4aabf81bfb09d8..00000000000000 --- a/packages/block-editor/src/components/inner-blocks/buttons-block-appender.js +++ /dev/null @@ -1,41 +0,0 @@ -/** - * WordPress dependencies - */ -import { withDispatch } from '@wordpress/data'; -import { compose, withPreferredColorScheme } from '@wordpress/compose'; -import { createBlock } from '@wordpress/blocks'; -/** - * Internal dependencies - */ -import withClientId from './with-client-id'; -import styles from './style.scss'; -import { StyledButtonAppender } from '../button-block-appender'; - -function ButtonsAppender( { onAddNextButton } ) { - return ( - - ); -} - -export default compose( [ - withPreferredColorScheme, - withClientId, - withDispatch( ( dispatch, { clientId }, registry ) => { - const { replaceInnerBlocks } = dispatch( 'core/block-editor' ); - const { getBlocks } = registry.select( 'core/block-editor' ); - const innerBlocks = getBlocks( clientId ); - - const extendedInnerBlocks = [ - ...innerBlocks, - createBlock( 'core/button' ), - ]; - - return { - onAddNextButton: () => - replaceInnerBlocks( clientId, extendedInnerBlocks, false ), - }; - } ), -] )( ButtonsAppender ); diff --git a/packages/block-editor/src/components/inner-blocks/index.native.js b/packages/block-editor/src/components/inner-blocks/index.native.js index cf3c2930393020..748a08523ef624 100644 --- a/packages/block-editor/src/components/inner-blocks/index.native.js +++ b/packages/block-editor/src/components/inner-blocks/index.native.js @@ -20,7 +20,6 @@ import { compose } from '@wordpress/compose'; */ import ButtonBlockAppender from './button-block-appender'; import DefaultBlockAppender from './default-block-appender'; -import ButtonsBlockAppender from './buttons-block-appender'; import BlockList from '../block-list'; import { withBlockEditContext } from '../block-edit/context'; @@ -186,7 +185,6 @@ InnerBlocks = compose( [ // Expose default appender placeholders as components. InnerBlocks.DefaultBlockAppender = DefaultBlockAppender; InnerBlocks.ButtonBlockAppender = ButtonBlockAppender; -InnerBlocks.ButtonsBlockAppender = ButtonsBlockAppender; InnerBlocks.Content = withBlockContentContext( ( { BlockContent } ) => ( diff --git a/packages/block-editor/src/components/inner-blocks/style.native.scss b/packages/block-editor/src/components/inner-blocks/style.native.scss deleted file mode 100644 index 7725bf7338e4ea..00000000000000 --- a/packages/block-editor/src/components/inner-blocks/style.native.scss +++ /dev/null @@ -1,3 +0,0 @@ -.appender { - flex: none; -} diff --git a/packages/block-editor/src/components/inserter/index.native.js b/packages/block-editor/src/components/inserter/index.native.js index 6cc160b7e8dd4e..7b73b3a2b4238b 100644 --- a/packages/block-editor/src/components/inserter/index.native.js +++ b/packages/block-editor/src/components/inserter/index.native.js @@ -4,9 +4,9 @@ import { __ } from '@wordpress/i18n'; import { Dropdown, ToolbarButton, Picker } from '@wordpress/components'; import { Component } from '@wordpress/element'; -import { withSelect } from '@wordpress/data'; +import { withSelect, withDispatch } from '@wordpress/data'; import { compose, withPreferredColorScheme } from '@wordpress/compose'; -import { isUnmodifiedDefaultBlock } from '@wordpress/blocks'; +import { isUnmodifiedDefaultBlock, createBlock } from '@wordpress/blocks'; import { Icon, plusCircleFilled, @@ -158,14 +158,28 @@ export class Inserter extends Component { ); const onPress = () => { - this.setState( - { - destinationRootClientId: this.props.destinationRootClientId, - shouldReplaceBlock: this.shouldReplaceBlock( 'default' ), - insertionIndex: this.getInsertionIndex( 'default' ), - }, - onToggle - ); + const { + isButtonsBlock, + onBlockAdd, + destinationRootClientId, + } = this.props; + + const insertionIndex = this.getInsertionIndex( 'default' ); + + if ( isButtonsBlock ) { + onBlockAdd( destinationRootClientId, insertionIndex ); + } else { + this.setState( + { + destinationRootClientId, + shouldReplaceBlock: this.shouldReplaceBlock( + 'default' + ), + insertionIndex, + }, + onToggle + ); + } }; const onLongPress = () => { @@ -175,16 +189,28 @@ export class Inserter extends Component { }; const onPickerSelect = ( insertionType ) => { - this.setState( - { - destinationRootClientId: this.props.destinationRootClientId, - shouldReplaceBlock: this.shouldReplaceBlock( - insertionType - ), - insertionIndex: this.getInsertionIndex( insertionType ), - }, - onToggle - ); + const { + isHorizontalBlock, + onBlockAdd, + destinationRootClientId, + } = this.props; + + const insertionIndex = this.getInsertionIndex( insertionType ); + + if ( isHorizontalBlock ) { + onBlockAdd( destinationRootClientId, insertionIndex ); + } else { + this.setState( + { + destinationRootClientId, + shouldReplaceBlock: this.shouldReplaceBlock( + insertionType + ), + insertionIndex, + }, + onToggle + ); + } }; return ( @@ -256,6 +282,8 @@ export default compose( [ getBlockOrder, getBlockIndex, getBlock, + getBlockName, + getInserterItems, } = select( 'core/block-editor' ); const end = getBlockSelectionEnd(); @@ -275,6 +303,8 @@ export default compose( [ ? isUnmodifiedDefaultBlock( getBlock( end ) ) : undefined; + const items = getInserterItems( destinationRootClientId ); + function getDefaultInsertionIndex() { const { getSettings } = select( 'core/block-editor' ); @@ -322,8 +352,26 @@ export default compose( [ insertionIndexAfter, isAnyBlockSelected, isSelectedBlockReplaceable: isSelectedUnmodifiedDefaultBlock, + isButtonsBlock: + getBlockName( destinationRootClientId ) === 'core/buttons', + item: items[ 0 ], }; } ), + withDispatch( ( dispatch, { item } ) => { + const { insertBlock } = dispatch( 'core/block-editor' ); + return { + onBlockAdd( destinationRootClientId, insertionIndex ) { + const { name, initialAttributes } = item; + + const insertedBlock = createBlock( name, initialAttributes ); + insertBlock( + insertedBlock, + insertionIndex, + destinationRootClientId + ); + }, + }; + } ), withPreferredColorScheme, ] )( Inserter ); diff --git a/packages/block-library/src/button/edit.native.js b/packages/block-library/src/button/edit.native.js index c30d11271d61bd..17c94dd9a39244 100644 --- a/packages/block-library/src/button/edit.native.js +++ b/packages/block-library/src/button/edit.native.js @@ -63,13 +63,10 @@ class ButtonEdit extends Component { // manually adding specific link this.isEditingURL = false; - const isButtonFocused = - Platform.OS === 'ios' ? ! props.hasParents : true; - this.state = { maxWidth: INITIAL_MAX_WIDTH, isLinkSheetVisible: false, - isButtonFocused, + isButtonFocused: Platform.OS !== 'ios', }; } @@ -227,11 +224,17 @@ class ButtonEdit extends Component { } onLayout() { - const { parentWidth } = this.props; - const { marginRight } = styles.button; - const buttonSpacing = 2 * marginRight; + const { parentWidth, isSelectedButtonsBlock } = this.props; + const { marginRight: unSelectedSpacing } = styles.button; + const { marginRight: selectedSpacing } = styles.buttonsSelected; + + const buttonSpacing = isSelectedButtonsBlock + ? 2 * selectedSpacing + : 4 * unSelectedSpacing; + + const maxWidth = parentWidth - buttonSpacing; this.setState( { - maxWidth: parentWidth - 2 * buttonSpacing, + maxWidth, } ); } @@ -338,7 +341,7 @@ class ButtonEdit extends Component { const backgroundColor = this.getBackgroundColor(); return ( - + { + withSelect( ( select, { clientId } ) => { const { isEditorSidebarOpened } = select( 'core/edit-post' ); - const { getSelectedBlockClientId, getBlockParents, getBlock } = select( - 'core/block-editor' - ); + const { + getSelectedBlockClientId, + getBlockCount, + getBlockRootClientId, + } = select( 'core/block-editor' ); + const parentId = getBlockRootClientId( clientId ); const selectedId = getSelectedBlockClientId(); - const parentId = getBlockParents( selectedId )[ 0 ]; - const hasParents = getBlockParents( selectedId ).length > 0; - const buttonsBlock = getBlock( parentId ); - const numOfButtons = buttonsBlock && buttonsBlock.innerBlocks.length; + const isSelectedButtonsBlock = parentId === selectedId; + const numOfButtons = getBlockCount( parentId ); return { selectedId, editorSidebarOpened: isEditorSidebarOpened(), - hasParents, parentId, numOfButtons, + isSelectedButtonsBlock, }; } ), withDispatch( ( dispatch, { parentId } ) => { diff --git a/packages/block-library/src/button/editor.native.scss b/packages/block-library/src/button/editor.native.scss index ef2e1a54b69519..d00616ef76c984 100644 --- a/packages/block-library/src/button/editor.native.scss +++ b/packages/block-library/src/button/editor.native.scss @@ -28,6 +28,10 @@ margin: $panel-padding; } +.buttonsSelected { + margin: $panel-padding + $border-width + $block-selected-child-margin + $block-selected-child-to-content; +} + .fallbackButton { background-color: $button-fallback-bg; } diff --git a/packages/block-library/src/buttons/edit.native.js b/packages/block-library/src/buttons/edit.native.js index e678813931a67c..0d7ce7978b684c 100644 --- a/packages/block-library/src/buttons/edit.native.js +++ b/packages/block-library/src/buttons/edit.native.js @@ -41,9 +41,7 @@ function ButtonsEdit( { isSelected, attributes, setAttributes } ) { From da749f38f8a064079e46108c6f147e5b4d36f991 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Tue, 18 Feb 2020 17:12:18 +0100 Subject: [PATCH 06/45] Correct appender --- .../src/components/button-block-appender/index.native.js | 8 +++++++- .../components/button-block-appender/styles.native.scss | 4 ++++ packages/block-library/src/buttons/edit.native.js | 9 ++++++++- 3 files changed, 19 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/button-block-appender/index.native.js b/packages/block-editor/src/components/button-block-appender/index.native.js index 070993d3d9848f..ad1a3f93cd9cb0 100644 --- a/packages/block-editor/src/components/button-block-appender/index.native.js +++ b/packages/block-editor/src/components/button-block-appender/index.native.js @@ -19,6 +19,7 @@ function ButtonBlockAppender( { rootClientId, getStylesFromColorScheme, showSeparator, + flex, } ) { const appenderStyle = { ...styles.appender, @@ -43,7 +44,12 @@ function ButtonBlockAppender( { disabled={ disabled } fixedRatio={ false } > - + ; + } + return null; + } + const buttonsStyle = { justifyContent: ALIGNMENT_MAP[ align ] }; return ( @@ -41,7 +48,7 @@ function ButtonsEdit( { isSelected, attributes, setAttributes } ) { From b5506d55b53ae82486915443bc58464861e269cd Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Tue, 18 Feb 2020 17:20:23 +0100 Subject: [PATCH 07/45] Correct flex prop initial value --- .../src/components/button-block-appender/index.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/button-block-appender/index.native.js b/packages/block-editor/src/components/button-block-appender/index.native.js index ad1a3f93cd9cb0..dbd473c63580b1 100644 --- a/packages/block-editor/src/components/button-block-appender/index.native.js +++ b/packages/block-editor/src/components/button-block-appender/index.native.js @@ -19,7 +19,7 @@ function ButtonBlockAppender( { rootClientId, getStylesFromColorScheme, showSeparator, - flex, + flex = true, } ) { const appenderStyle = { ...styles.appender, From 841d60a5bfe9177419fb269fca80c99ff0ad5f8d Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Tue, 18 Feb 2020 19:43:59 +0100 Subject: [PATCH 08/45] Pass flex prop, correct styles --- .../components/button-block-appender/index.native.js | 7 ++++--- .../components/inner-blocks/button-block-appender.js | 3 ++- packages/block-library/src/button/edit.native.js | 12 ++++++------ packages/block-library/src/button/editor.native.scss | 2 +- 4 files changed, 13 insertions(+), 11 deletions(-) diff --git a/packages/block-editor/src/components/button-block-appender/index.native.js b/packages/block-editor/src/components/button-block-appender/index.native.js index dbd473c63580b1..d5a2699916f05d 100644 --- a/packages/block-editor/src/components/button-block-appender/index.native.js +++ b/packages/block-editor/src/components/button-block-appender/index.native.js @@ -7,7 +7,8 @@ import { View } from 'react-native'; * WordPress dependencies */ import { withPreferredColorScheme } from '@wordpress/compose'; -import { Button, Dashicon } from '@wordpress/components'; +import { Button } from '@wordpress/components'; +import { Icon, plusCircleFilled } from '@wordpress/icons'; /** * Internal dependencies @@ -50,8 +51,8 @@ function ButtonBlockAppender( { ! flex && styles.noFlexAppender, ] } > - { +export const ButtonBlockAppender = ( { clientId, showSeparator, flex } ) => { return ( ); }; diff --git a/packages/block-library/src/button/edit.native.js b/packages/block-library/src/button/edit.native.js index 17c94dd9a39244..33e1b5ead2709c 100644 --- a/packages/block-library/src/button/edit.native.js +++ b/packages/block-library/src/button/edit.native.js @@ -51,7 +51,7 @@ class ButtonEdit extends Component { this.onChangeOpenInNewTab = this.onChangeOpenInNewTab.bind( this ); this.onChangeURL = this.onChangeURL.bind( this ); this.onClearSettings = this.onClearSettings.bind( this ); - this.onLayout = this.onLayout.bind( this ); + this.onSetMaxWidth = this.onSetMaxWidth.bind( this ); this.getURLFromClipboard = this.getURLFromClipboard.bind( this ); this.onToggleLinkSettings = this.onToggleLinkSettings.bind( this ); this.onToggleButtonFocus = this.onToggleButtonFocus.bind( this ); @@ -81,7 +81,7 @@ class ButtonEdit extends Component { const { isLinkSheetVisible, isButtonFocused } = this.state; if ( prevProps.parentWidth !== parentWidth ) { - this.onLayout(); + this.onSetMaxWidth(); } // Get initial value for `isEditingURL` when closing link settings sheet or button settings sheet @@ -223,16 +223,16 @@ class ButtonEdit extends Component { this.setState( { isLinkSheetVisible: false } ); } - onLayout() { + onSetMaxWidth() { const { parentWidth, isSelectedButtonsBlock } = this.props; const { marginRight: unSelectedSpacing } = styles.button; const { marginRight: selectedSpacing } = styles.buttonsSelected; const buttonSpacing = isSelectedButtonsBlock - ? 2 * selectedSpacing - : 4 * unSelectedSpacing; + ? selectedSpacing + : unSelectedSpacing; - const maxWidth = parentWidth - buttonSpacing; + const maxWidth = parentWidth - 2 * buttonSpacing; this.setState( { maxWidth, } ); diff --git a/packages/block-library/src/button/editor.native.scss b/packages/block-library/src/button/editor.native.scss index d00616ef76c984..95566d279d7293 100644 --- a/packages/block-library/src/button/editor.native.scss +++ b/packages/block-library/src/button/editor.native.scss @@ -25,7 +25,7 @@ padding: $block-spacing; max-width: 580px; min-width: 108px; - margin: $panel-padding; + margin: $panel-padding 2 * $panel-padding; } .buttonsSelected { From e947b12fed9069796e1044ed2ac278c650e7cea1 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Wed, 19 Feb 2020 10:23:19 +0100 Subject: [PATCH 09/45] Add functionality for custom onDelete --- .../src/components/block-list/block.native.js | 6 +++- .../src/components/block-list/index.native.js | 2 ++ .../block-mobile-toolbar/index.native.js | 19 ++++++++--- .../components/inner-blocks/index.native.js | 2 ++ .../block-library/src/buttons/edit.native.js | 33 +++++++++++++++++-- 5 files changed, 55 insertions(+), 7 deletions(-) diff --git a/packages/block-editor/src/components/block-list/block.native.js b/packages/block-editor/src/components/block-list/block.native.js index c5c56afd22bec0..026ace2eb9a10c 100644 --- a/packages/block-editor/src/components/block-list/block.native.js +++ b/packages/block-editor/src/components/block-list/block.native.js @@ -193,6 +193,7 @@ class BlockListBlock extends Component { title, parentId, isTouchable, + customOnDelete, } = this.props; const accessibilityLabel = getAccessibleBlockLabel( @@ -238,7 +239,10 @@ class BlockListBlock extends Component { ) } { isSelected && ( - + ) } diff --git a/packages/block-editor/src/components/block-list/index.native.js b/packages/block-editor/src/components/block-list/index.native.js index 715650a4c4a1b2..fd570c6554e776 100644 --- a/packages/block-editor/src/components/block-list/index.native.js +++ b/packages/block-editor/src/components/block-list/index.native.js @@ -173,6 +173,7 @@ export class BlockList extends Component { isReadOnly, shouldShowInsertionPointBefore, shouldShowInsertionPointAfter, + customOnDelete, } = this.props; return ( @@ -190,6 +191,7 @@ export class BlockList extends Component { this.onCaretVerticalPositionChange } parentWidth={ this.state.maxWidth } + customOnDelete={ customOnDelete } /> { ! this.shouldShowInnerBlockAppender() && shouldShowInsertionPointAfter( clientId ) && ( diff --git a/packages/block-editor/src/components/block-mobile-toolbar/index.native.js b/packages/block-editor/src/components/block-mobile-toolbar/index.native.js index 43a34c0466b54d..3d9adaadfa368e 100644 --- a/packages/block-editor/src/components/block-mobile-toolbar/index.native.js +++ b/packages/block-editor/src/components/block-mobile-toolbar/index.native.js @@ -19,7 +19,12 @@ import styles from './style.scss'; import BlockMover from '../block-mover'; import { BlockSettingsButton } from '../block-settings'; -const BlockMobileToolbar = ( { clientId, onDelete, order } ) => ( +const BlockMobileToolbar = ( { + clientId, + onDelete, + order, + customOnDelete, +} ) => ( @@ -33,7 +38,7 @@ const BlockMobileToolbar = ( { clientId, onDelete, order } ) => ( __( 'Remove block at row %s' ), order + 1 ) } - onClick={ onDelete } + onClick={ customOnDelete || onDelete } icon={ trash } extraProps={ { hint: __( 'Double tap to remove the block' ) } } /> @@ -42,18 +47,24 @@ const BlockMobileToolbar = ( { clientId, onDelete, order } ) => ( export default compose( withSelect( ( select, { clientId } ) => { - const { getBlockIndex } = select( 'core/block-editor' ); + const { getBlockIndex, getBlockRootClientId } = select( + 'core/block-editor' + ); return { order: getBlockIndex( clientId ), + rootClientId: getBlockRootClientId( clientId ), }; } ), withDispatch( ( dispatch, { clientId, rootClientId } ) => { - const { removeBlock } = dispatch( 'core/block-editor' ); + const { removeBlock, selectBlock } = dispatch( 'core/block-editor' ); return { onDelete: () => { Keyboard.dismiss(); removeBlock( clientId, rootClientId ); + if ( !! rootClientId ) { + selectBlock( rootClientId ); + } }, }; } ) diff --git a/packages/block-editor/src/components/inner-blocks/index.native.js b/packages/block-editor/src/components/inner-blocks/index.native.js index 748a08523ef624..df4d3d33d17727 100644 --- a/packages/block-editor/src/components/inner-blocks/index.native.js +++ b/packages/block-editor/src/components/inner-blocks/index.native.js @@ -110,6 +110,7 @@ class InnerBlocks extends Component { renderAppender, __experimentalMoverDirection, style, + customOnDelete, } = this.props; const { templateInProcess } = this.state; @@ -124,6 +125,7 @@ class InnerBlocks extends Component { __experimentalMoverDirection } style={ style } + customOnDelete={ customOnDelete } /> ) } diff --git a/packages/block-library/src/buttons/edit.native.js b/packages/block-library/src/buttons/edit.native.js index e31c4579ee2194..234e92568050e6 100644 --- a/packages/block-library/src/buttons/edit.native.js +++ b/packages/block-library/src/buttons/edit.native.js @@ -6,6 +6,8 @@ import { BlockControls, AlignmentToolbar, } from '@wordpress/block-editor'; +import { withSelect, withDispatch } from '@wordpress/data'; +import { compose } from '@wordpress/compose'; /** * Internal dependencies @@ -20,7 +22,13 @@ const ALIGNMENT_MAP = { right: 'flex-end', }; -function ButtonsEdit( { isSelected, attributes, setAttributes } ) { +function ButtonsEdit( { + isSelected, + attributes, + setAttributes, + onDelete, + shouldDelete, +} ) { const { align } = attributes; function updateAlignment( nextAlign ) { @@ -51,9 +59,30 @@ function ButtonsEdit( { isSelected, attributes, setAttributes } ) { renderAppender={ renderAppender } __experimentalMoverDirection="horizontal" style={ buttonsStyle } + customOnDelete={ shouldDelete && onDelete } /> ); } -export default ButtonsEdit; +export default compose( + withSelect( ( select, { clientId } ) => { + const { getBlockCount } = select( 'core/block-editor' ); + + return { + // The purpose of `shouldDelete` check is giving the ability to pass to + // mobile toolbar function called `onDelete` which removes the whole + // `Buttons` container along with the last inner button when + // there is exactly one button. + shouldDelete: getBlockCount( clientId ) === 1, + }; + } ), + withDispatch( ( dispatch, { clientId } ) => { + const { removeBlock } = dispatch( 'core/block-editor' ); + return { + onDelete: () => { + removeBlock( clientId ); + }, + }; + } ) +)( ButtonsEdit ); From 8f113d111a579bd488db1604ad785e818d19a290 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Thu, 20 Feb 2020 14:05:25 +0100 Subject: [PATCH 10/45] Create customOnAdd function --- .../src/components/block-list/block.native.js | 4 +-- .../src/components/block-list/index.native.js | 15 ++++++--- .../components/block-list/style.native.scss | 5 +++ .../button-block-appender/index.native.js | 3 +- .../block-library/src/button/edit.native.js | 4 +-- .../block-library/src/buttons/edit.native.js | 32 +++++++++++++++---- 6 files changed, 46 insertions(+), 17 deletions(-) diff --git a/packages/block-editor/src/components/block-list/block.native.js b/packages/block-editor/src/components/block-list/block.native.js index 026ace2eb9a10c..6619d900595461 100644 --- a/packages/block-editor/src/components/block-list/block.native.js +++ b/packages/block-editor/src/components/block-list/block.native.js @@ -112,7 +112,7 @@ class BlockListBlock extends Component { hasParent, getStylesFromColorScheme, isLastBlock, - name, + horizontalDirection, } = this.props; // if block does not have parent apply neutral or full @@ -140,7 +140,7 @@ class BlockListBlock extends Component { : styles.childOfSelectedLeaf ), ...dashedBorderStyle, ...( ! isLastBlock && - name !== 'core/button' && + ! horizontalDirection && styles.marginVerticalChild ), }; } diff --git a/packages/block-editor/src/components/block-list/index.native.js b/packages/block-editor/src/components/block-list/index.native.js index 760f0f3a2e3d64..381f3c4cf8e8db 100644 --- a/packages/block-editor/src/components/block-list/index.native.js +++ b/packages/block-editor/src/components/block-list/index.native.js @@ -117,11 +117,15 @@ export class BlockList extends Component { style, shouldShowInsertionPointBefore, shouldShowInsertionPointAfter, + __experimentalMoverDirection, } = this.props; const forceRefresh = shouldShowInsertionPointBefore || shouldShowInsertionPointAfter; + const horizontalDirection = + __experimentalMoverDirection === 'horizontal'; + return ( @@ -180,8 +180,12 @@ export class BlockList extends Component { shouldShowInsertionPointBefore, shouldShowInsertionPointAfter, customOnDelete, + __experimentalMoverDirection, } = this.props; + const horizontalDirection = + __experimentalMoverDirection === 'horizontal'; + return ( @@ -198,6 +202,7 @@ export class BlockList extends Component { } parentWidth={ this.state.maxWidth } customOnDelete={ customOnDelete } + horizontalDirection={ horizontalDirection } /> { ! this.shouldShowInnerBlockAppender() && shouldShowInsertionPointAfter( clientId ) && ( 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 c102d1644d838b..b10681331e5b3a 100644 --- a/packages/block-editor/src/components/block-list/style.native.scss +++ b/packages/block-editor/src/components/block-list/style.native.scss @@ -50,3 +50,8 @@ padding-left: $block-custom-appender-to-content; padding-right: $block-custom-appender-to-content; } + +.horizontal { + flex-direction: row; + flex-wrap: wrap; +} diff --git a/packages/block-editor/src/components/button-block-appender/index.native.js b/packages/block-editor/src/components/button-block-appender/index.native.js index d5a2699916f05d..a6077c1b78ccad 100644 --- a/packages/block-editor/src/components/button-block-appender/index.native.js +++ b/packages/block-editor/src/components/button-block-appender/index.native.js @@ -21,6 +21,7 @@ function ButtonBlockAppender( { getStylesFromColorScheme, showSeparator, flex = true, + customOnAdd, } ) { const appenderStyle = { ...styles.appender, @@ -40,7 +41,7 @@ function ButtonBlockAppender( { rootClientId={ rootClientId } renderToggle={ ( { onToggle, disabled, isOpen } ) => ( ) } - - ); - } + isAppender + showSeparator={ showSeparator } + /> + + ); } -InnerBlocks = compose( [ - withBlockEditContext( ( context ) => pick( context, [ 'clientId' ] ) ), - withSelect( ( select, ownProps ) => { - const { - isBlockSelected, - hasSelectedInnerBlock, - getBlock, - getBlockListSettings, - getBlockRootClientId, - getTemplateLock, - } = select( 'core/block-editor' ); - const { clientId } = ownProps; - const block = getBlock( clientId ); - const rootClientId = getBlockRootClientId( clientId ); - - return { - block, - blockListSettings: getBlockListSettings( clientId ), - hasOverlay: - block.name !== 'core/template' && - ! isBlockSelected( clientId ) && - ! hasSelectedInnerBlock( clientId, true ), - parentLock: getTemplateLock( rootClientId ), - }; - } ), - withDispatch( ( dispatch, ownProps ) => { - const { replaceInnerBlocks, updateBlockListSettings } = dispatch( - 'core/block-editor' - ); - const { - block, - clientId, - templateInsertUpdatesSelection = true, - } = ownProps; - - return { - replaceInnerBlocks( blocks ) { - replaceInnerBlocks( - clientId, - blocks, - block.innerBlocks.length === 0 && - templateInsertUpdatesSelection - ); - }, - updateNestedSettings( settings ) { - dispatch( updateBlockListSettings( clientId, settings ) ); - }, - }; - } ), -] )( InnerBlocks ); - -// Expose default appender placeholders as components. -InnerBlocks.DefaultBlockAppender = DefaultBlockAppender; -InnerBlocks.ButtonBlockAppender = ButtonBlockAppender; - -InnerBlocks.Content = withBlockContentContext( ( { BlockContent } ) => ( - -) ); - /** - * @see https://github.com/WordPress/gutenberg/blob/master/packages/block-editor/src/components/inner-blocks/README.md + * @see https://github.com/WordPress/gutenberg/blob/master/packages/block-editor/src/components/button-block-appender/README.md */ -export default InnerBlocks; +export default withPreferredColorScheme( ButtonBlockAppender ); diff --git a/packages/block-library/src/buttons/edit.native.js b/packages/block-library/src/buttons/edit.native.js index 4a568ada61c81a..75da5643c0e7c4 100644 --- a/packages/block-library/src/buttons/edit.native.js +++ b/packages/block-library/src/buttons/edit.native.js @@ -23,11 +23,6 @@ import styles from './editor.scss'; const ALLOWED_BLOCKS = [ buttonBlockName ]; const BUTTONS_TEMPLATE = [ [ 'core/button' ] ]; -const ALIGNMENT_MAP = { - left: 'flex-start', - center: 'center', - right: 'flex-end', -}; function ButtonsEdit( { isSelected, @@ -51,7 +46,7 @@ function ButtonsEdit( { if ( shouldRenderFooterAppender ) { return ( ); @@ -68,10 +63,6 @@ function ButtonsEdit( { setMaxWidth( parentWidth ); } - const buttonsStyle = { - justifyContent: ALIGNMENT_MAP[ align ], - }; - return ( <> @@ -87,7 +78,7 @@ function ButtonsEdit( { template={ BUTTONS_TEMPLATE } renderAppender={ renderAppender } __experimentalMoverDirection="horizontal" - style={ buttonsStyle } + style={ styles[ `is-aligned-${ align }` ] } customOnDelete={ shouldDelete && onDelete } customOnAdd={ onAddNextButton } parentWidth={ maxWidth } diff --git a/packages/block-library/src/buttons/editor.native.scss b/packages/block-library/src/buttons/editor.native.scss index a3755ba15feaf3..ce3275e553d03b 100644 --- a/packages/block-library/src/buttons/editor.native.scss +++ b/packages/block-library/src/buttons/editor.native.scss @@ -1,3 +1,15 @@ .nestedButtons { margin: $block-selected-child-margin + $block-selected-child-border-width + $block-selected-border-width + $block-selected-margin; } + +.is-aligned-left { + justify-content: flex-start; +} + +.is-aligned-center { + justify-content: center; +} + +.is-aligned-right { + justify-content: flex-end; +} diff --git a/packages/editor/src/components/post-title/style.native.scss b/packages/editor/src/components/post-title/style.native.scss index 0e3e9e484de2b3..375d423a6cffd4 100644 --- a/packages/editor/src/components/post-title/style.native.scss +++ b/packages/editor/src/components/post-title/style.native.scss @@ -8,6 +8,6 @@ } .dimmed { - opacity: 1; + opacity: 0.2; } From 72171a1f413082faebe7f94a11bb1d7fe5f68df2 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Mon, 23 Mar 2020 12:44:44 +0100 Subject: [PATCH 29/45] Correct isFlex prop --- .../button-block-appender/index.native.js | 4 +- .../components/inner-blocks/index.native.js | 248 ++++++++++++++---- 2 files changed, 192 insertions(+), 60 deletions(-) diff --git a/packages/block-editor/src/components/button-block-appender/index.native.js b/packages/block-editor/src/components/button-block-appender/index.native.js index a6077c1b78ccad..b36fabec9277e6 100644 --- a/packages/block-editor/src/components/button-block-appender/index.native.js +++ b/packages/block-editor/src/components/button-block-appender/index.native.js @@ -20,7 +20,7 @@ function ButtonBlockAppender( { rootClientId, getStylesFromColorScheme, showSeparator, - flex = true, + isFlex = true, customOnAdd, } ) { const appenderStyle = { @@ -49,7 +49,7 @@ function ButtonBlockAppender( { - ( - +import ButtonBlockAppender from './button-block-appender'; +import DefaultBlockAppender from './default-block-appender'; +import BlockList from '../block-list'; +import { withBlockEditContext } from '../block-edit/context'; + +class InnerBlocks extends Component { + constructor() { + super( ...arguments ); + this.state = { + templateInProcess: !! this.props.template, + }; + this.updateNestedSettings(); + } + + getTemplateLock() { + const { templateLock, parentLock } = this.props; + return templateLock === undefined ? parentLock : templateLock; + } + + componentDidMount() { + const { innerBlocks } = this.props.block; + // only synchronize innerBlocks with template if innerBlocks are empty or a locking all exists + if ( innerBlocks.length === 0 || this.getTemplateLock() === 'all' ) { + this.synchronizeBlocksWithTemplate(); + } + + if ( this.state.templateInProcess ) { + this.setState( { + templateInProcess: false, + } ); + } + } + + componentDidUpdate( prevProps ) { + const { template, block } = this.props; + const { innerBlocks } = block; + + this.updateNestedSettings(); + // only synchronize innerBlocks with template if innerBlocks are empty or a locking all exists + if ( innerBlocks.length === 0 || this.getTemplateLock() === 'all' ) { + const hasTemplateChanged = ! isEqual( + template, + prevProps.template + ); + if ( hasTemplateChanged ) { + this.synchronizeBlocksWithTemplate(); + } + } + } + + /** + * Called on mount or when a mismatch exists between the templates and + * inner blocks, synchronizes inner blocks with the template, replacing + * current blocks. + */ + synchronizeBlocksWithTemplate() { + const { template, block, replaceInnerBlocks } = this.props; + const { innerBlocks } = block; + + // Synchronize with templates. If the next set differs, replace. + const nextBlocks = synchronizeBlocksWithTemplate( + innerBlocks, + template + ); + if ( ! isEqual( nextBlocks, innerBlocks ) ) { + replaceInnerBlocks( nextBlocks ); + } + } + + updateNestedSettings() { + const { + blockListSettings, + allowedBlocks, + updateNestedSettings, + } = this.props; + + const newSettings = { + allowedBlocks, + templateLock: this.getTemplateLock(), + }; + + if ( ! isShallowEqual( blockListSettings, newSettings ) ) { + updateNestedSettings( newSettings ); + } + } + + render() { + const { + clientId, + renderAppender, + __experimentalMoverDirection, + style, + customOnDelete, + customOnAdd, + parentWidth, + shouldRenderFooterAppender, + } = this.props; + const { templateInProcess } = this.state; + + return ( + <> + { ! templateInProcess && ( + ) } - isAppender - showSeparator={ showSeparator } - /> - - ); + + ); + } } +InnerBlocks = compose( [ + withBlockEditContext( ( context ) => pick( context, [ 'clientId' ] ) ), + withSelect( ( select, ownProps ) => { + const { + isBlockSelected, + hasSelectedInnerBlock, + getBlock, + getBlockListSettings, + getBlockRootClientId, + getTemplateLock, + } = select( 'core/block-editor' ); + const { clientId } = ownProps; + const block = getBlock( clientId ); + const rootClientId = getBlockRootClientId( clientId ); + + return { + block, + blockListSettings: getBlockListSettings( clientId ), + hasOverlay: + block.name !== 'core/template' && + ! isBlockSelected( clientId ) && + ! hasSelectedInnerBlock( clientId, true ), + parentLock: getTemplateLock( rootClientId ), + }; + } ), + withDispatch( ( dispatch, ownProps ) => { + const { replaceInnerBlocks, updateBlockListSettings } = dispatch( + 'core/block-editor' + ); + const { + block, + clientId, + templateInsertUpdatesSelection = true, + } = ownProps; + + return { + replaceInnerBlocks( blocks ) { + replaceInnerBlocks( + clientId, + blocks, + block.innerBlocks.length === 0 && + templateInsertUpdatesSelection + ); + }, + updateNestedSettings( settings ) { + dispatch( updateBlockListSettings( clientId, settings ) ); + }, + }; + } ), +] )( InnerBlocks ); + +// Expose default appender placeholders as components. +InnerBlocks.DefaultBlockAppender = DefaultBlockAppender; +InnerBlocks.ButtonBlockAppender = ButtonBlockAppender; + +InnerBlocks.Content = withBlockContentContext( ( { BlockContent } ) => ( + +) ); + /** - * @see https://github.com/WordPress/gutenberg/blob/master/packages/block-editor/src/components/button-block-appender/README.md + * @see https://github.com/WordPress/gutenberg/blob/master/packages/block-editor/src/components/inner-blocks/README.md */ -export default withPreferredColorScheme( ButtonBlockAppender ); +export default InnerBlocks; From 451a4343513909e31e3a380ca8d4559c7ff4e54d Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Thu, 26 Mar 2020 17:18:30 +0100 Subject: [PATCH 30/45] Adjust Buttons after bordering --- .../components/block-list/block.native.scss | 22 +++++++++++++++++++ .../block-library/src/button/edit.native.js | 17 +++++--------- .../src/button/editor.native.scss | 5 ----- .../block-library/src/buttons/edit.native.js | 12 ++-------- .../src/buttons/editor.native.scss | 14 ++++++++---- 5 files changed, 39 insertions(+), 31 deletions(-) diff --git a/packages/block-editor/src/components/block-list/block.native.scss b/packages/block-editor/src/components/block-list/block.native.scss index a9e04b3fced38f..0d1c60fe4f1f19 100644 --- a/packages/block-editor/src/components/block-list/block.native.scss +++ b/packages/block-editor/src/components/block-list/block.native.scss @@ -62,3 +62,25 @@ margin-left: -$block-edge-to-content; margin-right: -$block-edge-to-content; } + +.solidBorder { + position: absolute; + top: -$solid-border-space; + bottom: 0; + left: -$solid-border-space; + right: -$solid-border-space; + border-width: $block-selected-border-width; + border-radius: 4px; + border-style: solid; +} + +.dashedBorder { + position: absolute; + top: -$dashed-border-space; + bottom: -$dashed-border-space; + left: -$dashed-border-space; + right: -$dashed-border-space; + border-width: $block-selected-border-width; + border-radius: 2px; + border-style: dashed; +} diff --git a/packages/block-library/src/button/edit.native.js b/packages/block-library/src/button/edit.native.js index 93319aad925f06..231ff3d9c02b00 100644 --- a/packages/block-library/src/button/edit.native.js +++ b/packages/block-library/src/button/edit.native.js @@ -240,24 +240,17 @@ class ButtonEdit extends Component { onSetMaxWidth( width ) { const { maxWidth } = this.state; - const { parentWidth, isSelectedButtonsBlock } = this.props; - const { marginRight: unselectedSpacing } = styles.button; - const { marginRight: selectedSpacing } = styles.buttonsSelected; + const { parentWidth } = this.props; - const buttonSpacing = isSelectedButtonsBlock - ? selectedSpacing - : unselectedSpacing; - - const isParentWidthChanged = - maxWidth !== parentWidth - 2 * buttonSpacing; - const isWidthChanged = maxWidth !== width - unselectedSpacing; + const isParentWidthChanged = maxWidth !== parentWidth; + const isWidthChanged = maxWidth !== width; if ( parentWidth && ! width && isParentWidthChanged ) { this.setState( { - maxWidth: parentWidth - 2 * buttonSpacing, + maxWidth: parentWidth, } ); } else if ( ! parentWidth && width && isWidthChanged ) { - this.setState( { maxWidth: width - unselectedSpacing } ); + this.setState( { maxWidth: width } ); } } diff --git a/packages/block-library/src/button/editor.native.scss b/packages/block-library/src/button/editor.native.scss index 95566d279d7293..5eaf2146befe09 100644 --- a/packages/block-library/src/button/editor.native.scss +++ b/packages/block-library/src/button/editor.native.scss @@ -25,11 +25,6 @@ padding: $block-spacing; max-width: 580px; min-width: 108px; - margin: $panel-padding 2 * $panel-padding; -} - -.buttonsSelected { - margin: $panel-padding + $border-width + $block-selected-child-margin + $block-selected-child-to-content; } .fallbackButton { diff --git a/packages/block-library/src/buttons/edit.native.js b/packages/block-library/src/buttons/edit.native.js index 75da5643c0e7c4..3a1751cfb28cba 100644 --- a/packages/block-library/src/buttons/edit.native.js +++ b/packages/block-library/src/buttons/edit.native.js @@ -31,7 +31,6 @@ function ButtonsEdit( { onDelete, onAddNextButton, shouldDelete, - isParentSelected, isSelectedButton, } ) { const { align } = attributes; @@ -56,11 +55,8 @@ function ButtonsEdit( { function onLayout( { nativeEvent } ) { const { width } = nativeEvent.layout; - const { marginLeft: nestedSpacing } = styles.nestedButtons; - const parentWidth = - width + ( isParentSelected ? 2 * nestedSpacing : 0 ); - - setMaxWidth( parentWidth ); + const margins = 2 * styles.parent.marginRight; + setMaxWidth( width - margins ); } return ( @@ -97,8 +93,6 @@ export default compose( getSelectedBlockClientId, } = select( 'core/block-editor' ); const selectedBlockClientId = getSelectedBlockClientId(); - const buttonsParents = getBlockParents( clientId, true ); - const parentId = buttonsParents[ 0 ] || ''; const selectedButtonParents = getBlockParents( selectedBlockClientId, true @@ -111,8 +105,6 @@ export default compose( // `Buttons` container along with the last inner button when // there is exactly one button. shouldDelete: getBlockCount( clientId ) === 1, - isParentSelected: - selectedBlockClientId && selectedBlockClientId === parentId, isSelectedButton: selectedButtonParentId === clientId, }; } ), diff --git a/packages/block-library/src/buttons/editor.native.scss b/packages/block-library/src/buttons/editor.native.scss index ce3275e553d03b..1036ffea35abf8 100644 --- a/packages/block-library/src/buttons/editor.native.scss +++ b/packages/block-library/src/buttons/editor.native.scss @@ -1,7 +1,3 @@ -.nestedButtons { - margin: $block-selected-child-margin + $block-selected-child-border-width + $block-selected-border-width + $block-selected-margin; -} - .is-aligned-left { justify-content: flex-start; } @@ -13,3 +9,13 @@ .is-aligned-right { justify-content: flex-end; } + +.parent { + margin: $block-edge-to-content; +} + +.appenderContainer { + flex: 1; + // 3 is a base margin in Button that is used in appender and we need to subtract it + margin: $block-edge-to-content - 3; +} From 355b50e666ae739cd9b9854338169add8ad124bc Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Fri, 3 Apr 2020 17:20:00 +0200 Subject: [PATCH 31/45] Correct buttons styles --- .../src/components/block-list/index.native.js | 1 + packages/block-library/src/button/edit.native.js | 3 ++- .../block-library/src/button/editor.native.scss | 1 + packages/block-library/src/buttons/edit.native.js | 13 +++++++++---- .../block-library/src/buttons/editor.native.scss | 6 +++++- 5 files changed, 18 insertions(+), 6 deletions(-) diff --git a/packages/block-editor/src/components/block-list/index.native.js b/packages/block-editor/src/components/block-list/index.native.js index be3ca73c89ec30..4ac7e209758e66 100644 --- a/packages/block-editor/src/components/block-list/index.native.js +++ b/packages/block-editor/src/components/block-list/index.native.js @@ -149,6 +149,7 @@ export class BlockList extends Component { keyboardShouldPersistTaps="always" scrollViewStyle={ { flex: isRootList ? 1 : 0, + overflow: isRootList ? 'hidden' : 'visible', } } data={ blockClientIds } keyExtractor={ identity } diff --git a/packages/block-library/src/button/edit.native.js b/packages/block-library/src/button/edit.native.js index 231ff3d9c02b00..1a4b683ccf4bb8 100644 --- a/packages/block-library/src/button/edit.native.js +++ b/packages/block-library/src/button/edit.native.js @@ -241,6 +241,7 @@ class ButtonEdit extends Component { onSetMaxWidth( width ) { const { maxWidth } = this.state; const { parentWidth } = this.props; + const { marginRight: spacing } = styles.button; const isParentWidthChanged = maxWidth !== parentWidth; const isWidthChanged = maxWidth !== width; @@ -250,7 +251,7 @@ class ButtonEdit extends Component { maxWidth: parentWidth, } ); } else if ( ! parentWidth && width && isWidthChanged ) { - this.setState( { maxWidth: width } ); + this.setState( { maxWidth: width - spacing } ); } } diff --git a/packages/block-library/src/button/editor.native.scss b/packages/block-library/src/button/editor.native.scss index 5eaf2146befe09..5be35ef0a0c34c 100644 --- a/packages/block-library/src/button/editor.native.scss +++ b/packages/block-library/src/button/editor.native.scss @@ -25,6 +25,7 @@ padding: $block-spacing; max-width: 580px; min-width: 108px; + margin: 2 * $panel-padding; } .fallbackButton { diff --git a/packages/block-library/src/buttons/edit.native.js b/packages/block-library/src/buttons/edit.native.js index 3a1751cfb28cba..f9e80d73f52de5 100644 --- a/packages/block-library/src/buttons/edit.native.js +++ b/packages/block-library/src/buttons/edit.native.js @@ -36,6 +36,7 @@ function ButtonsEdit( { const { align } = attributes; const [ maxWidth, setMaxWidth ] = useState( 0 ); const shouldRenderFooterAppender = isSelected || isSelectedButton; + const { marginLeft: spacing } = styles.spacing; function updateAlignment( nextAlign ) { setAttributes( { align: nextAlign } ); @@ -44,10 +45,12 @@ function ButtonsEdit( { function renderAppender() { if ( shouldRenderFooterAppender ) { return ( - + + + ); } return null; @@ -79,6 +82,8 @@ function ButtonsEdit( { customOnAdd={ onAddNextButton } parentWidth={ maxWidth } shouldRenderFooterAppender={ shouldRenderFooterAppender } + marginHorizontal={ spacing } + marginVertical={ spacing } /> diff --git a/packages/block-library/src/buttons/editor.native.scss b/packages/block-library/src/buttons/editor.native.scss index 1036ffea35abf8..b976e61c24cb3b 100644 --- a/packages/block-library/src/buttons/editor.native.scss +++ b/packages/block-library/src/buttons/editor.native.scss @@ -17,5 +17,9 @@ .appenderContainer { flex: 1; // 3 is a base margin in Button that is used in appender and we need to subtract it - margin: $block-edge-to-content - 3; + margin: $block-selected-margin; +} + +.spacing { + margin: 2 * $block-selected-margin; } From 8966c099d4e42b4da72301ee77876be1c324754e Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Fri, 3 Apr 2020 18:00:46 +0200 Subject: [PATCH 32/45] Correct border on Android --- .../src/components/block-list/index.native.js | 10 +++------- packages/block-library/src/button/edit.native.js | 8 +++++++- 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/packages/block-editor/src/components/block-list/index.native.js b/packages/block-editor/src/components/block-list/index.native.js index 4ac7e209758e66..a79b7104cc2d86 100644 --- a/packages/block-editor/src/components/block-list/index.native.js +++ b/packages/block-editor/src/components/block-list/index.native.js @@ -111,9 +111,9 @@ export class BlockList extends Component { style, shouldShowInsertionPointBefore, shouldShowInsertionPointAfter, - __experimentalMoverDirection, marginVertical = styles.defaultBlock.marginTop, marginHorizontal = styles.defaultBlock.marginLeft, + horizontalDirection, } = this.props; const { blockToolbar, blockBorder, headerToolbar } = styles; @@ -121,8 +121,6 @@ export class BlockList extends Component { const forceRefresh = shouldShowInsertionPointBefore || shouldShowInsertionPointAfter; - const horizontalDirection = - __experimentalMoverDirection === 'horizontal'; const containerStyle = { flex: isRootList ? 1 : 0, // We set negative margin in the parent to remove the edge spacing between parent block and child block in ineer blocks @@ -196,14 +194,11 @@ export class BlockList extends Component { shouldShowInsertionPointAfter, customOnDelete, customOnAdd, - __experimentalMoverDirection, marginVertical = styles.defaultBlock.marginTop, marginHorizontal = styles.defaultBlock.marginLeft, + horizontalDirection, } = this.props; - const horizontalDirection = - __experimentalMoverDirection === 'horizontal'; - return ( @@ -315,6 +310,7 @@ export default compose( [ selectedBlockClientId, isReadOnly, isRootList: rootClientId === undefined, + horizontalDirection, }; } ), withDispatch( ( dispatch ) => { diff --git a/packages/block-library/src/button/edit.native.js b/packages/block-library/src/button/edit.native.js index 1a4b683ccf4bb8..9f08a76389feed 100644 --- a/packages/block-library/src/button/edit.native.js +++ b/packages/block-library/src/button/edit.native.js @@ -381,7 +381,13 @@ class ButtonEdit extends Component { styles.outline, { borderRadius: outlineBorderRadius, - borderWidth: styles.button.borderWidth, + // Border Width has to be spread since width is thicker + // on Android when border radius is decreased to 0 + borderLeftWidth: styles.button.borderWidth, + borderRightWidth: styles.button.borderWidth, + borderTopWidth: styles.button.borderWidth, + borderBottomWidth: + styles.button.borderWidth, borderColor: backgroundColor, }, ] } From 923dd21d79caabc367a5906c819b28e02713b259 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Mon, 6 Apr 2020 13:54:54 +0200 Subject: [PATCH 33/45] Refactor on add/remove block func, move horizontal alignment --- .../src/components/block-list/block.native.js | 4 ++-- .../src/components/block-list/index.native.js | 21 ++++++++++--------- .../components/block-list/style.native.scss | 16 ++++++++++++++ .../block-mobile-toolbar/index.native.js | 15 ++++++------- .../button-block-appender/index.native.js | 4 ++-- .../inner-blocks/button-block-appender.js | 4 ++-- .../components/inner-blocks/index.native.js | 12 +++++------ .../block-library/src/buttons/edit.native.js | 8 +++---- .../src/buttons/editor.native.scss | 12 ----------- 9 files changed, 51 insertions(+), 45 deletions(-) diff --git a/packages/block-editor/src/components/block-list/block.native.js b/packages/block-editor/src/components/block-list/block.native.js index 45bbfe62db7491..211b46d0ebadad 100644 --- a/packages/block-editor/src/components/block-list/block.native.js +++ b/packages/block-editor/src/components/block-list/block.native.js @@ -94,7 +94,7 @@ class BlockListBlock extends Component { parentId, isDimmed, isTouchable, - customOnDelete, + onDeleteBlock, horizontalDirection, hasParent, isParentSelected, @@ -175,7 +175,7 @@ class BlockListBlock extends Component { { isSelected && ( ) } diff --git a/packages/block-editor/src/components/block-list/index.native.js b/packages/block-editor/src/components/block-list/index.native.js index a79b7104cc2d86..e522f4635c43e6 100644 --- a/packages/block-editor/src/components/block-list/index.native.js +++ b/packages/block-editor/src/components/block-list/index.native.js @@ -108,12 +108,12 @@ export class BlockList extends Component { header, isReadOnly, isRootList, - style, shouldShowInsertionPointBefore, shouldShowInsertionPointAfter, marginVertical = styles.defaultBlock.marginTop, marginHorizontal = styles.defaultBlock.marginLeft, horizontalDirection, + horizontalAlignment, } = this.props; const { blockToolbar, blockBorder, headerToolbar } = styles; @@ -145,10 +145,10 @@ export class BlockList extends Component { } inputAccessoryViewHeight={ headerToolbar.height } keyboardShouldPersistTaps="always" - scrollViewStyle={ { - flex: isRootList ? 1 : 0, - overflow: isRootList ? 'hidden' : 'visible', - } } + scrollViewStyle={ [ + { flex: isRootList ? 1 : 0 }, + ! isRootList && styles.overflowVisible, + ] } data={ blockClientIds } keyExtractor={ identity } extraData={ forceRefresh } @@ -164,7 +164,8 @@ export class BlockList extends Component { ListFooterComponent={ this.renderBlockListFooter } style={ [ horizontalDirection && styles.horizontal, - style, + horizontalAlignment && + styles[ `is-aligned-${ horizontalAlignment }` ], ] } /> @@ -192,8 +193,8 @@ export class BlockList extends Component { isReadOnly, shouldShowInsertionPointBefore, shouldShowInsertionPointAfter, - customOnDelete, - customOnAdd, + onDeleteBlock, + onAddBlock, marginVertical = styles.defaultBlock.marginTop, marginHorizontal = styles.defaultBlock.marginLeft, horizontalDirection, @@ -216,9 +217,9 @@ export class BlockList extends Component { this.onCaretVerticalPositionChange } parentWidth={ this.props.parentWidth } - customOnDelete={ customOnDelete } + onDeleteBlock={ onDeleteBlock } horizontalDirection={ horizontalDirection } - customOnAdd={ customOnAdd } + onAddBlock={ onAddBlock } /> { ! this.shouldShowInnerBlockAppender() && shouldShowInsertionPointAfter( clientId ) && ( 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 2e57015a3a8334..270f7b10ef51b2 100644 --- a/packages/block-editor/src/components/block-list/style.native.scss +++ b/packages/block-editor/src/components/block-list/style.native.scss @@ -75,3 +75,19 @@ flex-direction: row; flex-wrap: wrap; } + +.is-aligned-left { + justify-content: flex-start; +} + +.is-aligned-center { + justify-content: center; +} + +.is-aligned-right { + justify-content: flex-end; +} + +.overflowVisible { + overflow: visible; +} diff --git a/packages/block-editor/src/components/block-mobile-toolbar/index.native.js b/packages/block-editor/src/components/block-mobile-toolbar/index.native.js index bb96be1e69fab3..2049525b645896 100644 --- a/packages/block-editor/src/components/block-mobile-toolbar/index.native.js +++ b/packages/block-editor/src/components/block-mobile-toolbar/index.native.js @@ -23,7 +23,6 @@ const BlockMobileToolbar = ( { clientId, onDelete, order, - customOnDelete, horizontalDirection, } ) => ( @@ -42,7 +41,7 @@ const BlockMobileToolbar = ( { __( 'Remove block at row %s' ), order + 1 ) } - onClick={ customOnDelete || onDelete } + onClick={ onDelete } icon={ trash } extraProps={ { hint: __( 'Double tap to remove the block' ) } } /> @@ -57,13 +56,15 @@ export default compose( order: getBlockIndex( clientId ), }; } ), - withDispatch( ( dispatch, { clientId, rootClientId } ) => { + withDispatch( ( dispatch, { clientId, rootClientId, onDeleteBlock } ) => { const { removeBlock } = dispatch( 'core/block-editor' ); + const onDelete = () => { + Keyboard.dismiss(); + removeBlock( clientId, rootClientId ); + }; + return { - onDelete: () => { - Keyboard.dismiss(); - removeBlock( clientId, rootClientId ); - }, + onDelete: onDeleteBlock || onDelete, }; } ) )( BlockMobileToolbar ); diff --git a/packages/block-editor/src/components/button-block-appender/index.native.js b/packages/block-editor/src/components/button-block-appender/index.native.js index b36fabec9277e6..e340e8a670f929 100644 --- a/packages/block-editor/src/components/button-block-appender/index.native.js +++ b/packages/block-editor/src/components/button-block-appender/index.native.js @@ -21,7 +21,7 @@ function ButtonBlockAppender( { getStylesFromColorScheme, showSeparator, isFlex = true, - customOnAdd, + onAddBlock, } ) { const appenderStyle = { ...styles.appender, @@ -41,7 +41,7 @@ function ButtonBlockAppender( { rootClientId={ rootClientId } renderToggle={ ( { onToggle, disabled, isOpen } ) => (