Skip to content

Commit

Permalink
Extract WordPress specific styles from the BlockTools component (#54356)
Browse files Browse the repository at this point in the history
  • Loading branch information
@youknowriad
youknowriad authored Sep 12, 2023
1 parent c04e420 commit f76d48a
Show file tree
Hide file tree
Showing 5 changed files with 311 additions and 99 deletions.
98 changes: 0 additions & 98 deletions packages/block-editor/src/components/block-tools/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,9 +89,6 @@
* Block Toolbar when contextual.
*/

// Base left position for the toolbar when fixed.
@include editor-left(".block-editor-block-contextual-toolbar.is-fixed");

.block-editor-block-contextual-toolbar {
// Block UI appearance.
display: inline-flex;
Expand All @@ -105,11 +102,6 @@
}

&.is-fixed {
position: sticky;
top: 0;
z-index: z-index(".block-editor-block-popover");
display: block;
width: 100%;
overflow: hidden;

.block-editor-block-toolbar {
Expand Down Expand Up @@ -137,51 +129,8 @@
background: linear-gradient(to right, $white, transparent);
}

// on desktop and tablet viewports the toolbar is fixed
// on top of interface header
$toolbar-margin: $grid-unit-80 * 3 - 2 * $grid-unit + $grid-unit-05;
@include break-medium() {
&.is-fixed {
// leave room for block inserter, undo and redo, list view
margin-left: $toolbar-margin;
// position on top of interface header
position: fixed;
top: $admin-bar-height;
// Don't fill up when empty
min-height: initial;
// remove the border
border-bottom: none;
// has to be flex for collapse button to fit
display: flex;

// Mimic the height of the parent, vertically align center, and provide a max-height.
height: $header-height;
align-items: center;

&.is-collapsed {
width: initial;
}

&:empty {
width: initial;
}

.is-fullscreen-mode & {
// leave room for block inserter, undo and redo, list view
// and some margin left
margin-left: $grid-unit-80 * 4 - 2 * $grid-unit;

top: 0;

&.is-collapsed {
width: initial;
}

&:empty {
width: initial;
}
}

& > .block-editor-block-toolbar {
flex-grow: initial;
width: initial;
Expand Down Expand Up @@ -264,13 +213,6 @@
}

.show-icon-labels & {

margin-left: $grid-unit-80 + 2 * $grid-unit; // inserter and margin

.is-fullscreen-mode & {
margin-left: $grid-unit * 18; // site hub, inserter and margin
}

.block-editor-block-parent-selector .block-editor-block-parent-selector__button::after {
left: 0;
}
Expand All @@ -287,14 +229,6 @@
}
}
}

.blocks-widgets-container & {
margin-left: $grid-unit-80 * 2.4;

&.is-collapsed {
margin-left: $grid-unit-80 * 4.2;
}
}
}

&.is-fixed .block-editor-block-parent-selector {
Expand Down Expand Up @@ -332,38 +266,6 @@
}
}
}

