Backports for 5.6 Beta 3

packages/block-editor/src/components/block-mover/index.js

@@ -13,7 +13,7 @@ import { ToolbarGroup, ToolbarItem, Button } from '@wordpress/components';
 import { getBlockType } from '@wordpress/blocks';
 import { useState } from '@wordpress/element';
 import { withSelect } from '@wordpress/data';
-import { _n } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -40,6 +40,9 @@ function BlockMover( {
 		return null;
 	}
 
+	const dragHandleLabel =
+		clientIds.length === 1 ? __( 'Drag block' ) : __( 'Drag blocks' );
+
 	// We emulate a disabled state because forcefully applying the `disabled`
 	// attribute on the buttons while it has focus causes the screen to change
 	// to an unfocused state (body as active element) without firing blur on,
@@ -61,11 +64,7 @@ function BlockMover( {
 							icon={ dragHandle }
 							className="block-editor-block-mover__drag-handle"
 							aria-hidden="true"
-							label={ _n(
-								'Drag block',
-								'Drag blocks',
-								clientIds.length
-							) }
+							label={ dragHandleLabel }
 							// Should not be able to tab to drag handle as this
 							// button can only be used with a pointer device.
 							tabIndex="-1"

packages/block-editor/src/components/block-preview/style.scss

@@ -15,45 +15,44 @@
 		padding: 0;
 		margin: 0;
 	}
-}
-
-.block-editor-block-preview__content {
-	// This element receives inline styles for width, height, and transform-scale.
-	// Those inline styles are calculated to fit a perfect thumbnail.
 
-	// Position above the padding.
-	position: absolute;
+	.block-editor-block-preview__content {
+		// This element receives inline styles for width, height, and transform-scale.
+		// Those inline styles are calculated to fit a perfect thumbnail.
 
-	// Vertical alignment. It works with the transform: translate(-50%, -50%)`,
-	top: 0;
-	left: 0;
+		// Position above the padding.
+		position: absolute;
 
-	// Important to set the origin.
-	transform-origin: top left;
+		// Vertical alignment. It works with the transform: translate(-50%, -50%)`,
+		top: 0;
+		left: 0;
 
-	// Resetting paddings, margins, and other.
+		// Important to set the origin.
+		transform-origin: top left;
 
-	text-align: initial;
-	margin: 0;
-	overflow: visible;
-	min-height: auto;
+		// Resetting paddings, margins, and other.
 
-	.block-editor-block-list__insertion-point,
-	.block-editor-block-drop-zone,
-	.reusable-block-indicator,
-	.block-list-appender {
-		display: none;
-	}
+		text-align: initial;
+		margin: 0;
+		overflow: visible;
+		min-height: auto;
+
+		.block-editor-block-list__insertion-point,
+		.block-editor-block-drop-zone,
+		.reusable-block-indicator,
+		.block-list-appender {
+			display: none;
+		}
 
-	// Reset default editor padding
-	.block-editor-block-list__layout.is-root-container {
-		padding-left: 0;
-		padding-right: 0;
+		// Reset default editor padding
+		.block-editor-block-list__layout.is-root-container {
+			padding-left: 0;
+			padding-right: 0;
 
-		> .wp-block[data-align="full"] {
-			margin-left: 0;
-			margin-right: 0;
+			> .wp-block[data-align="full"] {
+				margin-left: 0;
+				margin-right: 0;
+			}
 		}
 	}
 }
-

packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js

@@ -6,7 +6,7 @@ import { castArray, flow, noop } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { __, _n } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import {
 	DropdownMenu,
 	MenuGroup,
@@ -74,6 +74,9 @@ export function BlockSettingsDropdown( {
 		[ __experimentalSelectBlock ]
 	);
 
+	const removeBlockLabel =
+		count === 1 ? __( 'Remove block' ) : __( 'Remove blocks' );
+
 	return (
 		<BlockActions
 			clientIds={ clientIds }
@@ -185,11 +188,7 @@ export function BlockSettingsDropdown( {
 										) }
 										shortcut={ shortcuts.remove }
 									>
-										{ _n(
-											'Remove block',
-											'Remove blocks',
-											count
-										) }
+										{ removeBlockLabel }
 									</MenuItem>
 								) }
 							</MenuGroup>

packages/block-editor/src/components/link-control/test/index.js

@@ -4,7 +4,7 @@
 import { render, unmountComponentAtNode } from 'react-dom';
 import { act, Simulate } from 'react-dom/test-utils';
 import { queryByText, queryByRole } from '@testing-library/react';
-import { first, last, nth, uniqueId } from 'lodash';
+import { default as lodash, first, last, nth, uniqueId } from 'lodash';
 /**
  * WordPress dependencies
  */
@@ -16,6 +16,12 @@ import { UP, DOWN, ENTER } from '@wordpress/keycodes';
 import LinkControl from '../';
 import { fauxEntitySuggestions, fetchFauxEntitySuggestions } from './fixtures';
 
+// Mock debounce() so that it runs instantly.
+lodash.debounce = jest.fn( ( callback ) => {
+	callback.cancel = jest.fn();
+	return callback;
+} );
+
 const mockFetchSearchSuggestions = jest.fn();
 
 jest.mock( '@wordpress/data/src/components/use-select', () => () => ( {

packages/block-editor/src/components/url-input/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { throttle, isFunction } from 'lodash';
+import { debounce, isFunction } from 'lodash';
 import classnames from 'classnames';
 import scrollIntoView from 'dom-scroll-into-view';
 
@@ -40,7 +40,7 @@ class URLInput extends Component {
 		this.bindSuggestionNode = this.bindSuggestionNode.bind( this );
 		this.autocompleteRef = props.autocompleteRef || createRef();
 		this.inputRef = createRef();
-		this.updateSuggestions = throttle(
+		this.updateSuggestions = debounce(
 			this.updateSuggestions.bind( this ),
 			200
 		);

packages/block-editor/src/store/selectors.js

@@ -1697,7 +1697,11 @@ export const __experimentalGetParsedReusableBlock = createSelector(
 
 		// Only reusableBlock.content.raw should be used here, `reusableBlock.content` is a
 		// workaround until #22127 is fixed.
-		return parse( reusableBlock.content.raw || reusableBlock.content );
+		return parse(
+			typeof reusableBlock.content.raw === 'string'
+				? reusableBlock.content.raw
+				: reusableBlock.content
+		);
 	},
 	( state ) => [ getReusableBlocks( state ) ]
 );

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

@@ -47,11 +47,14 @@
 
 	// Between mobile and large viewports, allow 2 columns.
 	@media (min-width: #{ ($break-small) }) and (max-width: #{ ($break-medium - 1) }) {
-		// As with mobile styles, this must be important since the Column
-		// assigns its own width as an inline style, which should take effect
-		// starting at `break-medium`.
-		flex-basis: calc(50% - 1em) !important;
-		flex-grow: 0;
+		// Only add two column styling if there are two or more columns
+		&:not(:only-child) {
+			// As with mobile styles, this must be important since the Column
+			// assigns its own width as an inline style, which should take effect
+			// starting at `break-medium`.
+			flex-basis: calc(50% - 1em) !important;
+			flex-grow: 0;
+		}
 
 		// Add space between the multiple columns. Themes can customize this if they wish to work differently.
 		// Only apply this beyond the mobile breakpoint, as there's only a single column on mobile.

packages/block-library/src/heading/block.json

@@ -3,7 +3,7 @@
 	"name": "core/heading",
 	"category": "text",
 	"attributes": {
-		"align": {
+		"textAlign": {
 			"type": "string"
 		},
 		"content": {

packages/block-library/src/heading/deprecated.js

@@ -7,7 +7,11 @@ import { omit } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { getColorClassName, RichText } from '@wordpress/block-editor';
+import {
+	getColorClassName,
+	RichText,
+	useBlockProps,
+} from '@wordpress/block-editor';
 
 const blockSupports = {
 	className: false,
@@ -48,7 +52,52 @@ const migrateCustomColors = ( attributes ) => {
 	};
 };
 
+const TEXT_ALIGN_OPTIONS = [ 'left', 'right', 'center' ];
+
+const migrateTextAlign = ( attributes ) => {
+	const { align, ...rest } = attributes;
+	return TEXT_ALIGN_OPTIONS.includes( align )
+		? { ...rest, textAlign: align }
+		: attributes;
+};
+
 const deprecated = [
+	{
+		supports: {
+			align: [ 'wide', 'full' ],
+			anchor: true,
+			className: false,
+			color: { link: true },
+			fontSize: true,
+			lineHeight: true,
+			__experimentalSelector: {
+				'core/heading/h1': 'h1',
+				'core/heading/h2': 'h2',
+				'core/heading/h3': 'h3',
+				'core/heading/h4': 'h4',
+				'core/heading/h5': 'h5',
+				'core/heading/h6': 'h6',
+			},
+			__unstablePasteTextInline: true,
+		},
+		attributes: blockAttributes,
+		isEligible: ( { align } ) => TEXT_ALIGN_OPTIONS.includes( align ),
+		migrate: migrateTextAlign,
+		save( { attributes } ) {
+			const { align, content, level } = attributes;
+			const TagName = 'h' + level;
+
+			const className = classnames( {
+				[ `has-text-align-${ align }` ]: align,
+			} );
+
+			return (
+				<TagName { ...useBlockProps.save( { className } ) }>
+					<RichText.Content value={ content } />
+				</TagName>
+			);
+		},
+	},
 	{
 		supports: blockSupports,
 		attributes: {
@@ -60,7 +109,8 @@ const deprecated = [
 				type: 'string',
 			},
 		},
-		migrate: migrateCustomColors,
+		migrate: ( attributes ) =>
+			migrateCustomColors( migrateTextAlign( attributes ) ),
 		save( { attributes } ) {
 			const {
 				align,
@@ -101,7 +151,8 @@ const deprecated = [
 				type: 'string',
 			},
 		},
-		migrate: migrateCustomColors,
+		migrate: ( attributes ) =>
+			migrateCustomColors( migrateTextAlign( attributes ) ),
 		save( { attributes } ) {
 			const {
 				align,
@@ -143,7 +194,8 @@ const deprecated = [
 				type: 'string',
 			},
 		},
-		migrate: migrateCustomColors,
+		migrate: ( attributes ) =>
+			migrateCustomColors( migrateTextAlign( attributes ) ),
 		save( { attributes } ) {
 			const {
 				align,