Skip to content

Commit

Permalink
[RNMobile] Styling fixes after navigation merge (#19164)
Browse files Browse the repository at this point in the history
* Styling fixes to navigation feature

* Add netural styles for toolbar

* Fix condition for not registered component

* Display 'Unsupported' in breadcrumbs for missing components

* Refactor after CR

* Remove leftovers
  • Loading branch information
lukewalczak authored Jan 7, 2020
1 parent 0cb146d commit e864bbf
Show file tree
Hide file tree
Showing 5 changed files with 35 additions and 8 deletions.
2 changes: 1 addition & 1 deletion packages/base-styles/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ $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-edge-to-content - $block-selected-margin - $block-selected-child-margin + $block-selected-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;

// Buttons & UI Widgets
Expand Down
20 changes: 17 additions & 3 deletions packages/block-editor/src/components/block-list/block.native.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import { Component } from '@wordpress/element';
import { ToolbarButton, Toolbar } from '@wordpress/components';
import { withDispatch, withSelect } from '@wordpress/data';
import { compose, withPreferredColorScheme } from '@wordpress/compose';
import { getBlockType } from '@wordpress/blocks';
import { getBlockType, getUnregisteredTypeHandlerName } from '@wordpress/blocks';
import { __, sprintf } from '@wordpress/i18n';

/**
Expand Down Expand Up @@ -188,6 +188,17 @@ class BlockListBlock extends Component {
];
}

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

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

render() {
const {
clientId,
Expand Down Expand Up @@ -228,7 +239,7 @@ class BlockListBlock extends Component {
style={ this.applyBlockStyle() }
>
{ isValid ? this.getBlockForType() : <BlockInvalidWarning blockTitle={ title } icon={ icon } /> }
{ isSelected && <BlockMobileToolbar clientId={ clientId } /> }
<View style={ this.applyToolbarStyle() } >{ isSelected && <BlockMobileToolbar clientId={ clientId } /> }</View>
</View>
</TouchableWithoutFeedback>
</>
Expand Down Expand Up @@ -261,6 +272,8 @@ export default compose( [
const isLastBlock = order === getBlocks().length - 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 @@ -281,7 +294,7 @@ export default compose( [
const commonAncestorIndex = parents.indexOf( commonAncestor ) - 1;
const firstToSelectId = commonAncestor ? parents[ commonAncestorIndex ] : parents[ parents.length - 1 ];

const hasChildren = !! getBlockCount( clientId );
const hasChildren = ! isUnregisteredBlock && !! getBlockCount( clientId );
const hasParent = !! parentId;
const isParentSelected = selectedBlockClientId && selectedBlockClientId === parentId;
const isAncestorSelected = selectedBlockClientId && parents.includes( selectedBlockClientId );
Expand Down Expand Up @@ -317,6 +330,7 @@ export default compose( [
isTouchable,
isDimmed,
isRootListInnerBlockHolder,
isUnregisteredBlock,
};
} ),
withDispatch( ( dispatch, ownProps, { select } ) => {
Expand Down
13 changes: 11 additions & 2 deletions packages/block-editor/src/components/block-list/block.native.scss
Original file line number Diff line number Diff line change
Expand Up @@ -75,12 +75,16 @@

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

.selectedRootLeaf {
margin: 0;
padding: $block-edge-to-content;
padding-left: $block-edge-to-content;
padding-right: $block-edge-to-content;
padding-top: $block-edge-to-content;
}

.selectedParent {
Expand Down Expand Up @@ -130,3 +134,8 @@
background-color: #e9eff3;
opacity: 0.4;
}

.neutralToolbar {
margin-left: -$block-edge-to-content;
margin-right: -$block-edge-to-content;
}
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,11 @@ import styles from './breadcrumb.scss';
const BlockBreadcrumb = ( { clientId, blockIcon, rootClientId, rootBlockIcon } ) => {
return (
<View style={ styles.breadcrumbContainer }>
<TouchableOpacity style={ styles.button } onPress={ () => {/* Open BottomSheet with markup */} }>
<TouchableOpacity
style={ styles.button }
onPress={ () => {/* Open BottomSheet with markup */} }
disabled={ true } /* Disable temporarily since onPress function is empty */
>
{ rootClientId && rootBlockIcon && (
[ <Icon key="parent-icon" size={ 20 } icon={ rootBlockIcon.src } fill={ styles.icon.color } />,
<View key="subdirectory-icon" style={ styles.arrow }><SubdirectorSVG fill={ styles.arrow.color } /></View>,
Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/missing/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export { metadata, name };

export const settings = {
name,
title: __( 'Unrecognized Block' ),
title: __( 'Unsupported' ),
description: __( 'Your site doesn’t include support for this block.' ),
supports: {
className: false,
Expand Down

0 comments on commit e864bbf

Please sign in to comment.