Skip to content

Commit

Permalink
Polish mobile toolbar (#7278)
Browse files Browse the repository at this point in the history 
* Add right border when block toolbar scrolls.

* Remove transformations from Block More menu.

* Polish mobile toolbar.

* Don't show sibling inserter on mobile.

* Address feedback and fix typo.

The typo was a actually committed in https://github.com/WordPress/gutenberg/pull/6408/files but this fixes it.

* Address feedback on comments.
  • Loading branch information
@jasmussen
jasmussen authored Jun 13, 2018
1 parent 87f7420 commit 3e76aad
Show file tree
Hide file tree
Showing 4 changed files with 74 additions and 60 deletions.
3 changes: 2 additions & 1 deletion edit-post/assets/stylesheets/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,11 +35,12 @@ $sidebar-width: 280px;
$content-width: 610px; // For the visual width, subtract 30px (2 * $block-padding + 2px borders). This comes to 580px, which is optimized for 70 characters.

// Block UI
$border-width: 1px;
$block-controls-height: 36px;
$icon-button-size: 36px;
$icon-button-size-small: 24px;
$inserter-tabs-height: 36px;
$block-toolbar-height: 37px;
$block-toolbar-height: $block-controls-height + $border-width;

// Blocks
$parent-block-padding: 28px; // padding of top level blocks, should be larger than $block-padding, otherwise a user can't select the parent from a child
Expand Down
121 changes: 68 additions & 53 deletions editor/components/block-list/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,12 @@
box-shadow: $shadow-popover;

@include break-small {
left: -$block-parent-side-ui-clearance - 1px;
right: -$block-parent-side-ui-clearance - 1px;
left: -$block-parent-side-ui-clearance - $border-width;
right: -$block-parent-side-ui-clearance - $border-width;

.editor-block-list__layout & {
left: -1px;
right: -1px;
left: -$border-width;
right: -$border-width;
}
}
}
Expand Down Expand Up @@ -113,17 +113,17 @@

// Don't add side padding for nested blocks, and compensate for block padding
.editor-block-list__block & {
// compensate for side UI
// Compensate for side UI.
padding-left: 0;
padding-right: 0;

// compensate for block padding horizontally
// Compensate for block padding horizontally.
margin-left: -$block-padding;
margin-right: -$block-padding;

// compensate for block padding and collapsing margins vertically
margin-top: -$block-padding + 1px;
margin-top: -$block-padding + 1px;
// Compensate for block padding and collapsing margins vertically.
margin-top: -$block-padding + $border-width;
margin-bottom: -$block-padding + $border-width;
}
}

Expand All @@ -138,9 +138,8 @@

@include break-small() {
// The block mover needs to stay inside the block to allow clicks when hovering the block
// subtract 1px for border width
padding-left: $block-padding + $block-side-ui-padding - 1px;
padding-right: $block-padding + $block-side-ui-padding - 1px;
padding-left: $block-padding + $block-side-ui-padding - $border-width;
padding-right: $block-padding + $block-side-ui-padding - $border-width;
}

// Prevent collapsing margins @todo try and revisit this, it's conducive to theming to allow these to collapse
Expand Down Expand Up @@ -218,7 +217,7 @@
z-index: z-index( '.editor-block-list__block-edit:before' );
content: '';
position: absolute;
outline: 1px solid transparent;
outline: $border-width solid transparent;
transition: outline .1s linear;
pointer-events: none;

Expand All @@ -241,7 +240,7 @@
// Selected style
&.is-selected > .editor-block-list__block-edit:before {
// use opacity to work in various editor styles
outline: 1px solid $dark-opacity-light-500;
outline: $border-width solid $dark-opacity-light-500;
top: -$block-padding;
bottom: -$block-padding;

Expand All @@ -252,7 +251,7 @@

// Hover style
&.is-hovered > .editor-block-list__block-edit:before {
outline: 1px solid theme( outlines );
outline: $border-width solid theme( outlines );
}
}

