diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index 150a67eb14a492..129ca8f114a32c 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 00000000000000..6b8280e95ab093 --- /dev/null +++ b/packages/block-editor/src/components/use-canvas-click-redirect/index.js @@ -0,0 +1,50 @@ +/** + * 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 ) { + useEffect( () => { + function onMouseDown( event ) { + // Only handle clicks on the canvas, not the 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 ); + event.preventDefault(); + } + + ref.current.addEventListener( 'mousedown', onMouseDown ); + + return () => { + ref.current.addEventListener( 'mousedown', onMouseDown ); + }; + }, [] ); +} diff --git a/packages/block-editor/src/components/writing-flow/index.js b/packages/block-editor/src/components/writing-flow/index.js index d48428a80cf9c9..030fef109d4868 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 deleted file mode 100644 index 422b378f2e8e2e..00000000000000 --- a/packages/block-editor/src/components/writing-flow/style.scss +++ /dev/null @@ -1,8 +0,0 @@ -.block-editor-writing-flow { - display: flex; - flex-direction: column; -} - -.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 5421186cbdff53..1ea21ed4574523 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 b5c828e0680d5a..b3eb1a67e99459 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 a177981e04f175..e51b8f4f691898 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,24 @@ export default function VisualEditor() { const deviceType = useSelect( ( select ) => { return select( 'core/edit-post' ).__experimentalGetPreviewDeviceType(); }, [] ); - const inlineStyles = useResizeCanvas( deviceType ); + const hasMetaBoxes = useSelect( + ( select ) => select( 'core/edit-post' ).hasMetaBoxes(), + [] + ); + 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 ); useTypewriter( ref ); useClipboardHandler( ref ); useTypingObserver( ref ); + useCanvasClickRedirect( ref ); return (
@@ -46,7 +58,7 @@ export default function VisualEditor() { ref={ ref } className="editor-styles-wrapper" tabIndex="-1" - style={ inlineStyles } + style={ resizedCanvasStyles || desktopCanvasStyles } >
diff --git a/packages/edit-post/src/components/visual-editor/style.scss b/packages/edit-post/src/components/visual-editor/style.scss index 4534cdefe6886c..75cd53be2a2427 100644 --- a/packages/edit-post/src/components/visual-editor/style.scss +++ b/packages/edit-post/src/components/visual-editor/style.scss @@ -27,20 +27,12 @@ } } -.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%; -} +.editor-styles-wrapper { + cursor: text; -// Hide the extra space when there are metaboxes. -.has-metaboxes .edit-post-visual-editor .block-editor-writing-flow__click-redirect { - height: 0; + > * { + cursor: auto; + } } // Ideally this wrapper div is not needed but if we want to match the positioning of blocks