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.

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

Adjust margin rules for nested blocks. #9735

Merged
merged 1 commit into from Sep 10, 2018
Merged

Adjust margin rules for nested blocks. #9735

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.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 0 additions & 4 deletions packages/block-library/src/columns/editor.scss
View file
Open in desktop
Expand Up @@ -39,10 +39,6 @@
.editor-block-list__layout .editor-block-list__block[data-type="core/column"] > .editor-block-list__block-edit {
margin-top: 0;
margin-bottom: 0;

// This uncollapses margins on this parent container.
padding-top: 0.1px;
padding-bottom: 0.1px;
}

.wp-block-columns {
Expand Down
17 changes: 6 additions & 11 deletions packages/editor/src/components/block-list/style.scss
View file
Open in desktop
Expand Up @@ -126,7 +126,7 @@
padding-right: $block-container-side-padding;
}

// Don't add side padding for nested blocks, and compensate for block padding
// Don't add side padding for nested blocks.
.editor-block-list__block & {
// Compensate for side UI.
padding-left: 0;
Expand All @@ -135,24 +135,19 @@
// Compensate for block padding horizontally.
margin-left: -$block-padding;
margin-right: -$block-padding;

// Compensate for block padding.
margin-top: -$block-padding;
margin-bottom: -$block-padding;
}

// Adjust the spacing of the appender, or the first block, to sit near the title.
.editor-default-block-appender .editor-default-block-appender__content,
.editor-block-list__block:first-child .editor-block-list__block-edit {
> .editor-default-block-appender > .editor-default-block-appender__content,
> .editor-block-list__block:first-child > .editor-block-list__block-edit {
margin-top: $block-padding - $block-spacing / 2;
}

// Space every block, and the default appender, using margins.
// This allows margins to collapse, which gives a better representation of how it looks on the frontend.
.editor-default-block-appender__content,
.editor-block-list__block .editor-block-list__block-edit,
.editor-block-list__layout .editor-block-list__block .editor-block-list__block-edit,
.editor-block-list__layout .editor-default-block-appender .editor-default-block-appender__content { // Explicitly target nested blocks, as those need to override the preceding rule.
> .editor-default-block-appender__content,
> .editor-block-list__block > .editor-block-list__block-edit,
> .editor-block-list__layout > .editor-block-list__block > .editor-block-list__block-edit {
margin-top: $block-padding * 2 + $block-spacing;
margin-bottom: $block-padding * 2 + $block-spacing;
}
Expand Down