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

Try: Remove/refactor complex left/right block margins #17877

Merged
merged 1 commit into from
Nov 7, 2019
Merged

Try: Remove/refactor complex left/right block margins #17877

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 1 addition & 1 deletion packages/base-styles/_variables.scss
View file
Open in desktop
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
Open in desktop
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;
Copy link
Member

Choose a reason for hiding this comment

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

I think there may be a styling issue introduced by these changes.

  1. Create a Table block
  2. Change its alignment to full width
  3. Check mobile screen

image

}

> .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
Open in desktop
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
Open in desktop
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