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

Customizer: Implement mobile responsive block toolbar #31589

Merged
merged 4 commits into from
May 18, 2021
Merged

Customizer: Implement mobile responsive block toolbar #31589

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c4bd903
Make the block toolbar sticky and add some styles for the editor topbar
talldan May 7, 2021
4ec89ac
Set top position
talldan May 10, 2021
6b2a470
Update z-indices and responsive margins
talldan May 10, 2021
2653a73
Remove sticky positioning from topbar
talldan May 17, 2021
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
16 changes: 16 additions & 0 deletions packages/customize-widgets/src/components/header/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,19 @@
.customize-widgets-header {
position: sticky;
top: 0;

// Offset the customizer's sidebar padding.
margin: -15px ( -$grid-unit-15 ) 0 ( -$grid-unit-15 );
padding: $grid-unit-15;

// Match the customizer grey background.
background: #f0f0f1;
border-bottom: 1px solid $gray-200;

// Ensure widget UI doesn't overlap when scrolling
z-index: 8;
Copy link
Contributor

Choose a reason for hiding this comment

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

What's the reason for 8 here? 2 seems to work as well. Might be worth adding something to the comment about what we're trying to overlay.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I've move this to the z-indexes file and added a better comment 👍

Also split the topbar and toolbar indices. I figure it's best to make them as high as possible as nothing else should overlap them other than the odd element (popovers, tooltips) that already has a much higher z-index.

}

.customize-widgets-header-toolbar {
display: flex;
border: none;
Expand Down
16 changes: 16 additions & 0 deletions packages/customize-widgets/src/components/sidebar-block-editor/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,19 @@
.block-editor-block-contextual-toolbar.is-fixed {
// The top position used for the 'sticky' positioning.
top: $grid-unit-60 + $border-width;

// Offset the customizer's sidebar padding.
margin-left: -$grid-unit-15;
margin-right: -$grid-unit-15;
width: calc(100% + #{ $grid-unit-30 });

// Scroll sideways.
overflow-y: auto;

// Appear underneath overlapping customizer UI.
z-index: 8;
}

.customize-control-sidebar_block_editor .block-editor-block-list__block-popover {
position: fixed;
// Appear over block placeholders, but under widgets page headings.
Expand Down
11 changes: 8 additions & 3 deletions packages/customize-widgets/src/controls/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
// Adds a white background to the block based widget section.
// #customize-theme-controls id is required to add specificity.
#customize-theme-controls .customize-widgets__sidebar-section {
// Additional ids and class names are used in the selector for
// added specificity.
#customize-theme-controls .customize-pane-child.customize-widgets__sidebar-section {
// Override the default 'overflow' to allow the
// editor toolbars to be sticky.
overflow: unset;

// Make the entire sidebar background white.
min-height: 100%;
background-color: $white;
}