Cherry Pick PR's for WordPress 5.4 beta 2

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

@@ -6,9 +6,24 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
+import { useEffect } from '@wordpress/element';
 import { navigateRegions } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
+function useHTMLClass( className ) {
+	useEffect( () => {
+		const element =
+			document && document.querySelector( `html:not(.${ className }` );
+		if ( ! element ) {
+			return;
+		}
+		element.classList.toggle( className );
+		return () => {
+			element.classList.toggle( className );
+		};
+	}, [ className ] );
+}
+
 function EditorSkeleton( {
 	footer,
 	header,
@@ -17,6 +32,7 @@ function EditorSkeleton( {
 	publish,
 	className,
 } ) {
+	useHTMLClass( 'block-editor-editor-skeleton__html-container' );
 	return (
 		<div
 			className={ classnames(

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

@@ -1,6 +1,6 @@
 // On Mobile devices, swiping the HTML element should not scroll.
 // By making it fixed, we prevent that.
-html {
+html.block-editor-editor-skeleton__html-container {
 	position: fixed;
 	width: 100%;
 

packages/block-editor/src/components/link-control/README.md

@@ -30,7 +30,7 @@ Default properties include:
 [
 	{
 		id: 'opensInNewTab',
-		title: 'Open in New Tab',
+		title: 'Open in new tab',
 	},
 ];
 ```

packages/block-editor/src/components/link-control/settings-drawer.js

@@ -12,7 +12,7 @@ import { ToggleControl } from '@wordpress/components';
 const defaultSettings = [
 	{
 		id: 'opensInNewTab',
-		title: __( 'Open in New Tab' ),
+		title: __( 'Open in new tab' ),
 	},
 ];
 

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

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Basic rendering should render 1`] = `"<div tabindex=\\"-1\\" class=\\"block-editor-link-control\\"><form><div class=\\"components-base-control block-editor-url-input block-editor-link-control__search-input\\"><div class=\\"components-base-control__field\\"><input type=\\"text\\" aria-label=\\"URL\\" required=\\"\\" placeholder=\\"Search or type url\\" role=\\"combobox\\" aria-expanded=\\"false\\" aria-autocomplete=\\"list\\" aria-owns=\\"block-editor-url-input-suggestions-0\\" value=\\"\\"></div></div><div class=\\"block-editor-link-control__search-actions\\"><button type=\\"submit\\" class=\\"components-button block-editor-link-control__search-submit has-icon\\" aria-label=\\"Submit\\"><svg aria-hidden=\\"true\\" role=\\"img\\" focusable=\\"false\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"20\\" height=\\"20\\" viewBox=\\"0 0 20 20\\" class=\\"dashicon dashicons-editor-break\\"><path d=\\"M16 4h2v9H7v3l-5-4 5-4v3h9V4z\\"></path></svg></button></div></form><fieldset class=\\"block-editor-link-control__settings\\"><legend class=\\"screen-reader-text\\">Currently selected link settings</legend><div class=\\"components-base-control components-toggle-control block-editor-link-control__setting\\"><div class=\\"components-base-control__field\\"><span class=\\"components-form-toggle\\"><input class=\\"components-form-toggle__input\\" id=\\"inspector-toggle-control-0\\" type=\\"checkbox\\"><span class=\\"components-form-toggle__track\\"></span><span class=\\"components-form-toggle__thumb\\"></span><svg width=\\"6\\" height=\\"6\\" aria-hidden=\\"true\\" role=\\"img\\" focusable=\\"false\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 6 6\\" class=\\"components-form-toggle__off\\"><path d=\\"M3 1.5c.8 0 1.5.7 1.5 1.5S3.8 4.5 3 4.5 1.5 3.8 1.5 3 2.2 1.5 3 1.5M3 0C1.3 0 0 1.3 0 3s1.3 3 3 3 3-1.3 3-3-1.3-3-3-3z\\"></path></svg></span><label for=\\"inspector-toggle-control-0\\" class=\\"components-toggle-control__label\\">Open in New Tab</label></div></div></fieldset></div>"`;
+exports[`Basic rendering should render 1`] = `"<div tabindex=\\"-1\\" class=\\"block-editor-link-control\\"><form><div class=\\"components-base-control block-editor-url-input block-editor-link-control__search-input\\"><div class=\\"components-base-control__field\\"><input type=\\"text\\" aria-label=\\"URL\\" required=\\"\\" placeholder=\\"Search or type url\\" role=\\"combobox\\" aria-expanded=\\"false\\" aria-autocomplete=\\"list\\" aria-owns=\\"block-editor-url-input-suggestions-0\\" value=\\"\\"></div></div><div class=\\"block-editor-link-control__search-actions\\"><button type=\\"submit\\" class=\\"components-button block-editor-link-control__search-submit has-icon\\" aria-label=\\"Submit\\"><svg aria-hidden=\\"true\\" role=\\"img\\" focusable=\\"false\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"20\\" height=\\"20\\" viewBox=\\"0 0 20 20\\" class=\\"dashicon dashicons-editor-break\\"><path d=\\"M16 4h2v9H7v3l-5-4 5-4v3h9V4z\\"></path></svg></button></div></form><fieldset class=\\"block-editor-link-control__settings\\"><legend class=\\"screen-reader-text\\">Currently selected link settings</legend><div class=\\"components-base-control components-toggle-control block-editor-link-control__setting\\"><div class=\\"components-base-control__field\\"><span class=\\"components-form-toggle\\"><input class=\\"components-form-toggle__input\\" id=\\"inspector-toggle-control-0\\" type=\\"checkbox\\"><span class=\\"components-form-toggle__track\\"></span><span class=\\"components-form-toggle__thumb\\"></span><svg width=\\"6\\" height=\\"6\\" aria-hidden=\\"true\\" role=\\"img\\" focusable=\\"false\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 6 6\\" class=\\"components-form-toggle__off\\"><path d=\\"M3 1.5c.8 0 1.5.7 1.5 1.5S3.8 4.5 3 4.5 1.5 3.8 1.5 3 2.2 1.5 3 1.5M3 0C1.3 0 0 1.3 0 3s1.3 3 3 3 3-1.3 3-3-1.3-3-3-3z\\"></path></svg></span><label for=\\"inspector-toggle-control-0\\" class=\\"components-toggle-control__label\\">Open in new tab</label></div></div></fieldset></div>"`;

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

@@ -836,7 +836,7 @@ describe( 'Selecting links', () => {
 describe( 'Addition Settings UI', () => {
 	it( 'should display "New Tab" setting (in "off" mode) by default when a link is selected', async () => {
 		const selectedLink = first( fauxEntitySuggestions );
-		const expectedSettingText = 'Open in New Tab';
+		const expectedSettingText = 'Open in new tab';
 
 		const LinkControlConsumer = () => {
 			const [ link ] = useState( selectedLink );
@@ -873,7 +873,7 @@ describe( 'Addition Settings UI', () => {
 		const customSettings = [
 			{
 				id: 'newTab',
-				title: 'Open in New Tab',
+				title: 'Open in new tab',
 			},
 			{
 				id: 'noFollow',

packages/block-editor/src/components/url-popover/README.md

@@ -64,7 +64,7 @@ class MyURLPopover extends Component {
 						onClose={ this.closeURLPopover }
 						renderSettings={ () => (
 							<ToggleControl
-								label={ __( 'Open in New Tab' ) }
+								label={ __( 'Open in new tab' ) }
 								checked={ opensInNewWindow }
 								onChange={ this.setTarget }
 							/>

packages/block-editor/src/components/url-popover/image-url-input-ui.js

@@ -228,7 +228,7 @@ const ImageURLInputUI = ( {
 	const advancedOptions = (
 		<>
 			<ToggleControl
-				label={ __( 'Open in New Tab' ) }
+				label={ __( 'Open in new tab' ) }
 				onChange={ onSetNewTab }
 				checked={ linkTarget === '_blank' }
 			/>

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

@@ -66,20 +66,32 @@
 			// Responsiveness: Show at most one columns on mobile.
 			flex-basis: 100%;
 
+			// Between mobile and large viewports, allow 2 columns.
 			@include break-small() {
+				flex-basis: calc(50% - (#{$grid-size-large}));
+				flex-grow: 0;
+				margin-left: 0;
+				margin-right: 0;
+			}
+
+			// At large viewports, show all columns horizontally.
+			@include break-medium() {
+				// Available space should be divided equally amongst columns
+				// without an assigned width. This is achieved by assigning a
+				// flex basis that is consistent (equal), would not cause the
+				// sum total of column widths to exceed 100%, and which would
+				// cede to a column with an assigned width. The `flex-grow`
+				// allows columns to maximally and equally occupy space
+				// remaining after subtracting the space occupied by columns
+				// with explicit widths (if any exist).
+				flex-basis: 0;
 				flex-grow: 1;
-				flex-basis: auto;
 
-				// Beyond mobile, allow columns. Columns with an explicitly-
-				// assigned width should maintain their `flex-basis` width and
-				// not grow. All other blocks should automatically inherit the
-				// `flex-grow` to occupy the available space.
+				// Columns with an explicitly-assigned width should maintain
+				// their `flex-basis` width and not grow.
 				&[data-has-explicit-width] {
 					flex-grow: 0;
 				}
-
-				margin-left: 0;
-				margin-right: 0;
 			}
 
 			// Add space between columns. Themes can customize this if they wish to work differently.

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

@@ -30,15 +30,10 @@
 	word-break: break-word; // For back-compat.
 	overflow-wrap: break-word; // New standard.
 
+	// Between mobile and large viewports, allow 2 columns.
 	@include break-small() {
-
-		// Beyond mobile, allow columns. Columns with an explicitly-assigned
-		// width should maintain their `flex-basis` width and not grow. All
-		// other blocks should automatically inherit the `flex-grow` to occupy
-		// the available space.
-		&[style] {
-			flex-grow: 0;
-		}
+		flex-basis: calc(50% - #{$grid-size-large});
+		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.
@@ -47,7 +42,23 @@
 		}
 	}
 
+	// At large viewports, show all columns horizontally.
 	@include break-medium() {
+		// Available space should be divided equally amongst columns without an
+		// assigned width. This is achieved by assigning a flex basis that is
+		// consistent (equal), would not cause the sum total of column widths to
+		// exceed 100%, and which would cede to a column with an assigned width.
+		// The `flex-grow` allows columns to maximally and equally occupy space
+		// remaining after subtracting the space occupied by columns with
+		// explicit widths (if any exist).
+		flex-basis: 0;
+		flex-grow: 1;
+
+		// Columns with an explicitly-assigned width should maintain their
+		// `flex-basis` width and not grow.
+		&[style] {
+			flex-grow: 0;
+		}
 
 		// When columns are in a single row, add space before all except the first.
 		&:not(:first-child) {

packages/block-library/src/group/edit.js

@@ -6,7 +6,7 @@ import { compose } from '@wordpress/compose';
 import { InnerBlocks, __experimentalUseColors } from '@wordpress/block-editor';
 import { useRef } from '@wordpress/element';
 
-function GroupEdit( { hasInnerBlocks } ) {
+function GroupEdit( { hasInnerBlocks, className } ) {
 	const ref = useRef();
 	const {
 		TextColor,
@@ -28,7 +28,7 @@ function GroupEdit( { hasInnerBlocks } ) {
 			{ InspectorControlsColorPanel }
 			<BackgroundColor>
 				<TextColor>
-					<div className="wp-block-group" ref={ ref }>
+					<div className={ className } ref={ ref }>
 						<div className="wp-block-group__inner-container">
 							<InnerBlocks
 								renderAppender={

packages/components/src/custom-gradient-picker/index.js

@@ -79,13 +79,13 @@ const GradientTypePicker = ( { gradientAST, hasGradient, onChange } ) => {
 				controls={ [
 					{
 						icon: <LinearGradientIcon />,
-						title: 'Linear Gradient',
+						title: __( 'Linear Gradient' ),
 						isActive: hasGradient && type === 'linear-gradient',
 						onClick: onSetLinearGradient,
 					},
 					{
 						icon: <RadialGradientIcon />,
-						title: 'Radial Gradient',
+						title: __( 'Radial Gradient' ),
 						isActive: hasGradient && type === 'radial-gradient',
 						onClick: onSetRadialGradient,
 					},

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

@@ -20,7 +20,7 @@ exports[`Links can be created by selecting text and using keyboard shortcuts 1`]
 
 exports[`Links can be created by selecting text and using keyboard shortcuts 2`] = `
 "<!-- wp:paragraph -->
-<p>This is <a href=\\"https://wordpress.org/gutenberg\\" target=\\"_blank\\" rel=\\"noreferrer noopener\\" aria-label=\\"Gutenberg (opens in a new tab)\\">Gutenberg</a></p>
+<p>This is <a href=\\"https://wordpress.org/gutenberg\\" target=\\"_blank\\" rel=\\"noreferrer noopener\\">Gutenberg</a></p>
 <!-- /wp:paragraph -->"
 `;
 
@@ -62,7 +62,7 @@ exports[`Links can be removed 1`] = `
 
 exports[`Links should contain a label when it should open in a new tab 1`] = `
 "<!-- wp:paragraph -->
-<p>This is <a href=\\"http://w.org\\" target=\\"_blank\\" rel=\\"noreferrer noopener\\" aria-label=\\"WordPress (opens in a new tab)\\">WordPress</a></p>
+<p>This is <a href=\\"http://w.org\\" target=\\"_blank\\" rel=\\"noreferrer noopener\\">WordPress</a></p>
 <!-- /wp:paragraph -->"
 `;
 

packages/e2e-tests/specs/editor/various/links.test.js

@@ -67,7 +67,7 @@ describe( 'Links', () => {
 		// Type a URL
 		await page.keyboard.type( 'https://wordpress.org/gutenberg' );
 
-		// Navigate to and toggle the "Open in New Tab" checkbox.
+		// Navigate to and toggle the "Open in new tab" checkbox.
 		await page.keyboard.press( 'Tab' );
 		await page.keyboard.press( 'Tab' );
 		await page.keyboard.press( 'Space' );
@@ -371,7 +371,7 @@ describe( 'Links', () => {
 			)
 		).not.toBeNull();
 
-		// Tab to the "Open in New Tab" toggle.
+		// Tab to the "Open in new tab" toggle.
 		await page.keyboard.press( 'Tab' );
 		await page.keyboard.press( 'Tab' );
 
@@ -467,7 +467,7 @@ describe( 'Links', () => {
 		await pressKeyWithModifier( 'primary', 'k' );
 		await waitForAutoFocus();
 
-		// Navigate to and toggle the "Open in New Tab" checkbox.
+		// Navigate to and toggle the "Open in new tab" checkbox.
 		await page.keyboard.press( 'Tab' );
 		await page.keyboard.press( 'Tab' );
 		await page.keyboard.press( 'Space' );
@@ -476,7 +476,7 @@ describe( 'Links', () => {
 		// a changing value of the setting.
 		await page.waitForSelector( ':focus.components-form-toggle__input' );
 
-		// Close dialog. Expect that "Open in New Tab" would have been applied
+		// Close dialog. Expect that "Open in new tab" would have been applied
 		// immediately.
 		await page.keyboard.press( 'Escape' );
 
@@ -505,7 +505,7 @@ describe( 'Links', () => {
 		await pressKeyWithModifier( 'primary', 'k' );
 		await waitForAutoFocus();
 
-		// Navigate to the "Open in New Tab" checkbox.
+		// Navigate to the "Open in new tab" checkbox.
 		await page.keyboard.press( 'Tab' );
 		await page.keyboard.press( 'Tab' );
 		// Uncheck the checkbox.

packages/edit-site/package.json

@@ -1,7 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "1.2.0",
-	"private": true,
+	"version": "1.3.0-alpha.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",

packages/format-library/src/image/index.js

@@ -45,6 +45,7 @@ export const image = {
 			this.onKeyDown = this.onKeyDown.bind( this );
 			this.openModal = this.openModal.bind( this );
 			this.closeModal = this.closeModal.bind( this );
+			this.anchorRef = null;
 			this.state = {
 				modal: false,
 			};
@@ -95,6 +96,22 @@ export const image = {
 			this.setState( { modal: false } );
 		}
 
+		componentDidMount() {
+			this.anchorRef = getRange();
+		}
+
+		componentDidUpdate( prevProps ) {
+			// When the popover is open or when the selected image changes,
+			// update the anchorRef.
+			if (
+				( ! prevProps.isObjectActive && this.props.isObjectActive ) ||
+				prevProps.activeObjectAttributes.url !==
+					this.props.activeObjectAttributes.url
+			) {
+				this.anchorRef = getRange();
+			}
+		}
+
 		render() {
 			const {
 				value,
@@ -151,7 +168,7 @@ export const image = {
 						<Popover
 							position="bottom center"
 							focusOnMount={ false }
-							anchorRef={ getRange() }
+							anchorRef={ this.anchorRef }
 						>
 							{
 								// Disable reason: KeyPress must be suppressed so the block doesn't hide the toolbar

packages/format-library/src/link/inline.js

@@ -10,14 +10,7 @@ import { useMemo, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { withSpokenMessages, Popover } from '@wordpress/components';
 import { prependHTTP } from '@wordpress/url';
-import {
-	create,
-	insert,
-	isCollapsed,
-	applyFormat,
-	getTextContent,
-	slice,
-} from '@wordpress/rich-text';
+import { create, insert, isCollapsed, applyFormat } from '@wordpress/rich-text';
 import { __experimentalLinkControl as LinkControl } from '@wordpress/block-editor';
 
 /**
@@ -120,11 +113,9 @@ function InlineLinkUI( {
 		}
 
 		const newUrl = prependHTTP( nextValue.url );
-		const selectedText = getTextContent( slice( value ) );
 		const format = createLinkFormat( {
 			url: newUrl,
 			opensInNewWindow: nextValue.opensInNewTab,
-			text: selectedText,
 		} );
 
 		if ( isCollapsed( value ) && ! isActive ) {

packages/format-library/src/link/utils.js

@@ -18,7 +18,6 @@ import {
 	getFragment,
 	isValidFragment,
 } from '@wordpress/url';
-import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Check for issues with the provided href.
@@ -93,7 +92,7 @@ export function isValidHref( href ) {
  *
  * @return {Object} The final format object.
  */
-export function createLinkFormat( { url, opensInNewWindow, text } ) {
+export function createLinkFormat( { url, opensInNewWindow } ) {
 	const format = {
 		type: 'core/link',
 		attributes: {
@@ -102,12 +101,8 @@ export function createLinkFormat( { url, opensInNewWindow, text } ) {
 	};
 
 	if ( opensInNewWindow ) {
-		// translators: accessibility label for external links, where the argument is the link text
-		const label = sprintf( __( '%s (opens in a new tab)' ), text );
-
 		format.attributes.target = '_blank';
 		format.attributes.rel = 'noreferrer noopener';
-		format.attributes[ 'aria-label' ] = label;
 	}
 
 	return format;