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

Navigation Block: Placeholder empty state #26947

Merged
merged 6 commits into from
Jan 18, 2021
Merged

Navigation Block: Placeholder empty state #26947

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
2eabc88
Test placeholder in empty state
mkaz Nov 12, 2020
be7e65a
Update empty placeholder state with preview
mkaz Dec 8, 2020
e6d8785
Simplify
jasmussen Dec 14, 2020
1c03cae
Make it more like social links.
jasmussen Jan 13, 2021
6d6e72a
Improve things.
jasmussen Jan 14, 2021
32db56f
Height fixes.
jasmussen Jan 14, 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: 2 additions & 0 deletions packages/block-library/src/navigation/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import { __ } from '@wordpress/i18n';
import useBlockNavigator from './use-block-navigator';
import * as navIcons from './icons';
import NavigationPlaceholder from './placeholder';
import PlaceholderPreview from './placeholder-preview';

function Navigation( {
selectedBlockHasDescendants,
Expand Down Expand Up @@ -81,6 +82,7 @@ function Navigation( {
// Block on the experimental menus screen does not
// inherit templateLock={ 'all' }.
templateLock: false,
placeholder: <PlaceholderPreview />,
}
);

Expand Down
46 changes: 27 additions & 19 deletions packages/block-library/src/navigation/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,3 @@
$navigation-height: 60px;
$navigation-item-height: 46px;

// Undo default editor styles.
.editor-styles-wrapper .wp-block-navigation ul,
.editor-styles-wrapper .wp-block-navigation ol {
Expand Down Expand Up @@ -30,7 +27,7 @@ $navigation-item-height: 46px;

// Ensure that an empty block has space around the appender.
.wp-block-navigation__container {
min-height: $navigation-item-height;
min-height: $grid-unit-05 + $grid-unit-05 + $button-size;
}

// Ensure sub-menus stay open and visible when a nested block is selected.
Expand Down Expand Up @@ -161,6 +158,8 @@ $color-control-label-height: 20px;
}

.wp-block-navigation-placeholder {
min-height: $grid-unit-05 + $grid-unit-05 + $button-size;

.components-spinner {
margin-top: -4px;
margin-left: 4px;
Expand Down Expand Up @@ -220,15 +219,16 @@ $color-control-label-height: 20px;

// Unselected state.
.wp-block-navigation-placeholder__preview {
min-height: $grid-unit-10 + $grid-unit-10 + $button-size;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
flex-direction: row;
align-items: center;

// Hide when selected.
.is-selected & {
display: none;
}
transition: all 0.1s ease-in-out;
@include reduce-motion("transition");

// Style skeleton elements.
// Needs specificity.
Expand All @@ -244,17 +244,23 @@ $color-control-label-height: 20px;
svg {
opacity: 0.3;
}

.is-selected & {
opacity: 0.2;
}
}

// Selected state.
.wp-block-navigation-placeholder__controls {
padding: $grid-unit-10;
padding: $grid-unit-05 $grid-unit-10;
border-radius: $radius-block-ui;
background-color: $white;
box-shadow: inset 0 0 0 $border-width $gray-900;
flex-direction: row;
align-items: center;
display: none;
position: relative;
z-index: 1;

// Show when selected.
.is-selected & {
Expand All @@ -279,16 +285,18 @@ $color-control-label-height: 20px;
}
}

// Both, when block is vertical.
.wp-block-navigation-placeholder__preview,
.wp-block-navigation-placeholder__controls {
.is-vertical & {
flex-direction: column;
align-items: flex-start;
min-height: $icon-size + ($grid-unit-20 + $grid-unit-15 + $grid-unit-15) * 3;
}
// When block is vertical.
.is-vertical .wp-block-navigation-placeholder,
.is-vertical .wp-block-navigation-placeholder__preview,
.is-vertical .wp-block-navigation-placeholder__controls {
min-height: $icon-size + ($grid-unit-20 + $grid-unit-05 + $grid-unit-15 + $grid-unit-15) * 3;
}

.is-vertical .wp-block-navigation-placeholder__preview,
.is-vertical .wp-block-navigation-placeholder__controls {
flex-direction: column;
align-items: flex-start;
}

.wp-block-navigation-placeholder__actions {
display: flex;
Expand Down
17 changes: 17 additions & 0 deletions packages/block-library/src/navigation/placeholder-preview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
/**
* WordPress dependencies
*/
import { Icon, search } from '@wordpress/icons';

const PlaceholderPreview = () => {
return (
<div className="wp-block-navigation-placeholder__preview">
<span className="wp-block-navigation-link"></span>
<span className="wp-block-navigation-link"></span>
<span className="wp-block-navigation-link"></span>
<Icon icon={ search } />
</div>
);
};

export default PlaceholderPreview;
10 changes: 3 additions & 7 deletions packages/block-library/src/navigation/placeholder.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,12 +22,13 @@ import {
useEffect,
} from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { Icon, chevronDown, search } from '@wordpress/icons';
import { chevronDown } from '@wordpress/icons';

/**
* Internal dependencies
*/
import createDataTree from './create-data-tree';
import PlaceholderPreview from './placeholder-preview';

/**
* A recursive function that maps menu item nodes to blocks.
Expand Down Expand Up @@ -235,12 +236,7 @@ function NavigationPlaceholder( { onCreate }, ref ) {

return (
<div className="wp-block-navigation-placeholder">
<div className="wp-block-navigation-placeholder__preview">
<span className="wp-block-navigation-link"></span>
<span className="wp-block-navigation-link"></span>
<span className="wp-block-navigation-link"></span>
<Icon icon={ search } />
</div>
<PlaceholderPreview />

<div className="wp-block-navigation-placeholder__controls">
{ isLoading && (
Expand Down