Skip to content

Commit

Permalink
Restructure the BlockNavigation component, rename to ListView (#31892)
Browse files Browse the repository at this point in the history 
* Use BlockNavigationTree as main component

Replace the deprecated BlockNavigationTree with BlockNavigation

Remove the deprecated BlockNavigationTree component

Try renaming into ListView

More renaming!

* Update README title

Co-authored-by: Daniel Richards <[email protected]>
  • Loading branch information
@Copons @talldan
Copons and talldan authored Jul 8, 2021
1 parent e512bd3 commit 63857ac
Show file tree
Hide file tree
Showing 37 changed files with 474 additions and 497 deletions.
2 changes: 1 addition & 1 deletion docs/getting-started/faq.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ This is the canonical list of keyboard shortcuts:
<td><kbd>⇧</kbd><kbd>⌘</kbd><kbd>,</kbd></td>
</tr>
<tr>
<td>Open the block navigation menu.</td>
<td>Open the list view menu.</td>
<td><kbd>Shift</kbd>+<kbd>Alt</kbd>+<kbd>O</kbd></td>
<td><kbd>⌃</kbd><kbd>⌥</kbd><kbd>O</kbd></td>
</tr>
Expand Down
1 change: 0 additions & 1 deletion packages/base-styles/_z-index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,6 @@ $z-layers: (
// ...Except for popovers immediately beneath wp-admin menu on large breakpoints
".components-popover.block-editor-inserter__popover": 99999,
".components-popover.table-of-contents__popover": 99998,
".components-popover.block-editor-block-navigation__popover": 99998,
".components-popover.customize-widgets-more-menu__content": 99998,
".components-popover.edit-post-more-menu__content": 99998,
".components-popover.edit-site-more-menu__content": 99998,
Expand Down
4 changes: 2 additions & 2 deletions packages/block-editor/src/components/block-navigation/dropdown.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { listView } from '@wordpress/icons';
/**
* Internal dependencies
*/
import BlockNavigationTree from './tree';
import ListView from '../list-view';
import { store as blockEditorStore } from '../../store';

function BlockNavigationDropdownToggle( {
Expand Down Expand Up @@ -65,7 +65,7 @@ function BlockNavigationDropdown(
{ __( 'List view' ) }
</p>

<BlockNavigationTree
<ListView
showNestedBlocks
showOnlyCurrentHierarchy
__experimentalFeatures={ __experimentalFeatures }
Expand Down
329 changes: 4 additions & 325 deletions packages/block-editor/src/components/block-navigation/style.scss
View file
Original file line number Diff line number Diff line change
@@ -1,332 +1,11 @@
.block-editor-block-navigation__container {
min-width: 280px;
}

.block-editor-block-navigation__label {
margin: 0 0 $grid-unit-15;
color: $gray-700;
text-transform: uppercase;
font-size: 11px;
font-weight: 500;
}

.block-editor-block-navigation__container {
min-width: 280px;
}

.block-editor-block-navigation-tree {
width: 100%;
border-collapse: collapse;
padding: 0;
margin: 0;

// Move upwards when in modal.
.components-modal__content & {
margin: (-$grid-unit-15) (-$grid-unit-15 / 2) 0;
width: calc(100% + #{ $grid-unit-15 });
}
}

.block-editor-block-navigation-leaf {
// Use position relative for row animation.
position: relative;

&.is-selected .block-editor-block-navigation-block-contents {
background: var(--wp-admin-theme-color);
color: $white;
}
&.is-selected .block-editor-block-navigation-block-contents:focus {
box-shadow:
inset 0 0 0 1px $white,
0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
}

&.is-branch-selected.is-selected .block-editor-block-navigation-block-contents {
border-radius: 2px 2px 0 0;
}

&[aria-expanded="false"] {
&.is-branch-selected.is-selected .block-editor-block-navigation-block-contents {
border-radius: 2px;
}
}
&.is-branch-selected:not(.is-selected) .block-editor-block-navigation-block-contents {
// Lighten a CSS variable without introducing a new SASS variable
background:
linear-gradient(transparentize($white, 0.1), transparentize($white, 0.1)),
linear-gradient(var(--wp-admin-theme-color), var(--wp-admin-theme-color));
border-radius: 0;
}
&.is-branch-selected.is-last-of-selected-branch .block-editor-block-navigation-block-contents {
border-radius: 0 0 2px 2px;
}

&.is-dragging {
display: none;
}

.block-editor-block-navigation-block-contents {
display: flex;
align-items: center;
width: 100%;
height: auto;
padding: ($grid-unit-15 / 2) $grid-unit-15 ($grid-unit-15 / 2) 0;
text-align: left;
color: $gray-900;
border-radius: 2px;
position: relative;
white-space: nowrap;

&:hover,
&:focus {
box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
}
&:focus {
z-index: 1;
}

&.is-dropping-before::before {
content: "";
position: absolute;
pointer-events: none;
transition: border-color 0.1s linear, border-style 0.1s linear, box-shadow 0.1s linear;
top: -2px;
right: 0;
left: 0;
border-top: 4px solid var(--wp-admin-theme-color);
}

&.is-dropping-after::before {
content: "";
position: absolute;
pointer-events: none;
transition: border-color 0.1s linear, border-style 0.1s linear, box-shadow 0.1s linear;
bottom: -2px;
right: 0;
left: 0;
border-bottom: 4px solid var(--wp-admin-theme-color);
}

&.is-dropping-to-inner-blocks::before {
content: "";
position: absolute;
pointer-events: none;
transition: border-color 0.1s linear, border-style 0.1s linear, box-shadow 0.1s linear;
bottom: -2px;
right: 0;
left: $icon-size;
border-bottom: 4px solid var(--wp-admin-theme-color);
}

.components-modal__content & {
padding-left: 0;
padding-right: 0;
}
}

&.is-visible .block-editor-block-navigation-block-contents {
opacity: 1;
@include edit-post__fade-in-animation;
}

.block-editor-block-icon {
align-self: flex-start;
margin-right: $grid-unit-10;
width: $icon-size;
}

.block-editor-block-navigation-block__menu-cell,
.block-editor-block-navigation-block__mover-cell,
.block-editor-block-navigation-block__contents-cell {
padding-top: 0;
padding-bottom: 0;
}

.block-editor-block-navigation-block__menu-cell,
.block-editor-block-navigation-block__mover-cell {
line-height: 0;
width: $button-size;
opacity: 0;
vertical-align: top;
@include reduce-motion("transition");

// Show on hover, visible, and show above to keep the hit area size.
&:hover,
&.is-visible {
position: relative;
z-index: 1;
opacity: 1;
@include edit-post__fade-in-animation;
}

&,
.components-button.has-icon {
width: 24px;
min-width: 24px;
padding: 0;
}
}

.block-editor-block-navigation-block__menu-cell {
padding-top: $grid-unit-10;
}

.block-editor-block-navigation-block__mover-cell-alignment-wrapper {
display: flex;
height: 100%;
flex-direction: column;
align-items: center;
}

// Keep the tap target large but the focus target small.
.block-editor-block-mover-button {
position: relative;
width: $button-size;
height: $button-size-small;

// Position the icon.
svg {
position: relative;
height: $button-size-small;
}

&.is-up-button {
margin-top: -$grid-unit-15 / 2;
align-items: flex-end;
svg {
bottom: -$grid-unit-05;
}
}

&.is-down-button {
margin-bottom: -$grid-unit-15 / 2;
align-items: flex-start;
svg {
top: -$grid-unit-05;
}
}

// Don't show the focus inherited by the Button component.
&:focus:enabled {
box-shadow: none;
outline: none;
}

// Focus style.
&:focus {
box-shadow: none;
outline: none;
}

&:focus::before {
@include block-toolbar-button-style__focus();
}

// Focus and toggle pseudo elements.
&::before {
content: "";
position: absolute;
display: block;
border-radius: $radius-block-ui;
height: 16px;
min-width: 100%;

// Position the focus rectangle.
left: 0;
right: 0;

// Animate in.
animation: components-button__appear-animation 0.1s ease;
animation-fill-mode: forwards;
@include reduce-motion("animation");
}
}

.block-editor-inserter__toggle {
background: $gray-900;
color: $white;
height: $grid-unit-30;
margin: 6px 6px 6px 1px;
min-width: $grid-unit-30;

&:active {
color: $white;
}
}

.block-editor-block-navigation-block-select-button__anchor {
background: rgba($black, 0.1);
border-radius: $radius-block-ui;
display: inline-block;
padding: 2px 6px;
margin: 0 $grid-unit-10;
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
}

&.is-selected .block-editor-block-navigation-block-select-button__anchor {
background: rgba($black, 0.3);
}
}

.block-editor-block-navigation-block-slot__description,
.block-editor-block-navigation-block-select-button__description,
.block-editor-block-navigation-appender__description {
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;
}
}

// Chevron container metrics.
.block-editor-block-navigation__expander {
height: $icon-size;
margin-left: $grid-unit-05;
width: $icon-size;
}

// First level of indentation is aria-level 2, max indent is 8.
// Indent is a full icon size, plus 4px which optically aligns child icons to the text label above.
$block-navigation-max-indent: 8;
.block-editor-block-navigation-leaf[aria-level] .block-editor-block-navigation__expander {
margin-left: ( $icon-size ) * $block-navigation-max-indent + 4 * ( $block-navigation-max-indent - 1 );
}

.block-editor-block-navigation-leaf:not([aria-level="1"]) {
.block-editor-block-navigation__expander {
margin-right: 4px;
}
}

@for $i from 0 to $block-navigation-max-indent {
.block-editor-block-navigation-leaf[aria-level="#{ $i + 1 }"] .block-editor-block-navigation__expander {
@if $i - 1 >= 0 {
margin-left: ( $icon-size * $i ) + 4 * ($i - 1);
}
@else {
margin-left: ( $icon-size * $i );
}
}
}

.block-editor-block-navigation-leaf .block-editor-block-navigation__expander {
visibility: hidden;
}

// Point downwards when open.
.block-editor-block-navigation-leaf[aria-expanded="true"] .block-editor-block-navigation__expander svg {
visibility: visible;
transition: transform 0.2s ease;
transform: rotate(90deg);
@include reduce-motion("transition");
}

// Point rightwards when closed
.block-editor-block-navigation-leaf[aria-expanded="false"] .block-editor-block-navigation__expander svg {
visibility: visible;
transform: rotate(0deg);
transition: transform 0.2s ease;
@include reduce-motion("transition");
}
6 changes: 3 additions & 3 deletions packages/block-editor/src/components/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,6 @@ export { default as BlockColorsStyleSelector } from './color-style-selector';
export { default as BlockEdit, useBlockEditContext } from './block-edit';
export { default as BlockIcon } from './block-icon';
export { default as BlockNavigationDropdown } from './block-navigation/dropdown';
export { BlockNavigationBlockFill as __experimentalBlockNavigationBlockFill } from './block-navigation/block-slot';
export { default as __experimentalBlockNavigationEditor } from './block-navigation/editor';
export { default as __experimentalBlockNavigationTree } from './block-navigation/tree';
export { default as __experimentalBlockVariationPicker } from './block-variation-picker';
export { default as __experimentalBlockPatternSetup } from './block-pattern-setup';
export { default as __experimentalBlockVariationTransforms } from './block-variation-transforms';
Expand Down Expand Up @@ -66,6 +63,9 @@ export { default as __experimentalLinkControlSearchInput } from './link-control/
export { default as __experimentalLinkControlSearchResults } from './link-control/search-results';
export { default as __experimentalLinkControlSearchItem } from './link-control/search-item';
export { default as LineHeightControl } from './line-height-control';
export { default as __experimentalListView } from './list-view';
export { ListViewBlockFill as __experimentalListViewBlockFill } from './list-view/block-slot';
export { default as __experimentalListViewEditor } from './list-view/editor';
export { default as MediaReplaceFlow } from './media-replace-flow';
export { default as MediaPlaceholder } from './media-placeholder';
export { default as MediaUpload } from './media-upload';
Expand Down
Loading

0 comments on commit 63857ac

Please sign in to comment.