prepare 11/19 version

bph · Nov 19, 2020 · 86ffa98 · 86ffa98
2 parents 00c18bc + 4d18b77
commit 86ffa98
Show file tree

Hide file tree

Showing 15 changed files with 457 additions and 172 deletions.
diff --git a/.github/workflows/unit-test.yml b/.github/workflows/unit-test.yml
@@ -83,8 +83,17 @@ jobs:
         chmod -R 767 ./ # TODO: Possibly integrate in wp-env
         npm run wp-env start
 
-    - name: Running the tests
-      run: npm run test-php && npm run test-unit-php-multisite
+    - name: Running lint check
+      run: npm run lint-php
+
+    - name: Running single site unit tests
+      run: npm run test-unit-php
+      if: ${{ success() || failure() }}
+
+    - name: Running multisite unit tests
+      run: npm run test-unit-php-multisite
+      if: ${{ success() || failure() }}
+
 
   mobile-unit-js:
     name: Mobile

diff --git a/packages/block-editor/src/components/block-icon/index.native.js b/packages/block-editor/src/components/block-icon/index.native.js
@@ -8,15 +8,33 @@ import { View } from 'react-native';
  */
 import { Icon } from '@wordpress/components';
 import { blockDefault } from '@wordpress/icons';
+import { withPreferredColorScheme } from '@wordpress/compose';
 
