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

Refine side UI #6141

Merged
merged 10 commits into from
Apr 18, 2018
Merged

Refine side UI #6141

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
954a6c6
Polish side UI, make arrows bigger.
Apr 6, 2018
579f87d
Refine mobile block UI, and responsive hover labels.
Apr 6, 2018
de05160
Add trash button to right side UI.
Apr 6, 2018
42adaa3
Enhance situation in wide blocks.
Apr 6, 2018
b622558
Remove role from Remove button, and remove Trash from menu.
Apr 13, 2018
8acbfd7
Editor: Fix Eslint issues in BlockSettingsMenu
gziolo Apr 13, 2018
1e8e642
Refine collapsing margins hack, fix flickering.
Apr 13, 2018
08b4036
Add some clearance between side UI and block.
Apr 13, 2018
9381cf2
Fix z-index issue.
Apr 16, 2018
5a683a8
Fix block settings dropdown menu
youknowriad Apr 17, 2018
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
1 change: 1 addition & 0 deletions edit-post/assets/stylesheets/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ $block-mover-margin: 18px;
$block-spacing: 4px;
$block-side-ui-padding: 36px;
$block-side-ui-width: 28px; // The side UI max height matches a single line of text, 56px. 28px is half, allowing 2 mover arrows
$block-side-ui-clearance: 2px;

// Buttons & UI Widgets
$button-style__radius-roundrect: 4px;
Expand Down
2 changes: 1 addition & 1 deletion edit-post/assets/stylesheets/_z-index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ $z-layers: (
'.editor-block-list__insertion-point': 5,
'.blocks-format-toolbar__link-modal': 6,
'.blocks-gallery-item__inline-menu': 20,
'.editor-block-settings-menu__popover': 20, // Below the header
'.editor-block-settings-menu__popover': 21, // Below the header, but above the block toolbar
'.blocks-url-input__suggestions': 30,
'.edit-post-header': 30,
'.wp-block-image__resize-handlers': 1, // Resize handlers above sibling inserter
Expand Down
2 changes: 0 additions & 2 deletions editor/components/block-list/block-mobile-toolbar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import { ifViewportMatches } from '@wordpress/viewport';
* Internal dependencies
*/
import BlockMover from '../block-mover';
import BlockRemoveButton from '../block-settings-menu/block-remove-button';
import BlockSettingsMenu from '../block-settings-menu';
import VisualEditorInserter from '../inserter';

Expand All @@ -16,7 +15,6 @@ function BlockMobileToolbar( { rootUID, uid, renderBlockMenu } ) {
<div className="editor-block-list__block-mobile-toolbar">
<VisualEditorInserter />
<BlockMover uids={ [ uid ] } />
<BlockRemoveButton uids={ [ uid ] } small />
<BlockSettingsMenu rootUID={ rootUID } uids={ [ uid ] } renderBlockMenu={ renderBlockMenu } />
</div>
);
Expand Down
102 changes: 54 additions & 48 deletions editor/components/block-list/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,9 +110,8 @@
}

// Prevent collapsing margins @todo try and revisit this, it's conducive to theming to allow these to collapse
padding-top: .1px;
padding-bottom: .1px;

padding-top: 1px;
padding-bottom: 1px;

// Space every block using margins instead of padding
// This allows margins to collapse, which gives a better representation of how it looks on the frontend
Expand All @@ -121,8 +120,8 @@
margin-bottom: $block-padding;

// Prevent collapsing margins @todo try and revisit this, it's conducive to theming to allow these to collapse
padding-top: .1px;
padding-bottom: .1px;
padding-top: 1px;
padding-bottom: 1px;
}

margin-bottom: $block-spacing;
Expand Down Expand Up @@ -304,7 +303,7 @@

