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: Refactor block margins #5217

Merged
merged 8 commits into from
Mar 15, 2018
Merged

Try: Refactor block margins #5217

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
4cbc28d
Try: Allow margins to collapse
Feb 23, 2018
ba7ace1
Fix _some_ breakage per rebase.
Mar 13, 2018
2a30479
Try to simplify the quick-buttons in the appender
Mar 13, 2018
e98d0ae
Fix issues with positioning.
Mar 13, 2018
d99b8e0
Fix so it's the same as master.
Mar 13, 2018
de3cb32
Clean up appender CSS.
Mar 13, 2018
e87bb0b
Fix regression per rebase.
Mar 15, 2018
5723e68
Remove regressed padding.
Mar 15, 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
2 changes: 1 addition & 1 deletion blocks/library/cover-image/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
line-height: 1.25;
z-index: 1;
margin-bottom: 0;
max-width: $visual-editor-max-width;
max-width: $content-width;
padding: $block-padding;
text-align: center;

Expand Down
6 changes: 4 additions & 2 deletions blocks/library/gallery/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
.wp-block-gallery:not( .components-placeholder ) {
margin: -8px;
.wp-block-gallery:not( .components-placeholder ):not( .alignfull ) {
// allow gallery items to go edge to edge
margin-left: -8px;
margin-right: -8px;
}

.blocks-gallery-item {
Expand Down
4 changes: 2 additions & 2 deletions blocks/library/more/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,8 @@
content: '';
position: absolute;
top: calc( 50% );
left: $block-mover-padding-visible + $block-padding;
right: $block-mover-padding-visible + $block-padding;
left: $block-side-ui-padding + $block-padding;
right: $block-side-ui-padding + $block-padding;
border-top: 3px dashed $light-gray-700;
z-index: z-index( '.editor-block-list__block .wp-block-more:before' );
}
Expand Down
9 changes: 7 additions & 2 deletions edit-post/assets/stylesheets/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
/**
* Breakpoint mixins
*/

@mixin break-huge() {
@media ( min-width: #{ ( $break-huge ) } ) {
@content;
Expand Down Expand Up @@ -34,6 +38,7 @@
}
}


/**
* Long content fade mixin
*
Expand Down Expand Up @@ -108,8 +113,8 @@
}
}

$visual-editor-max-width-padding: $visual-editor-max-width + $block-mover-padding-visible + $block-mover-padding-visible;
$float-margin: calc( 50% - #{ $visual-editor-max-width-padding / 2 } );
$content-width-padding: $content-width + $block-side-ui-padding + $block-side-ui-padding;
$float-margin: calc( 50% - #{ $content-width-padding / 2 } );

/**
* Button states and focus styles
Expand Down
14 changes: 7 additions & 7 deletions edit-post/assets/stylesheets/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,23 +29,23 @@ $admin-sidebar-width-collapsed: 36px;
$shadow-popover: 0px 3px 20px rgba( $dark-gray-900, .1 ), 0px 1px 3px rgba( $dark-gray-900, .1 );
$shadow-toolbar: 0px 2px 10px rgba( $dark-gray-900, .1 ), 0px 0px 2px rgba( $dark-gray-900, .1 );

// Editor
$text-editor-max-width: 760px;
$visual-editor-max-width: 636px;
// Editor Widths
$sidebar-width: 280px;
$text-editor-max-width: 760px; // @todo: merge with variable below
$content-width: 636px; // @todo: leverage theme $content_width variable

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

// Blocks
$block-padding: 14px;
$block-mover-margin: 18px;
$block-spacing: 4px;
// old $block-mover-padding-visible: 32px;
$block-mover-padding-visible: $icon-button-size-small + $icon-button-size-small;

$block-side-ui-padding: 36px;

// Buttons & UI Widgets
$button-style__radius-roundrect: 4px;
Expand Down
2 changes: 1 addition & 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 @@ -4,7 +4,7 @@

$z-layers: (
'.editor-block-switcher__arrow': 1,
'.editor-block-list__block:before': -1,
'.editor-block-list__block-edit:before': -1,
'.editor-block-list__block .wp-block-more:before': -1,
'.editor-block-list__block {core/image aligned left or right}': 20,
'.editor-block-list__block {core/image aligned wide or fullwide}': 20,
Expand Down
2 changes: 1 addition & 1 deletion edit-post/components/layout/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@
clear: both;

.edit-post-meta-boxes-area {
max-width: $visual-editor-max-width;
max-width: $content-width;
margin: auto;
}
}
Expand Down
53 changes: 25 additions & 28 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 @@ -27,33 +27,36 @@
.edit-post-visual-editor .editor-writing-flow__click-redirect {
// Collapse to minimum height of 50px, to fully occupy editor bottom pad.
height: 50px;
width: $visual-editor-max-width;
width: $content-width;
// Offset for: Visual editor padding, block (default appender) margin.
margin: #{ -1 * $block-spacing } auto -50px;
}

.edit-post-visual-editor .editor-block-list__block {
margin-left: auto;
margin-right: auto;
max-width: $visual-editor-max-width + ( 2 * $block-mover-padding-visible );
max-width: $content-width;

@include break-small() {
.editor-block-list__block-edit {
margin-left: -$block-side-ui-padding;
margin-right: -$block-side-ui-padding;
}

&[data-align="full"] .editor-block-contextual-toolbar,
&[data-align="wide"] .editor-block-contextual-toolbar {
max-width: $content-width + 2; // 1px border left and right
margin-left: auto;
margin-right: auto;
}
}

&[data-align="wide"] {
max-width: 1100px;
}

&[data-align="full"] {
max-width: 100%;
}

&[data-align="full"],
&[data-align="wide"] {
.editor-block-contextual-toolbar {
@include break-small() {
width: $visual-editor-max-width + 2; // 1px border left and right
}
margin-left: auto;
margin-right: auto;
}
max-width: none;
}
}

Expand All @@ -73,26 +76,26 @@
.edit-post-visual-editor .editor-post-title {
margin-left: auto;
margin-right: auto;
max-width: $visual-editor-max-width + ( 2 * $block-mover-padding-visible );
max-width: $content-width + ( 2 * $block-side-ui-padding );

.editor-post-permalink {
left: $block-padding;
right: $block-padding;
}

@include break-small() {
padding: 5px #{ $block-mover-padding-visible - 1px }; // subtract 1px border, because this is an outline
padding: 5px #{ $block-side-ui-padding - 1px }; // subtract 1px border, because this is an outline

.editor-post-permalink {
left: $block-mover-padding-visible;
right: $block-mover-padding-visible;
left: $block-side-ui-padding;
right: $block-side-ui-padding;
}
}
}

.edit-post-visual-editor .editor-default-block-appender {
max-width: $visual-editor-max-width + ( 2 * $block-mover-padding-visible );
clear: left;
// Default to centered and content-width, like blocks
max-width: $content-width;
margin-left: auto;
margin-right: auto;
position: relative;
Expand All @@ -104,19 +107,13 @@
}

@include break-small() {
padding: 0 $block-mover-padding-visible; // don't subtract 1px border because it's a border not an outline

.components-drop-zone {
left: $block-mover-padding-visible;
right: $block-mover-padding-visible;
}

.editor-default-block-appender__content {
padding: 0 $block-padding;
}
}
}

.edit-post-visual-editor .editor-block-list__layout > .editor-block-list__insertion-point {
max-width: $visual-editor-max-width + ( 2 * $block-mover-padding-visible );
max-width: $content-width;
position: relative;
}
Loading