-export default function BlockIcon( { icon, showColors = false } ) {
+/**
+ * Internal dependencies
+ */
+import styles from './style.scss';
+
+export function BlockIcon( {
+	icon,
+	showColors = false,
+	getStylesFromColorScheme,
+} ) {
 	if ( icon?.src === 'block-default' ) {
 		icon = {
 			src: blockDefault,
 		};
 	}
 
-	const renderedIcon = <Icon icon={ icon && icon.src ? icon.src : icon } />;
+	const renderedIcon = (
+		<Icon
+			icon={ icon && icon.src ? icon.src : icon }
+			{ ...getStylesFromColorScheme(
+				styles.iconPlaceholder,
+				styles.iconPlaceholderDark
+			) }
+		/>
+	);
 	const style = showColors
 		? {
 				backgroundColor: icon && icon.background,
@@ -26,3 +44,5 @@ export default function BlockIcon( { icon, showColors = false } ) {
 
 	return <View style={ style }>{ renderedIcon }</View>;
 }
+
+export default withPreferredColorScheme( BlockIcon );
diff --git a/packages/block-editor/src/components/block-icon/style.native.scss b/packages/block-editor/src/components/block-icon/style.native.scss
@@ -0,0 +1,7 @@
+.iconPlaceholder {
+	fill: $gray-dark;
+}
+
+.iconPlaceholderDark {
+	fill: $white;
+}
diff --git a/packages/block-editor/src/components/block-selection-clearer/index.js b/packages/block-editor/src/components/block-selection-clearer/index.js
@@ -2,8 +2,9 @@
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
+import { useEffect, useRef } from '@wordpress/element';
 
-function useBlockSelectionClearer() {
+export function useBlockSelectionClearer( ref ) {
 	const hasSelection = useSelect( ( select ) => {
 		const { hasSelectedBlock, hasMultiSelection } = select(
 			'core/block-editor'
@@ -13,14 +14,25 @@ function useBlockSelectionClearer() {
 	} );
 	const { clearSelectedBlock } = useDispatch( 'core/block-editor' );
 
-	return ( event ) => {
-		if ( event.target === event.currentTarget && hasSelection ) {
+	useEffect( () => {
+		if ( ! hasSelection ) {
+			return;
+		}
+
+		function onFocus() {
 			clearSelectedBlock();
 		}
-	};
+
+		ref.current.addEventListener( 'focus', onFocus );
+
+		return () => {
+			ref.current.removeEventListener( 'focus', onFocus );
+		};
+	}, [ hasSelection, clearSelectedBlock ] );
 }
 
 export default function BlockSelectionClearer( props ) {
-	const onFocus = useBlockSelectionClearer();
-	return <div tabIndex={ -1 } onFocus={ onFocus } { ...props } />;
+	const ref = useRef();
+	useBlockSelectionClearer( ref );
+	return <div tabIndex={ -1 } ref={ ref } { ...props } />;
 }
diff --git a/packages/block-editor/src/components/copy-handler/index.js b/packages/block-editor/src/components/copy-handler/index.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useCallback, useRef } from '@wordpress/element';
+import { useCallback, useEffect, useRef } from '@wordpress/element';
 import { serialize, pasteHandler } from '@wordpress/blocks';
 import {
 	documentHasSelection,
@@ -71,97 +71,99 @@ export function useNotifyCopy() {
 	}, [] );
 }
 
-function CopyHandler( { children } ) {
-	const containerRef = useRef();
-
+export function useClipboardHandler( ref ) {
 	const {
 		getBlocksByClientId,
 		getSelectedBlockClientIds,
 		hasMultiSelection,
 		getSettings,
 	} = useSelect( ( select ) => select( 'core/block-editor' ), [] );
-
 	const { flashBlock, removeBlocks, replaceBlocks } = useDispatch(
 		'core/block-editor'
 	);
-
 	const notifyCopy = useNotifyCopy();
 
-	const {
-		__experimentalCanUserUseUnfilteredHTML: canUserUseUnfilteredHTML,
-	} = getSettings();
+	useEffect( () => {
+		function handler( event ) {
+			const selectedBlockClientIds = getSelectedBlockClientIds();
 
-	const handler = ( event ) => {
-		const selectedBlockClientIds = getSelectedBlockClientIds();
+			if ( selectedBlockClientIds.length === 0 ) {
+				return;
+			}
 
-		if ( selectedBlockClientIds.length === 0 ) {
-			return;
-		}
+			// Always handle multiple selected blocks.
+			if ( ! hasMultiSelection() ) {
+				const { target } = event;
+				const { ownerDocument } = target;
+				// If copying, only consider actual text selection as selection.
+				// Otherwise, any focus on an input field is considered.
+				const hasSelection =
+					event.type === 'copy' || event.type === 'cut'
+						? documentHasUncollapsedSelection( ownerDocument )
+						: documentHasSelection( ownerDocument );
+
+				// Let native copy behaviour take over in input fields.
+				if ( hasSelection ) {
+					return;
+				}
+			}
 
-		// Always handle multiple selected blocks.
-		if ( ! hasMultiSelection() ) {
-			const { target } = event;
-			const { ownerDocument } = target;
-			// If copying, only consider actual text selection as selection.
-			// Otherwise, any focus on an input field is considered.
-			const hasSelection =
-				event.type === 'copy' || event.type === 'cut'
-					? documentHasUncollapsedSelection( ownerDocument )
-					: documentHasSelection( ownerDocument );
-
-			// Let native copy behaviour take over in input fields.
-			if ( hasSelection ) {
+			if ( ! ref.current.contains( event.target ) ) {
 				return;
 			}
-		}
+			event.preventDefault();
+
+			if ( event.type === 'copy' || event.type === 'cut' ) {
+				if ( selectedBlockClientIds.length === 1 ) {
+					flashBlock( selectedBlockClientIds[ 0 ] );
+				}
+				notifyCopy( event.type, selectedBlockClientIds );
+				const blocks = getBlocksByClientId( selectedBlockClientIds );
+				const serialized = serialize( blocks );
+
+				event.clipboardData.setData( 'text/plain', serialized );
+				event.clipboardData.setData( 'text/html', serialized );
+			}
 
-		if ( ! containerRef.current.contains( event.target ) ) {
-			return;
+			if ( event.type === 'cut' ) {
+				removeBlocks( selectedBlockClientIds );
+			} else if ( event.type === 'paste' ) {
+				const {
+					__experimentalCanUserUseUnfilteredHTML: canUserUseUnfilteredHTML,
+				} = getSettings();
+				const { plainText, html } = getPasteEventData( event );
+				const blocks = pasteHandler( {
+					HTML: html,
+					plainText,
+					mode: 'BLOCKS',
+					canUserUseUnfilteredHTML,
+				} );
+
+				replaceBlocks(
+					selectedBlockClientIds,
+					blocks,
+					blocks.length - 1,
+					-1
+				);
+			}
 		}
-		event.preventDefault();
 
-		if ( event.type === 'copy' || event.type === 'cut' ) {
-			if ( selectedBlockClientIds.length === 1 ) {
-				flashBlock( selectedBlockClientIds[ 0 ] );
-			}
-			notifyCopy( event.type, selectedBlockClientIds );
-			const blocks = getBlocksByClientId( selectedBlockClientIds );
-			const serialized = serialize( blocks );
+		ref.current.addEventListener( 'copy', handler );
+		ref.current.addEventListener( 'cut', handler );
+		ref.current.addEventListener( 'paste', handler );
 
-			event.clipboardData.setData( 'text/plain', serialized );
-			event.clipboardData.setData( 'text/html', serialized );
-		}
+		return () => {
+			ref.current.removeEventListener( 'copy', handler );
+			ref.current.removeEventListener( 'cut', handler );
+			ref.current.removeEventListener( 'paste', handler );
+		};
+	}, [] );
+}
 
-		if ( event.type === 'cut' ) {
-			removeBlocks( selectedBlockClientIds );
-		} else if ( event.type === 'paste' ) {
-			const { plainText, html } = getPasteEventData( event );
-			const blocks = pasteHandler( {
-				HTML: html,
-				plainText,
-				mode: 'BLOCKS',
-				canUserUseUnfilteredHTML,
-			} );
-
-			replaceBlocks(
-				selectedBlockClientIds,
-				blocks,
-				blocks.length - 1,
-				-1
-			);
-		}
-	};
-
-	return (
-		<div
-			ref={ containerRef }
-			onCopy={ handler }
-			onCut={ handler }
-			onPaste={ handler }
-		>
-			{ children }
-		</div>
-	);
+function CopyHandler( { children } ) {
+	const ref = useRef();
+	useClipboardHandler( ref );
+	return <div ref={ ref }>{ children }</div>;
 }
 
 export default CopyHandler;
diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js
@@ -83,24 +83,39 @@ export {
 } from './block-list/block-wrapper';
 export { default as BlockMover } from './block-mover';
 export { default as BlockPreview } from './block-preview';
-export { default as BlockSelectionClearer } from './block-selection-clearer';
+export {
+	default as BlockSelectionClearer,
+	useBlockSelectionClearer as __unstableUseBlockSelectionClearer,
+} from './block-selection-clearer';
 export { default as BlockSettingsMenu } from './block-settings-menu';
 export { default as BlockSettingsMenuControls } from './block-settings-menu-controls';
 export { default as BlockTitle } from './block-title';
 export { default as BlockToolbar } from './block-toolbar';
-export { default as CopyHandler } from './copy-handler';
+export {
+	default as CopyHandler,
+	useClipboardHandler as __unstableUseClipboardHandler,
+} from './copy-handler';
 export { default as DefaultBlockAppender } from './default-block-appender';
 export { default as __unstableEditorStyles } from './editor-styles';
 export { default as Inserter } from './inserter';
 export { default as __experimentalLibrary } from './inserter/library';
 export { default as __experimentalSearchForm } from './inserter/search-form';
 export { default as BlockEditorKeyboardShortcuts } from './keyboard-shortcuts';
-export { default as MultiSelectScrollIntoView } from './multi-select-scroll-into-view';
+export {
+	default as MultiSelectScrollIntoView,
+	useScrollMultiSelectionIntoView as __unstableUseScrollMultiSelectionIntoView,
+} from './multi-select-scroll-into-view';
 export { default as NavigableToolbar } from './navigable-toolbar';
-export { default as ObserveTyping } from './observe-typing';
+export {
+	default as ObserveTyping,
+	useTypingObserver as __unstableUseTypingObserver,
+} from './observe-typing';
 export { default as PreserveScrollInReorder } from './preserve-scroll-in-reorder';
 export { default as SkipToSelectedBlock } from './skip-to-selected-block';
-export { default as Typewriter } from './typewriter';
+export {
+	default as Typewriter,
+	useTypewriter as __unstableUseTypewriter,
+} from './typewriter';
 export { default as Warning } from './warning';
 export { default as WritingFlow } from './writing-flow';