Expand Down Expand Up @@ -337,7 +336,7 @@
// Shared blocks
&.is-shared > .editor-block-list__block-edit:before {
// use opacity to work in various editor styles
outline: 1px dashed $dark-opacity-light-500;
outline: $border-width dashed $dark-opacity-light-500;

.is-dark-theme & {
outline-color: $light-opacity-light-500;
Expand Down Expand Up @@ -391,7 +390,7 @@
// Mover and settings above
> .editor-block-mover,
> .editor-block-settings-menu {
top: -$block-side-ui-width - 1px; // move upwards the height of the button +1px for border
top: -$block-side-ui-width - $border-width; // This moves the menu up by the height of the button + border.
bottom: auto;
min-height: 0;
height: auto;
Expand Down Expand Up @@ -426,7 +425,7 @@

// Position hover label on the right
> .editor-block-list__breadcrumb {
right: -1px;
right: -$border-width;
}

// Hide mover until wide breakpoints, or it might be covered by toolbar
Expand All @@ -453,13 +452,13 @@

// Position hover label on the right
> .editor-block-list__breadcrumb {
right: -1px;
right: -$border-width;
}

// compensate for main container padding, subtract border
@include break-small() {
margin-left: -$block-side-ui-padding + 1px;
margin-right: -$block-side-ui-padding + 1px;
margin-left: -$block-side-ui-padding + $border-width;
margin-right: -$block-side-ui-padding + $border-width;
}

> .editor-block-list__block-edit {
Expand Down Expand Up @@ -581,17 +580,27 @@
}
}

// Show side UI inline below the block on mobile
// Show side UI inline below the block on mobile.
.editor-block-list__block-mobile-toolbar {
display: flex;
flex-direction: row;
margin-top: $item-spacing;
margin-top: $item-spacing + $block-toolbar-height; // Make room for the height of the block toolbar above.
margin-right: -$block-padding;
margin-bottom: -$block-padding - $border-width;
margin-left: -$block-padding;
border-top: $border-width solid $light-gray-500;

@include break-small() {
display: none;
}

// Movers, inserter, trash & ellipsis
// Show a shadow below the selected block to imply separation.
box-shadow: $shadow-below-only;
@include break-mobile() {
box-shadow: none;
}

// Movers, inserter, trash, and ellipsis.
.editor-inserter {
position: relative;
left: auto;
Expand Down Expand Up @@ -651,15 +660,20 @@

.editor-block-list__insertion-point-indicator {
position: absolute;
top: calc( 50% - 1px);
top: calc( 50% - $border-width );
height: 2px;
left: 0;
right: 0;
background: theme( primary );
}

.editor-block-list__insertion-point-inserter {
display: flex;
// Don't show on mobile.
display: none;
@include break-mobile() {
display: flex;
}

position: absolute;
top: 0;
bottom: auto;
Expand All @@ -686,7 +700,7 @@
// Show a line indicator when hovering, but this is unclickable
&:before {
position: absolute;
top: calc( 50% - 1px);
top: calc( 50% - #{ $border-width } );
height: 2px;
left: 0;
right: 0;
Expand All @@ -709,8 +723,8 @@
top: -$block-padding - $block-spacing / 2;
height: $block-padding * 2; // Matches the whole empty space between two blocks
bottom: auto;
left: -1px;
right: -1px;
left: -$border-width;
right: -$border-width;
}

&[data-align="full"] > .editor-block-list__insertion-point {
Expand Down Expand Up @@ -751,51 +765,48 @@
pointer-events: none;
height: $block-toolbar-height;

// Position toolbar below the block on mobile
// Position toolbar below the block on mobile.
position: absolute;
bottom: -$block-toolbar-height + 1px;
bottom: $block-toolbar-height;
left: $block-padding;
right: $block-padding;
box-shadow: $shadow-below-only;

// Position the contextual toolbar above the block, add 1px to each to stack borders
// Position the contextual toolbar above the block.
@include break-mobile() {
position: sticky;
bottom: auto;
left: auto;
right: auto;
box-shadow: none;
margin-top: -$block-toolbar-height - 1px;
margin-bottom: $block-padding + 1px;
margin-top: -$block-toolbar-height - $border-width;
margin-bottom: $block-padding + $border-width;
}

@include break-small() {
top: -1px; // stack borders
top: -$border-width;
}

// Floated items have special needs for the contextual toolbar position
// Floated items have special needs for the contextual toolbar position.
.editor-block-list__block[data-align="left"] &,
.editor-block-list__block[data-align="right"] & {
margin-bottom: 1px;
margin-top: -$block-toolbar-height - 1px;
margin-bottom: $border-width;
margin-top: -$block-toolbar-height - $border-width;
}

// put toolbar snugly to side edges on mobile
margin-left: -$block-padding - 1px; // stack borders
margin-right: -$block-padding - 1px;
// Make block toolbar full width on mobile.
margin-left: -$block-padding - $border-width;
margin-right: -$block-padding - $border-width;

@include break-small() {
// stack borders
margin-left: -$parent-block-padding - $block-side-ui-width - 1px;
margin-right: -$parent-block-padding - $block-side-ui-width - 1px;
margin-left: -$parent-block-padding - $block-side-ui-width - $border-width;
margin-right: -$parent-block-padding - $block-side-ui-width - $border-width;

// position toolbar for nested
// Position toolbar for nested contexts.
.editor-block-list__block & {
margin-left: -$block-padding - $block-side-ui-width - 1px;
margin-right: -$block-padding - $block-side-ui-padding - 1px;
margin-left: -$block-padding - $block-side-ui-width - $border-width;
margin-right: -$block-padding - $block-side-ui-padding - $border-width;
}

// except for wide elements, this causes a horizontal scrollbar
// Except for wide elements, this causes a horizontal scrollbar.
[data-align="full"] & {
margin-left: -$block-padding - $block-side-ui-width;
margin-right: -$block-padding - $block-side-ui-width;
Expand All @@ -812,10 +823,14 @@
.editor-block-contextual-toolbar .editor-block-toolbar {
width: 100%;
background: $white;
border: 1px solid $light-gray-500;
border-right: none;
border: $border-width solid $light-gray-500;

// Hide right border on desktop, where the .components-toolbar instead has a right border.
@include break-small() {
border-right: none;
}

// this prevents floats from messing up the position
// This prevents floats from messing up the position.
position: absolute;
left: 0;

Expand Down
2 changes: 0 additions & 2 deletions editor/components/block-settings-menu/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ import './style.scss';
import BlockModeToggle from './block-mode-toggle';
import BlockRemoveButton from './block-remove-button';
import BlockDuplicateButton from './block-duplicate-button';
import BlockTransformations from './block-transformations';
import SharedBlockSettings from './shared-block-settings';
import UnknownConverter from './unknown-converter';
import _BlockSettingsMenuFirstItem from './block-settings-menu-first-item';
Expand Down Expand Up @@ -100,7 +99,6 @@ export class BlockSettingsMenu extends Component {
{ count === 1 && <UnknownConverter uid={ firstBlockUID } role="menuitem" /> }
<BlockDuplicateButton uids={ uids } rootUID={ rootUID } role="menuitem" />
{ count === 1 && <SharedBlockSettings uid={ firstBlockUID } onToggle={ onClose } itemsRole="menuitem" /> }
<BlockTransformations uids={ uids } onClick={ onClose } itemsRole="menuitem" />
</NavigableMenu>
) }
/>
Expand Down
8 changes: 4 additions & 4 deletions editor/components/block-toolbar/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,10 @@
flex-grow: 1;
width: 100%;
background: $white;
overflow: auto; // allow horizontal scrolling on mobile
overflow: auto; // Allow horizontal scrolling on mobile.
position: relative;

// allow overflow on desktop
// Allow overflow on desktop.
@include break-small() {
overflow: inherit;
}
Expand All @@ -15,10 +15,10 @@
border: none;

// Add a right border to show as separator in the block toolbar.
border-right: 1px solid $light-gray-500;
border-right: $border-width solid $light-gray-500;
}

// this should probably have its own class
// This should be refactored to have its own class to target.
> div {
display: flex;
}
Expand Down

0 comments on commit 3e76aad

Please sign in to comment.