Skip to content

Commit

Permalink
Combining the movers and menu inside a single cell.
Browse files Browse the repository at this point in the history
  • Loading branch information
@shaunandrews
shaunandrews committed Aug 13, 2020
1 parent 85d1832 commit dab350f
Show file tree
Hide file tree
Showing 2 changed files with 84 additions and 82 deletions.
84 changes: 33 additions & 51 deletions packages/block-editor/src/components/block-navigation/block.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,14 +51,15 @@ export default function BlockNavigationBlock( {
const siblingCount = rowCount - 1;
const hasSiblings = siblingCount > 0;
const hasRenderedMovers = showBlockMovers && hasSiblings;

// I'm not using the classnames that come from this,
// but maybe I should? -shaun
const hasVisibleMovers = isHovered || isFocused;

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 @@ -81,7 +82,6 @@ export default function BlockNavigationBlock( {
>
<TreeGridCell
className="block-editor-block-navigation-block__contents-cell"
colSpan={ hasRenderedMovers ? undefined : 2 }
ref={ cellRef }
>
{ ( { ref, tabIndex, onFocus } ) => (
Expand All @@ -101,53 +101,35 @@ export default function BlockNavigationBlock( {
) }
</TreeGridCell>

<>
<TreeGridCell
className={ classnames(
'block-editor-block-navigation-block__mover-cell',
{ 'is-visible': hasVisibleMovers },
'is-up-button'
<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 }
/>
) }
withoutGridItem
>
<TreeGridItem>
{ ( { ref, tabIndex, onFocus } ) => (
<BlockMoverUpButton
orientation="vertical"
clientIds={ [ clientId ] }
ref={ ref }
tabIndex={ tabIndex }
onFocus={ onFocus }
/>
) }
</TreeGridItem>
</TreeGridCell>
<TreeGridCell
className={ classnames(
'block-editor-block-navigation-block__mover-cell',
{ 'is-visible': hasVisibleMovers },
'is-down-button'
</TreeGridItem>

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

{ withExperimentalFeatures && (
<TreeGridCell
className={ blockNavigationBlockSettingsClassName }
>
<TreeGridItem>
{ ( { ref, tabIndex, onFocus } ) => (
<BlockSettingsDropdown
clientIds={ [ clientId ] }
Expand Down Expand Up @@ -177,8 +159,8 @@ export default function BlockNavigationBlock( {
) }
</BlockSettingsDropdown>
) }
</TreeGridCell>
) }
</TreeGridItem>
</TreeGridCell>
</BlockNavigationLeaf>
);
}
82 changes: 51 additions & 31 deletions packages/block-editor/src/components/block-navigation/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,72 +26,92 @@ block-editor-block-navigation__container
.block-editor-block-navigation-leaf {
position: relative;
border-radius: 2px;
border: 1px solid transparent;

&.is-selected,
&.is-selected .block-editor-block-navigation-block-contents,
&.is-selected .block-editor-block-navigation-block__mover-cell .components-button {
background: $gray-900;
color: $white;
// Hide block options by default. We use opacity so
// you can still use the keyboard to navigate.
.block-editor-block-navigation-block__options-cell {
opacity: 0;
}

&:hover {
border: 1px solid var(--wp-admin-theme-color);

// Descender indicators are darker when the row has
// focus or is hovered.
.block-editor-block-navigator-descender-line {
border-left-color: $gray-900;
}

// Show the block options when the row is hovered.
.block-editor-block-navigation-block__options-cell {
opacity: 1;
}
}

&:focus-within {
border: 1px solid $gray-200;

// Show the block options when any element in
// the row is focused.
.block-editor-block-navigation-block__options-cell {
opacity: 1;
}
}

&.is-selected,
&.is-selected:hover {
&,
.block-editor-block-navigation-block-contents,
.block-editor-block-navigation-block__options-cell .components-button {
background: $gray-900;
color: $white;
}

.block-editor-block-navigator-descender-line {
border-left-color: $white;
}

// Always show the options for the selected block.
.block-editor-block-navigation-block__options-cell {
opacity: 1;
}
}
}

// The main block button, containing the block icon
// and label. Pressing this selects the block.
.block-editor-block-navigation-block-contents {
width: 100%;
position: relative;

.block-editor-block-icon {
margin-right: $grid-unit-15;
}

&:hover {
background: $gray-100;
}

// This ensures that the focused item's outline doesn't
// appear below another element.
&:focus {
position: relative;
z-index: 1;
color: $gray-900;
}
}

// The block mover buttons, both up and down.
.block-editor-block-navigation-block__mover-cell {
// The block options, including the movers and more menu.
.block-editor-block-navigation-block__options-cell {
position: absolute;
top: 0;

// Needed to over power the z-index of the buttons
// while focused.
z-index: 2;

&.is-up-button {
right: $grid-unit-50;
}

&.is-down-button {
right: 0;
}
right: 0;
}

// This is used to indent nested blocks. They stack
// as nesting increases, creating a larger indentation.
.block-editor-block-navigator-descender-line {
position: relative;
flex-shrink: 0;
width: 6px;
width: 2px;
height: 2px;
border-left: 2px solid $gray-600;
margin-left: 10px;
border-left: 2px solid $gray-700;
margin: 0 6px 0;
}


// Hide block number and level description. (i.e. Block 2 of
// 3, Level 2). This is mostly useful for screen readers.
.block-editor-block-navigation-block-slot__description,
Expand Down

0 comments on commit dab350f

Please sign in to comment.