Skip to content

Commit

Permalink
Use BlockNavigationTree as main component
Browse files Browse the repository at this point in the history 
Replace the deprecated BlockNavigationTree with BlockNavigation

Remove the deprecated BlockNavigationTree component

Try renaming into ListView

More renaming!
  • Loading branch information
@Copons @talldan
Copons authored and talldan committed Jul 8, 2021
1 parent 6160b5d commit 29c63c2
Show file tree
Hide file tree
Showing 37 changed files with 473 additions and 496 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 29c63c2

Please sign in to comment.