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

List View: Restructure the BlockNavigation component #31892

Merged
merged 2 commits into from
Jul 8, 2021
Merged

List View: Restructure the BlockNavigation component #31892

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
29c63c2
Use BlockNavigationTree as main component
Copons May 17, 2021
eda47f1
Update README title
talldan Jul 8, 2021
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: 1 addition & 1 deletion docs/getting-started/faq.md
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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