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.

Sign up for GitHub

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

Experiment: Try stacked mover in block navigation #22314

Closed
wants to merge 3 commits into from
Closed

Experiment: Try stacked mover in block navigation #22314

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1fcb9db
Rename descender-lines to connector and move into the leaf component
talldan May 12, 2020
4df02d7
Try a grid layout to achieve stacked movers
talldan May 12, 2020
d3a0e65
Fix margins, remove unnecessary styles
talldan May 12, 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
11 changes: 3 additions & 8 deletions packages/block-editor/src/components/block-navigation/appender.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import { __, sprintf } from '@wordpress/i18n';
*/
import BlockNavigationLeaf from './leaf';
import ButtonBlockAppender from '../button-block-appender';
import DescenderLines from './descender-lines';

export default function BlockNavigationAppender( {
parentBlockClientId,
Expand All @@ -36,18 +35,14 @@ export default function BlockNavigationAppender( {
position={ position }
rowCount={ rowCount }
path={ path }
terminatedLevels={ terminatedLevels }
>
<TreeGridCell
className="block-editor-block-navigation-appender__cell"
colSpan="3"
>
{ ( props ) => (
<div className="block-editor-block-navigation-appender__container">
<DescenderLines
level={ level }
isLastRow={ position === rowCount }
terminatedLevels={ terminatedLevels }
/>
<>
<ButtonBlockAppender
rootClientId={ parentBlockClientId }
__experimentalSelectBlockOnInsert={ false }
Expand All @@ -60,7 +55,7 @@ export default function BlockNavigationAppender( {
>
{ appenderPositionDescription }
</div>
</div>
</>
) }
</TreeGridCell>
</BlockNavigationLeaf>
Expand Down
35 changes: 16 additions & 19 deletions packages/block-editor/src/components/block-navigation/block.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ import {
BlockMoverUpButton,
BlockMoverDownButton,
} from '../block-mover/button';
import DescenderLines from './descender-lines';
import BlockNavigationBlockContents from './block-contents';

export default function BlockNavigationBlock( {
Expand Down Expand Up @@ -59,28 +58,26 @@ export default function BlockNavigationBlock( {
position={ position }
rowCount={ rowCount }
path={ path }
terminatedLevels={ terminatedLevels }
>
<TreeGridCell
className="block-editor-block-navigation-block__contents-cell"
colSpan={ hasRenderedMovers ? undefined : 3 }
className={ classnames(
'block-editor-block-navigation-block__contents-cell',
{
'has-movers': hasRenderedMovers,
}
) }
>
{ ( props ) => (
<div className="block-editor-block-navigation-block__contents-container">
<DescenderLines
level={ level }
isLastRow={ position === rowCount }
terminatedLevels={ terminatedLevels }
/>
<BlockNavigationBlockContents
block={ block }
onClick={ onClick }
isSelected={ isSelected }
position={ position }
siblingCount={ siblingCount }
level={ level }
{ ...props }
/>
</div>
<BlockNavigationBlockContents
block={ block }
onClick={ onClick }
isSelected={ isSelected }
position={ position }
siblingCount={ siblingCount }
level={ level }
{ ...props }
/>
) }
</TreeGridCell>
{ hasRenderedMovers && (
Expand Down
43 changes: 43 additions & 0 deletions packages/block-editor/src/components/block-navigation/connectors.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
/**
* External dependencies
*/
import { times } from 'lodash';
import classnames from 'classnames';

/**
* Renders visual connector lines for the connection between a child and parent
* block.
*
* This component renders multiple vertical lines for each level starting from level 2.
*/
export default function Connectors( { level, isLastRow, terminatedLevels } ) {
return (
<td
className="block-editor-block-navigation-connectors"
aria-hidden="true"
>
{ times( level - 1, ( index ) => {
// The first 'level' that has a descender line is level 2.
// Add 2 to the zero-based index below to reflect that.
const currentLevel = index + 2;
const hasItem = currentLevel === level;
return (
<div
key={ index }
aria-hidden="true"
className={ classnames(
'block-editor-block-navigation-connectors__line',
{
'has-item': hasItem,
'is-last-row': isLastRow,
'is-terminated': terminatedLevels.includes(
currentLevel
),
}
) }
/>
);
} ) }
</td>
);
}
31 changes: 0 additions & 31 deletions packages/block-editor/src/components/block-navigation/descender-lines.js
View file
Open in desktop

This file was deleted.

7 changes: 7 additions & 0 deletions packages/block-editor/src/components/block-navigation/leaf.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import { useRef } from '@wordpress/element';
* Internal dependencies
*/
import useMovingAnimation from '../use-moving-animation';
import Connectors from './connectors';

const AnimatedTreeGridRow = animated( TreeGridRow );

Expand All @@ -25,6 +26,7 @@ export default function BlockNavigationLeaf( {
children,
className,
path,
terminatedLevels,
...props
} ) {
const wrapper = useRef( null );
Expand Down Expand Up @@ -52,6 +54,11 @@ export default function BlockNavigationLeaf( {
setSize={ rowCount }
{ ...props }
>
<Connectors
level={ level }
isLastRow={ position === rowCount }
terminatedLevels={ terminatedLevels }
/>
{ children }
</AnimatedTreeGridRow>
);
Expand Down
94 changes: 60 additions & 34 deletions packages/block-editor/src/components/block-navigation/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,13 +22,53 @@ $tree-item-height: 36px;
}

.block-editor-block-navigation-leaf {
display: grid;
height: $button-size;
padding: 4px 0;
width: 100%;
grid-template-columns: auto 1fr $button-size;
grid-template-rows: ($button-size / 2) ($button-size / 2);
grid-template-areas:
"connectors block-content up-mover"
"connectors block-content down-mover";

// Use position relative for row animation.
position: relative;

.block-editor-block-navigation-connectors {
grid-area: connectors;
}

.block-editor-block-navigation-block__contents-cell {
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 3;

&.has-movers {
grid-area: block-content;
}
}

.block-editor-block-navigation-block__mover-cell:first-child {
grid-area: up-mover;
}

.block-editor-block-navigation-block__mover-cell:last-child {
grid-area: down-mover;
}

.block-editor-block-navigation-appender__cell {
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 3;
}

.block-editor-block-navigation-block-content-wrapper {
display: flex;
align-items: center;
width: calc(100% - 0.8em);
width: 100%;
height: auto;
padding: 6px;
text-align: left;
Expand All @@ -41,10 +81,6 @@ $tree-item-height: 36px;
@include edit-post__fade-in-animation;
}

// .block-editor-block-navigation__list-item {
// position: relative;
// }

.block-editor-block-icon {
margin-right: 6px;
}
Expand All @@ -70,29 +106,15 @@ $tree-item-height: 36px;

.block-editor-block-mover-button {
width: $button-size;
height: $button-size;
height: $button-size / 2;
}

.block-editor-button-block-appender {
outline: none;
background: none;
padding: $grid-unit-10;
padding: 6px;
margin-left: 0.8em;
width: calc(100% - 0.8em);
}

& > li:last-child {
position: relative;
&::after {
position: absolute;
content: "";
background: $white;
top: ($tree-item-height + $tree-border-width ) / 2;
bottom: 0;
left: -$tree-border-width;
width: $tree-border-width;
}
width: 100%;
height: $button-size;
}
}

Expand All @@ -101,17 +123,14 @@ $tree-item-height: 36px;
display: none;
}

.block-editor-block-navigation-block__contents-cell,
.block-editor-block-navigation-appender__cell {
.block-editor-block-navigation-block__contents-container,
.block-editor-block-navigation-appender__container {
display: flex;
}
.block-editor-block-navigation-connectors {
display: flex;
flex-shrink: 1;

.block-editor-block-navigator-descender-line {
.block-editor-block-navigation-connectors__line {
position: relative;
flex-shrink: 0;
width: ( $button-size / 2 ) + 6px;
height: 100%;

&:first-child {
width: ( $button-size / 2 );
Expand All @@ -126,8 +145,8 @@ $tree-item-height: 36px;
content: "";
display: block;
position: absolute;
top: -1px;
bottom: -2px;
top: -5px;
bottom: -5px;
right: 0;
border-right: 2px solid $light-gray-900;
}
Expand All @@ -139,15 +158,22 @@ $tree-item-height: 36px;

// Make the last vertical line half-height.
&.has-item.is-last-row {
height: $grid-unit-20;
&::before {
// Subtract border width to line things up.
bottom: calc(50% - 2px);
}

&::after {
top: 50%;
}
}

// Draw a horizontal line using border-bottom.
&.has-item::after {
content: "";
display: block;
position: absolute;
top: $grid-unit-20;
top: 50%;
left: 100%;
width: 5px;
border-bottom: 2px solid $light-gray-900;
Expand Down