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

Jump to bottom

Block editor: move block tools components and styles to separate folder #31313

Merged
merged 1 commit into from
Apr 29, 2021
Merged

Block editor: move block tools components and styles to separate folder #31313

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
8 changes: 3 additions & 5 deletions packages/block-editor/src/components/block-list/index.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
File renamed without changes.
14 changes: 14 additions & 0 deletions packages/block-editor/src/components/block-tools/index.js
View file
Open in desktop
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