diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js index da96e5c469d6f..4d866a6994ec6 100644 --- a/packages/block-editor/src/components/block-list/index.js +++ b/packages/block-editor/src/components/block-list/index.js @@ -15,9 +15,8 @@ import { useViewportMatch, useMergeRefs } from '@wordpress/compose'; import BlockListBlock from './block'; import BlockListAppender from '../block-list-appender'; import useBlockDropZone from '../use-block-drop-zone'; -import InsertionPoint from './insertion-point'; import { useInBetweenInserter } from './use-in-between-inserter'; -import BlockPopover from './block-popover'; +import BlockTools from '../block-tools'; import { store as blockEditorStore } from '../../store'; import { usePreParsePatterns } from '../../utils/pre-parse-patterns'; import { LayoutProvider, defaultLayout } from './layout'; @@ -68,12 +67,11 @@ function Root( { className, children } ) { export default function BlockList( { className, __experimentalLayout } ) { usePreParsePatterns(); return ( - - + - + ); } diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss index fa78caa7c4be2..ebe5d59097395 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -341,113 +341,6 @@ cursor: grab; } -.block-editor-block-list__insertion-point { - position: absolute; -} - -.block-editor-block-list__insertion-point-indicator { - position: absolute; - background: var(--wp-admin-theme-color); - - // Provide a muted animation that isn't too noisy. - animation: block-editor-inserter__toggle__fade-in-animation-delayed 0.3s ease; - animation-fill-mode: forwards; - @include reduce-motion("animation"); - - .block-editor-block-list__insertion-point.is-vertical > & { - top: 50%; - right: 0; - left: 0; - height: $border-width; - } - - .block-editor-block-list__insertion-point.is-horizontal > & { - top: 0; - right: 0; - left: 50%; - height: 100%; - width: $border-width; - } -} - -// This is the clickable plus. -.block-editor-block-list__insertion-point-inserter { - // Don't show on mobile. - display: none; - position: absolute; - @include break-mobile() { - display: flex; - } - - justify-content: center; - - top: calc(50% - #{ $button-size-small / 2 }); - left: calc(50% - #{ $button-size-small / 2 }); -} - -.block-editor-block-list__block-popover-inserter { - position: absolute; - top: -9999em; - margin-bottom: $block-padding; - - &.is-visible { - position: static; - } -} - -// Sibling inserter / "inbetweenserter". -.block-editor-block-list__empty-block-inserter, -.block-editor-default-block-appender, -.block-editor-block-list__insertion-point-inserter, -.block-editor-block-list__block-popover-inserter { - .block-editor-inserter__toggle.components-button.has-icon { - // Basic look - background: $gray-900; - border-radius: $radius-block-ui; - color: $white; - padding: 0; - - // Special dimensions for this button. - min-width: $button-size-small; - height: $button-size-small; - - &:hover { - color: $white; - background: var(--wp-admin-theme-color); - } - } -} - -.block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button.has-icon { - background: var(--wp-admin-theme-color); - &:hover { - background: $gray-900; - } -} - - -.block-editor-block-list__insertion-point-inserter, -.block-editor-block-list__block-popover-inserter { - .block-editor-inserter__toggle.components-button { - // Fade it in after a delay. - animation: block-editor-inserter__toggle__fade-in-animation-delayed 0.3s ease; - animation-fill-mode: forwards; - @include reduce-motion("animation"); - } -} - -@keyframes block-editor-inserter__toggle__fade-in-animation-delayed { - 0% { - opacity: 0; - } - 60% { - opacity: 0; - } - 100% { - opacity: 1; - } -} - @keyframes block-editor-inserter__toggle__fade-in-animation { from { opacity: 0; @@ -497,133 +390,6 @@ } -/** - * Block Toolbar when contextual. - */ - -.block-editor-block-contextual-toolbar { - // Block UI appearance. - border: $border-width solid $gray-900; - border-radius: $radius-block-ui; - background-color: $white; - - .block-editor-block-toolbar .components-toolbar-group, - .block-editor-block-toolbar .components-toolbar { - border-right-color: $gray-900; - } - - .block-editor-block-mover-button { - overflow: hidden; - } - - // Extra specificity to override standard toolbar button styles. - .block-editor-block-mover.is-horizontal .block-editor-block-mover-button.block-editor-block-mover-button { - min-width: $block-toolbar-height/2; - width: $block-toolbar-height/2; - - svg { - min-width: $block-toolbar-height/2; - } - } -} - -// Position mover arrows for both toolbars. -.block-editor-block-contextual-toolbar, -.edit-post-header-toolbar__block-toolbar, -.edit-site-header-toolbar__block-toolbar, -.edit-navigation-layout__block-toolbar, -.edit-widgets-header__block-toolbar { - - .block-editor-block-mover:not(.is-horizontal) { - // Position SVGs. - .block-editor-block-mover-button { - &:focus::before { - left: 0 !important; - min-width: 0; - width: 100%; - } - } - - @include break-small() { - .block-editor-block-mover-button.is-up-button svg { - top: 5px; - } - - .block-editor-block-mover-button.is-down-button svg { - bottom: 5px; - } - } - } -} - - -/** - * Block Label for Navigation/Selection Mode - */ - -.block-editor-block-list__block-selection-button { - display: inline-flex; - padding: 0 ( $grid-unit-15 + $border-width ); - z-index: z-index(".block-editor-block-list__block-selection-button"); - - // Dark block UI appearance. - border-radius: $radius-block-ui; - background-color: $gray-900; - - font-size: $default-font-size; - height: $block-toolbar-height; - - .block-editor-block-list__block-selection-button__content { - margin: auto; - display: inline-flex; - align-items: center; - - > .components-flex__item { - margin-right: $grid-unit-15 / 2; - } - } - .components-button.has-icon.block-selection-button_drag-handle { - cursor: grab; - padding: 0; - height: $grid-unit-30; - min-width: $grid-unit-30; - - // Drag handle is smaller than the others. - svg { - min-width: 18px; - min-height: 18px; - } - } - - .block-editor-block-icon { - font-size: $default-font-size; - color: $white; - height: $block-toolbar-height; - } - - // The button here has a special style to appear as a toolbar. - .components-button { - min-width: $button-size; - color: $white; - height: $block-toolbar-height; - - // When button is focused, it receives a box-shadow instead of the border. - &:focus { - box-shadow: none; - border: none; - } - - &:active { - color: $white; - } - display: flex; - } - .block-selection-button_select-button.components-button { - padding: 0; - } -} - - /** * Warnings. */ @@ -641,89 +407,3 @@ margin-bottom: auto; } } - - -/** - * Popovers. - */ - -.block-editor-block-list__insertion-point-popover.is-without-arrow { - z-index: z-index(".block-editor-block-list__insertion-point-popover"); - position: absolute; - pointer-events: none; - - * { - pointer-events: none; - } - - .is-with-inserter { - pointer-events: all; - - * { - pointer-events: all; - } - } - - .components-popover__content.components-popover__content { // Needs specificity. - background: none; - border: none; - box-shadow: none; - overflow-y: visible; - margin-left: 0; - } -} - -// Hide the popover block editor list while dragging. -// Using a hacky animation to delay hiding the element. -// It's needed because if we hide the element immediately upon dragging, -// the dragging will end immediately since there are no elements to be dragged anymore. -// Fortunately, we only have to keep it visible for a frame immediately after dragging, -// after that, we can safely hide it altogether. -@keyframes hide-during-dragging { - to { - position: fixed; - transform: translate(9999px, 9999px); - } -} - -.components-popover.block-editor-block-list__block-popover { - z-index: z-index(".block-editor-block-list__block-popover"); - position: absolute; - - .components-popover__content { - margin: 0 !important; - min-width: auto; - width: max-content; - background: none; - border: none; - box-shadow: none; - overflow-y: visible; - - // Allow clicking through the toolbar holder. - pointer-events: none; - - .block-editor-block-list__block-selection-button, - .block-editor-block-contextual-toolbar, - .block-editor-block-list__empty-block-inserter { - pointer-events: all; - } - - // Position the block toolbar. - .block-editor-block-list__block-selection-button, - .block-editor-block-contextual-toolbar { - margin-top: $grid-unit-15; - margin-bottom: $grid-unit-15; - } - } - - .is-dragging-components-draggable & { - opacity: 0; - // Use a minimal duration to delay hiding the element, see hide-during-dragging animation for more details. - // It's essential to hide the toolbar/popover so that `dragEnter` events can pass through them to the underlying elements. - animation: hide-during-dragging 1ms linear forwards; - } -} - -.is-dragging-components-draggable .components-tooltip { - display: none; -} diff --git a/packages/block-editor/src/components/block-list/use-in-between-inserter.js b/packages/block-editor/src/components/block-list/use-in-between-inserter.js index 465e250cc9615..0dfdab359d7a7 100644 --- a/packages/block-editor/src/components/block-list/use-in-between-inserter.js +++ b/packages/block-editor/src/components/block-list/use-in-between-inserter.js @@ -10,7 +10,7 @@ import { useContext } from '@wordpress/element'; * Internal dependencies */ import { store as blockEditorStore } from '../../store'; -import { InsertionPointOpenRef } from './insertion-point'; +import { InsertionPointOpenRef } from '../block-tools/insertion-point'; export function useInBetweenInserter() { const openRef = useContext( InsertionPointOpenRef ); diff --git a/packages/block-editor/src/components/block-list/block-contextual-toolbar.js b/packages/block-editor/src/components/block-tools/block-contextual-toolbar.js similarity index 100% rename from packages/block-editor/src/components/block-list/block-contextual-toolbar.js rename to packages/block-editor/src/components/block-tools/block-contextual-toolbar.js diff --git a/packages/block-editor/src/components/block-list/block-popover.js b/packages/block-editor/src/components/block-tools/block-popover.js similarity index 98% rename from packages/block-editor/src/components/block-list/block-popover.js rename to packages/block-editor/src/components/block-tools/block-popover.js index 84cab43330773..822a942308b23 100644 --- a/packages/block-editor/src/components/block-list/block-popover.js +++ b/packages/block-editor/src/components/block-tools/block-popover.js @@ -22,7 +22,7 @@ import BlockSelectionButton from './block-selection-button'; import BlockContextualToolbar from './block-contextual-toolbar'; import Inserter from '../inserter'; import { store as blockEditorStore } from '../../store'; -import { __unstableUseBlockElement as useBlockElement } from './use-block-props/use-block-refs'; +import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs'; function selector( select ) { const { diff --git a/packages/block-editor/src/components/block-list/block-selection-button.js b/packages/block-editor/src/components/block-tools/block-selection-button.js similarity index 100% rename from packages/block-editor/src/components/block-list/block-selection-button.js rename to packages/block-editor/src/components/block-tools/block-selection-button.js diff --git a/packages/block-editor/src/components/block-tools/index.js b/packages/block-editor/src/components/block-tools/index.js new file mode 100644 index 0000000000000..14aaf661c001e --- /dev/null +++ b/packages/block-editor/src/components/block-tools/index.js @@ -0,0 +1,14 @@ +/** + * Internal dependencies + */ +import InsertionPoint from './insertion-point'; +import BlockPopover from './block-popover'; + +export default function BlockTools( { children } ) { + return ( + + + { children } + + ); +} diff --git a/packages/block-editor/src/components/block-list/insertion-point.js b/packages/block-editor/src/components/block-tools/insertion-point.js similarity index 98% rename from packages/block-editor/src/components/block-list/insertion-point.js rename to packages/block-editor/src/components/block-tools/insertion-point.js index 4c676674aa525..b462565d8f95b 100644 --- a/packages/block-editor/src/components/block-list/insertion-point.js +++ b/packages/block-editor/src/components/block-tools/insertion-point.js @@ -22,7 +22,7 @@ import { isRTL } from '@wordpress/i18n'; */ import Inserter from '../inserter'; import { store as blockEditorStore } from '../../store'; -import { __unstableUseBlockElement as useBlockElement } from './use-block-props/use-block-refs'; +import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs'; export const InsertionPointOpenRef = createContext(); diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss new file mode 100644 index 0000000000000..013f24b784e13 --- /dev/null +++ b/packages/block-editor/src/components/block-tools/style.scss @@ -0,0 +1,321 @@ +/** + * Insertion Point. + */ + +.block-editor-block-list__insertion-point { + position: absolute; +} + +.block-editor-block-list__insertion-point-indicator { + position: absolute; + background: var(--wp-admin-theme-color); + + // Provide a muted animation that isn't too noisy. + animation: block-editor-inserter__toggle__fade-in-animation-delayed 0.3s ease; + animation-fill-mode: forwards; + @include reduce-motion("animation"); + + .block-editor-block-list__insertion-point.is-vertical > & { + top: 50%; + right: 0; + left: 0; + height: $border-width; + } + + .block-editor-block-list__insertion-point.is-horizontal > & { + top: 0; + right: 0; + left: 50%; + height: 100%; + width: $border-width; + } +} + +// This is the clickable plus. +.block-editor-block-list__insertion-point-inserter { + // Don't show on mobile. + display: none; + position: absolute; + @include break-mobile() { + display: flex; + } + + justify-content: center; + + top: calc(50% - #{ $button-size-small / 2 }); + left: calc(50% - #{ $button-size-small / 2 }); +} + +.block-editor-block-list__block-popover-inserter { + position: absolute; + top: -9999em; + margin-bottom: $block-padding; + + &.is-visible { + position: static; + } +} + +// Sibling inserter / "inbetweenserter". +.block-editor-block-list__empty-block-inserter, +.block-editor-default-block-appender, +.block-editor-block-list__insertion-point-inserter, +.block-editor-block-list__block-popover-inserter { + .block-editor-inserter__toggle.components-button.has-icon { + // Basic look + background: $gray-900; + border-radius: $radius-block-ui; + color: $white; + padding: 0; + + // Special dimensions for this button. + min-width: $button-size-small; + height: $button-size-small; + + &:hover { + color: $white; + background: var(--wp-admin-theme-color); + } + } +} + +.block-editor-block-list__insertion-point-inserter .block-editor-inserter__toggle.components-button.has-icon { + background: var(--wp-admin-theme-color); + &:hover { + background: $gray-900; + } +} + +.block-editor-block-list__insertion-point-inserter, +.block-editor-block-list__block-popover-inserter { + .block-editor-inserter__toggle.components-button { + // Fade it in after a delay. + animation: block-editor-inserter__toggle__fade-in-animation-delayed 0.3s ease; + animation-fill-mode: forwards; + @include reduce-motion("animation"); + } +} + +@keyframes block-editor-inserter__toggle__fade-in-animation-delayed { + 0% { + opacity: 0; + } + 60% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + + +/** + * Block Toolbar when contextual. + */ + +.block-editor-block-contextual-toolbar { + // Block UI appearance. + border: $border-width solid $gray-900; + border-radius: $radius-block-ui; + background-color: $white; + + .block-editor-block-toolbar .components-toolbar-group, + .block-editor-block-toolbar .components-toolbar { + border-right-color: $gray-900; + } + + .block-editor-block-mover-button { + overflow: hidden; + } + + // Extra specificity to override standard toolbar button styles. + .block-editor-block-mover.is-horizontal .block-editor-block-mover-button.block-editor-block-mover-button { + min-width: $block-toolbar-height/2; + width: $block-toolbar-height/2; + + svg { + min-width: $block-toolbar-height/2; + } + } +} + +// Position mover arrows for both toolbars. +.block-editor-block-contextual-toolbar, +.edit-post-header-toolbar__block-toolbar, +.edit-site-header-toolbar__block-toolbar, +.edit-navigation-layout__block-toolbar, +.edit-widgets-header__block-toolbar { + .block-editor-block-mover:not(.is-horizontal) { + // Position SVGs. + .block-editor-block-mover-button { + &:focus::before { + left: 0 !important; + min-width: 0; + width: 100%; + } + } + + @include break-small() { + .block-editor-block-mover-button.is-up-button svg { + top: 5px; + } + + .block-editor-block-mover-button.is-down-button svg { + bottom: 5px; + } + } + } +} + + +/** + * Block Label for Navigation/Selection Mode + */ + +.block-editor-block-list__block-selection-button { + display: inline-flex; + padding: 0 ( $grid-unit-15 + $border-width ); + z-index: z-index(".block-editor-block-list__block-selection-button"); + + // Dark block UI appearance. + border-radius: $radius-block-ui; + background-color: $gray-900; + + font-size: $default-font-size; + height: $block-toolbar-height; + + .block-editor-block-list__block-selection-button__content { + margin: auto; + display: inline-flex; + align-items: center; + + > .components-flex__item { + margin-right: $grid-unit-15 / 2; + } + } + .components-button.has-icon.block-selection-button_drag-handle { + cursor: grab; + padding: 0; + height: $grid-unit-30; + min-width: $grid-unit-30; + + // Drag handle is smaller than the others. + svg { + min-width: 18px; + min-height: 18px; + } + } + + .block-editor-block-icon { + font-size: $default-font-size; + color: $white; + height: $block-toolbar-height; + } + + // The button here has a special style to appear as a toolbar. + .components-button { + min-width: $button-size; + color: $white; + height: $block-toolbar-height; + + // When button is focused, it receives a box-shadow instead of the border. + &:focus { + box-shadow: none; + border: none; + } + + &:active { + color: $white; + } + display: flex; + } + .block-selection-button_select-button.components-button { + padding: 0; + } +} + + +/** + * Popovers. + */ + +.block-editor-block-list__insertion-point-popover.is-without-arrow { + z-index: z-index(".block-editor-block-list__insertion-point-popover"); + position: absolute; + pointer-events: none; + + * { + pointer-events: none; + } + + .is-with-inserter { + pointer-events: all; + + * { + pointer-events: all; + } + } + + .components-popover__content.components-popover__content { // Needs specificity. + background: none; + border: none; + box-shadow: none; + overflow-y: visible; + margin-left: 0; + } +} + +// Hide the popover block editor list while dragging. +// Using a hacky animation to delay hiding the element. +// It's needed because if we hide the element immediately upon dragging, +// the dragging will end immediately since there are no elements to be dragged anymore. +// Fortunately, we only have to keep it visible for a frame immediately after dragging, +// after that, we can safely hide it altogether. +@keyframes hide-during-dragging { + to { + position: fixed; + transform: translate(9999px, 9999px); + } +} + +.components-popover.block-editor-block-list__block-popover { + z-index: z-index(".block-editor-block-list__block-popover"); + position: absolute; + + .components-popover__content { + margin: 0 !important; + min-width: auto; + width: max-content; + background: none; + border: none; + box-shadow: none; + overflow-y: visible; + + // Allow clicking through the toolbar holder. + pointer-events: none; + + .block-editor-block-list__block-selection-button, + .block-editor-block-contextual-toolbar, + .block-editor-block-list__empty-block-inserter { + pointer-events: all; + } + + // Position the block toolbar. + .block-editor-block-list__block-selection-button, + .block-editor-block-contextual-toolbar { + margin-top: $grid-unit-15; + margin-bottom: $grid-unit-15; + } + } + + .is-dragging-components-draggable & { + opacity: 0; + // Use a minimal duration to delay hiding the element, see hide-during-dragging animation for more details. + // It's essential to hide the toolbar/popover so that `dragEnter` events can pass through them to the underlying elements. + animation: hide-during-dragging 1ms linear forwards; + } +} + +.is-dragging-components-draggable .components-tooltip { + display: none; +} diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss index cd83dca5fec2f..0d9b9b01cbde1 100644 --- a/packages/block-editor/src/style.scss +++ b/packages/block-editor/src/style.scss @@ -10,6 +10,7 @@ @import "./components/block-icon/style.scss"; @import "./components/block-inspector/style.scss"; @import "./components/block-list/style.scss"; +@import "./components/block-tools/style.scss"; @import "./components/block-list-appender/style.scss"; @import "./components/block-breadcrumb/style.scss"; @import "./components/block-card/style.scss";