Skip to content

Commit

Permalink
Try: Remove complex left/right block margins. (#17877)
Browse files Browse the repository at this point in the history 
Those margins were created to accommodate a mover control that was available on hover. Given the mover control is now on-select only, this margin is no longer necessary.

This is a work in progress. When done it needs to not land in 5.3, and it will need a dev-note when ready.
  • Loading branch information
@jasmussen
jasmussen authored Nov 7, 2019
1 parent a5c974b commit 03b1e80
Show file tree
Hide file tree
Showing 5 changed files with 61 additions and 127 deletions.
2 changes: 1 addition & 1 deletion packages/base-styles/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ $shadow-modal: 0 3px 30px rgba($dark-gray-900, 0.2);

// Editor Widths
$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.
$content-width: 580px; // This is optimized for 70 characters.

// Block UI
$border-width: 1px;
Expand Down
149 changes: 43 additions & 106 deletions packages/block-editor/src/components/block-list/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,43 +35,41 @@


/**
* General layout
* General Post Content Layout
*/

// Add side padding for the main block container, currently post_content.
// The purpose of this padding is to ensure that on small viewports, there is
// room for the block border that sits 14px ($block-padding) offset from the
// block footprint, as well as the side-UI.
.block-editor-block-list__layout {
// Make room in the main content column for the side UI.
// The side UI uses negative margins to position itself so as to not affect the block width.
padding-left: $block-padding;
padding-right: $block-padding;

// Beyond the mobile breakpoint, compensate for side UI.
@include break-small() {
padding-left: $block-container-side-padding;
padding-right: $block-container-side-padding;
padding-left: $block-padding + $block-side-ui-width + $block-padding + $border-width * 2;
padding-right: $block-padding + $block-side-ui-width + $block-padding + $border-width * 2;
}

// Don't add side padding for nested blocks.
.block-editor-block-list__block & {
// Compensate for side UI.
// Don't propogate that padding to nested blocks.
.block-editor-block-list__layout {
padding-left: 0;
padding-right: 0;

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


/**
* Notices & Block Selected/Hover Styles.
*/

.block-editor-block-list__layout .block-editor-block-list__block {
position: relative;
padding-left: $block-padding;
padding-right: $block-padding;

// Break long strings of text without spaces so they don't overflow the block.
overflow-wrap: break-word;

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

/**
* Notices
*/
Expand Down Expand Up @@ -314,7 +312,7 @@
}
}

&.has-warning.is-selected .editor-block-list__block-edit::before {
&.has-warning.is-selected .block-editor-block-list__block-edit::before {
// Use opacity to work in various editor styles.
border-color: $dark-opacity-light-800;
border-left-color: transparent;
Expand Down Expand Up @@ -348,7 +346,7 @@
}
}

// Appender
// Appender.
&.is-typing .block-editor-block-list__side-inserter {
opacity: 0;
animation: none;
Expand All @@ -358,7 +356,7 @@
@include edit-post__fade-in-animation;
}

// Reusable blocks
// Reusable blocks.
&.is-reusable > .block-editor-block-list__block-edit::before {
border: $border-width dashed $dark-opacity-light-500;

Expand All @@ -378,7 +376,7 @@
}
}

// Reusable Blocks clickthrough overlays
// Reusable Blocks clickthrough overlays.
&.is-reusable > .block-editor-block-list__block-edit .block-editor-inner-blocks.has-overlay {
// Remove only the top click overlay.
&::after {
Expand All @@ -392,7 +390,7 @@
}


// Alignments
// Alignments.
&[data-align="left"],
&[data-align="right"] {
// Without z-index, won't be clickable as "above" adjacent content.
Expand Down Expand Up @@ -448,7 +446,7 @@
}
}

// Left
// Left.
&[data-align="left"] {
// This is in the editor only; the image should be floated on the frontend.
> .block-editor-block-list__block-edit {
Expand All @@ -469,7 +467,7 @@
}
}

// Right
// Right.
&[data-align="right"] {
// Right: This is in the editor only; the image should be floated on the frontend.
> .block-editor-block-list__block-edit {
Expand All @@ -490,7 +488,7 @@
}
}

// Wide and full-wide
// Wide and full-wide.
&[data-align="full"],
&[data-align="wide"] {
clear: both;
Expand Down Expand Up @@ -534,23 +532,23 @@
// Align block toolbar to floated content.
// Extra specificity is needed to avoid applying this to innerblocks.
@include break-small() {
> .editor-block-list__block-edit > .block-editor-block-contextual-toolbar > .block-editor-block-toolbar {
> .block-editor-block-list__block-edit > .block-editor-block-contextual-toolbar > .block-editor-block-toolbar {
/*!rtl:begin:ignore*/
left: $block-side-ui-width * 3 + ($grid-size-small * 1.5);
/*!rtl:end:ignore*/
}
}

@include break-xlarge() {
> .editor-block-list__block-edit > .block-editor-block-contextual-toolbar > .block-editor-block-toolbar {
> .block-editor-block-list__block-edit > .block-editor-block-contextual-toolbar > .block-editor-block-toolbar {
/*!rtl:begin:ignore*/
left: $block-padding;
/*!rtl:end:ignore*/
}
}
}

// Wide
// Wide.
&[data-align="wide"] {
// Position mover
&.is-multi-selected > .block-editor-block-mover,
Expand All @@ -559,33 +557,16 @@
}
}

// Full-wide
// Full-wide.
&[data-align="full"] {
// Position hover label on the left for the top level block.
> .block-editor-block-list__block-edit > .block-editor-block-list__breadcrumb {
left: 0;
}

// Compensate for main container padding and subtract border.
@include break-small() {
margin-left: -$block-side-ui-width - $block-padding - $block-side-ui-clearance - $border-width;
margin-right: -$block-side-ui-width - $block-padding - $block-side-ui-clearance - $border-width;
}

> .block-editor-block-list__block-edit {
margin-left: -$block-padding;
margin-right: -$block-padding;

@include break-small() {
margin-left: -$block-side-ui-width - $block-side-ui-clearance - $block-padding;
margin-right: -$block-side-ui-width - $block-side-ui-clearance - $block-padding;
}

// This explicitly sets the width of the block, to override
// `width: fit-content` from the image block.
figure {
width: 100%;
}
margin-left: -$block-padding - $block-padding - $block-side-ui-width - $border-width - $border-width;
margin-right: -$block-padding - $block-padding - $block-side-ui-width - $border-width - $border-width;
}

> .block-editor-block-list__block-edit::before {
Expand All @@ -595,19 +576,19 @@
border-right-width: 0;
}

// Position mover
// Position mover.
&.is-multi-selected > .block-editor-block-mover,
> .block-editor-block-list__block-edit > .block-editor-block-mover {
left: $border-width;
left: $block-padding;
}
}

// Clear floats
// Clear floats.
&[data-clear="true"] {
float: none;
}

// Dropzones
// Dropzones.
.block-editor-block-drop-zone {
top: -4px;
bottom: -3px;
Expand All @@ -632,39 +613,7 @@


/**
* Styles that affect inner-block containers (nested blocks).
*/

// Hide trailing appender for non-empty blocks, until selected.
.block-editor-inner-blocks {
.block-editor-block-list__block + .block-list-appender {
display: none;

// When a parent container is selected, show the appender.
.is-selected & {
display: block;
}
}

// When a child of a parent is selected, show the adjacent appender.
.block-editor-block-list__block.is-selected + .block-list-appender {
display: block;
}

/* @todo:
The two rules above can be simplified & combined when https://github.com/WordPress/gutenberg/pull/14961 is merged,
into the following:
.is-selected &,
.has-child-selected & {
display: block;
}
*/
}


/**
* Left and right side UI; Unified toolbar on Mobile
* Left and right side UI; Unified toolbar on Mobile.
*/

.block-editor-block-list__block {
Expand Down Expand Up @@ -694,10 +643,8 @@
}

// Left side UI.
&.is-multi-selected > .block-editor-block-mover,
> .block-editor-block-list__block-edit > .block-editor-block-mover {
padding-right: $block-side-ui-clearance;

> .block-editor-block-list__block-edit > .block-editor-block-mover,
&.is-multi-selected > .block-editor-block-mover {
// Position for top level blocks.
left: -$block-side-ui-width - $block-side-ui-clearance - $block-padding - $border-width - $grid-size;

Expand All @@ -707,10 +654,6 @@
display: block;
}
}

&.is-multi-selected > .block-editor-block-mover {
left: -$block-side-ui-width - $block-side-ui-clearance;
}
}


Expand Down Expand Up @@ -881,15 +824,9 @@
height: $block-padding * 2;
bottom: auto;

// Go edge to edge on mobile.
left: 0;
right: 0;

// Beyond mobile, make sure the toolbar overlaps the hover style.
@include break-small() {
left: -$border-width;
right: -$border-width;
}
// Match width of actual content.
left: $block-padding;
right: $block-padding;
}

&[data-align="full"] > .block-editor-block-list__insertion-point {
Expand Down Expand Up @@ -968,7 +905,7 @@
box-shadow: none;
}

.editor-block-toolbar {
.block-editor-block-toolbar {
border-left: none;
}
}
Expand Down
1 change: 0 additions & 1 deletion packages/block-editor/src/components/block-mover/style.scss
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
.block-editor-block-mover {
@include break-small() {
min-height: $empty-paragraph-height;
opacity: 0;
background: $white;
border: 1px solid $dark-opacity-light-800;
Expand Down
13 changes: 5 additions & 8 deletions packages/block-library/src/columns/editor.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,6 @@
// Potentially the rules here can apply to all nested blocks and enable stacking, in which case it should be moved elsewhere
// When using CSS grid, margins do not collapse on the container.
.wp-block-columns .editor-block-list__layout {
margin-left: 0;
margin-right: 0;

// This max-width is used to constrain the main editor column, it should not cascade into columns
.editor-block-list__block {
max-width: none;
Expand Down Expand Up @@ -62,25 +59,25 @@

// Beyond mobile, allow 2 columns.
@include break-small() {
flex-basis: calc(50% - (#{$grid-size-large} + #{$block-padding * 2}));
flex-basis: calc(50% - (#{$grid-size-large}));
flex-grow: 0;
margin-left: $block-padding;
margin-right: $block-padding;
margin-left: 0;
margin-right: 0;
}

// Add space between columns. Themes can customize this if they wish to work differently.
// This has to match the same padding applied in style.scss.
// Only apply this beyond the mobile breakpoint, as there's only a single column on mobile.
@include break-small() {
&:nth-child(even) {
margin-left: calc(#{$grid-size-large * 2} + #{$block-padding});
margin-left: calc(#{$grid-size-large * 2});
}
}

// When columns are in a single row, add space before all except the first.
@include break-medium() {
&:not(:first-child) {
margin-left: calc(#{$grid-size-large * 2} + #{$block-padding});
margin-left: calc(#{$grid-size-large * 2});
}
}

Expand Down
Loading

0 comments on commit 03b1e80

Please sign in to comment.