Skip to content

Commit

Permalink
[RNMobile] Reimplementation of block borders (#20769)
Browse files Browse the repository at this point in the history 
* first working version - w/o media text

* fix not visible borders

* TMP media-text

* move inline styles to styles file

* Working version with media text

* Remove unused styles

* fix toolbar styles

* use variable in floating toolbar style

* fix cover block

* fix base variables

* add basic horizontal support

* change approach and use negative margins

* fix appender in empty group

* Fix appender

* fix toolbar margin

* add comment and move borders spacing val to consts

* fix media-text and remove unused props form withSelect in block

* remove not needed overflow visible

* add style mock

* fix style code formatting
  • Loading branch information
@dratwas
dratwas authored Mar 25, 2020
1 parent 89d232b commit 70e9f8b
Show file tree
Hide file tree
Showing 13 changed files with 190 additions and 283 deletions.
9 changes: 2 additions & 7 deletions packages/base-styles/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,18 +83,13 @@ $block-bg-padding--h: $block-side-ui-width + $block-side-ui-clearance; // paddin
$dimmed-opacity: 1;

$block-edge-to-content: 16px;
$solid-border-space: 12px;
$dashed-border-space: 6px;
$block-selected-margin: 3px;
$block-selected-border-width: 1px;
$block-selected-padding: 0;
$block-selected-child-margin: 5px;
$block-selected-child-border-width: 1px;
$block-selected-child-padding: 0;
$block-selected-to-content: $block-edge-to-content - $block-selected-margin - $block-selected-border-width;
$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: 2 * $block-selected-to-content;
$block-selected-vertical-margin-child: $block-edge-to-content;


/**
Expand Down
141 changes: 32 additions & 109 deletions packages/block-editor/src/components/block-list/block.native.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ import { withDispatch, withSelect } from '@wordpress/data';
import { compose, withPreferredColorScheme } from '@wordpress/compose';
import {
getBlockType,
getUnregisteredTypeHandlerName,
__experimentalGetAccessibleBlockLabel as getAccessibleBlockLabel,
} from '@wordpress/blocks';
import { __ } from '@wordpress/i18n';
Expand Down Expand Up @@ -79,104 +78,6 @@ class BlockListBlock extends Component {
);
}

applySelectedBlockStyle() {
const { hasChildren, getStylesFromColorScheme } = this.props;

const fullSolidBorderStyle = {
// define style for full border
...styles.fullSolidBordered,
...getStylesFromColorScheme(
styles.solidBorderColor,
styles.solidBorderColorDark
),
};

if ( hasChildren ) {
// if block has children apply style for selected parent
return { ...styles.selectedParent, ...fullSolidBorderStyle };
}

/* selected block is one of below:
1. does not have children
2. is not on root list level
3. is an emty group block on root or nested level */
return { ...styles.selectedLeaf, ...fullSolidBorderStyle };
}

applyUnSelectedBlockStyle() {
const {
hasChildren,
isParentSelected,
isAncestorSelected,
hasParent,
getStylesFromColorScheme,
isLastBlock,
} = this.props;

// if block does not have parent apply neutral or full
// margins depending if block has children or not
if ( ! hasParent ) {
return hasChildren ? styles.neutral : styles.full;
}

if ( isParentSelected ) {
// parent of a block is selected
const dashedBorderStyle = {
// define style for dashed border
...styles.dashedBordered,
...getStylesFromColorScheme(
styles.dashedBorderColor,
styles.dashedBorderColorDark
),
};

// return apply childOfSelected or childOfSelectedLeaf
// margins depending if block has children or not
return {
...( hasChildren
? styles.childOfSelected
: styles.childOfSelectedLeaf ),
...dashedBorderStyle,
...( ! isLastBlock && styles.marginVerticalChild ),
};
}

if ( isAncestorSelected ) {
// ancestor of a block is selected
return {
...styles.descendantOfSelectedLeaf,
...( hasChildren && {
...styles.marginHorizontalNone,
...styles.marginVerticalNone,
} ),
...( ! isLastBlock && styles.marginVerticalDescendant ),
};
}

// if none of above condition are met return apply neutral or full
// margins depending if block has children or not
return hasChildren ? styles.neutral : styles.full;
}

applyBlockStyle() {
const { isSelected, isDimmed } = this.props;

return [
isSelected
? this.applySelectedBlockStyle()
: this.applyUnSelectedBlockStyle(),
isDimmed && styles.dimmed,
];
}

applyToolbarStyle() {
const { hasChildren, isUnregisteredBlock } = this.props;

if ( ! hasChildren || isUnregisteredBlock ) {
return styles.neutralToolbar;
}
}

