Skip to content

Commit

Permalink
Block editor: move block tools components and styles to separate fold…
Browse files Browse the repository at this point in the history 
…er (#31313)
  • Loading branch information
@ellatrix
ellatrix authored Apr 29, 2021
1 parent f706a12 commit c6360d1
Show file tree
Hide file tree
Showing 10 changed files with 342 additions and 328 deletions.
8 changes: 3 additions & 5 deletions packages/block-editor/src/components/block-list/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -68,12 +67,11 @@ function Root( { className, children } ) {
export default function BlockList( { className, __experimentalLayout } ) {
usePreParsePatterns();
return (
<InsertionPoint>
<BlockPopover />
<BlockTools>
<Root className={ className }>
<BlockListItems __experimentalLayout={ __experimentalLayout } />
</Root>
</InsertionPoint>
</BlockTools>
);
}

Expand Down
320 changes: 0 additions & 320 deletions packages/block-editor/src/components/block-list/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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.
*/
Expand All @@ -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;
}
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/block-list/use-in-between-inserter.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
Expand Down
0 ...ts/block-list/block-contextual-toolbar.js → ...s/block-tools/block-contextual-toolbar.js
View file
File renamed without changes.
2 changes: 1 addition & 1 deletion ...rc/components/block-list/block-popover.js → ...c/components/block-tools/block-popover.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
0 ...ents/block-list/block-selection-button.js → ...nts/block-tools/block-selection-button.js
View file
File renamed without changes.
14 changes: 14 additions & 0 deletions packages/block-editor/src/components/block-tools/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
/**
* Internal dependencies
*/
import InsertionPoint from './insertion-point';
import BlockPopover from './block-popover';

export default function BlockTools( { children } ) {
return (
<InsertionPoint>
<BlockPopover />
{ children }
</InsertionPoint>
);
}
Loading

0 comments on commit c6360d1

Please sign in to comment.