Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[RNMobile] Full width columns #25621

Merged
merged 78 commits into from
Dec 18, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
78 commits
Select commit Hold shift + click to select a range
a307294
Initial work on full width columns
lukewalczak Sep 8, 2020
9b8531a
Refactor columns sum to exclude smaller columns
lukewalczak Sep 8, 2020
d248738
Adjust ReadableContentView when parent is full width
lukewalczak Sep 9, 2020
279df0b
Refactor margins
lukewalczak Sep 9, 2020
b367f2c
Correct columns appender
lukewalczak Sep 9, 2020
44bd646
Merge branch 'master' into rnmobile/full-width-columns
lukewalczak Sep 9, 2020
4612047
Merge branch 'master' into rnmobile/full-width-columns
lukewalczak Sep 9, 2020
5af726c
Update onWidthChange
lukewalczak Sep 10, 2020
73c3350
Unify updateColumns function with web
lukewalczak Sep 10, 2020
d38f575
Synchronize values with web
lukewalczak Sep 10, 2020
ce4e3b4
Code refactor
lukewalczak Sep 11, 2020
2029ac2
Small cleanup
lukewalczak Sep 11, 2020
bbdfce4
Styles and margins refactor
lukewalczak Sep 14, 2020
b5815af
Add maxWidth, extend contentContainerStyle
lukewalczak Sep 14, 2020
74e9bae
Merge branch 'master' into rnmobile/full-width-columns
lukewalczak Sep 14, 2020
5beddb4
Pass blockWidth, simplify calculations
lukewalczak Sep 15, 2020
f2344fb
Refactor after first comments bunch
lukewalczak Sep 16, 2020
fb1b2a7
Refactor after next bunch of comments
lukewalczak Sep 17, 2020
091387c
Adjust mobile toolbar paddings
lukewalczak Sep 18, 2020
96679ef
Refactor columns, add case for displaying percentage one column
lukewalczak Sep 21, 2020
f3d7380
Try account margin for columns on smaller screen size
lukewalczak Sep 22, 2020
fa7548d
Correct maxWidth
lukewalczak Sep 23, 2020
451dc09
Add comments, refactor variables
lukewalczak Sep 24, 2020
73b2181
Adjust margin for containers
lukewalczak Sep 25, 2020
63c4ace
Calculate margins for containers
lukewalczak Sep 28, 2020
09ac0ee
Adjust Group block
lukewalczak Sep 28, 2020
535782d
Main refactor
lukewalczak Sep 29, 2020
f44842f
Remove useless codelines
lukewalczak Sep 29, 2020
0f88a23
Adjusting columns after feedback
lukewalczak Sep 30, 2020
86cec26
Adjustin toolbar and appender
lukewalczak Oct 1, 2020
2f0d5d9
Styles refactor
lukewalczak Oct 2, 2020
baf7ce3
Code refactor
lukewalczak Oct 5, 2020
be10897
Correct condition in getColumnsInRow
lukewalczak Oct 5, 2020
1152986
Adjusting to feedback
lukewalczak Oct 6, 2020
4766ab4
Add condition to memo
lukewalczak Oct 8, 2020
016d553
Save changes on sliding complete
lukewalczak Oct 8, 2020
831ef0a
Main refactor
lukewalczak Oct 9, 2020
50de9e2
Merge branch 'master' into rnmobile/full-width-columns
lukewalczak Oct 9, 2020
4014a63
Use variables in styles
lukewalczak Oct 9, 2020
cfd7225
Merge branch 'master' into rnmobile/full-width-columns
lukewalczak Nov 17, 2020
1a1fd6a
First part of adjusting to different units
lukewalczak Nov 18, 2020
4d9a97f
Patch previous commit
lukewalczak Nov 18, 2020
a48972c
Use regular onChange for non % units
lukewalczak Nov 18, 2020
763d287
Implement anchor changes
lukewalczak Nov 19, 2020
59ca6d0
Correct anchor usage
lukewalczak Nov 19, 2020
0cd0976
Merge branch 'master' into rnmobile/full-width-columns
lukewalczak Nov 20, 2020
662d7c9
Add function to check whether unit is a % to utils
lukewalczak Nov 23, 2020
c973277
Merge branch 'master' into rnmobile/full-width-columns
lukewalczak Nov 23, 2020
14d8c3d
Merge branch 'master' into rnmobile/full-width-columns
lukewalczak Nov 24, 2020
50d9272
First part of refactoring
lukewalczak Nov 24, 2020
419e3a6
Next part of refactoring
lukewalczak Nov 24, 2020
420b783
Add style for only one full width column
lukewalczak Nov 25, 2020
ef130fa
Next part of refactor
lukewalczak Nov 30, 2020
f11513f
Solve issue with split view
lukewalczak Nov 30, 2020
4258d97
Merge branch 'master' into rnmobile/full-width-columns
lukewalczak Dec 3, 2020
8579441
Setting a width refactor and remove passing parent width
lukewalczak Dec 3, 2020
4daf974
Allow rich text blocks to get full parent width
lukewalczak Dec 4, 2020
0716178
Merge branch 'master' into rnmobile/full-width-columns
lukewalczak Dec 10, 2020
49c7f85
Revert rich text blocks related changes
lukewalczak Dec 10, 2020
c18e22c
Correct tests
lukewalczak Dec 10, 2020
327e63a
Correct horizontal margin
lukewalczak Dec 10, 2020
d3f3d28
Small adjustments
lukewalczak Dec 11, 2020
f9437f1
Cleaning
lukewalczak Dec 11, 2020
98fce95
Increase range input width
lukewalczak Dec 14, 2020
a63b3e6
Resolving comments after review
lukewalczak Dec 15, 2020
2cd9c0d
Another adjustment
lukewalczak Dec 15, 2020
f225d84
Appender adjustment
lukewalczak Dec 16, 2020
42c5b25
Merge branch 'master' into rnmobile/full-width-columns
lukewalczak Dec 16, 2020
d3d5350
Merge branch 'master' into rnmobile/full-width-columns
lukewalczak Dec 16, 2020
b0c7b38
Add comment, correct condition, use breakpoint
lukewalczak Dec 16, 2020
ec1dbec
Wrap measurements in Math.floor
lukewalczak Dec 16, 2020
ec8b572
Gather all utils function to alignmentHelpers to make code cleaner
lukewalczak Dec 17, 2020
129068b
Merge branch 'master' into rnmobile/full-width-columns
lukewalczak Dec 17, 2020
e89b541
Correct mobile toolbar
lukewalczak Dec 17, 2020
a36cae8
Fix contentContainerStyle for default columns
lukewalczak Dec 17, 2020
5d5b823
Fix appender in group
lukewalczak Dec 18, 2020
59d354e
Update changelog
lukewalczak Dec 18, 2020
1b2b9de
Merge branch 'master' into rnmobile/full-width-columns
lukewalczak Dec 18, 2020
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -1,19 +1,15 @@
/**
* External dependencies
*/
import { View } from 'react-native';
import { View, Dimensions } from 'react-native';

