From f825df2b7d3eb36f4029b8d02ac84e4e1ad29e03 Mon Sep 17 00:00:00 2001 From: Kiril Zhelyazkov Date: Wed, 29 Jul 2020 15:40:45 +0300 Subject: [PATCH 1/6] initial commit --- .../components/block-list/insertion-point.js | 147 ++++++++++-------- 1 file changed, 79 insertions(+), 68 deletions(-) diff --git a/packages/block-editor/src/components/block-list/insertion-point.js b/packages/block-editor/src/components/block-list/insertion-point.js index c7eb0e8d6ee80a..5970e3246f0156 100644 --- a/packages/block-editor/src/components/block-list/insertion-point.js +++ b/packages/block-editor/src/components/block-list/insertion-point.js @@ -135,73 +135,92 @@ export default function InsertionPoint( { children, containerRef } ) { const [ isInserterShown, setIsInserterShown ] = useState( false ); const [ isInserterForced, setIsInserterForced ] = useState( false ); const [ inserterClientId, setInserterClientId ] = useState( null ); - const { isMultiSelecting, isInserterVisible, selectedClientId } = useSelect( - ( select ) => { - const { - isMultiSelecting: _isMultiSelecting, - isBlockInsertionPointVisible, - getBlockInsertionPoint, - getBlockOrder, - } = select( 'core/block-editor' ); - - const insertionPoint = getBlockInsertionPoint(); - const order = getBlockOrder( insertionPoint.rootClientId ); - - return { - isMultiSelecting: _isMultiSelecting(), - isInserterVisible: isBlockInsertionPointVisible(), - selectedClientId: order[ insertionPoint.index ], - }; - }, - [] - ); + const { + isMultiSelecting, + isInserterVisible, + selectedClientId, + blockOrder, + } = useSelect( ( select ) => { + const { + isMultiSelecting: _isMultiSelecting, + isBlockInsertionPointVisible, + getBlockInsertionPoint, + getBlockOrder, + } = select( 'core/block-editor' ); + + const insertionPoint = getBlockInsertionPoint(); + const order = getBlockOrder( insertionPoint.rootClientId ); + + return { + isMultiSelecting: _isMultiSelecting(), + isInserterVisible: isBlockInsertionPointVisible(), + selectedClientId: order[ insertionPoint.index ], + blockOrder: order, + }; + }, [] ); + + // function onMouseMove( event ) { + // if ( + // ! event.target.classList.contains( + // 'block-editor-block-list__layout' + // ) + // ) { + // if ( isInserterShown ) { + // setIsInserterShown( false ); + // } + // return; + // } + // + // const rect = event.target.getBoundingClientRect(); + // const offset = event.clientY - rect.top; + // const element = Array.from( event.target.children ).find( + // ( blockEl ) => { + // return blockEl.offsetTop > offset; + // } + // ); + // + // if ( ! element ) { + // return; + // } + // + // const clientId = element.id.slice( 'block-'.length ); + // + // if ( ! clientId ) { + // return; + // } + // + // const elementRect = element.getBoundingClientRect(); + // + // if ( + // event.clientX > elementRect.right || + // event.clientX < elementRect.left + // ) { + // if ( isInserterShown ) { + // setIsInserterShown( false ); + // } + // return; + // } + // + // setIsInserterShown( true ); + // setInserterClientId( clientId ); + // } function onMouseMove( event ) { - if ( - ! event.target.classList.contains( - 'block-editor-block-list__layout' - ) - ) { - if ( isInserterShown ) { - setIsInserterShown( false ); - } - return; - } - - const rect = event.target.getBoundingClientRect(); - const offset = event.clientY - rect.top; - const element = Array.from( event.target.children ).find( - ( blockEl ) => { - return blockEl.offsetTop > offset; - } - ); - - if ( ! element ) { - return; - } - - const clientId = element.id.slice( 'block-'.length ); + const clientId = event.target.id.slice( 'block-'.length ); + const index = blockOrder.findIndex( ( id ) => id === clientId ); - if ( ! clientId ) { + // when there is no match return + if ( index === -1 ) { + setIsInserterShown( false ); return; } - const elementRect = element.getBoundingClientRect(); - - if ( - event.clientX > elementRect.right || - event.clientX < elementRect.left - ) { - if ( isInserterShown ) { - setIsInserterShown( false ); - } - return; + // first element should show only bottom inserter + if ( index >= 0 ) { + setIsInserterShown( true ); + setInserterClientId( clientId ); } - - setIsInserterShown( true ); - setInserterClientId( clientId ); } - const isVisible = isInserterShown || isInserterForced || isInserterVisible; return ( @@ -218,15 +237,7 @@ export default function InsertionPoint( { children, containerRef } ) { showInsertionPoint={ isInserterVisible } /> ) } -
- { children } -
+
{ children }
); } From 66d61b938e99af61ee43ca89e9ca19ccc426e2f0 Mon Sep 17 00:00:00 2001 From: Kiril Zhelyazkov Date: Thu, 30 Jul 2020 14:58:17 +0300 Subject: [PATCH 2/6] hovering kinda works --- .../components/block-list/insertion-point.js | 82 +++++++++++-------- 1 file changed, 46 insertions(+), 36 deletions(-) diff --git a/packages/block-editor/src/components/block-list/insertion-point.js b/packages/block-editor/src/components/block-list/insertion-point.js index 5970e3246f0156..df8839793ea7ae 100644 --- a/packages/block-editor/src/components/block-list/insertion-point.js +++ b/packages/block-editor/src/components/block-list/insertion-point.js @@ -98,43 +98,43 @@ function InsertionPointPopover( { isInserterForced, setIsInserterForced, containerRef, - showInsertionPoint, } ) { - const element = getBlockDOMNode( clientId ); - - return ( - -
{ + const element = getBlockDOMNode( id ); + + return ( + - { showInsertionPoint && ( +
- ) } - { ( isInserterShown || isInserterForced ) && ( - - ) } -
- - ); + { ( isInserterShown || isInserterForced ) && ( + + ) } +
+ + ); + } ); } export default function InsertionPoint( { children, containerRef } ) { const [ isInserterShown, setIsInserterShown ] = useState( false ); const [ isInserterForced, setIsInserterForced ] = useState( false ); - const [ inserterClientId, setInserterClientId ] = useState( null ); + const [ inserterClientId, setInserterClientId ] = useState( [] ); const { isMultiSelecting, isInserterVisible, @@ -211,15 +211,27 @@ export default function InsertionPoint( { children, containerRef } ) { // when there is no match return if ( index === -1 ) { + setInserterClientId( [] ); setIsInserterShown( false ); return; } - // first element should show only bottom inserter - if ( index >= 0 ) { - setIsInserterShown( true ); - setInserterClientId( clientId ); + setIsInserterShown( true ); + + if ( index === 0 ) { + // eslint-disable-next-line no-unused-vars + const [ _, first, ...rest ] = blockOrder; + setInserterClientId( [ first ] ); + return; + } + + if ( index === blockOrder.length ) { + const lastElement = blockOrder.slice( -1 ); + setInserterClientId( [ lastElement ] ); + return; } + + setInserterClientId( [ blockOrder[ index ], blockOrder[ index + 1 ] ] ); } const isVisible = isInserterShown || isInserterForced || isInserterVisible; @@ -227,9 +239,7 @@ export default function InsertionPoint( { children, containerRef } ) { <> { ! isMultiSelecting && isVisible && ( Date: Thu, 30 Jul 2020 15:06:48 +0300 Subject: [PATCH 3/6] removed old code --- .../components/block-list/insertion-point.js | 103 +++++------------- 1 file changed, 29 insertions(+), 74 deletions(-) diff --git a/packages/block-editor/src/components/block-list/insertion-point.js b/packages/block-editor/src/components/block-list/insertion-point.js index df8839793ea7ae..26e28faa3125e3 100644 --- a/packages/block-editor/src/components/block-list/insertion-point.js +++ b/packages/block-editor/src/components/block-list/insertion-point.js @@ -135,75 +135,26 @@ export default function InsertionPoint( { children, containerRef } ) { const [ isInserterShown, setIsInserterShown ] = useState( false ); const [ isInserterForced, setIsInserterForced ] = useState( false ); const [ inserterClientId, setInserterClientId ] = useState( [] ); - const { - isMultiSelecting, - isInserterVisible, - selectedClientId, - blockOrder, - } = useSelect( ( select ) => { - const { - isMultiSelecting: _isMultiSelecting, - isBlockInsertionPointVisible, - getBlockInsertionPoint, - getBlockOrder, - } = select( 'core/block-editor' ); - - const insertionPoint = getBlockInsertionPoint(); - const order = getBlockOrder( insertionPoint.rootClientId ); - - return { - isMultiSelecting: _isMultiSelecting(), - isInserterVisible: isBlockInsertionPointVisible(), - selectedClientId: order[ insertionPoint.index ], - blockOrder: order, - }; - }, [] ); - - // function onMouseMove( event ) { - // if ( - // ! event.target.classList.contains( - // 'block-editor-block-list__layout' - // ) - // ) { - // if ( isInserterShown ) { - // setIsInserterShown( false ); - // } - // return; - // } - // - // const rect = event.target.getBoundingClientRect(); - // const offset = event.clientY - rect.top; - // const element = Array.from( event.target.children ).find( - // ( blockEl ) => { - // return blockEl.offsetTop > offset; - // } - // ); - // - // if ( ! element ) { - // return; - // } - // - // const clientId = element.id.slice( 'block-'.length ); - // - // if ( ! clientId ) { - // return; - // } - // - // const elementRect = element.getBoundingClientRect(); - // - // if ( - // event.clientX > elementRect.right || - // event.clientX < elementRect.left - // ) { - // if ( isInserterShown ) { - // setIsInserterShown( false ); - // } - // return; - // } - // - // setIsInserterShown( true ); - // setInserterClientId( clientId ); - // } + const { isMultiSelecting, isInserterVisible, blockOrder } = useSelect( + ( select ) => { + const { + isMultiSelecting: _isMultiSelecting, + isBlockInsertionPointVisible, + getBlockInsertionPoint, + getBlockOrder, + } = select( 'core/block-editor' ); + + const insertionPoint = getBlockInsertionPoint(); + const order = getBlockOrder( insertionPoint.rootClientId ); + + return { + isMultiSelecting: _isMultiSelecting(), + isInserterVisible: isBlockInsertionPointVisible(), + blockOrder: order, + }; + }, + [] + ); function onMouseMove( event ) { const clientId = event.target.id.slice( 'block-'.length ); @@ -218,20 +169,24 @@ export default function InsertionPoint( { children, containerRef } ) { setIsInserterShown( true ); + // first element should have only bottom inserter if ( index === 0 ) { // eslint-disable-next-line no-unused-vars - const [ _, first, ...rest ] = blockOrder; - setInserterClientId( [ first ] ); + const [ firstTop, firstBottom, ...rest ] = blockOrder; + setInserterClientId( [ firstBottom ] ); return; } + // last element should have only top inserter if ( index === blockOrder.length ) { - const lastElement = blockOrder.slice( -1 ); - setInserterClientId( [ lastElement ] ); + const lastTop = blockOrder.slice( -1 ); + setInserterClientId( [ lastTop ] ); return; } - setInserterClientId( [ blockOrder[ index ], blockOrder[ index + 1 ] ] ); + const top = blockOrder[ index ]; + const bottom = blockOrder[ index + 1 ]; + setInserterClientId( [ top, bottom ] ); } const isVisible = isInserterShown || isInserterForced || isInserterVisible; From 87d26d7b0dbe5b19456cb83135ca896e5a8a5966 Mon Sep 17 00:00:00 2001 From: Kiril Zhelyazkov Date: Fri, 31 Jul 2020 10:38:35 +0300 Subject: [PATCH 4/6] all in --- .../src/components/block-list/insertion-point.js | 5 +++-- .../block-editor/src/components/block-list/style.scss | 8 +++++++- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/block-list/insertion-point.js b/packages/block-editor/src/components/block-list/insertion-point.js index 26e28faa3125e3..a15629b4b7719b 100644 --- a/packages/block-editor/src/components/block-list/insertion-point.js +++ b/packages/block-editor/src/components/block-list/insertion-point.js @@ -162,7 +162,6 @@ export default function InsertionPoint( { children, containerRef } ) { // when there is no match return if ( index === -1 ) { - setInserterClientId( [] ); setIsInserterShown( false ); return; } @@ -202,7 +201,9 @@ export default function InsertionPoint( { children, containerRef } ) { showInsertionPoint={ isInserterVisible } /> ) } -
{ children }
+
+ { children } +
); } diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss index 3a67a193ff3030..d043201a43ab02 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -428,7 +428,6 @@ } } - .block-editor-block-list__insertion-point-inserter, .block-editor-block-list__block-popover-inserter { .block-editor-inserter__toggle.components-button { @@ -439,6 +438,13 @@ } } +.block-editor-block-list__insertion-point-indicator { + 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; From 55ec1cea8445b854892e9a60fbb0338b1c4c441c Mon Sep 17 00:00:00 2001 From: Kiril Zhelyazkov Date: Mon, 3 Aug 2020 14:08:46 +0300 Subject: [PATCH 5/6] immediate preview --- .../src/components/block-list/style.scss | 30 +++++++++---------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss index d043201a43ab02..264025528acf1a 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -428,21 +428,21 @@ } } -.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"); - } -} - -.block-editor-block-list__insertion-point-indicator { - 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-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"); +// } +//} +// +//.block-editor-block-list__insertion-point-indicator { +// 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 { From bfb5467b68f6dbd639c19254278d651c89fd4451 Mon Sep 17 00:00:00 2001 From: Kiril Zhelyazkov Date: Tue, 4 Aug 2020 16:02:44 +0300 Subject: [PATCH 6/6] temp --- .../components/block-list/insertion-point.js | 56 ++++++++++--------- 1 file changed, 30 insertions(+), 26 deletions(-) diff --git a/packages/block-editor/src/components/block-list/insertion-point.js b/packages/block-editor/src/components/block-list/insertion-point.js index a15629b4b7719b..275421ccbdc8ea 100644 --- a/packages/block-editor/src/components/block-list/insertion-point.js +++ b/packages/block-editor/src/components/block-list/insertion-point.js @@ -99,12 +99,11 @@ function InsertionPointPopover( { setIsInserterForced, containerRef, } ) { - return clientId.map( ( id, index ) => { - const element = getBlockDOMNode( id ); + const element = getBlockDOMNode( clientId ); - return ( + return ( + <> - ); - } ); + +
+
+ { ( isInserterShown || isInserterForced ) && ( + + ) } +
+ + + ); } export default function InsertionPoint( { children, containerRef } ) { const [ isInserterShown, setIsInserterShown ] = useState( false ); const [ isInserterForced, setIsInserterForced ] = useState( false ); - const [ inserterClientId, setInserterClientId ] = useState( [] ); + const [ inserterClientId, setInserterClientId ] = useState( null ); const { isMultiSelecting, isInserterVisible, blockOrder } = useSelect( ( select ) => { const { @@ -167,25 +189,7 @@ export default function InsertionPoint( { children, containerRef } ) { } setIsInserterShown( true ); - - // first element should have only bottom inserter - if ( index === 0 ) { - // eslint-disable-next-line no-unused-vars - const [ firstTop, firstBottom, ...rest ] = blockOrder; - setInserterClientId( [ firstBottom ] ); - return; - } - - // last element should have only top inserter - if ( index === blockOrder.length ) { - const lastTop = blockOrder.slice( -1 ); - setInserterClientId( [ lastTop ] ); - return; - } - - const top = blockOrder[ index ]; - const bottom = blockOrder[ index + 1 ]; - setInserterClientId( [ top, bottom ] ); + setInserterClientId( clientId ); } const isVisible = isInserterShown || isInserterForced || isInserterVisible;