From 5764d45b3796efe08f6fba102a31cec2f9c76ba7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Tue, 24 Nov 2020 22:43:32 +0200 Subject: [PATCH 1/5] Refactor click redirect(and avoid div) --- packages/block-editor/src/components/index.js | 1 + .../use-canvas-click-redirect/index.js | 49 +++++++++++++++++++ .../src/components/writing-flow/index.js | 29 +---------- .../src/components/writing-flow/style.scss | 5 -- .../src/components/visual-editor/index.js | 7 ++- .../src/components/visual-editor/style.scss | 11 ----- 6 files changed, 57 insertions(+), 45 deletions(-) create mode 100644 packages/block-editor/src/components/use-canvas-click-redirect/index.js diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index 150a67eb14a49..129ca8f114a32 100644 --- a/packages/block-editor/src/components/index.js +++ b/packages/block-editor/src/components/index.js @@ -119,6 +119,7 @@ export { } from './typewriter'; export { default as Warning } from './warning'; export { default as WritingFlow } from './writing-flow'; +export { useCanvasClickRedirect as __unstableUseCanvasClickRedirect } from './use-canvas-click-redirect'; /* * State Related Components diff --git a/packages/block-editor/src/components/use-canvas-click-redirect/index.js b/packages/block-editor/src/components/use-canvas-click-redirect/index.js new file mode 100644 index 0000000000000..6435a3a83d396 --- /dev/null +++ b/packages/block-editor/src/components/use-canvas-click-redirect/index.js @@ -0,0 +1,49 @@ +/** + * External dependencies + */ +import { overEvery, findLast } from 'lodash'; + +/** + * WordPress dependencies + */ +import { useEffect } from '@wordpress/element'; +import { focus, isTextField, placeCaretAtHorizontalEdge } from '@wordpress/dom'; + +/** + * Given an element, returns true if the element is a tabbable text field, or + * false otherwise. + * + * @param {Element} element Element to test. + * + * @return {boolean} Whether element is a tabbable text field. + */ +const isTabbableTextField = overEvery( [ + isTextField, + focus.tabbable.isTabbableIndex, +] ); + +export function useCanvasClickRedirect( ref ) { + function onClick( event ) { + // Only handle clicks directly on the canvas itself, not on content. + if ( event.target !== ref.current ) { + return; + } + + const focusableNodes = focus.focusable.find( ref.current ); + const target = findLast( focusableNodes, isTabbableTextField ); + + if ( ! target ) { + return; + } + + placeCaretAtHorizontalEdge( target, true ); + } + + useEffect( () => { + ref.current.addEventListener( 'click', onClick ); + + return () => { + ref.current.removeEventListener( 'click', onClick ); + }; + }, [] ); +} diff --git a/packages/block-editor/src/components/writing-flow/index.js b/packages/block-editor/src/components/writing-flow/index.js index d48428a80cf9c..030fef109d486 100644 --- a/packages/block-editor/src/components/writing-flow/index.js +++ b/packages/block-editor/src/components/writing-flow/index.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { overEvery, find, findLast, reverse, first, last } from 'lodash'; +import { find, reverse, first, last } from 'lodash'; import classnames from 'classnames'; /** @@ -49,19 +49,6 @@ function getComputedStyle( node ) { return node.ownerDocument.defaultView.getComputedStyle( node ); } -/** - * Given an element, returns true if the element is a tabbable text field, or - * false otherwise. - * - * @param {Element} element Element to test. - * - * @return {boolean} Whether element is a tabbable text field. - */ -const isTabbableTextField = overEvery( [ - isTextField, - focus.tabbable.isTabbableIndex, -] ); - /** * Returns true if the element should consider edge navigation upon a keyboard * event of the given directional key code, or false otherwise. @@ -684,14 +671,6 @@ export default function WritingFlow( { children } ) { } } - function focusLastTextField() { - const focusableNodes = focus.focusable.find( container.current ); - const target = findLast( focusableNodes, isTabbableTextField ); - if ( target ) { - placeCaretAtHorizontalEdge( target, true ); - } - } - useEffect( () => { if ( hasMultiSelection && ! isMultiSelecting ) { multiSelectionContainer.current.focus(); @@ -746,12 +725,6 @@ export default function WritingFlow( { children } ) { multiSelectionContainer={ multiSelectionContainer } isReverse /> -
); /* eslint-enable jsx-a11y/no-static-element-interactions */ diff --git a/packages/block-editor/src/components/writing-flow/style.scss b/packages/block-editor/src/components/writing-flow/style.scss index 422b378f2e8e2..5618ea29e8153 100644 --- a/packages/block-editor/src/components/writing-flow/style.scss +++ b/packages/block-editor/src/components/writing-flow/style.scss @@ -1,8 +1,3 @@ -.block-editor-writing-flow { - display: flex; - flex-direction: column; -} - .block-editor-writing-flow__click-redirect { cursor: text; } diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js index a177981e04f17..1f84906befa48 100644 --- a/packages/edit-post/src/components/visual-editor/index.js +++ b/packages/edit-post/src/components/visual-editor/index.js @@ -15,6 +15,7 @@ import { __unstableUseScrollMultiSelectionIntoView as useScrollMultiSelectionIntoView, __experimentalBlockSettingsMenuFirstItem, __experimentalUseResizeCanvas as useResizeCanvas, + __unstableUseCanvasClickRedirect as useCanvasClickRedirect, } from '@wordpress/block-editor'; import { Popover } from '@wordpress/components'; import { useRef } from '@wordpress/element'; @@ -30,13 +31,17 @@ export default function VisualEditor() { const deviceType = useSelect( ( select ) => { return select( 'core/edit-post' ).__experimentalGetPreviewDeviceType(); }, [] ); - const inlineStyles = useResizeCanvas( deviceType ); + const inlineStyles = useResizeCanvas( deviceType ) || { + height: '100%', + paddingBottom: '40vh', + }; useScrollMultiSelectionIntoView( ref ); useBlockSelectionClearer( ref ); useTypewriter( ref ); useClipboardHandler( ref ); useTypingObserver( ref ); + useCanvasClickRedirect( ref ); return (
diff --git a/packages/edit-post/src/components/visual-editor/style.scss b/packages/edit-post/src/components/visual-editor/style.scss index 4534cdefe6886..5f7ae9ae90662 100644 --- a/packages/edit-post/src/components/visual-editor/style.scss +++ b/packages/edit-post/src/components/visual-editor/style.scss @@ -27,17 +27,6 @@ } } -.editor-styles-wrapper, -.editor-styles-wrapper > .block-editor-writing-flow__click-redirect { - height: 100%; -} - -.edit-post-visual-editor .block-editor-writing-flow__click-redirect { - // Allow the page to be scrolled with the last block in the middle. - min-height: 40vh; - width: 100%; -} - // Hide the extra space when there are metaboxes. .has-metaboxes .edit-post-visual-editor .block-editor-writing-flow__click-redirect { height: 0; From 20f92dbb3219f7b2726cfa9792e4f942513c9739 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Tue, 24 Nov 2020 23:27:40 +0200 Subject: [PATCH 2/5] Remove padding if there are meta boxes --- .../block-editor/src/components/writing-flow/style.scss | 3 --- packages/block-editor/src/style.scss | 1 - packages/block-library/src/block/editor.scss | 4 ---- packages/edit-post/src/components/visual-editor/index.js | 6 +++++- .../edit-post/src/components/visual-editor/style.scss | 9 ++++++--- 5 files changed, 11 insertions(+), 12 deletions(-) delete mode 100644 packages/block-editor/src/components/writing-flow/style.scss diff --git a/packages/block-editor/src/components/writing-flow/style.scss b/packages/block-editor/src/components/writing-flow/style.scss deleted file mode 100644 index 5618ea29e8153..0000000000000 --- a/packages/block-editor/src/components/writing-flow/style.scss +++ /dev/null @@ -1,3 +0,0 @@ -.block-editor-writing-flow__click-redirect { - cursor: text; -} diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss index 5421186cbdff5..1ea21ed457452 100644 --- a/packages/block-editor/src/style.scss +++ b/packages/block-editor/src/style.scss @@ -52,7 +52,6 @@ @import "./components/url-input/style.scss"; @import "./components/url-popover/style.scss"; @import "./components/warning/style.scss"; -@import "./components/writing-flow/style.scss"; @import "./hooks/anchor.scss"; // This tag marks the end of the styles that apply to editing canvas contents and need to be manipulated when we resize the editor. diff --git a/packages/block-library/src/block/editor.scss b/packages/block-library/src/block/editor.scss index b5c828e0680d5..b3eb1a67e9945 100644 --- a/packages/block-library/src/block/editor.scss +++ b/packages/block-library/src/block/editor.scss @@ -1,8 +1,4 @@ .edit-post-visual-editor .block-library-block__reusable-block-container { - .block-editor-writing-flow__click-redirect { - min-height: auto; - } - // Unset the padding that root containers get when they're actually root containers. .is-root-container { padding-left: 0; diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js index 1f84906befa48..5754505e7d9cf 100644 --- a/packages/edit-post/src/components/visual-editor/index.js +++ b/packages/edit-post/src/components/visual-editor/index.js @@ -31,9 +31,13 @@ export default function VisualEditor() { const deviceType = useSelect( ( select ) => { return select( 'core/edit-post' ).__experimentalGetPreviewDeviceType(); }, [] ); + const hasMetaBoxes = useSelect( + ( select ) => select( 'core/edit-post' ).hasMetaBoxes(), + [] + ); const inlineStyles = useResizeCanvas( deviceType ) || { height: '100%', - paddingBottom: '40vh', + paddingBottom: hasMetaBoxes ? null : '40vh', }; useScrollMultiSelectionIntoView( ref ); diff --git a/packages/edit-post/src/components/visual-editor/style.scss b/packages/edit-post/src/components/visual-editor/style.scss index 5f7ae9ae90662..75cd53be2a242 100644 --- a/packages/edit-post/src/components/visual-editor/style.scss +++ b/packages/edit-post/src/components/visual-editor/style.scss @@ -27,9 +27,12 @@ } } -// Hide the extra space when there are metaboxes. -.has-metaboxes .edit-post-visual-editor .block-editor-writing-flow__click-redirect { - height: 0; +.editor-styles-wrapper { + cursor: text; + + > * { + cursor: auto; + } } // Ideally this wrapper div is not needed but if we want to match the positioning of blocks From fb5e7d812d42f831c26719bc336b92d290168562 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Tue, 24 Nov 2020 23:38:49 +0200 Subject: [PATCH 3/5] Polish --- .../use-canvas-click-redirect/index.js | 26 +++++++++---------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/block-editor/src/components/use-canvas-click-redirect/index.js b/packages/block-editor/src/components/use-canvas-click-redirect/index.js index 6435a3a83d396..3149b14e0094a 100644 --- a/packages/block-editor/src/components/use-canvas-click-redirect/index.js +++ b/packages/block-editor/src/components/use-canvas-click-redirect/index.js @@ -23,23 +23,23 @@ const isTabbableTextField = overEvery( [ ] ); export function useCanvasClickRedirect( ref ) { - function onClick( event ) { - // Only handle clicks directly on the canvas itself, not on content. - if ( event.target !== ref.current ) { - return; - } + useEffect( () => { + function onClick( event ) { + // Only handle clicks directly on the canvas itself, not on content. + if ( event.target !== ref.current ) { + return; + } - const focusableNodes = focus.focusable.find( ref.current ); - const target = findLast( focusableNodes, isTabbableTextField ); + const focusableNodes = focus.focusable.find( ref.current ); + const target = findLast( focusableNodes, isTabbableTextField ); - if ( ! target ) { - return; - } + if ( ! target ) { + return; + } - placeCaretAtHorizontalEdge( target, true ); - } + placeCaretAtHorizontalEdge( target, true ); + } - useEffect( () => { ref.current.addEventListener( 'click', onClick ); return () => { From 360e22a6d9447854e1647b0c7cb25a299362bb30 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Wed, 25 Nov 2020 10:45:55 +0200 Subject: [PATCH 4/5] Use mouse down --- .../src/components/use-canvas-click-redirect/index.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/components/use-canvas-click-redirect/index.js b/packages/block-editor/src/components/use-canvas-click-redirect/index.js index 3149b14e0094a..6b8280e95ab09 100644 --- a/packages/block-editor/src/components/use-canvas-click-redirect/index.js +++ b/packages/block-editor/src/components/use-canvas-click-redirect/index.js @@ -24,8 +24,8 @@ const isTabbableTextField = overEvery( [ export function useCanvasClickRedirect( ref ) { useEffect( () => { - function onClick( event ) { - // Only handle clicks directly on the canvas itself, not on content. + function onMouseDown( event ) { + // Only handle clicks on the canvas, not the content. if ( event.target !== ref.current ) { return; } @@ -38,12 +38,13 @@ export function useCanvasClickRedirect( ref ) { } placeCaretAtHorizontalEdge( target, true ); + event.preventDefault(); } - ref.current.addEventListener( 'click', onClick ); + ref.current.addEventListener( 'mousedown', onMouseDown ); return () => { - ref.current.removeEventListener( 'click', onClick ); + ref.current.addEventListener( 'mousedown', onMouseDown ); }; }, [] ); } From dfe5122077337da4f7620bd5722225c66c2e9eaf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= Date: Wed, 25 Nov 2020 11:09:19 +0200 Subject: [PATCH 5/5] Add comment --- packages/edit-post/src/components/visual-editor/index.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js index 5754505e7d9cf..e51b8f4f69189 100644 --- a/packages/edit-post/src/components/visual-editor/index.js +++ b/packages/edit-post/src/components/visual-editor/index.js @@ -35,10 +35,13 @@ export default function VisualEditor() { ( select ) => select( 'core/edit-post' ).hasMetaBoxes(), [] ); - const inlineStyles = useResizeCanvas( deviceType ) || { + const desktopCanvasStyles = { height: '100%', + // Add a constant padding for the typewritter effect. When typing at the + // bottom, there needs to be room to scroll up. paddingBottom: hasMetaBoxes ? null : '40vh', }; + const resizedCanvasStyles = useResizeCanvas( deviceType ); useScrollMultiSelectionIntoView( ref ); useBlockSelectionClearer( ref ); @@ -55,7 +58,7 @@ export default function VisualEditor() { ref={ ref } className="editor-styles-wrapper" tabIndex="-1" - style={ inlineStyles } + style={ resizedCanvasStyles || desktopCanvasStyles } >