/**
* WordPress dependencies
*/
import { Component } from '@wordpress/element';
import { withSelect } from '@wordpress/data';
import { compose } from '@wordpress/compose';
import {
ReadableContentView,
WIDE_ALIGNMENTS,
ALIGNMENT_BREAKPOINTS,
} from '@wordpress/components';
import { ReadableContentView, alignmentHelpers } from '@wordpress/components';

/**
* Internal dependencies
Expand All @@ -26,6 +22,13 @@ const stretchStyle = {
flex: 1,
};

const {
isFullWidth,
isWideWidth,
isWider,
isContainerRelated,
} = alignmentHelpers;

export class BlockListItem extends Component {
constructor() {
super( ...arguments );
Expand All @@ -51,39 +54,69 @@ export class BlockListItem extends Component {
blockAlignment,
marginHorizontal,
parentBlockAlignment,
hasParents,
blockName,
parentBlockName,
parentWidth,
} = this.props;
const { blockWidth } = this.state;

if ( blockAlignment === WIDE_ALIGNMENTS.alignments.full ) {
return 0;
if ( isFullWidth( blockAlignment ) ) {
if ( ! hasParents ) {
return 0;
}
return marginHorizontal;
}

if ( blockAlignment === WIDE_ALIGNMENTS.alignments.wide ) {
if ( isWideWidth( blockAlignment ) ) {
return marginHorizontal;
}

const screenWidth = Math.floor( Dimensions.get( 'window' ).width );

if (
parentBlockAlignment === WIDE_ALIGNMENTS.alignments.full &&
blockWidth <= ALIGNMENT_BREAKPOINTS.medium
isFullWidth( parentBlockAlignment ) &&
! isWider( blockWidth, 'medium' )
) {
if (
isContainerRelated( blockName ) ||
isWider( screenWidth, 'mobile' )
) {
return marginHorizontal;
}
return marginHorizontal * 2;
}

if (
isContainerRelated( parentBlockName ) &&
! isContainerRelated( blockName )
) {
const isScreenWidthEqual = parentWidth === screenWidth;
if ( isScreenWidthEqual || isWider( screenWidth, 'mobile' ) ) {
return marginHorizontal * 2;
}
}

return marginHorizontal;
}

getContentStyles( readableContentViewStyle ) {
const { blockAlignment, hasParents } = this.props;
const isFullWidth = blockAlignment === WIDE_ALIGNMENTS.alignments.full;
const {
blockAlignment,
blockName,
hasParents,
parentBlockName,
} = this.props;

return [
readableContentViewStyle,
isFullWidth &&
isFullWidth( blockAlignment ) &&
! hasParents && {
width: styles.fullAlignment.width,
},
isFullWidth &&
hasParents && {
! blockAlignment &&
hasParents &&
! isContainerRelated( parentBlockName ) &&
isContainerRelated( blockName ) && {
paddingHorizontal: styles.fullAlignmentPadding.paddingLeft,
},
];
Expand All @@ -98,15 +131,23 @@ export class BlockListItem extends Component {
shouldShowInsertionPointAfter,
contentResizeMode,
shouldShowInnerBlockAppender,
parentWidth,
marginHorizontal,
blockName,
...restProps
} = this.props;
const readableContentViewStyle =
contentResizeMode === 'stretch' && stretchStyle;

return (
<ReadableContentView
align={ blockAlignment }
style={ readableContentViewStyle }
style={ [
readableContentViewStyle,
isContainerRelated( blockName ) &&
parentWidth && {
maxWidth: parentWidth + 2 * marginHorizontal,
},
] }
>
<View
style={ this.getContentStyles( readableContentViewStyle ) }
Expand All @@ -120,6 +161,7 @@ export class BlockListItem extends Component {
key={ clientId }
showTitle={ false }
clientId={ clientId }
parentWidth={ parentWidth }
{ ...restProps }
marginHorizontal={ this.getMarginHorizontal() }
/>
Expand Down Expand Up @@ -169,7 +211,7 @@ export default compose( [
const isReadOnly = getSettings().readOnly;

const block = __unstableGetBlockWithoutInnerBlocks( clientId );
const { attributes } = block || {};
const { attributes, name } = block || {};
const { align } = attributes || {};
const parents = getBlockParents( clientId, true );
const hasParents = !! parents.length;
Expand All @@ -178,6 +220,7 @@ export default compose( [
: {};
const { align: parentBlockAlignment } =
parentBlock?.attributes || {};
const { name: parentBlockName } = parentBlock || {};

return {
shouldShowInsertionPointBefore,
Expand All @@ -186,6 +229,8 @@ export default compose( [
hasParents,
blockAlignment: align,
parentBlockAlignment,
blockName: name,
parentBlockName,
};
}
),
Expand Down
33 changes: 24 additions & 9 deletions packages/block-editor/src/components/block-list/block.native.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { Component, createRef } from '@wordpress/element';
import {
GlobalStylesContext,
getMergedGlobalStyles,
WIDE_ALIGNMENTS,
alignmentHelpers,
} from '@wordpress/components';
import { withDispatch, withSelect } from '@wordpress/data';
import { compose, withPreferredColorScheme } from '@wordpress/compose';
Expand All @@ -28,6 +28,8 @@ import BlockEdit from '../block-edit';
import BlockInvalidWarning from './block-invalid-warning';
import BlockMobileToolbar from '../block-mobile-toolbar';

const { isFullWidth, isWider, isContainerRelated } = alignmentHelpers;

function BlockForType( {
attributes,
clientId,
Expand Down Expand Up @@ -122,9 +124,10 @@ class BlockListBlock extends Component {
getBlockWidth( { nativeEvent } ) {
const { layout } = nativeEvent;
const { blockWidth } = this.state;
const layoutWidth = Math.floor( layout.width );

if ( blockWidth !== layout.width ) {
this.setState( { blockWidth: layout.width } );
if ( blockWidth !== layoutWidth ) {
this.setState( { blockWidth: layoutWidth } );
}
}

Expand Down Expand Up @@ -166,12 +169,12 @@ class BlockListBlock extends Component {
marginVertical,
marginHorizontal,
isInnerBlockSelected,
name,
} = this.props;

if ( ! attributes || ! blockType ) {
return null;
}

const { blockWidth } = this.state;
const { align } = attributes;
const accessibilityLabel = getAccessibleBlockLabel(
Expand All @@ -181,8 +184,10 @@ class BlockListBlock extends Component {
);

const accessible = ! ( isSelected || isInnerBlockSelected );
const isFullWidth = align === WIDE_ALIGNMENTS.alignments.full;
const screenWidth = Math.floor( Dimensions.get( 'window' ).width );
const isScreenWidthEqual = blockWidth === screenWidth;
const isScreenWidthWider = blockWidth < screenWidth;
const isFullWidthToolbar = isFullWidth( align ) || isScreenWidthEqual;

return (
<TouchableWithoutFeedback
Expand All @@ -207,9 +212,13 @@ class BlockListBlock extends Component {
pointerEvents="box-none"
style={ [
styles.solidBorder,
isFullWidth &&
blockWidth < screenWidth &&
isFullWidth( align ) &&
isScreenWidthWider &&
styles.borderFullWidth,
isFullWidth( align ) &&
isContainerRelated( name ) &&
isScreenWidthWider &&
styles.containerBorderFullWidth,
getStylesFromColorScheme(
styles.solidBorderColor,
styles.solidBorderColorDark
Expand Down Expand Up @@ -237,7 +246,13 @@ class BlockListBlock extends Component {
/>
) }
<View
style={ styles.neutralToolbar }
style={ [
styles.neutralToolbar,
! isFullWidthToolbar &&
isContainerRelated( name ) &&
isWider( screenWidth, 'mobile' ) &&
styles.containerToolbar,
] }
ref={ this.anchorNodeRef }
>
{ isSelected && (
Expand All @@ -249,7 +264,7 @@ class BlockListBlock extends Component {
}
blockWidth={ blockWidth }
anchorNodeRef={ this.anchorNodeRef.current }
isFullWidth={ isFullWidth }
isFullWidth={ isFullWidthToolbar }
/>
) }
</View>
Expand Down
10 changes: 10 additions & 0 deletions packages/block-editor/src/components/block-list/block.native.scss
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,11 @@
right: 0;
}

.containerBorderFullWidth {
left: -$solid-border-space / 2;
right: -$solid-border-space / 2;
}

.dimmed {
opacity: $dimmed-opacity;
}
Expand Down Expand Up @@ -51,6 +56,11 @@
margin-right: -$block-edge-to-content;
}

.containerToolbar {
width: 100%;
align-self: center;
}

.solidBorder {
position: absolute;
top: -$solid-border-space;
Expand Down
18 changes: 15 additions & 3 deletions packages/block-editor/src/components/block-list/index.native.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import {
KeyboardAwareFlatList,
ReadableContentView,
WIDE_ALIGNMENTS,
alignmentHelpers,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';

Expand Down Expand Up @@ -47,6 +48,7 @@ const getStyles = (
stylesMemo[ styleName ] = computedStyles;
return computedStyles;
};
const { isWider } = alignmentHelpers;

export class BlockList extends Component {
constructor() {
Expand Down Expand Up @@ -169,6 +171,8 @@ export class BlockList extends Component {
isFloatingToolbarVisible,
isStackedHorizontally,
horizontalAlignment,
contentResizeMode,
blockWidth,
} = this.props;
const { parentScrollRef } = extraProps;

Expand All @@ -185,6 +189,10 @@ export class BlockList extends Component {
marginVertical: isRootList ? 0 : -marginVertical,
marginHorizontal: isRootList ? 0 : -marginHorizontal,
};

const isContentStretch = contentResizeMode === 'stretch';
const isMultiBlocks = blockClientIds.length > 1;

return (
<View
style={ containerStyle }
Expand Down Expand Up @@ -216,9 +224,13 @@ export class BlockList extends Component {
horizontal={ horizontal }
extraData={ this.getExtraData() }
scrollEnabled={ isRootList }
contentContainerStyle={
horizontal && styles.horizontalContentContainer
}
contentContainerStyle={ [
horizontal && styles.horizontalContentContainer,
isWider( blockWidth, 'medium' ) &&
( isContentStretch && isMultiBlocks
? styles.horizontalContentContainerStretch
: styles.horizontalContentContainerCenter ),
] }
style={ getStyles(
isRootList,
isStackedHorizontally,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,18 @@
flex-wrap: wrap;
justify-content: flex-start;
align-items: stretch;
max-width: $content-width;
overflow: visible;
width: 100%;
}

.horizontalContentContainerStretch {
justify-content: space-evenly;
}

.horizontalContentContainerCenter {
justify-content: center;
}

.switch {
flex-direction: row;
justify-content: flex-start;
Expand Down
Loading