// on tablet viewports the toolbar is fixed
// on top of interface header and covers the whole header
// except for the inserter on the left
@include break-medium() {
&.is-fixed {
width: calc(100% - #{$toolbar-margin});

.show-icon-labels & {
width: calc(100% + 40px - #{$toolbar-margin}); //there are no undo, redo and list view buttons
}

}
}

// on desktop viewports the toolbar is fixed
// on top of interface header and leaves room
// for the block inserter the publish button
@include break-large() {
&.is-fixed {
width: auto;
.show-icon-labels & {
width: auto; //there are no undo, redo and list view buttons
}
}
.is-fullscreen-mode &.is-fixed {
// in full screen mode we need to account for
// the combined with of the tools at the right of the header and the margin left
// of the toolbar which includes four buttons
width: calc(100% - 280px - #{4 * $grid-unit-80});
}
}
}

/**
Expand Down
89 changes: 89 additions & 0 deletions packages/edit-post/src/components/visual-editor/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,3 +67,92 @@
// See also https://www.w3.org/TR/CSS22/visudet.html#the-height-property
flex-grow: 1;
}

// Fixed contextual toolbar
@include editor-left(".edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed");

.edit-post-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
position: sticky;
top: 0;
z-index: z-index(".block-editor-block-popover");
display: block;
width: 100%;

// on desktop and tablet viewports the toolbar is fixed
// on top of interface header
$toolbar-margin: $grid-unit-80 * 3 - 2 * $grid-unit + $grid-unit-05;

@include break-medium() {
// leave room for block inserter, undo and redo, list view
margin-left: $toolbar-margin;
// position on top of interface header
position: fixed;
top: $admin-bar-height;
// Don't fill up when empty
min-height: initial;
// remove the border
border-bottom: none;
// has to be flex for collapse button to fit
display: flex;

// Mimic the height of the parent, vertically align center, and provide a max-height.
height: $header-height;
align-items: center;


// on tablet viewports the toolbar is fixed
// on top of interface header and covers the whole header
// except for the inserter on the left
width: calc(100% - #{$toolbar-margin});

&.is-collapsed {
width: initial;
}

&:empty {
width: initial;
}

.is-fullscreen-mode & {
// leave room for block inserter, undo and redo, list view
// and some margin left
margin-left: $grid-unit-80 * 4 - 2 * $grid-unit;

top: 0;

&.is-collapsed {
width: initial;
}

&:empty {
width: initial;
}
}

.show-icon-labels & {
width: calc(100% + 40px - #{$toolbar-margin}); //there are no undo, redo and list view buttons
margin-left: $grid-unit-80 + 2 * $grid-unit; // inserter and margin

.is-fullscreen-mode & {
margin-left: $grid-unit * 18; // site hub, inserter and margin
}
}
}

// on desktop viewports the toolbar is fixed
// on top of interface header and leaves room
// for the block inserter the publish button
@include break-large() {
width: auto;
.show-icon-labels & {
width: auto; //there are no undo, redo and list view buttons
}

.is-fullscreen-mode & {
// in full screen mode we need to account for
// the combined with of the tools at the right of the header and the margin left
// of the toolbar which includes four buttons
width: calc(100% - 280px - #{4 * $grid-unit-80});
}
}
}
86 changes: 86 additions & 0 deletions packages/edit-site/src/components/block-editor/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -173,3 +173,89 @@
}
}

// Fixed contextual toolbar
@include editor-left(".edit-site-visual-editor .block-editor-block-contextual-toolbar.is-fixed");

.edit-site-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
position: sticky;
top: 0;
z-index: z-index(".block-editor-block-popover");
display: block;
width: 100%;

// on desktop and tablet viewports the toolbar is fixed
// on top of interface header
$toolbar-margin: $grid-unit-80 * 3 - 2 * $grid-unit + $grid-unit-05;

@include break-medium() {
// leave room for block inserter, undo and redo, list view
margin-left: $toolbar-margin;
// position on top of interface header
position: fixed;
top: $admin-bar-height;
// Don't fill up when empty
min-height: initial;
// has to be flex for collapse button to fit
display: flex;

// Mimic the height of the parent, vertically align center, and provide a max-height.
height: $header-height;
align-items: center;


// on tablet viewports the toolbar is fixed
// on top of interface header and covers the whole header
// except for the inserter on the left
width: calc(100% - #{$toolbar-margin});

&.is-collapsed {
width: initial;
}

&:empty {
width: initial;
}

.is-fullscreen-mode & {
// leave room for block inserter, undo and redo, list view
// and some margin left
margin-left: $grid-unit-80 * 4 - 2 * $grid-unit;

top: 0;

&.is-collapsed {
width: initial;
}

&:empty {
width: initial;
}
}

.show-icon-labels & {
margin-left: $grid-unit-80 + 2 * $grid-unit; // inserter and margin
width: calc(100% + 40px - #{$toolbar-margin}); //there are no undo, redo and list view buttons

.is-fullscreen-mode & {
margin-left: $grid-unit * 18; // site hub, inserter and margin
}
}
}

// on desktop viewports the toolbar is fixed
// on top of interface header and leaves room
// for the block inserter the publish button
@include break-large() {
width: auto;
.show-icon-labels & {
width: auto; //there are no undo, redo and list view buttons
}

.is-fullscreen-mode & {
// in full screen mode we need to account for
// the combined with of the tools at the right of the header and the margin left
// of the toolbar which includes four buttons
width: calc(100% - 280px - #{4 * $grid-unit-80});
}
}
}
Loading

0 comments on commit f76d48a

Please sign in to comment.