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

Post/site/template editors: clear selection on iframe html element click, fix bottom click redirect #31385

Merged
merged 2 commits into from
May 17, 2021
Merged

Post/site/template editors: clear selection on iframe html element click, fix bottom click redirect #31385

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
dfc8326
Post editor: fix canvas click redirect
ellatrix Apr 30, 2021
da4c454
Fix selection clearer
ellatrix May 16, 2021
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
2 changes: 2 additions & 0 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 @@ -21,6 +21,7 @@ import { store as blockEditorStore } from '../../store';
import { usePreParsePatterns } from '../../utils/pre-parse-patterns';
import { LayoutProvider, defaultLayout } from './layout';
import BlockToolsBackCompat from '../block-tools/back-compat';
import { useBlockSelectionClearer } from '../block-selection-clearer';

export const IntersectionObserver = createContext();

Expand Down Expand Up @@ -48,6 +49,7 @@ function Root( { className, children } ) {
return (
<div
ref={ useMergeRefs( [
useBlockSelectionClearer(),
useBlockDropZone(),
useInBetweenInserter(),
] ) }
Expand Down
16 changes: 10 additions & 6 deletions packages/block-editor/src/components/block-selection-clearer/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,14 @@ import { useRefEffect } from '@wordpress/compose';
*/
import { store as blockEditorStore } from '../../store';

export function useBlockSelectionClearer( onlySelfClicks = false ) {
/**
* Pass the returned ref callback to an element that should clear block
* selection. Selection will only be cleared if the element is clicked directly,
* not if a child element is clicked.
*
* @return {import('react').RefCallback} Ref callback.
*/
export function useBlockSelectionClearer() {
const { hasSelectedBlock, hasMultiSelection } = useSelect(
blockEditorStore
);
Expand All @@ -22,11 +29,8 @@ export function useBlockSelectionClearer( onlySelfClicks = false ) {
return;
}

// Only handle clicks on the canvas, not the content.
if (
event.target.closest( '.wp-block' ) ||
( onlySelfClicks && event.target !== node )
) {
// Only handle clicks on the element, not the children.
if ( event.target !== node ) {
return;
}

Expand Down
10 changes: 9 additions & 1 deletion packages/block-editor/src/components/iframe/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,11 @@ import { __ } from '@wordpress/i18n';
import { useMergeRefs } from '@wordpress/compose';
import { __experimentalStyleProvider as StyleProvider } from '@wordpress/components';

/**
* Internal dependencies
*/
import { useBlockSelectionClearer } from '../block-selection-clearer';

const BODY_CLASS_NAME = 'editor-styles-wrapper';
const BLOCK_PREFIX = 'wp-block';

Expand Down Expand Up @@ -136,14 +141,15 @@ function setHead( doc, head ) {
function Iframe( { contentRef, children, head, headHTML, ...props }, ref ) {
const [ iframeDocument, setIframeDocument ] = useState();

const clearerRef = useBlockSelectionClearer();
const setRef = useCallback( ( node ) => {
if ( ! node ) {
return;
}

function setDocumentIfReady() {
const { contentDocument } = node;
const { readyState, body } = contentDocument;
const { readyState, body, documentElement } = contentDocument;

if ( readyState !== 'interactive' && readyState !== 'complete' ) {
return false;
Expand All @@ -161,6 +167,8 @@ function Iframe( { contentRef, children, head, headHTML, ...props }, ref ) {
bubbleEvents( contentDocument );
setBodyClassName( contentDocument );
setIframeDocument( contentDocument );
clearerRef( documentElement );
clearerRef( body );

return true;
}
Expand Down
7 changes: 7 additions & 0 deletions packages/block-editor/src/components/use-canvas-click-redirect/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,13 @@ export function useCanvasClickRedirect() {
return;
}

const { bottom } = target.getBoundingClientRect();

// Ensure the click is below the last block.
if ( event.clientY < bottom ) {
return;
}

placeCaretAtHorizontalEdge( target, true );
event.preventDefault();
}
Expand Down
2 changes: 1 addition & 1 deletion packages/edit-post/src/components/visual-editor/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,7 +159,7 @@ export default function VisualEditor( { styles } ) {
useBlockSelectionClearer(),
] );

const blockSelectionClearerRef = useBlockSelectionClearer( true );
const blockSelectionClearerRef = useBlockSelectionClearer();

const [ , RecursionProvider ] = useNoRecursiveRenders(
wrapperUniqueId,
Expand Down
6 changes: 0 additions & 6 deletions packages/edit-post/src/components/visual-editor/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,12 +33,6 @@
// color doesn't show through.
background-color: $white;
flex: 1;

cursor: text;

> * {
cursor: auto;
}
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We need to remove the cursor style as we can't apply it to only the bottom padding of an element.

}

// Ideally this wrapper div is not needed but if we want to match the positioning of blocks
Expand Down
7 changes: 1 addition & 6 deletions packages/edit-site/src/components/block-editor/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import {
BlockTools,
__unstableBlockSettingsMenuFirstItem,
__experimentalUseResizeCanvas as useResizeCanvas,
__unstableUseBlockSelectionClearer as useBlockSelectionClearer,
__unstableUseTypingObserver as useTypingObserver,
__unstableUseMouseMoveTypingReset as useMouseMoveTypingReset,
__unstableEditorStyles as EditorStyles,
Expand Down Expand Up @@ -57,11 +56,7 @@ export default function BlockEditor( { setIsInserterOpen } ) {
const resizedCanvasStyles = useResizeCanvas( deviceType, true );
const ref = useMouseMoveTypingReset();
const contentRef = useRef();
const mergedRefs = useMergeRefs( [
contentRef,
useBlockSelectionClearer(),
useTypingObserver(),
] );
const mergedRefs = useMergeRefs( [ contentRef, useTypingObserver() ] );

return (
<BlockEditorProvider
Expand Down