From f76d48a59bdf1f1d744fae2a2e4763b1579bcb34 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 12 Sep 2023 09:34:44 +0100 Subject: [PATCH] Extract WordPress specific styles from the BlockTools component (#54356) --- .../src/components/block-tools/style.scss | 98 ------------------- .../src/components/visual-editor/style.scss | 89 +++++++++++++++++ .../src/components/block-editor/style.scss | 86 ++++++++++++++++ .../style.scss | 98 +++++++++++++++++++ storybook/stories/playground/index.story.js | 39 +++++++- 5 files changed, 311 insertions(+), 99 deletions(-) diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss index a6b7d636f491ba..796c513d6d7c2c 100644 --- a/packages/block-editor/src/components/block-tools/style.scss +++ b/packages/block-editor/src/components/block-tools/style.scss @@ -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; @@ -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 { @@ -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; @@ -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; } @@ -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 { @@ -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}); - } - } } /** diff --git a/packages/edit-post/src/components/visual-editor/style.scss b/packages/edit-post/src/components/visual-editor/style.scss index fa61cc9889cf9c..40043958fcaad5 100644 --- a/packages/edit-post/src/components/visual-editor/style.scss +++ b/packages/edit-post/src/components/visual-editor/style.scss @@ -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}); + } + } +} diff --git a/packages/edit-site/src/components/block-editor/style.scss b/packages/edit-site/src/components/block-editor/style.scss index 15fc8e180f818f..0ed00c91097a30 100644 --- a/packages/edit-site/src/components/block-editor/style.scss +++ b/packages/edit-site/src/components/block-editor/style.scss @@ -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}); + } + } +} diff --git a/packages/edit-widgets/src/components/widget-areas-block-editor-content/style.scss b/packages/edit-widgets/src/components/widget-areas-block-editor-content/style.scss index 97a084b220393d..35e83c7339e1db 100644 --- a/packages/edit-widgets/src/components/widget-areas-block-editor-content/style.scss +++ b/packages/edit-widgets/src/components/widget-areas-block-editor-content/style.scss @@ -35,3 +35,101 @@ } } } + +// Fixed contextual toolbar +@include editor-left(".edit-widgets-block-editor .block-editor-block-contextual-toolbar.is-fixed"); + + +.edit-widgets-block-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 & { + 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 + } + } + + .blocks-widgets-container & { + margin-left: $grid-unit-80 * 2.4; + + &.is-collapsed { + margin-left: $grid-unit-80 * 4.2; + } + } + } + + // 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}); + } + } +} diff --git a/storybook/stories/playground/index.story.js b/storybook/stories/playground/index.story.js index bde670adc009d4..d3d44e0dedf707 100644 --- a/storybook/stories/playground/index.story.js +++ b/storybook/stories/playground/index.story.js @@ -33,7 +33,11 @@ function App() { } ); return ( -
+ // eslint-disable-next-line jsx-a11y/no-static-element-interactions +
event.stopPropagation() } + > { return ; }; + +function EditorBox() { + const [ blocks, updateBlocks ] = useState( [] ); + + useEffect( () => { + registerCoreBlocks(); + }, [] ); + + return ( + // eslint-disable-next-line jsx-a11y/no-static-element-interactions +
event.stopPropagation() } + > + + + + +
+ ); +} + +export const Box = () => { + return ; +};