WordPress 5.4.1 Backports

packages/base-styles/_variables.scss

@@ -23,6 +23,23 @@ $grid-size: 8px;
 $grid-size-large: 16px;
 $grid-size-xlarge: 24px;
 
+
+/**
+ * Grid System.
+ * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
+ */
+
+$grid-unit: 8px;
+$grid-unit-05: 0.5 * $grid-unit;   // 4px
+$grid-unit-10: 1 * $grid-unit;     // 8px
+$grid-unit-15: 1.5 * $grid-unit;   // 12px
+$grid-unit-20: 2 * $grid-unit;     // 16px
+$grid-unit-30: 3 * $grid-unit;     // 24px
+$grid-unit-40: 4 * $grid-unit;     // 32px
+$grid-unit-50: 5 * $grid-unit;     // 40px
+$grid-unit-60: 6 * $grid-unit;     // 48px
+
+
 // Widths, heights & dimensions
 $panel-padding: 16px;
 $header-height: 56px;

packages/block-editor/src/components/block-list/use-multi-selection.js

@@ -105,8 +105,9 @@ export default function useMultiSelection( ref ) {
 				);
 
 				if (
-					! blockNode.contains( startContainer ) ||
-					! blockNode.contains( endContainer )
+					!! blockNode &&
+					( ! blockNode.contains( startContainer ) ||
+						! blockNode.contains( endContainer ) )
 				) {
 					selection.removeAllRanges();
 				}
