Skip to content

Commit

Permalink
Navigation: Implement new design for sub-menus (#19681)
Browse files Browse the repository at this point in the history 
* navigation-link: add has-child css class

* colors: move navigation scss var to base-styles

* squash

* navigation: organize

* navigation: propagate style css Class

* navigation: implement dark styles

* Minor wip style update to be closer to design

* navigation: remove duplicated has-child code

* navigation-link: remove unused prop

* add wip version of children arrow indicators
Need to define what design keep: CSS arrow vs SVG icon

* navigation: remove styles - propagate custom colors.

* navigation: fix has bgc css class name

* navigation: apply light/dark styles when no colors

* navigation-link: propagate Navigation block attrs

* navigation-link: add border-color inline style

* navigation-link: apply custom border-color

* navigation-link: set colors CSS classes

* use-colors: add attr for color value

* navigation: store and populate inline colors
It stores the color values for both text and background color in the Navigation block, and propagete these values to the Navigation Link block, in order to be able to apply colors using inline style.

* navigation: improve handling colors/styles.

* remove old submenu frontend styles

* navigation: fix env linting error

* navigation: fix rebasing issues

* navigation-link: remove CSS arrow in favor of SVG

* navigation: refact -> icons as components

* navigation: detect and propagate color to the SVG

* navigation-item: use detected color as default

* navigation-link: add chevron to all menu levels

* Show submenu indicators by default

* Fix linting and formatting errors

* Update Display Settings copy to reflect that it now affects multiple levels

* Update submenu indicators to new design

* Remove obsolete indicator styles

* Start cleanup of style.scss by ordering by function of styles

* Reduce specificity by not overwriting inline styles

* Continue organizing style.scss by ordering by function of styles

* Share basic top level styles between editor and frontend

* readd rotation of submenu indicators

* navigation-link: apply svg text color with CSS

* make child class usage consistent between editor and frontend

* add class to frontend to apply styles that match .block-editor-inner-blocks usage

* start sharing editor styles with frontend

* update navigation container positioning

* Add submenu indicators to submenus on the frontend

* unify submenu icon styles

* move icon rotation to correct position

* apply classes to all navigation links

* add colors to frontend submenus

* navigation-link: put the icon on the full right

* navigation: remove unneeded padding

* navigation: remove deprecated styles

* navigation: hid all sub-menus

* navigation: remove detected-color code

* navigation: unify default styles.

* navigation: dealing with min heigh and vert align

* navigation: main menu height / vertical alignment

* navigation: adjust box model and position

* navigation: set width fixing the alignment

* navigation: set CSS classes depending on value att

* navigation: fix and simlify block styles

* Slightly simplify css class assembly

* navigation: set border color using currentColor

* navigation-edit: simplify color attrs

* navigation: improve paddings, positions, etc.

* navigation: pick up rgb colors outside of hook

* navigation: move sub-menus (L1) up a grid size

* navigation: fix php linting errors

* Update the inserter positioning and spacing. Remove the submenu borders so they belnd with the top level menu.

* Restore the border on sub menus, but use alpha so that it blends better with whatever the selected background color is.

* Align flyout submenu tops.

* Use $border-width instead of a magic number for submenu alignment

* Removed ul and li padding on submenus and moved them into the link <a> level so links are now full width and everywhere in the menus is hoverable/clickable. Focus rings look nicer now too.

* Set a fixed width on submenu widths instead of relying on the content width.

This means that long submenu items will wrap. I also set a lower line height on items so that it was more obvious that a wrapped submenu item was one item,

* Move padding from li to a on top-level items.

* Moved caret on submenu icon left a bit more.

* Better align grandchild links with bottom child links

* navigation: remove is level zero arg

* navigation: remove flex-wrap in to fix nav width

* navigation: handling default true value for arrow

* Set top: 100% on navigation submenu instead of magic number

* Left align submenus

* navigation: fix showing submenu icon

* navigation: fixing linting errors

* navigation: fix setting link width

Co-authored-by: Michael P. Pfeiffer <frontdevde@users.noreply.github.com>
Co-authored-by: Konstantin Obenland <obenland@automattic.com>
Co-authored-by: Andy Peatling <apeatling@users.noreply.github.com>
Co-authored-by: Jerry Jones <jones.jeremydavid@gmail.com>
  • Loading branch information
@retrofox @frontdevde
@obenland @apeatling @jeryj
5 people committed Feb 3, 2020
1 parent 2f6e7fd commit 83e26a8
Show file tree
Hide file tree
Showing 8 changed files with 321 additions and 283 deletions.
11 changes: 11 additions & 0 deletions packages/base-styles/_colors.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,3 +89,14 @@ $blue-medium-focus-dark: #fff;
$alert-yellow: #f0b849;
$alert-red: #d94f4f;
$alert-green: #4ab866;

// Navigation.
$light-style-sub-menu-background-color: #fff;
$light-style-sub-menu-border-color: #ddd;
$light-style-sub-menu-text-color: #111;
$light-style-sub-menu-text-color-hover: #333;

$dark-style-sub-menu-background-color: #333;
$dark-style-sub-menu-border-color: #111;
$dark-style-sub-menu-text-color: #fff;
$dark-style-sub-menu-text-color-hover: #eee;
37 changes: 27 additions & 10 deletions packages/block-library/src/navigation-link/edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ import { placeCaretAtHorizontalEdge } from '@wordpress/dom';
/**
* Internal dependencies
*/
import { toolbarSubmenuIcon, itemSubmenuIcon } from './icons';
import { ToolbarSubmenuIcon, ItemSubmenuIcon } from './icons';

function NavigationLinkEdit( {
attributes,
Expand All @@ -46,6 +46,7 @@ function NavigationLinkEdit( {
setAttributes,
showSubmenuIcon,
insertLinkBlock,
navigationBlockAttributes,
} ) {
const {
label,
Expand All @@ -55,6 +56,17 @@ function NavigationLinkEdit( {
nofollow,
description,
} = attributes;

/*
* Navigation Block attributes.
*/
const {
textColor,
rgbTextColor,
backgroundColor,
rgbBackgroundColor,
} = navigationBlockAttributes;

const link = {
title: title ? unescape( title ) : '',
url,
Expand Down Expand Up @@ -137,7 +149,7 @@ function NavigationLinkEdit( {
/>
<ToolbarButton
name="submenu"
icon={ toolbarSubmenuIcon }
icon={ <ToolbarSubmenuIcon /> }
title={ __( 'Add submenu' ) }
onClick={ insertLinkBlock }
/>
Expand Down Expand Up @@ -196,7 +208,16 @@ function NavigationLinkEdit( {
'is-editing': isSelected || isParentOfSelectedBlock,
'is-selected': isSelected,
'has-link': !! url,
'has-child': hasDescendants,
'has-text-color': rgbTextColor,
[ `has-${ textColor }-color` ]: !! textColor,
'has-background-color': rgbBackgroundColor,
[ `has-${ backgroundColor }-background-color` ]: !! backgroundColor,
} ) }
style={ {
color: rgbTextColor,
backgroundColor: rgbBackgroundColor,
} }
>
<div className="wp-block-navigation-link__content">
<RichText
Expand All @@ -218,7 +239,7 @@ function NavigationLinkEdit( {
/>
{ showSubmenuIcon && (
<span className="wp-block-navigation-link__submenu-icon">
{ itemSubmenuIcon }
<ItemSubmenuIcon />
</span>
) }
{ isLinkOpen && (
Expand Down Expand Up @@ -286,29 +307,25 @@ function NavigationLinkEdit( {
export default compose( [
withSelect( ( select, ownProps ) => {
const {
getBlockName,
getBlockAttributes,
getBlockParents,
getClientIdsOfDescendants,
hasSelectedInnerBlock,
} = select( 'core/block-editor' );
const { clientId } = ownProps;
const rootBlock = getBlockParents( clientId )[ 0 ];
const parentBlock = getBlockParents( clientId, true )[ 0 ];
const rootBlockAttributes = getBlockAttributes( rootBlock );
const navigationBlockAttributes = getBlockAttributes( rootBlock );
const hasDescendants = !! getClientIdsOfDescendants( [ clientId ] )
.length;
const isLevelZero = getBlockName( parentBlock ) === 'core/navigation';
const showSubmenuIcon =
rootBlockAttributes.showSubmenuIcon &&
isLevelZero &&
hasDescendants;
!! navigationBlockAttributes.showSubmenuIcon && hasDescendants;
const isParentOfSelectedBlock = hasSelectedInnerBlock( clientId, true );

return {
isParentOfSelectedBlock,
hasDescendants,
showSubmenuIcon,
navigationBlockAttributes,
};
} ),
withDispatch( ( dispatch, ownProps, registry ) => {
Expand Down
33 changes: 8 additions & 25 deletions packages/block-library/src/navigation-link/editor.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,44 +11,27 @@
* Adjust Navigation Item.
*/
.wp-block-navigation-link {
margin-left: $grid-size;
margin-right: $grid-size;
// Provide a base menu item margin.
// This should be the same inside the field,
// and the edit container should compensate.
// This is to make sure the edit and view are the same.
padding: 0 $grid-size;

.block-editor-block-list__layout {
display: block;
margin: $grid-size;
}

// Only display inner blocks when the block is being edited.
.block-editor-inner-blocks {
display: none;
}

&.is-editing,
&.is-selected {
min-width: 20px;
}

&.is-editing .block-editor-inner-blocks {
display: block;
}

.wp-block-navigation-link__content {
display: flex;
align-items: center;
}

&.has-link .wp-block-navigation-link__label {
text-decoration: underline;
}

.wp-block-navigation-link__submenu-icon {
margin-left: 4px;
.block-editor-rich-text__editable.is-selected:not(.keep-placeholder-on-focus):not(:focus) [data-rich-text-placeholder]::after {
display: inline-block;
}

.block-list-appender {
margin: $grid-size * 2;
margin-left: $grid-size * 1.25;
margin-top: $grid-size * 1.25;
}
}

Expand Down
16 changes: 9 additions & 7 deletions packages/block-library/src/navigation-link/icons.js
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,24 @@
/**
* WordPress dependencies
*/
import { Polygon, Path, SVG } from '@wordpress/components';
import { Path, SVG } from '@wordpress/components';

export const toolbarSubmenuIcon = (
export const ToolbarSubmenuIcon = () => (
<SVG xmlns="http://www.w3.org/2000/svg" width="24" height="24">
<Path d="M14 5h8v2h-8zm0 5.5h8v2h-8zm0 5.5h8v2h-8zM2 11.5C2 15.08 4.92 18 8.5 18H9v2l3-3-3-3v2h-.5C6.02 16 4 13.98 4 11.5S6.02 7 8.5 7H12V5H8.5C4.92 5 2 7.92 2 11.5z" />
<Path fill="none" d="M0 0h24v24H0z" />
</SVG>
);

export const itemSubmenuIcon = (
export const ItemSubmenuIcon = () => (
<SVG
width="18"
height="18"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 18 18"
width="12"
height="12"
viewBox="0 0 24 24"
transform="rotate(90)"
>
<Polygon points="9,13.5 14.7,7.9 13.2,6.5 9,10.7 4.8,6.5 3.3,7.9 " />
<Path d="M8 5v14l11-7z" />
<Path d="M0 0h24v24H0z" fill="none" />
</SVG>
);
17 changes: 13 additions & 4 deletions packages/block-library/src/navigation/edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import classnames from 'classnames';
/**
* WordPress dependencies
*/
import { useMemo, Fragment, useRef } from '@wordpress/element';
import { useMemo, Fragment, useRef, useEffect } from '@wordpress/element';
import {
InnerBlocks,
InspectorControls,
Expand Down Expand Up @@ -51,6 +51,7 @@ function Navigation( {
setAttributes,
setFontSize,
updateNavItemBlocks,
className,
} ) {
//
// HOOKS
Expand All @@ -67,7 +68,7 @@ function Navigation( {
} = __experimentalUseColors(
[
{ name: 'textColor', property: 'color' },
{ name: 'backgroundColor', className: 'background-color' },
{ name: 'backgroundColor', className: 'has-background-color' },
],
{
contrastCheckers: [
Expand All @@ -85,6 +86,14 @@ function Navigation( {
[ fontSize.size ]
);

// Pickup and store text and background colors in grb format into attrs object.
useEffect( () => {
setAttributes( {
rgbTextColor: TextColor.color,
rgbBackgroundColor: BackgroundColor.color,
} );
}, [ TextColor.color, BackgroundColor.color ] );

/* eslint-enable @wordpress/no-unused-vars-before-return */
const { navigatorToolbarButton, navigatorModal } = useBlockNavigator(
clientId
Expand Down Expand Up @@ -135,7 +144,7 @@ function Navigation( {

const hasPages = hasResolvedPages && pages && pages.length;

const blockClassNames = classnames( 'wp-block-navigation', {
const blockClassNames = classnames( className, {
[ `items-justification-${ attributes.itemsJustification }` ]: attributes.itemsJustification,
[ fontSize.class ]: fontSize.class,
} );
Expand Down Expand Up @@ -250,7 +259,7 @@ function Navigation( {
onChange={ ( value ) => {
setAttributes( { showSubmenuIcon: value } );
} }
label={ __( 'Show submenu icon for top-level items' ) }
label={ __( 'Show submenu indicator icons' ) }
/>
</PanelBody>
</InspectorControls>
Expand Down
31 changes: 0 additions & 31 deletions packages/block-library/src/navigation/editor.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,20 +28,6 @@ $navigation-item-height: 46px;
justify-content: flex-end;
}

// 2. Remove paddings on subsequent immediate children.
.wp-block-navigation .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block {
width: auto;
padding-left: 0;
padding-right: 0;
margin: 0;
}

// 3. Set a min height for nav items.
// It's needed in order to hide the sub-items when the navigation is not selected.
.wp-block-navigation .block-editor-inner-blocks > .block-editor-block-list__layout .wp-block > [data-block] {
min-height: $navigation-item-height;
}

.wp-block-navigation .block-editor-block-list__block::before {
left: 0;
right: 0;
Expand All @@ -60,11 +46,8 @@ $navigation-item-height: 46px;

// Polish the Appender.
.wp-block-navigation .block-list-appender {
margin: 0;
width: 28px;
height: 28px;
margin-top: $grid-size-small;
margin-left: $grid-size + $block-side-ui-clearance;

.block-editor-button-block-appender {
padding: $grid-size;
Expand All @@ -76,20 +59,6 @@ $navigation-item-height: 46px;
}
}

.wp-block-navigation .block-editor-block-list__layout,
.wp-block-navigation {
display: flex;
flex-wrap: wrap;
}

// Vertical aligment.
.wp-block-navigation {
min-height: $navigation-height;
padding-top: 7px;
padding-bottom: 7px;
align-items: center;
}

.wp-block-navigation__inserter-content {
padding: $grid-size-large;
}
Expand Down
Loading

0 comments on commit 83e26a8

Please sign in to comment.