render() {
const {
attributes,
Expand All @@ -188,10 +89,15 @@ class BlockListBlock extends Component {
order,
title,
parentId,
isDimmed,
isTouchable,
hasParent,
isParentSelected,
onSelect,
showFloatingToolbar,
getStylesFromColorScheme,
marginVertical,
marginHorizontal,
} = this.props;

const accessibilityLabel = getAccessibleBlockLabel(
Expand Down Expand Up @@ -225,8 +131,33 @@ class BlockListBlock extends Component {
<View
pointerEvents={ isTouchable ? 'auto' : 'box-only' }
accessibilityLabel={ accessibilityLabel }
style={ this.applyBlockStyle() }
style={ [
{ marginVertical, marginHorizontal, flex: 1 },
isDimmed && styles.dimmed,
] }
>
{ isSelected && (
<View
style={ [
styles.solidBorder,
getStylesFromColorScheme(
styles.solidBorderColor,
styles.solidBorderColorDark
),
] }
/>
) }
{ isParentSelected && (
<View
style={ [
styles.dashedBorder,
getStylesFromColorScheme(
styles.dashedBorderColor,
styles.dashedBorderColorDark
),
] }
/>
) }
{ isValid ? (
this.getBlockForType()
) : (
Expand All @@ -235,7 +166,7 @@ class BlockListBlock extends Component {
icon={ icon }
/>
) }
<View style={ this.applyToolbarStyle() }>
<View style={ styles.neutralToolbar }>
{ isSelected && (
<BlockMobileToolbar clientId={ clientId } />
) }
Expand All @@ -259,16 +190,13 @@ export default compose( [
getBlockRootClientId,
getLowestCommonAncestorWithSelectedBlock,
getBlockParents,
getBlockCount,
} = select( 'core/block-editor' );

const order = getBlockIndex( clientId, rootClientId );
const isSelected = isBlockSelected( clientId );
const isLastBlock = order === getBlockCount( rootClientId ) - 1;
const block = __unstableGetBlockWithoutInnerBlocks( clientId );
const { name, attributes, isValid } = block || {};

const isUnregisteredBlock = name === getUnregisteredTypeHandlerName();
const blockType = getBlockType( name || 'core/missing' );
const title = blockType.title;
const icon = blockType.icon;
Expand All @@ -292,8 +220,6 @@ export default compose( [
? parents[ commonAncestorIndex ]
: parents[ parents.length - 1 ];

const hasChildren =
! isUnregisteredBlock && !! getBlockCount( clientId );
const hasParent = !! parentId;
const isParentSelected =
selectedBlockClientId && selectedBlockClientId === parentId;
Expand Down Expand Up @@ -329,18 +255,15 @@ export default compose( [
title,
attributes,
blockType,
isLastBlock,
isSelected,
isValid,
parentId,
isParentSelected,
firstToSelectId,
hasChildren,
hasParent,
isAncestorSelected,
isTouchable,
isDimmed,
isUnregisteredBlock,
showFloatingToolbar,
};
} ),
Expand Down
97 changes: 22 additions & 75 deletions packages/block-editor/src/components/block-list/block.native.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,6 @@
flex: 1 1 auto;
}

.fullSolidBordered {
border-width: $block-selected-border-width;
border-radius: 4px;
border-style: solid;
}

.dashedBordered {
border-width: $block-selected-child-border-width;
border-radius: 2px;
border-style: dashed;
}

.solidBorderColor {
border-color: $blue-wordpress;
}
Expand All @@ -34,76 +22,13 @@
opacity: $dimmed-opacity;
}

.horizontalSpaceNone {
padding-left: 0;
padding-right: 0;
margin-left: 0;
margin-right: 0;
}

.marginHorizontalNone {
margin-left: 0;
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;
padding-top: 4px;
padding-bottom: 4px;
}

.neutral {
margin: 0;
border: 0;
padding: 0;
}

.full {
margin: $block-edge-to-content;
border: 0;
padding: 0;
}

.selectedLeaf {
margin: $block-selected-margin;
padding-left: $block-selected-to-content;
padding-right: $block-selected-to-content;
padding-top: $block-selected-to-content;
}

.selectedParent {
margin: $block-selected-margin;
padding: 0;
}

.childOfSelected {
margin: $block-selected-child-margin;
padding: 0;
}

.childOfSelectedLeaf {
margin: $block-selected-child-margin;
padding: $block-selected-child-to-content;
}

.descendantOfSelectedLeaf {
margin: $block-selected-child-to-content;
}

.aztec_container {
flex: 1;
}
Expand Down Expand Up @@ -137,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;
}
Loading

0 comments on commit 70e9f8b

Please sign in to comment.