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

Jump to bottom

Remove additional side padding from blocks. #9653

Merged
merged 4 commits into from
Sep 25, 2018
Merged

Remove additional side padding from blocks. #9653

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e3f460e
Remove additional side padding from blocks.
Sep 6, 2018
cce5273
Remove references to ellipsis on the side.
Sep 25, 2018
58622c8
Fix bad rebase with editor warning
jasmussen Sep 25, 2018
c483e6f
Fix reusable blocks indicator.
jasmussen Sep 25, 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
6 changes: 3 additions & 3 deletions block-library/freeform/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,7 @@ div[data-type="core/freeform"] .editor-block-contextual-toolbar + div {

.freeform-toolbar {
width: auto;
margin: 0 #{ -$parent-block-padding };
margin: 0 #{ -$block-padding };
position: sticky;
z-index: z-index(".freeform-toolbar");
top: $block-padding;
Expand Down Expand Up @@ -209,8 +209,8 @@ div[data-type="core/freeform"] .editor-block-contextual-toolbar + div {
.editor-block-list__block[data-type="core/freeform"] {
.editor-block-contextual-toolbar {
float: right;
margin-right: -$block-padding - $block-side-ui-clearance - $border-width;
transform: translateY(-#{ $block-padding });
margin-right: -$block-side-ui-clearance - $border-width;
transform: translateY(-#{ $block-padding - $border-width });
top: $block-padding;

.editor-block-toolbar {
Expand Down
2 changes: 0 additions & 2 deletions edit-post/assets/stylesheets/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,14 +50,12 @@ $inserter-tabs-height: 36px;
$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
$block-padding: 14px; // padding of nested blocks
$block-spacing: 4px; // vertical space between blocks

$block-side-ui-width: 28px; // width of the side UI, matches half matches half of a single line of text, so two buttons stacke matches 1
$block-side-ui-clearance: 2px; // space between side UI and block
$block-side-ui-padding: $block-side-ui-width + $block-side-ui-clearance; // total space used to accommodate side UI
$block-parent-side-ui-clearance: $parent-block-padding - $block-padding; // space between side UI and block on top level blocks

$block-container-side-padding: $block-side-ui-width + $block-padding + 2 * $block-side-ui-clearance;

Expand Down
3 changes: 2 additions & 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 @@ -9,7 +9,8 @@ $z-layers: (
".editor-block-list__block {core/image aligned left or right}": 20,
".editor-block-list__block {core/image aligned wide or fullwide}": 20,
".freeform-toolbar": 10,
".editor-block-list__breadcrumb": 1,
".editor-block-list__layout .reusable-block-indicator": 1,
".editor-block-list__breadcrumb": 2,
".components-form-toggle__input": 1,
".editor-inserter__tabs": 1,
".editor-inserter__tab.is-active": 1,
Expand Down
12 changes: 6 additions & 6 deletions edit-post/components/visual-editor/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,20 +32,20 @@
// Use specific selector to not affect nested block toolbars.
&[data-align="wide"] > .editor-block-contextual-toolbar,
&[data-align="full"] > .editor-block-contextual-toolbar {
width: calc(100% + #{ ($parent-block-padding * 4) + $border-width + $border-width }); // Matches the negative margins applied to parent blocks.
width: calc(100% + #{ $block-side-ui-width * 2 + $block-padding * 2 + $border-width * 2 }); // Matches the negative margins applied to parent blocks.
height: 0; // This collapses the container to an invisible element without margin.
text-align: center;

.editor-block-toolbar {
max-width: $content-width + $block-padding + $block-padding;
max-width: $content-width;
width: 100%;
position: relative;
}
}

// The centering math changes when a fullwide image doesn't have block padding.
&[data-align="full"] > .editor-block-contextual-toolbar {
width: calc(100% + #{ ($parent-block-padding * 2) + ($block-padding * 2) }); // Matches the negative margins applied to non-parent blocks, except for borders which are gone in fullwide.
width: calc(100% + #{ $block-side-ui-width * 2 + $block-padding * 2 }); // Matches the negative margins applied to non-parent blocks, except for borders which are gone in fullwide.

.editor-block-toolbar {
max-width: $content-width - $border-width - $border-width;
Expand Down Expand Up @@ -80,11 +80,11 @@
margin-right: 0;
}

// Include space for side UI on desktops.
// Stretch to mimic outline padding on desktop.
@include break-small() {
> div {
margin-left: -$block-side-ui-width;
margin-right: -$block-side-ui-width;
margin-left: -$block-side-ui-clearance;
margin-right: -$block-side-ui-clearance;
}
}
}
Expand Down
4 changes: 2 additions & 2 deletions packages/block-library/src/block/edit-panel/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@
font-size: $default-font-size;
position: relative;
top: -$block-padding;
margin: 0 (-$parent-block-padding) (-$block-padding) (-$parent-block-padding);
padding: $grid-size $parent-block-padding;
margin: 0 (-$block-padding) (-$block-padding) (-$block-padding);
padding: $grid-size $block-padding;

// Show a smaller padding when nested.
.editor-block-list__layout & {
Expand Down
8 changes: 2 additions & 6 deletions packages/block-library/src/block/indicator/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,7 @@
height: 30px;
padding: $grid-size-small;
position: absolute;
z-index: z-index(".editor-block-list__layout .reusable-block-indicator");
width: 30px;
right: -$parent-block-padding;

// Show less offset in nested contexts.
.editor-block-list__layout & {
right: -$block-padding;
}
right: -$block-padding;
}
132 changes: 17 additions & 115 deletions packages/editor/src/components/block-list/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
.editor-block-list__layout .components-draggable__clone {
// Hide the Block UI when dragging the block
// This ensures the page scroll properly (no sticky elements)
.editor-block-contextual-toolbar,
.editor-block-settings-menu {
.editor-block-contextual-toolbar {
// I think important is fine here to avoid over complexing the selector
display: none !important;
}
Expand Down Expand Up @@ -53,7 +52,7 @@
padding-left: 0;
padding-right: 0;

// Compensate for block padding horizontally.
// Compensate for block padding.
margin-left: -$block-padding;
margin-right: -$block-padding;
}
Expand Down Expand Up @@ -91,10 +90,12 @@
/**
* Notices
*/

.components-placeholder .components-with-notices-ui {
margin: -10px 20px 12px 20px;
width: calc(100% - 40px);
}

.components-with-notices-ui {
margin: 0 0 12px 0;
width: 100%;
Expand Down Expand Up @@ -129,20 +130,6 @@
left: -$block-padding;
top: -$block-padding;
bottom: -$block-padding;

// Show wider padding for top level blocks.
@include break-small() {
right: -$parent-block-padding;
left: -$parent-block-padding;
}
}

// Show smaller padding for child blocks.
.editor-block-list__block-edit::before {
right: -$block-padding;
left: -$block-padding;
top: -$block-padding;
bottom: -$block-padding;
}
}

Expand Down Expand Up @@ -243,14 +230,8 @@

top: -$block-padding;
bottom: -$block-padding;
right: -$parent-block-padding;
left: -$parent-block-padding;

// Position for nested blocks
.editor-block-list__block & {
right: -$block-padding;
left: -$block-padding;
}
right: -$block-padding;
left: -$block-padding;
}

&.has-warning.is-selected .editor-block-list__block-edit::after {
Expand Down Expand Up @@ -345,8 +326,7 @@
z-index: z-index(".editor-block-list__block {core/image aligned wide or fullwide}");

// Mover and settings above
> .editor-block-mover,
> .editor-block-settings-menu {
> .editor-block-mover {
// This moves the menu up by the height of the button + border + padding.
top: -$block-side-ui-width - $block-padding - $block-side-ui-clearance;
bottom: auto;
Expand All @@ -360,13 +340,7 @@
}
}

> .editor-block-settings-menu {
width: $block-side-ui-width;
flex-direction: row;
}

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

Expand Down Expand Up @@ -397,16 +371,6 @@

// Wide
&[data-align="wide"] {
// Position hover label on the right
> .editor-block-list__breadcrumb {
right: -$block-padding;
}

// Position ellipsis.
> .editor-block-settings-menu {
right: -$block-padding + $block-side-ui-clearance;
}

// Position mover
> .editor-block-mover {
left: -$block-padding + $border-width;
Expand Down Expand Up @@ -450,11 +414,6 @@
border-right-width: 0;
}

// Position ellipsis.
> .editor-block-settings-menu {
right: $block-side-ui-clearance;
}

// Position mover
> .editor-block-mover {
left: $border-width;
Expand Down Expand Up @@ -497,7 +456,6 @@
.editor-block-list__block {

// Left and right block settings and mover.
> .editor-block-settings-menu,
> .editor-block-mover {
position: absolute;
width: $block-side-ui-width + $block-side-ui-clearance;
Expand All @@ -507,7 +465,6 @@
}

// Position depending on whether selected or not.
> .editor-block-settings-menu,
> .editor-block-mover {
top: -$block-padding - $border-width;
}
Expand All @@ -517,44 +474,18 @@
&.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 {
padding-left: $block-side-ui-clearance;

// Position for top level blocks
right: -$block-side-ui-width - $block-side-ui-clearance - $block-parent-side-ui-clearance;

// Position for nested blocks
.editor-block-list__block & {
right: -$block-side-ui-width - $block-side-ui-clearance;
}

// Mobile
display: none;
@include break-small() {
display: flex;
flex-direction: column;
}
}

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

// Position for top level blocks
left: -$block-side-ui-width - $block-side-ui-clearance - $block-parent-side-ui-clearance;

// Position for nested blocks
.editor-block-list__block & {
left: -$block-side-ui-width - $block-side-ui-clearance;
}
left: -$block-side-ui-width - $block-side-ui-clearance;

// Mobile
display: none;
Expand Down Expand Up @@ -603,8 +534,7 @@
}

.editor-inserter__toggle,
.editor-block-mover__control,
.editor-block-settings-menu .components-button {
.editor-block-mover__control {
width: $icon-button-size;
height: $icon-button-size;
border-radius: $radius-round-rectangle;
Expand All @@ -628,11 +558,6 @@
float: left;
}
}

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

// Reset negative margins on mobile for full-width.
Expand Down Expand Up @@ -813,14 +738,8 @@
margin-right: 0;

@include break-small() {
margin-left: -$parent-block-padding - $parent-block-padding - $border-width;
margin-right: -$parent-block-padding - $parent-block-padding - $border-width;

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

// Except for wide elements, this causes a horizontal scrollbar.
[data-align="full"] & {
Expand Down Expand Up @@ -924,15 +843,6 @@
right: 0;
top: -$block-padding - $border-width;

@include break-small() {
right: -$block-parent-side-ui-clearance;
}

// Nested
.editor-block-list__block-edit & {
right: $parent-block-padding - $block-padding - $block-parent-side-ui-clearance;
}

.components-toolbar {
padding: 0;
border: none;
Expand Down Expand Up @@ -977,9 +887,9 @@
&::before {
bottom: 0;
content: "";
left: -$parent-block-padding - $block-padding;
left: -$block-padding * 2;
position: absolute;
right: -$parent-block-padding - $block-padding;
right: -$block-padding * 2;
top: 0;
}

Expand All @@ -1002,23 +912,15 @@
.editor-block-list__block .editor-warning {
z-index: z-index(".editor-warning");
position: relative;

// Stretch the warning edge to edge.
margin-left: -$parent-block-padding - $border-width;
margin-right: -$parent-block-padding - $border-width;

// Stretch the warning less in nested contexts.
.editor-block-list__block & {
margin-left: -$block-padding - $border-width;
margin-right: -$block-padding - $border-width;
}
margin-right: -$block-padding - $border-width;
margin-left: -$block-padding - $border-width;

// Pull the warning upwards to the edge, and add a negative bottom margin to compensate.
margin-bottom: -$block-padding - $border-width;
transform: translateY(-$block-padding - $border-width);

// Bigger padding on mobile where blocks are edge to edge.
padding: 10px $parent-block-padding;
padding: 10px $block-padding;
@include break-small() {
padding: 10px $block-padding;
}
Expand Down
Loading