Skip to content

Commit

Permalink
Try: Remove complex left/right block margins.
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 committed Oct 10, 2019
1 parent d229012 commit 3ca67ae
Show file tree
Hide file tree
Showing 3 changed files with 46 additions and 144 deletions.
175 changes: 45 additions & 130 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,44 @@


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

.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.
@include break-small() {
padding-left: $block-container-side-padding;
padding-right: $block-container-side-padding;
}
// Add side padding for blocks that are immediate descendants of 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.
// This side padding may be worth revisiting as more block areas than
// post_content are explored. Maybe it can be moved to .editor-styles-wrapper
// instead, for a more agnostic experience.
// If that happens, this entire section can be removed/refactored.
.block-editor-block-list__layout .block-editor-block-list__block {
padding-left: $block-padding + $border-width;
padding-right: $block-padding + $border-width;

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

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


/**
* 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 @@ -311,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 @@ -345,7 +346,7 @@
}
}

// Appender
// Appender.
&.is-typing .block-editor-block-list__side-inserter {
opacity: 0;
animation: none;
Expand All @@ -355,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 @@ -375,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 @@ -389,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 @@ -445,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 @@ -466,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 @@ -487,7 +488,7 @@
}
}

// Wide and full-wide
// Wide and full-wide.
&[data-align="full"],
&[data-align="wide"] {
clear: both;
Expand Down Expand Up @@ -531,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 @@ -556,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 - $border-width;
margin-right: -$block-padding - $border-width;
}

> .block-editor-block-list__block-edit::before {
Expand All @@ -592,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 @@ -629,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 @@ -706,38 +658,7 @@
}

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

// For floats, show block mover when block is selected, and never on hover.
&[data-align="left"],
&[data-align="right"] {
// Show always when the block is selected.
&.is-selected > .block-editor-block-list__block-edit > .block-editor-block-mover {
// Don't show on mobile, allow the special mobile toolbar to work there.
display: none;
@include break-small() {
display: block;
opacity: 1;
animation: none;

// Make wider and taller to make "safe" hover area bigger.
// The intent is to make it less likely that you hover float-adjacent
// blocks that visually appear below the block.
width: $block-side-ui-width + $block-side-ui-clearance + $block-padding + $border-width;
height: auto;
padding-bottom: $block-padding;

// Unset the negative top margin, or it might overlap the block toolbar.
margin-top: 0;
}
}

// Don't show on hover, or on the "ghost" when dragging.
&.is-hovered > .block-editor-block-list__block-edit > .block-editor-block-mover,
&.is-dragging > .block-editor-block-list__block-edit > .block-editor-block-mover {
display: none;
}
left: -$block-side-ui-width - $block-side-ui-clearance - $grid-size;
}
}

Expand Down Expand Up @@ -909,15 +830,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 @@ -996,7 +911,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,7 +1,6 @@
.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
14 changes: 1 addition & 13 deletions packages/edit-post/src/components/visual-editor/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,12 +24,6 @@
margin-right: auto;

@include break-small() {
// Compensate for side UI width.
.block-editor-block-list__block-edit {
margin-left: -$block-side-ui-width;
margin-right: -$block-side-ui-width;
}

// Center the block toolbar on wide and full-wide blocks.
// Use specific selector to not affect nested block toolbars.
&[data-align="wide"] > .block-editor-block-list__block-edit > .block-editor-block-contextual-toolbar,
Expand Down Expand Up @@ -60,14 +54,8 @@
}
}

// The base width of the title should match that of blocks even if it isn't a block
.editor-post-title {
@include break-small() {
padding-left: $block-container-side-padding;
padding-right: $block-container-side-padding;
}
}
.edit-post-visual-editor .editor-post-title__block {
// Center.
margin-left: auto;
margin-right: auto;

Expand Down

0 comments on commit 3ca67ae

Please sign in to comment.