Cherry Pick PR's for WordPress 5.4 RC 2

package.json

@@ -113,7 +113,7 @@
 		"babel-plugin-react-native-platform-specific-extensions": "1.1.1",
 		"babel-plugin-require-context-hook": "1.0.0",
 		"benchmark": "2.1.4",
-		"browserslist": "4.7.0",
+		"browserslist": "4.9.1",
 		"chalk": "2.4.2",
 		"commander": "4.1.0",
 		"concurrently": "3.5.0",

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

@@ -7,7 +7,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { Button, ToolbarGroup } from '@wordpress/components';
 import { getBlockType } from '@wordpress/blocks';
 import { Component } from '@wordpress/element';
@@ -82,17 +82,17 @@ export class BlockMover extends Component {
 			return null;
 		};
 
-		const getMovementDirection = ( moveDirection ) => {
+		const getMovementDirectionLabel = ( moveDirection ) => {
 			if ( moveDirection === 'up' ) {
 				if ( orientation === 'horizontal' ) {
-					return isRTL ? 'right' : 'left';
+					return isRTL ? __( 'Move right' ) : __( 'Move left' );
 				}
-				return 'up';
+				return __( 'Move up' );
 			} else if ( moveDirection === 'down' ) {
 				if ( orientation === 'horizontal' ) {
-					return isRTL ? 'left' : 'right';
+					return isRTL ? __( 'Move left' ) : __( 'Move right' );
 				}
-				return 'down';
+				return __( 'Move down' );
 			}
 			return null;
 		};
@@ -112,11 +112,7 @@ export class BlockMover extends Component {
 					className="block-editor-block-mover__control"
 					onClick={ isFirst ? null : onMoveUp }
 					icon={ getArrowIcon( 'up' ) }
-					// translators: %s: Horizontal direction of block movement ( left, right )
-					label={ sprintf(
-						__( 'Move %s' ),
-						getMovementDirection( 'up' )
-					) }
+					label={ getMovementDirectionLabel( 'up' ) }
 					aria-describedby={ `block-editor-block-mover__up-description-${ instanceId }` }
 					aria-disabled={ isFirst }
 					onFocus={ this.onFocus }
@@ -145,11 +141,7 @@ export class BlockMover extends Component {
 					className="block-editor-block-mover__control"
 					onClick={ isLast ? null : onMoveDown }
 					icon={ getArrowIcon( 'down' ) }
-					// translators: %s: Horizontal direction of block movement ( left, right )
-					label={ sprintf(
-						__( 'Move %s' ),
-						getMovementDirection( 'down' )
-					) }
+					label={ getMovementDirectionLabel( 'down' ) }
 					aria-describedby={ `block-editor-block-mover__down-description-${ instanceId }` }
 					aria-disabled={ isLast }
 					onFocus={ this.onFocus }

packages/block-editor/src/components/default-block-appender/style.scss

@@ -53,11 +53,12 @@
 }
 
 // Empty / default block side inserter.
-.block-editor-block-list__empty-block-inserter, // Empty paragraph
+.block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter, // Empty paragraph, needs specificity to override inherited popover styles.
 .block-editor-default-block-appender .block-editor-inserter { // Empty appender
 	position: absolute;
 	top: 0;
 
+	height: $block-side-ui-width;
 	// Change the size of the buttons to match that of the default paragraph height.
 	.components-button.has-icon {
 		width: $block-side-ui-width;

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

@@ -327,6 +327,21 @@ class LatestPostsEdit extends Component {
 							[ `align${ featuredImageAlign }` ]: !! featuredImageAlign,
 						} );
 
+						const postExcerpt =
+							excerptLength <
+								excerpt.trim().split( ' ' ).length &&
+							post.excerpt.raw === ''
+								? excerpt
+										.trim()
+										.split( ' ', excerptLength )
+										.join( ' ' ) +
+								  ' ... <a href=' +
+								  post.link +
+								  'target="_blank" rel="noopener noreferrer">' +
+								  __( 'Read more' ) +
+								  '</a>'
+								: excerpt;
+
 						return (
 							<li key={ i }>
 								{ displayFeaturedImage && (
@@ -372,28 +387,7 @@ class LatestPostsEdit extends Component {
 									displayPostContentRadio === 'excerpt' && (
 										<div className="wp-block-latest-posts__post-excerpt">
 											<RawHTML key="html">
-												{ excerptLength <
-												excerpt.trim().split( ' ' )
-													.length
-													? excerpt
-															.trim()
-															.split(
-																' ',
-																excerptLength
-															)
-															.join( ' ' ) +
-													  ' ... <a href=' +
-													  post.link +
-													  'target="_blank" rel="noopener noreferrer">' +
-													  __( 'Read more' ) +
-													  '</a>'
-													: excerpt
-															.trim()
-															.split(
-																' ',
-																excerptLength
-															)
-															.join( ' ' ) }
+												{ postExcerpt }
 											</RawHTML>
 										</div>
 									) }

packages/block-library/src/media-text/edit.js

@@ -159,7 +159,7 @@ class MediaTextEdit extends Component {
 		} = attributes;
 		return (
 			<MediaContainer
-				className="block-library-media-text__media-container"
+				className="wp-block-media-text__media"
 				onSelectMedia={ this.onSelectMedia }
 				onWidthChange={ this.onWidthChange }
 				commitWidthChange={ this.commitWidthChange }

packages/block-library/src/media-text/editor.scss

@@ -59,18 +59,6 @@
 	max-width: unset;
 }
 
-figure.block-library-media-text__media-container {
-	margin: 0;
-	height: 100%;
-	width: 100%;
-}
-
-.wp-block-media-text .block-library-media-text__media-container img,
-.wp-block-media-text .block-library-media-text__media-container video {
-	vertical-align: middle;
-	width: 100%;
-}
-
 .editor-media-container__resizer .components-resizable-box__handle {
 	display: none;
 }

packages/e2e-tests/specs/editor/various/fullscreen-mode.test.js

@@ -22,10 +22,10 @@ describe( 'Fullscreen Mode', () => {
 
 		expect( isFullscreenEnabled ).toBe( true );
 
-		const fullscreenToolbar = await page.$(
-			'.edit-post-fullscreen-mode-close__toolbar'
+		const fullscreenCloseButton = await page.$(
+			'.edit-post-fullscreen-mode-close'
 		);
 
-		expect( fullscreenToolbar ).not.toBeNull();
+		expect( fullscreenCloseButton ).not.toBeNull();
 	} );
 } );

packages/edit-post/package.json

@@ -41,6 +41,7 @@
 		"@wordpress/media-utils": "file:../media-utils",
 		"@wordpress/notices": "file:../notices",
 		"@wordpress/plugins": "file:../plugins",
+		"@wordpress/primitives": "file:../primitives",
 		"@wordpress/url": "file:../url",
 		"@wordpress/viewport": "file:../viewport",
 		"classnames": "^2.2.5",

packages/edit-post/src/components/header/fullscreen-mode-close/index.js

@@ -6,41 +6,45 @@ import { get } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { withSelect } from '@wordpress/data';
-import { Button, Toolbar } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { Button } from '@wordpress/components';
+import { Path, SVG } from '@wordpress/primitives';
 import { __ } from '@wordpress/i18n';
 import { addQueryArgs } from '@wordpress/url';
-import { chevronLeft } from '@wordpress/icons';
 
-function FullscreenModeClose( { isActive, postType } ) {
+const wordPressLogo = (
+	<SVG width="28" height="28" viewBox="0 0 128 128" version="1.1">
+		<Path d="M100 61.3c0-6.6-2.4-11.2-4.4-14.7-2.7-4.4-5.2-8.1-5.2-12.5 0-4.9 3.7-9.5 9-9.5h.7c-9.5-8.7-22.1-14-36-14-18.6 0-35 9.6-44.6 24 1.3 0 2.4.1 3.4.1 5.6 0 14.2-.7 14.2-.7 2.9-.2 3.2 4.1.3 4.4 0 0-2.9.3-6.1.5l19.4 57.8 11.7-35L54.1 39c-2.9-.2-5.6-.5-5.6-.5-2.9-.2-2.5-4.6.3-4.4 0 0 8.8.7 14 .7 5.6 0 14.2-.7 14.2-.7 2.9-.2 3.2 4.1.3 4.4 0 0-2.9.3-6.1.5l19.3 57.3L96 78.9c2.6-7.6 4-13 4-17.6zM10.7 64c0 21.1 12.3 39.4 30.1 48L15.3 42.3c-3 6.6-4.6 14-4.6 21.7zm54.2 4.7l-16 46.5c4.8 1.4 9.8 2.2 15.1 2.2 6.2 0 12.2-1.1 17.7-3-.1-.2-.3-.5-.4-.7l-16.4-45zM64 0C28.7 0 0 28.7 0 64s28.7 64 64 64 64-28.7 64-64S99.3 0 64 0zm49.9 97.6c-2.2 3.2-4.6 6.2-7.3 8.9s-5.7 5.2-8.9 7.3c-3.2 2.2-6.7 4-10.2 5.5-7.4 3.1-15.3 4.7-23.4 4.7s-16-1.6-23.4-4.7c-3.6-1.5-7-3.4-10.2-5.5-3.2-2.2-6.2-4.6-8.9-7.3s-5.2-5.7-7.3-8.9c-2.2-3.2-4-6.7-5.5-10.2-3.4-7.4-5-15.3-5-23.4s1.6-16 4.7-23.4c1.5-3.6 3.4-7 5.5-10.2 2.2-3.2 4.6-6.2 7.3-8.9s5.7-5.2 8.9-7.3c3.2-2.2 6.7-4 10.2-5.5C48 5.4 55.9 3.8 64 3.8s16 1.6 23.4 4.7c3.6 1.5 7 3.4 10.2 5.5 3.2 2.2 6.2 4.6 8.9 7.3s5.2 5.7 7.3 8.9c2.2 3.2 4 6.7 5.5 10.2 3.1 7.4 4.7 15.3 4.7 23.4s-1.6 16-4.7 23.4c-1.4 3.8-3.2 7.2-5.4 10.4zm-2.7-53.7c0 5.4-1 11.5-4.1 19.1l-16.3 47.1c15.9-9.2 26.5-26.4 26.5-46.1 0-9.3-2.4-18-6.5-25.6.2 1.7.4 3.5.4 5.5z" />
+	</SVG>
+);
+
+function FullscreenModeClose() {
+	const { isActive, postType } = useSelect( ( select ) => {
+		const { getCurrentPostType } = select( 'core/editor' );
+		const { isFeatureActive } = select( 'core/edit-post' );
+		const { getPostType } = select( 'core' );
+
+		return {
+			isActive: isFeatureActive( 'fullscreenMode' ),
+			postType: getPostType( getCurrentPostType() ),
+		};
+	}, [] );
+
 	if ( ! isActive || ! postType ) {
 		return null;
 	}
 
 	return (
-		<Toolbar className="edit-post-fullscreen-mode-close__toolbar">
-			<Button
-				icon={ chevronLeft }
-				href={ addQueryArgs( 'edit.php', {
-					post_type: postType.slug,
-				} ) }
-				label={ get(
-					postType,
-					[ 'labels', 'view_items' ],
-					__( 'Back' )
-				) }
-			/>
-		</Toolbar>
+		<Button
+			className="edit-post-fullscreen-mode-close"
+			icon={ wordPressLogo }
+			iconSize={ 36 }
+			href={ addQueryArgs( 'edit.php', {
+				post_type: postType.slug,
+			} ) }
+			label={ get( postType, [ 'labels', 'view_items' ], __( 'Back' ) ) }
+		/>
 	);
 }
 
-export default withSelect( ( select ) => {
-	const { getCurrentPostType } = select( 'core/editor' );
-	const { isFeatureActive } = select( 'core/edit-post' );
-	const { getPostType } = select( 'core' );
-
-	return {
-		isActive: isFeatureActive( 'fullscreenMode' ),
-		postType: getPostType( getCurrentPostType() ),
-	};
-} )( FullscreenModeClose );
+export default FullscreenModeClose;

packages/edit-post/src/components/header/fullscreen-mode-close/style.scss

@@ -1,14 +1,31 @@
-.edit-post-fullscreen-mode-close__toolbar {
+.edit-post-fullscreen-mode-close.has-icon {
 	// Do not show the toolbar icon on small screens,
 	// when Fullscreen Mode is not an option in the "More" menu.
 	display: none;
 
 	@include break-medium() {
 		display: flex;
-		border-top: 0;
-		border-bottom: 0;
-		border-left: 0;
-		margin: -9px 10px -8px -10px;
-		padding: 9px 10px;
+		align-items: center;
+		align-self: stretch;
+		border: none;
+		background: #23282e; // WP-admin gray.
+		color: $white;
+		border-radius: 0;
+		height: auto;
+		width: $header-height;
+
+		&:hover {
+			background: #32373d !important; // WP-admin light-gray.
+			color: $white !important;
+			box-shadow: none !important;
+		}
+
+		&:active {
+			color: $white;
+		}
+	}
+	svg {
+		margin-left: auto;
+		margin-right: auto;
 	}
 }

packages/edit-post/src/components/header/index.js

@@ -57,8 +57,8 @@ function Header() {
 
 	return (
 		<div className="edit-post-header">
+			<FullscreenModeClose />
 			<div className="edit-post-header__toolbar">
-				<FullscreenModeClose />
 				<HeaderToolbar />
 			</div>
 			<div className="edit-post-header__settings">