Skip to content

Add a built-in exploded mode instead of a separate view #40376

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

Closed
youknowriad wants to merge 21 commits into from
Closed

Add a built-in exploded mode instead of a separate view #40376

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
c14f9bc
Add a built-in exploded mode instead of a separate view
youknowriad Apr 15, 2022
53656f1
Add styles cleanup
youknowriad Apr 15, 2022
96bae80
Prevent selecting child blocks in exploded mode
youknowriad Apr 18, 2022
ae3f486
Add the block selection button
youknowriad Apr 18, 2022
c45cb35
Fix animation
youknowriad Apr 18, 2022
3e3080a
Fix mover styles
youknowriad Apr 18, 2022
5806d5a
Use the right gray color
youknowriad Apr 18, 2022
bb9b0c2
Update the color of the selection button in exploded mode
youknowriad Apr 19, 2022
c5a542a
Add inbetween inserters
youknowriad Apr 19, 2022
423fa03
Select parent block when switching to exploded mode
youknowriad Apr 22, 2022
4010cb1
Fix clicking movers
youknowriad Apr 22, 2022
13185dc
Improve inserter position
youknowriad Apr 22, 2022
ab39d23
hide block appender in exploded/navigation modes
youknowriad Apr 28, 2022
8c11c18
hide inserters on scroll
youknowriad Apr 28, 2022
a01c099
Remove CSS margin and scale to leave them to the animation
youknowriad May 17, 2022
0338983
Fix inbetween inserters with new Popover component
youknowriad May 18, 2022
aea561a
Update position on scroll
youknowriad May 18, 2022
232b6f9
Keep inserters visible on scroll
youknowriad May 18, 2022
38773e6
Handle themes with transparent backgrounds
youknowriad May 19, 2022
1b04777
Hide tooltips from block selection button
youknowriad May 19, 2022
56affab
Delay initial rendering of the inserters
youknowriad May 19, 2022
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
Prev Previous commit
Next Next commit
Keep inserters visible on scroll
  • Loading branch information
@youknowriad
youknowriad committed May 19, 2022
commit 232b6f9e46e25f23ffeb4c19d15651eef5029f1e
10 changes: 8 additions & 2 deletions packages/block-editor/src/components/block-popover/inbetween.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,13 @@ function BlockPopoverInbetween( {
width,
height: previousRect ? previousRect.height : nextRect.height,
};
}, [ previousElement, nextElement, isVertical, positionRecompute ] );
}, [
previousElement,
nextElement,
isVertical,
positionRecompute,
isVisible,
] );

const getAnchorRect = useCallback( () => {
if ( ( ! previousElement && ! nextElement ) || ! isVisible ) {
Expand Down Expand Up @@ -159,7 +165,7 @@ function BlockPopoverInbetween( {
width: 0,
ownerDocument,
};
}, [ previousElement, nextElement, positionRecompute ] );
}, [ previousElement, nextElement, positionRecompute, isVisible ] );

const popoverScrollRef = usePopoverScroll( __unstableContentRef );

Expand Down
5 changes: 3 additions & 2 deletions packages/block-editor/src/components/block-popover/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,9 @@
// like the popover is impacted by the block gap margin.
margin: 0 !important;

// Allow clicking through the toolbar holder.
pointer-events: none;

.components-popover__content {
margin: 0 !important;
min-width: auto;
Expand All @@ -16,8 +19,6 @@
box-shadow: none;
overflow-y: visible;

// Allow clicking through the toolbar holder.
pointer-events: none;
> div > * {
pointer-events: all;
}
Expand Down
50 changes: 0 additions & 50 deletions packages/block-editor/src/components/block-tools/exploded-mode-inserters.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,70 +1,20 @@
/**
* External dependencies
*/
import { throttle } from 'lodash';

/**
* WordPress dependencies
*/
import { useSelect } from '@wordpress/data';
import { useState, useEffect } from '@wordpress/element';

/**
* Internal dependencies
*/
import BlockPopoverInbetween from '../block-popover/inbetween';
import { store as blockEditorStore } from '../../store';
import Inserter from '../inserter';
import { __unstableUseBlockElement } from '../block-list/use-block-props/use-block-refs';

function useIsScrolling() {
const [ isScrolling, setIsScrolling ] = useState( false );

const clientId = useSelect( ( select ) => {
return select( blockEditorStore ).getBlockOrder()?.[ 0 ];
}, [] );
const element = __unstableUseBlockElement( clientId );

useEffect( () => {
let timeout;
setIsScrolling( false );
if ( ! element ) {
return;
}
const onScroll = throttle( () => {
setIsScrolling( true );
clearTimeout( timeout );
timeout = setTimeout( () => {
setIsScrolling( false );
}, 100 );
}, 100 );

element.ownerDocument.defaultView.addEventListener(
'scroll',
onScroll
);
return () => {
clearTimeout( timeout );
element.ownerDocument.defaultView.removeEventListener(
'scroll',
onScroll
);
};
}, [ element ] );

return isScrolling;
}

function ExplodedModeInserters( { __unstableContentRef } ) {
const isScrolling = useIsScrolling();
const blockOrder = useSelect( ( select ) => {
return select( blockEditorStore ).getBlockOrder();
}, [] );

if ( isScrolling ) {
return null;
}

return blockOrder.map( ( clientId, index ) => {
if ( index === blockOrder.length - 1 ) {
return null;
Expand Down