// Full-wide
&[data-align="full"] {

// compensate for main container padding
@include break-small() {
margin-left: -$block-side-ui-padding;
Expand Down Expand Up @@ -333,44 +332,42 @@
border-right-width: 0;
}

// Adjust how movers behave on the full-wide block, and don't affect children
> .editor-block-mover {
display: none;
}
// Mover and settings in wide
> .editor-block-mover,
> .editor-block-settings-menu {
top: -29px;
bottom: auto;
height: auto;
width: auto;
z-index: inherit;

@include break-wide() {
> .editor-block-mover {
display: block;
top: -29px;
left: 10px;
height: auto;
width: auto;
z-index: inherit;

&:before {
content: none;
}
&:before {
content: none;
}
}

> .editor-block-mover .editor-block-mover__control {
float: left;
}
> .editor-block-mover {
left: 10px;
}

// Also adjust block settings menu
> .editor-block-settings-menu {
top: -41px;
right: 10px;
height: auto;

&:before {
content: none;
}
}

> .editor-block-settings-menu .editor-block-settings-menu__control {
> .editor-block-mover .editor-block-mover__control,
> .editor-block-settings-menu > * {
float: left;
}

// Hide mover until wide breakpoints, or it might be covered by toolbar
> .editor-block-mover {
display: none;
}
@include break-wide() {
> .editor-block-mover {
display: block;
}
}
}

// Clear floats
Expand All @@ -397,29 +394,31 @@
> .editor-block-settings-menu,
> .editor-block-mover {
position: absolute;
top: -.9px; // .9px because of the collapsing margins hack, see line 27, @todo revisit when we allow margins to collapse
bottom: -.9px; // utilize full vertical space to increase hoverable area
padding: 0;
width: $block-side-ui-width;
top: 0; // stretch to bottom to utilize full vertical space to increase hoverable area
bottom: 0;
width: $block-side-ui-width + $block-side-ui-clearance;

/* Necessary for drag indicator */
cursor: move;/* Fallback for IE/Edge < 14 */
cursor: grab;
}

// Elevate when selected or hovered
&.is-multi-selected,
&.is-selected,
&.is-hovered {
.editor-block-settings-menu,
.editor-block-mover {
z-index: z-index( '.editor-block-list__block.is-{selected,hovered} .editor-block-{settings-menu,mover}' );
@include break-small() {
&.is-multi-selected,
&.is-selected,
&.is-hovered {
.editor-block-settings-menu,
.editor-block-mover {
z-index: z-index( '.editor-block-list__block.is-{selected,hovered} .editor-block-{settings-menu,mover}' );
}
}
}

// Right side UI
> .editor-block-settings-menu {
right: -$block-side-ui-width;
right: -$block-side-ui-width - $block-side-ui-clearance;
padding-left: $block-side-ui-clearance;

// Mobile
display: none;
Expand All @@ -431,7 +430,8 @@

// Left side UI
> .editor-block-mover {
left: -$block-side-ui-width;
left: -$block-side-ui-width - $block-side-ui-clearance;
padding-right: $block-side-ui-clearance;

// Mobile
display: none;
Expand Down Expand Up @@ -459,11 +459,11 @@
}

.editor-inserter__toggle,
.editor-block-settings-menu__toggle,
& > .editor-block-settings-menu__control,
.editor-block-mover__control {
.editor-block-mover__control,
.editor-block-settings-menu .components-button {
width: $icon-button-size;
height: $icon-button-size;
border-radius: $button-style__radius-roundrect;
padding: 3px;
margin: 0;
justify-content: center;
Expand All @@ -484,6 +484,11 @@
float: left;
}
}

// Block Settings
.editor-block-settings-menu > * {
float: left;
}
}
}

Expand Down Expand Up @@ -649,6 +654,7 @@
.editor-block-list__breadcrumb .components-toolbar {
border: 1px solid $light-gray-500;
width: 100%;
background: $white;

// this prevents floats from messing up the position
position: absolute;
Expand Down
8 changes: 4 additions & 4 deletions editor/components/block-mover/arrows.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
export const upArrow = (
<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg" aria-hidden role="img" focusable="false">
<path d="M12.293 12.207L9 8.914l-3.293 3.293-1.414-1.414L9 6.086l4.707 4.707z" />
<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" aria-hidden role="img" focusable="false">
<polygon points="9,4.5 3.3,10.1 4.8,11.5 9,7.3 13.2,11.5 14.7,10.1 " />
</svg>
);

export const downArrow = (
<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg" aria-hidden role="img" focusable="false">
<path d="M12.293 6.086L9 9.379 5.707 6.086 4.293 7.5 9 12.207 13.707 7.5z" />
<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" aria-hidden role="img" focusable="false">
<polygon points="9,13.5 14.7,7.9 13.2,6.5 9,10.7 4.8,6.5 3.3,7.9 " />
</svg>
);
49 changes: 20 additions & 29 deletions editor/components/block-mover/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,9 @@

// Mover icon buttons
.editor-block-mover__control {
display: block;
display: flex;
align-items: center;
justify-content: center;
border: none;
outline: none;
background: none;
Expand All @@ -17,14 +19,21 @@
padding: 0;
width: $block-side-ui-width;
height: $block-side-ui-width; // the side UI can be no taller than 2 * $block-side-ui-width, which matches the height of a line of text
border-radius: $button-style__radius-roundrect;

&[aria-disabled="true"] {
cursor: default;
color: $light-gray-300;
pointer-events: none;
}

// Try a background, only for nested situations @todo
svg {
width: $block-side-ui-width;
height: $block-side-ui-width;
padding: ( $block-side-ui-width - 18px ) / 2; // this makes the SVG fill the whole available area, without scaling the artwork
}

// Apply a background in nested contexts, only on desktop
Copy link
Member

@jorgefilipecosta jorgefilipecosta Apr 17, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In nested contexts on mobile the contrast may be low:
image
But the result is better than what we had and finding a solution for this cases is really hard as the background color of the nested context is impossible to predict.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Mix blend mode could help with that. Not the greatest support though.

@include break-small() {
.editor-block-list__layout .editor-block-list__layout & {
background: $white;
Expand All @@ -41,35 +50,17 @@
}
}

// apply styles to SVG for movers on the desktop breakpoint
@include break-small {
// unstyle inherited icon button styles
&:not(:disabled):hover,
&:not(:disabled):active,
&:not(:disabled):focus {
box-shadow: none;
color: inherit;
}

svg {
display: block;
position: relative; // Fixing the Safari bug for `<button>`s overflow
border-radius: 50%;
margin: auto;

}

&:not(:disabled):hover svg {
box-shadow: inset 0 0 0 1px $light-gray-500;
}
// Hover, active and focus styles
&:not(:disabled):hover {
@include button-style__hover;
}

&:not(:disabled):active svg {
@include button-style__active;
}
&:not(:disabled):active {
@include button-style__active;
}

&:not(:disabled):focus svg {
@include button-style__focus-active;
}
&:not(:disabled):focus {
@include button-style__focus-active;
}
}

Expand Down
10 changes: 4 additions & 6 deletions editor/components/block-settings-menu/block-remove-button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import { compose } from '@wordpress/element';
import { withDispatch } from '@wordpress/data';
import { withEditorSettings } from '@wordpress/blocks';

export function BlockRemoveButton( { onRemove, onClick = noop, isLocked, small = false, role } ) {
export function BlockRemoveButton( { onRemove, onClick = noop, isLocked, role } ) {
if ( isLocked ) {
return null;
}
Expand All @@ -21,14 +21,12 @@ export function BlockRemoveButton( { onRemove, onClick = noop, isLocked, small =

return (
<IconButton
className="editor-block-settings-menu__control"
className="editor-block-settings-remove"
onClick={ flow( onRemove, onClick ) }
icon="trash"
label={ small ? label : undefined }
label={ label }
role={ role }
>
{ ! small && label }
</IconButton>
/>
);
}

Expand Down
Loading