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

Jump to bottom

List View: Design updates #24419

Closed
wants to merge 8 commits into from
Closed

List View: Design updates #24419

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
d218fd2
Move descender component into the button
shaunandrews Aug 6, 2020
3d23b84
Refactoring the CSS
shaunandrews Aug 6, 2020
294af4f
Remove the label at the top, and forcing nested blocks to always show.
shaunandrews Aug 12, 2020
d631ff9
Forcing movers to show, and adjusting the class on the mover cell.
shaunandrews Aug 12, 2020
d3f320c
Forcing TreeGrid to use divs instead of table elements.
shaunandrews Aug 12, 2020
b26d118
More rewrites for the CSS.
shaunandrews Aug 12, 2020
bc1bc87
Combining the movers and menu inside a single cell.
shaunandrews Aug 13, 2020
d03445a
Bringing back the drag-and-drop styles lost in the rebase.
shaunandrews Sep 10, 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
2 changes: 2 additions & 0 deletions packages/block-editor/src/components/block-navigation/block-select-button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import { __ } from '@wordpress/i18n';
* Internal dependencies
*/
import BlockIcon from '../block-icon';
import DescenderLines from './descender-lines';
import { getBlockPositionDescription } from './utils';

function BlockNavigationBlockSelectButton(
Expand Down Expand Up @@ -66,6 +67,7 @@ function BlockNavigationBlockSelectButton(
onDragEnd={ onDragEnd }
draggable={ draggable }
>
<DescenderLines level={ level } />
<BlockIcon icon={ blockType.icon } showColors />
{ blockDisplayName }
{ isSelected && (
Expand Down
89 changes: 36 additions & 53 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 @@ -25,7 +25,6 @@ import {
BlockMoverUpButton,
BlockMoverDownButton,
} from '../block-mover/button';
import DescenderLines from './descender-lines';
import BlockNavigationBlockContents from './block-contents';
import BlockSettingsDropdown from '../block-settings-menu/block-settings-dropdown';
import { useBlockNavigationContext } from './context';
Expand All @@ -39,7 +38,6 @@ export default function BlockNavigationBlock( {
rowCount,
siblingBlockCount,
showBlockMovers,
terminatedLevels,
path,
} ) {
const cellRef = useRef( null );
Expand All @@ -66,18 +64,15 @@ export default function BlockNavigationBlock( {

const hasSiblings = siblingBlockCount > 0;
const hasRenderedMovers = showBlockMovers && hasSiblings;

// I'm not using the classnames that come from this,
// but maybe I should? -shaun
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It would be good to keep the is-visible class and attach the hover/focus styles to it, otherwise we're depending on focus-within and that won't work on IE 😞

const hasVisibleMovers = isHovered || isFocused;
const moverCellClassName = classnames(
'block-editor-block-navigation-block__mover-cell',
{ 'is-visible': hasVisibleMovers }
);

const {
__experimentalFeatures: withExperimentalFeatures,
} = useBlockNavigationContext();
const blockNavigationBlockSettingsClassName = classnames(
'block-editor-block-navigation-block__menu-cell',
{ 'is-visible': hasVisibleMovers }
);

useEffect( () => {
if ( withExperimentalFeatures && isSelected ) {
cellRef.current.focus();
Expand All @@ -103,16 +98,10 @@ export default function BlockNavigationBlock( {
>
<TreeGridCell
className="block-editor-block-navigation-block__contents-cell"
colSpan={ hasRenderedMovers ? undefined : 2 }
ref={ cellRef }
>
{ ( { ref, tabIndex, onFocus } ) => (
<div className="block-editor-block-navigation-block__contents-container">
<DescenderLines
level={ level }
isLastRow={ position === rowCount }
terminatedLevels={ terminatedLevels }
/>
<BlockNavigationBlockContents
block={ block }
onClick={ () => onClick( block.clientId ) }
Expand All @@ -127,42 +116,36 @@ export default function BlockNavigationBlock( {
</div>
) }
</TreeGridCell>
{ hasRenderedMovers && (
<>
<TreeGridCell
className={ moverCellClassName }
withoutGridItem
>
<TreeGridItem>
{ ( { ref, tabIndex, onFocus } ) => (
<BlockMoverUpButton
orientation="vertical"
clientIds={ [ clientId ] }
ref={ ref }
tabIndex={ tabIndex }
onFocus={ onFocus }
/>
) }
</TreeGridItem>
<TreeGridItem>
{ ( { ref, tabIndex, onFocus } ) => (
<BlockMoverDownButton
orientation="vertical"
clientIds={ [ clientId ] }
ref={ ref }
tabIndex={ tabIndex }
onFocus={ onFocus }
/>
) }
</TreeGridItem>
</TreeGridCell>
</>
) }

{ withExperimentalFeatures && (
<TreeGridCell
className={ blockNavigationBlockSettingsClassName }
>
<TreeGridCell
className="block-editor-block-navigation-block__options-cell"
withoutGridItem
>
<TreeGridItem>
{ ( { ref, tabIndex, onFocus } ) => (
<BlockMoverUpButton
orientation="vertical"
clientIds={ [ clientId ] }
ref={ ref }
tabIndex={ tabIndex }
onFocus={ onFocus }
/>
) }
</TreeGridItem>

<TreeGridItem>
{ ( { ref, tabIndex, onFocus } ) => (
<BlockMoverDownButton
orientation="vertical"
clientIds={ [ clientId ] }
ref={ ref }
tabIndex={ tabIndex }
onFocus={ onFocus }
/>
) }
</TreeGridItem>

<TreeGridItem>
{ ( { ref, tabIndex, onFocus } ) => (
<BlockSettingsDropdown
clientIds={ [ clientId ] }
Expand Down Expand Up @@ -192,8 +175,8 @@ export default function BlockNavigationBlock( {
) }
</BlockSettingsDropdown>
) }
</TreeGridCell>
) }
</TreeGridItem>
</TreeGridCell>
</BlockNavigationLeaf>
);
}
8 changes: 1 addition & 7 deletions packages/block-editor/src/components/block-navigation/descender-lines.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,7 @@ import classnames from 'classnames';

const lineClassName = 'block-editor-block-navigator-descender-line';

export default function DescenderLines( {
level,
isLastRow,
terminatedLevels,
} ) {
export default function DescenderLines( { level } ) {
return 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.
Expand All @@ -22,8 +18,6 @@ export default function DescenderLines( {
aria-hidden="true"
className={ classnames( lineClassName, {
'has-item': hasItem,
'is-last-row': isLastRow,
'is-terminated': terminatedLevels.includes( currentLevel ),
} ) }
/>
);
Expand Down
5 changes: 1 addition & 4 deletions packages/block-editor/src/components/block-navigation/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import { noop } from 'lodash';
*/
import { withSelect, withDispatch } from '@wordpress/data';
import { compose } from '@wordpress/compose';
import { __ } from '@wordpress/i18n';

/**
* Internal dependencies
Expand All @@ -33,9 +32,6 @@ function BlockNavigation( {

return (
<div className="block-editor-block-navigation__container">
<p className="block-editor-block-navigation__label">
{ __( 'List view' ) }
</p>
{ hasHierarchy && (
<BlockNavigationTree
blocks={ [ rootBlock ] }
Expand All @@ -51,6 +47,7 @@ function BlockNavigation( {
selectedBlockClientId={ selectedBlockClientId }
selectBlock={ selectBlock }
__experimentalFeatures={ __experimentalFeatures }
showNestedBlocks
/>
) }
</div>
Expand Down
Loading