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

Fix styling of classic block's block controls #17323

Merged
merged 8 commits into from
Sep 6, 2019
Merged

Fix styling of classic block's block controls #17323

Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
77893da
Adjust sizing of classic block controls
talldan Sep 4, 2019
c016675
Move classic block toolabr to standard position by removing styles fo…
talldan Sep 5, 2019
c42a722
Only show classic block toolbar when block is selected
talldan Sep 5, 2019
ab81da1
Avoid showing block as selected when a parent block is selected
talldan Sep 5, 2019
1c6e362
Remove unused scss variable
talldan Sep 5, 2019
7026ee9
Add some comments
talldan Sep 5, 2019
bbacdd2
Ensure toolbar is also displayed when typing
talldan Sep 5, 2019
a448f77
Minor fixes.
kjellr Sep 5, 2019
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
67 changes: 16 additions & 51 deletions packages/block-library/src/classic/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -296,6 +296,9 @@ div[data-type="core/freeform"] {
}

.block-library-classic__toolbar {
// Only display the classic toolbar when the classic block is selected or when the
// block is empty or loading and the placeholder should be displayed.
display: none;
width: auto;
margin: 0 #{ -$block-padding };
position: sticky;
Expand All @@ -306,19 +309,28 @@ div[data-type="core/freeform"] {
border-bottom: none;

// On mobile, toolbars go edge to edge.
padding: 0 $block-padding;
padding: 0;

.is-selected & {
// By using the `data-type` attribute in this selector it ensures these styles only appear
// when the block itself is selected, without it they would also show when a parent block
// is selected.
div[data-type="core/freeform"].is-selected &,
div[data-type="core/freeform"].is-typing & {
display: block;
border-color: $light-gray-800;
border-left-color: transparent;
}

// Remove the box shadow to mimic other Gutenberg UI.
.mce-tinymce {
box-shadow: none;
}

@include break-small() {
padding: 0;
}

&:empty {
height: $block-toolbar-height;
display: block;
background: #f5f5f5;
border-bottom: $border-width solid #e2e4e7;

Expand Down Expand Up @@ -366,50 +378,3 @@ div[data-type="core/freeform"] {
}
}

// We don't want the ellipsis to overlap the classic toolbar, which it will due to position sticky.
// So we move it to the right, and make room for it.
@include break-small() {
.block-editor-block-list__block[data-type="core/freeform"] {
.block-editor-block-switcher__no-switcher-icon {
display: none;
}
.block-editor-block-contextual-toolbar {
float: right;
margin-right: $icon-button-size - $block-padding + ($border-width * 3);
transform: translateY(-#{ $block-padding - $border-width });
top: $block-padding;

.block-editor-block-toolbar {
border: none;
box-shadow: none;

// Match the TinyMCE "mobile" breakpoint buttons alignment.
margin-top: 3px;
@include break-medium() {
margin-top: 0;
}

&::before {
content: "";
display: block;
border-left: 1px solid $light-gray-500;
margin-top: $grid-size-small;
margin-bottom: $grid-size-small;
}

.components-toolbar__control.components-button:hover {
background-color: transparent;
}
}

.components-toolbar {
background: transparent;
border: none;
}
}

.mce-container.mce-toolbar.mce-stack-layout-item {
padding-right: $icon-button-size;
}
}
}