@@ -242,17 +243,6 @@ export default function useMultiSelection( ref ) {
 
 			startClientId.current = clientId;
 			anchorElement.current = document.activeElement;
-			if ( anchorElement.current ) {
-				const blockInspector = document.querySelector(
-					'.block-editor-block-inspector'
-				);
-				if (
-					blockInspector &&
-					blockInspector.contains( anchorElement.current )
-				) {
-					return;
-				}
-			}
 			startMultiSelect();
 
 			// `onSelectionStart` is called after `mousedown` and `mouseleave`

packages/block-editor/src/components/multi-select-scroll-into-view/index.js

@@ -21,19 +21,25 @@ import { getBlockDOMNode } from '../../utils/dom';
  */
 export default function MultiSelectScrollIntoView() {
 	const selector = ( select ) => {
-		const { getBlockSelectionEnd, isMultiSelecting } = select(
-			'core/block-editor'
-		);
+		const {
+			getBlockSelectionEnd,
+			hasMultiSelection,
+			isMultiSelecting,
+		} = select( 'core/block-editor' );
 
 		return {
 			selectionEnd: getBlockSelectionEnd(),
+			isMultiSelection: hasMultiSelection(),
 			isMultiSelecting: isMultiSelecting(),
 		};
 	};
-	const { selectionEnd, isMultiSelecting } = useSelect( selector, [] );
+	const { isMultiSelection, selectionEnd, isMultiSelecting } = useSelect(
+		selector,
+		[]
+	);
 
 	useEffect( () => {
-		if ( ! selectionEnd || isMultiSelecting ) {
+		if ( ! selectionEnd || isMultiSelecting || ! isMultiSelection ) {
 			return;
 		}
 
@@ -54,7 +60,7 @@ export default function MultiSelectScrollIntoView() {
 		scrollIntoView( extentNode, scrollContainer, {
 			onlyScrollIfNeeded: true,
 		} );
-	}, [ selectionEnd, isMultiSelecting ] );
+	}, [ isMultiSelection, selectionEnd, isMultiSelecting ] );
 
 	return null;
 }

packages/block-editor/src/components/observe-typing/index.js

@@ -42,6 +42,7 @@ function isKeyDownEligibleForStartTyping( event ) {
 }
 
 function ObserveTyping( { children, setTimeout: setSafeTimeout } ) {
+	const typingContainer = useRef();
 	const lastMouseMove = useRef();
 	const isTyping = useSelect( ( select ) =>
 		select( 'core/block-editor' ).isTyping()
@@ -126,11 +127,11 @@ function ObserveTyping( { children, setTimeout: setSafeTimeout } ) {
 
 		// Abort early if already typing, or key press is incurred outside a
 		// text field (e.g. arrow-ing through toolbar buttons).
-		// Ignore typing in a block toolbar
+		// Ignore typing if outside the current DOM container
 		if (
 			isTyping ||
 			! isTextField( target ) ||
-			target.closest( '.block-editor-block-toolbar' )
+			! typingContainer.current.contains( target )
 		) {
 			return;
 		}
@@ -172,6 +173,7 @@ function ObserveTyping( { children, setTimeout: setSafeTimeout } ) {
 	/* eslint-disable jsx-a11y/no-static-element-interactions */
 	return (
 		<div
+			ref={ typingContainer }
 			onFocus={ stopTypingOnNonTextField }
 			onKeyPress={ startTypingInTextField }
 			onKeyDown={ over( [

packages/block-library/src/buttons/style.scss

@@ -1,7 +1,14 @@
 .wp-block-buttons .wp-block-button {
 	display: inline-block;
-	margin: $grid-size-small;
+	margin-right: $grid-unit-10;
+	margin-bottom: $grid-unit-10;
 }
+
+.wp-block-buttons.alignright .wp-block-button {
+	margin-right: none;
+	margin-left: $grid-unit-10;
+}
+
 .wp-block-buttons.aligncenter {
 	text-align: center;
 }

packages/block-library/src/latest-posts/edit.js

@@ -435,8 +435,16 @@ export default withSelect( ( select, props ) => {
 		.map( ( { name, slug } ) => ( { value: slug, label: name } ) );
 
 	return {
-		defaultImageWidth: imageDimensions[ featuredImageSizeSlug ].width,
-		defaultImageHeight: imageDimensions[ featuredImageSizeSlug ].height,
+		defaultImageWidth: get(
+			imageDimensions,
+			[ featuredImageSizeSlug, 'width' ],
+			0
+		),
+		defaultImageHeight: get(
+			imageDimensions,
+			[ featuredImageSizeSlug, 'height' ],
+			0
+		),
 		imageSizeOptions,
 		latestPosts: ! Array.isArray( posts )
 			? posts

packages/block-library/src/rss/index.php

@@ -92,7 +92,7 @@ function render_block_core_rss( $attributes ) {
 		$class .= ' ' . $attributes['className'];
 	}
 
-	return "<ul class='{$class}'>{$list_items}</ul>";
+	return sprintf( "<ul class='%s'>%s</ul>", esc_attr( $class ), $list_items );
 }
 
 /**

packages/block-library/src/search/index.php

@@ -57,7 +57,7 @@ function render_block_core_search( $attributes ) {
 
 	return sprintf(
 		'<form class="%s" role="search" method="get" action="%s">%s</form>',
-		$class,
+		esc_attr( $class ),
 		esc_url( home_url( '/' ) ),
 		$label_markup . $input_markup . $button_markup
 	);

packages/e2e-tests/specs/editor/various/__snapshots__/duplicating-blocks.test.js.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Duplicating blocks should duplicate blocks using the block settings menu 1`] = `
+"<!-- wp:paragraph -->
+<p>Clone me</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>Clone me</p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`Duplicating blocks should duplicate blocks using the keyboard shortcut 1`] = `
+"<!-- wp:paragraph -->
+<p>Clone me</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>Clone me</p>
+<!-- /wp:paragraph -->"
+`;

packages/e2e-tests/specs/editor/various/duplicating-blocks.test.js

@@ -0,0 +1,49 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	createNewPost,
+	insertBlock,
+	getEditedPostContent,
+	clickBlockToolbarButton,
+	pressKeyWithModifier,
+} from '@wordpress/e2e-test-utils';
+
+describe( 'Duplicating blocks', () => {
+	beforeEach( async () => {
+		await createNewPost();
+	} );
+
+	it( 'should duplicate blocks using the block settings menu', async () => {
+		await insertBlock( 'Paragraph' );
+		await page.keyboard.type( 'Clone me' );
+
+		// Select the test we just typed
+		// This doesn't do anything but we previously had a duplicationi bug
+		// When the selection was not collapsed
+		await pressKeyWithModifier( 'primary', 'a' );
+
+		await clickBlockToolbarButton( 'More options' );
+		const duplicateButton = await page.waitForXPath(
+			'//button[text()="Duplicate"]'
+		);
+		await duplicateButton.click();
+
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+	} );
+
+	it( 'should duplicate blocks using the keyboard shortcut', async () => {
+		await insertBlock( 'Paragraph' );
+		await page.keyboard.type( 'Clone me' );
+
+		// Select the test we just typed
+		// This doesn't do anything but we previously had a duplicationi bug
+		// When the selection was not collapsed
+		await pressKeyWithModifier( 'primary', 'a' );
+
+		// Duplicate using the keyboard shortccut
+		await pressKeyWithModifier( 'primaryShift', 'd' );
+
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+	} );
+} );

packages/e2e-tests/specs/editor/various/is-typing.test.js

@@ -0,0 +1,99 @@
+/**
+ * WordPress dependencies
+ */
+import { clickBlockAppender, createNewPost } from '@wordpress/e2e-test-utils';
+
+describe( 'isTyping', () => {
+	beforeEach( async () => {
+		await createNewPost();
+	} );
+
+	it( 'should hide the toolbar when typing', async () => {
+		const blockToolbarSelector = '.block-editor-block-toolbar';
+
+		await clickBlockAppender();
+
+		// Type in a paragraph
+		await page.keyboard.type( 'Type' );
+
+		// Toolbar is hidden
+		let blockToolbar = await page.$( blockToolbarSelector );
+		expect( blockToolbar ).toBe( null );
+
+		// Moving the mouse shows the toolbar
+		await page.mouse.move( 0, 0 );
+		await page.mouse.move( 10, 10 );
+
+		// Toolbar is visible
+		blockToolbar = await page.$( blockToolbarSelector );
+		expect( blockToolbar ).not.toBe( null );
+
+		// Typing again hides the toolbar
+		await page.keyboard.type( ' and continue' );
+
+		// Toolbar is hidden again
+		blockToolbar = await page.$( blockToolbarSelector );
+		expect( blockToolbar ).toBe( null );
+	} );
+
+	it( 'should not close the dropdown when typing in it', async () => {
+		// Adds a Dropdown with an input to all blocks
+		await page.evaluate( () => {
+			const { Dropdown, Button, Fill } = wp.components;
+			const { createElement: el, Fragment } = wp.element;
+			function AddDropdown( BlockListBlock ) {
+				return ( props ) => {
+					return el(
+						Fragment,
+						{},
+						el(
+							Fill,
+							{ name: 'BlockControls' },
+							el( Dropdown, {
+								renderToggle: ( { onToggle } ) =>
+									el(
+										Button,
+										{
+											onClick: onToggle,
+											className: 'dropdown-open',
+										},
+										'Open Dropdown'
+									),
+								renderContent: () =>
+									el( 'input', {
+										className: 'dropdown-input',
+									} ),
+							} )
+						),
+						el( BlockListBlock, props )
+					);
+				};
+			}
+
+			wp.hooks.addFilter(
+				'editor.BlockListBlock',
+				'e2e-test/add-dropdown',
+				AddDropdown
+			);
+		} );
+
+		await clickBlockAppender();
+
+		// Type in a paragraph
+		await page.keyboard.type( 'Type' );
+
+		// Show Toolbar
+		await page.mouse.move( 0, 0 );
+		await page.mouse.move( 10, 10 );
+
+		// Open the dropdown
+		await page.click( '.dropdown-open' );
+
+		// Type inside the dropdown's input
+		await page.type( '.dropdown-input', 'Random' );
+
+		// The input should still be visible
+		const input = await page.$( '.dropdown-input' );
+		expect( input ).not.toBe( null );
+	} );
+} );