From 95c0e6f73ebeb85fa457d5c2c1554fed626dbf16 Mon Sep 17 00:00:00 2001 From: Jakub Binda Date: Thu, 30 Jan 2020 10:43:23 +0100 Subject: [PATCH 1/6] adjust vertical margins in group block --- packages/base-styles/_variables.scss | 2 ++ .../src/components/block-list/block.native.js | 17 +++++++++++++---- .../src/components/block-list/block.native.scss | 13 +++++++++++++ 3 files changed, 28 insertions(+), 4 deletions(-) diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss index ab3cad778bce9..d8ce7edf2607e 100644 --- a/packages/base-styles/_variables.scss +++ b/packages/base-styles/_variables.scss @@ -76,6 +76,8 @@ $block-selected-to-content: $block-edge-to-content - $block-selected-margin - $b $block-selected-child-to-content: $block-selected-to-content - $block-selected-child-margin - $block-selected-child-border-width; $block-custom-appender-to-content: $block-selected-margin - $block-selected-border-width; $block-media-container-to-content: $block-selected-child-margin + $block-selected-border-width; +$block-selected-vertical-margin-descendant: 3 * $block-selected-child-to-content; +$block-selected-vertical-margin-child: 3 * $block-selected-child-to-content - 6 * $block-selected-child-border-width; // Buttons & UI Widgets $radius-round-rectangle: 4px; 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 ee70886738af9..5419c075c408f 100644 --- a/packages/block-editor/src/components/block-list/block.native.js +++ b/packages/block-editor/src/components/block-list/block.native.js @@ -122,6 +122,7 @@ class BlockListBlock extends Component { isAncestorSelected, hasParent, getStylesFromColorScheme, + shouldApplyVerticalMarginStyle, } = this.props; // if block does not have parent apply neutral or full @@ -138,15 +139,18 @@ class BlockListBlock extends Component { // return apply childOfSelected or childOfSelectedLeaf // margins depending if block has children or not - return hasChildren ? - { ...styles.childOfSelected, ...dashedBorderStyle } : - { ...styles.childOfSelectedLeaf, ...dashedBorderStyle }; + return { + ...( hasChildren ? styles.childOfSelected : styles.childOfSelectedLeaf ), + ...dashedBorderStyle, + ...( shouldApplyVerticalMarginStyle && styles.marginVerticalChild ), + }; } if ( isAncestorSelected ) { // ancestor of a block is selected return { ...styles.descendantOfSelectedLeaf, - ...( hasChildren && styles.marginHorizontalNone ), + ...( hasChildren && { ...styles.marginHorizontalNone, ...styles.marginVerticalNone } ), + ...( shouldApplyVerticalMarginStyle && styles.marginVerticalDescendant ), }; } @@ -251,6 +255,7 @@ export default compose( [ const order = getBlockIndex( clientId, rootClientId ); const isSelected = isBlockSelected( clientId ); + const isFirstBlock = order === 0; const isLastBlock = order === getBlocks().length - 1; const block = __unstableGetBlockWithoutInnerBlocks( clientId ); const { name, attributes, isValid } = block || {}; @@ -275,6 +280,7 @@ export default compose( [ const commonAncestorIndex = parents.indexOf( commonAncestor ) - 1; const firstToSelectId = commonAncestor ? parents[ commonAncestorIndex ] : parents[ parents.length - 1 ]; + const parentCount = getBlockCount( parentId ); const hasChildren = ! isUnregisteredBlock && !! getBlockCount( clientId ); const hasParent = !! parentId; const isParentSelected = selectedBlockClientId && selectedBlockClientId === parentId; @@ -290,6 +296,8 @@ export default compose( [ const isInnerBlockHolder = name === getGroupingBlockName(); const isRootListInnerBlockHolder = ! isSelectedBlockNested && isInnerBlockHolder; + const shouldApplyVerticalMarginStyle = ! isLastBlock && ( ( isFirstBlock && parentCount === 2 ) || parentCount > 2 ); + return { icon, name: name || 'core/missing', @@ -311,6 +319,7 @@ export default compose( [ isDimmed, isRootListInnerBlockHolder, isUnregisteredBlock, + shouldApplyVerticalMarginStyle, }; } ), withDispatch( ( dispatch, ownProps, { select } ) => { 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 3867b58310597..f22e071255353 100644 --- a/packages/block-editor/src/components/block-list/block.native.scss +++ b/packages/block-editor/src/components/block-list/block.native.scss @@ -54,6 +54,19 @@ margin-right: 0; } +.marginVerticalDescendant { + margin-bottom: $block-selected-vertical-margin-descendant; +} + +.marginVerticalChild { + margin-bottom: $block-selected-vertical-margin-child; +} + +.marginVerticalNone { + margin-top: 0; + margin-bottom: 0; +} + .blockTitle { background-color: $gray; padding-left: 8px; From 74fa22acb359b17e0155e0693a490218488abb97 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Thu, 30 Jan 2020 15:08:37 +0100 Subject: [PATCH 2/6] Unblock Group for production --- packages/block-library/src/index.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/index.native.js b/packages/block-library/src/index.native.js index ec835f02e802d..9fce44c3287aa 100644 --- a/packages/block-library/src/index.native.js +++ b/packages/block-library/src/index.native.js @@ -148,7 +148,7 @@ export const registerCoreBlocks = () => { mediaText, preformatted, gallery, - devOnly( group ), + group, spacer, shortcode, ].forEach( registerBlock ); From 5c39b20883f372886137be4a5e89c57867d4e005 Mon Sep 17 00:00:00 2001 From: Jakub Binda Date: Fri, 31 Jan 2020 14:03:22 +0100 Subject: [PATCH 3/6] adjust margin logic --- packages/base-styles/_variables.scss | 4 ++-- .../src/components/block-list/block.native.js | 8 ++------ 2 files changed, 4 insertions(+), 8 deletions(-) diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss index d8ce7edf2607e..2f6776824c45b 100644 --- a/packages/base-styles/_variables.scss +++ b/packages/base-styles/_variables.scss @@ -76,8 +76,8 @@ $block-selected-to-content: $block-edge-to-content - $block-selected-margin - $b $block-selected-child-to-content: $block-selected-to-content - $block-selected-child-margin - $block-selected-child-border-width; $block-custom-appender-to-content: $block-selected-margin - $block-selected-border-width; $block-media-container-to-content: $block-selected-child-margin + $block-selected-border-width; -$block-selected-vertical-margin-descendant: 3 * $block-selected-child-to-content; -$block-selected-vertical-margin-child: 3 * $block-selected-child-to-content - 6 * $block-selected-child-border-width; +$block-selected-vertical-margin-descendant: 2 * $block-selected-to-content; +$block-selected-vertical-margin-child: $block-edge-to-content; // Buttons & UI Widgets $radius-round-rectangle: 4px; 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 5419c075c408f..6dedb5b8548af 100644 --- a/packages/block-editor/src/components/block-list/block.native.js +++ b/packages/block-editor/src/components/block-list/block.native.js @@ -237,7 +237,6 @@ export default compose( [ withSelect( ( select, { clientId, rootClientId } ) => { const { getBlockIndex, - getBlocks, isBlockSelected, __unstableGetBlockWithoutInnerBlocks, getBlockHierarchyRootClientId, @@ -255,8 +254,7 @@ export default compose( [ const order = getBlockIndex( clientId, rootClientId ); const isSelected = isBlockSelected( clientId ); - const isFirstBlock = order === 0; - const isLastBlock = order === getBlocks().length - 1; + const isLastBlock = order === getBlockCount( rootClientId ) - 1; const block = __unstableGetBlockWithoutInnerBlocks( clientId ); const { name, attributes, isValid } = block || {}; @@ -280,7 +278,6 @@ export default compose( [ const commonAncestorIndex = parents.indexOf( commonAncestor ) - 1; const firstToSelectId = commonAncestor ? parents[ commonAncestorIndex ] : parents[ parents.length - 1 ]; - const parentCount = getBlockCount( parentId ); const hasChildren = ! isUnregisteredBlock && !! getBlockCount( clientId ); const hasParent = !! parentId; const isParentSelected = selectedBlockClientId && selectedBlockClientId === parentId; @@ -296,7 +293,7 @@ export default compose( [ const isInnerBlockHolder = name === getGroupingBlockName(); const isRootListInnerBlockHolder = ! isSelectedBlockNested && isInnerBlockHolder; - const shouldApplyVerticalMarginStyle = ! isLastBlock && ( ( isFirstBlock && parentCount === 2 ) || parentCount > 2 ); + const shouldApplyVerticalMarginStyle = ! isLastBlock; return { icon, @@ -305,7 +302,6 @@ export default compose( [ title, attributes, blockType, - isLastBlock, isSelected, isValid, showFloatingToolbar, From 2654bd9886f11676af6a97cef8cd8d7fc638966e Mon Sep 17 00:00:00 2001 From: Jakub Binda Date: Fri, 31 Jan 2020 15:21:02 +0100 Subject: [PATCH 4/6] adjust passing prop --- .../src/components/block-list/block.native.js | 10 ++++------ 1 file changed, 4 insertions(+), 6 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 b509f65ed3509..00d1dbb06aec4 100644 --- a/packages/block-editor/src/components/block-list/block.native.js +++ b/packages/block-editor/src/components/block-list/block.native.js @@ -120,7 +120,7 @@ class BlockListBlock extends Component { isAncestorSelected, hasParent, getStylesFromColorScheme, - shouldApplyVerticalMarginStyle, + isLastBlock, } = this.props; // if block does not have parent apply neutral or full @@ -142,7 +142,7 @@ class BlockListBlock extends Component { return { ...( hasChildren ? styles.childOfSelected : styles.childOfSelectedLeaf ), ...dashedBorderStyle, - ...( shouldApplyVerticalMarginStyle && styles.marginVerticalChild ), + ...( ! isLastBlock && styles.marginVerticalChild ), }; } @@ -151,7 +151,7 @@ class BlockListBlock extends Component { return { ...styles.descendantOfSelectedLeaf, ...( hasChildren && { ...styles.marginHorizontalNone, ...styles.marginVerticalNone } ), - ...( shouldApplyVerticalMarginStyle && styles.marginVerticalDescendant ), + ...( ! isLastBlock && styles.marginVerticalDescendant ), }; } @@ -300,8 +300,6 @@ export default compose( [ const isInnerBlockHolder = name === getGroupingBlockName(); const isRootListInnerBlockHolder = ! isSelectedBlockNested && isInnerBlockHolder; - const shouldApplyVerticalMarginStyle = ! isLastBlock; - return { icon, name: name || 'core/missing', @@ -309,6 +307,7 @@ export default compose( [ title, attributes, blockType, + isLastBlock, isSelected, isValid, showFloatingToolbar, @@ -322,7 +321,6 @@ export default compose( [ isDimmed, isRootListInnerBlockHolder, isUnregisteredBlock, - shouldApplyVerticalMarginStyle, }; } ), withDispatch( ( dispatch, ownProps, { select } ) => { From d9ee3ab9c317baec3069853b2e07c84623265fbc Mon Sep 17 00:00:00 2001 From: Jakub Binda Date: Mon, 3 Feb 2020 12:47:55 +0100 Subject: [PATCH 5/6] revert open Group to production --- packages/block-library/src/index.native.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/index.native.js b/packages/block-library/src/index.native.js index 3a8c91213178e..4b45e3fc11de7 100644 --- a/packages/block-library/src/index.native.js +++ b/packages/block-library/src/index.native.js @@ -148,7 +148,7 @@ export const registerCoreBlocks = () => { mediaText, preformatted, gallery, - group, + devOnly( group ), spacer, shortcode, ].forEach( registerBlock ); From 1888e2579650d9e68e8a6cb4fd34d5f415b8c918 Mon Sep 17 00:00:00 2001 From: Jakub Binda Date: Mon, 3 Feb 2020 13:15:59 +0100 Subject: [PATCH 6/6] fix lint issue --- .../src/components/block-list/block.native.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 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 fd54c6c4141dc..6a165a59aee5d 100644 --- a/packages/block-editor/src/components/block-list/block.native.js +++ b/packages/block-editor/src/components/block-list/block.native.js @@ -148,7 +148,9 @@ class BlockListBlock extends Component { // return apply childOfSelected or childOfSelectedLeaf // margins depending if block has children or not return { - ...( hasChildren ? styles.childOfSelected : styles.childOfSelectedLeaf ), + ...( hasChildren + ? styles.childOfSelected + : styles.childOfSelectedLeaf ), ...dashedBorderStyle, ...( ! isLastBlock && styles.marginVerticalChild ), }; @@ -158,7 +160,10 @@ class BlockListBlock extends Component { // ancestor of a block is selected return { ...styles.descendantOfSelectedLeaf, - ...( hasChildren && { ...styles.marginHorizontalNone, ...styles.marginVerticalNone } ), + ...( hasChildren && { + ...styles.marginHorizontalNone, + ...styles.marginVerticalNone, + } ), ...( ! isLastBlock && styles.marginVerticalDescendant ), }; }