WordPress 5.5 RC 3 Backports

lib/class-wp-rest-image-editor-controller.php

@@ -292,6 +292,12 @@ public function apply_edits( $request ) {
 			return $new_attachment_id;
 		}
 
+		if ( defined( 'REST_REQUEST' ) && REST_REQUEST ) {
+			// Set a custom header with the attachment_id.
+			// Used by the browser/client to resume creating image sub-sizes after a PHP fatal error.
+			header( 'X-WP-Upload-Attachment-ID: ' . $new_attachment_id );
+		}
+
 		// Generate image sub-sizes and meta.
 		$new_image_meta = wp_generate_attachment_metadata( $new_attachment_id, $saved['path'] );
 

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

@@ -527,68 +527,22 @@
 	background-color: $white;
 
 	.block-editor-block-toolbar .components-toolbar-group,
-	.block-editor-block-toolbar .components-toolbar,
-	.block-editor-block-toolbar__mover-switcher-container {
+	.block-editor-block-toolbar .components-toolbar {
 		border-right-color: $gray-900;
 	}
 
-	.block-editor-block-toolbar__mover-switcher-container {
-		border-right-style: solid;
-		border-right-width: $border-width;
+	.block-editor-block-mover-button {
+		overflow: hidden;
 	}
 
-	// Adjust the mover control to fit as a unit next to the block switcher.
-	.block-editor-block-toolbar__block-switcher-wrapper {
-		// Adjust the focus rectangle for the switcher.
-		.block-editor-block-switcher__no-switcher-icon::before,
-		.block-editor-block-switcher__toggle::before {
-			width: $grid-unit-60 - $grid-unit-10 - $grid-unit-15;
-		}
-
-		// Adjust the positioning of the icon to better balance the new unit.
-		.block-editor-block-icon svg {
-			margin-left: 10px;
-		}
-
-		.block-editor-block-switcher:last-child .block-editor-block-icon svg {
-			margin-left: auto;
-		}
-
-		.components-toolbar,
-		.components-toolbar-group {
-			border-right: none;
-		}
-	}
-
-	.block-editor-block-mover {
-		margin-left: -$grid-unit-15;
-		width: $button-size;
-
-		&.is-horizontal {
-			width: $block-toolbar-height;
-		}
-
-		// Needs specificity to override a first-child rule.
-		.components-button.has-icon.block-editor-block-mover-button.block-editor-block-mover-button {
-			min-width: $button-size;
-			width: $button-size;
-			overflow: hidden;
-		}
-
-		&.is-horizontal .components-button.has-icon.block-editor-block-mover-button.block-editor-block-mover-button {
-			min-width: $block-toolbar-height/2;
-			width: $block-toolbar-height/2;
-			overflow: hidden;
-		}
+	// Extra specificity to override standard toolbar button styles.
+	.block-editor-block-mover.is-horizontal .block-editor-block-mover-button.block-editor-block-mover-button {
+		min-width: $block-toolbar-height/2;
+		width: $block-toolbar-height/2;
 	}
 
 	.block-editor-block-mover:not(.is-horizontal) {
-
 		.block-editor-block-mover-button {
-			> svg {
-				margin-left: 2px;
-			}
-
 			&.is-up-button svg {
 				margin-top: 3px;
 			}
@@ -600,7 +554,7 @@
 			&:focus::before {
 				left: 0 !important;
 				min-width: 0;
-				width: 28px;
+				width: 100%;
 			}
 		}
 	}

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

@@ -15,8 +15,14 @@
 .block-editor-block-mover {
 	.components-toolbar-group,
 	.components-toolbar {
-		flex-direction: column;
 		flex: 1;
+
+		// Increase touch targets on mobile.
+		flex-direction: row;
+
+		@include break-small() {
+			flex-direction: column;
+		}
 	}
 
 	&.is-horizontal .components-toolbar-group,
@@ -25,42 +31,48 @@
 	}
 
 	.block-editor-block-mover-button {
-		height: $block-toolbar-height/2;
-		width: $block-toolbar-height;
-		padding: 0 !important;
+		@include break-small() {
+			padding: 0 !important;
+			height: $block-toolbar-height/2;
+			width: $block-toolbar-height;
+		}
 
 		// Focus style.
 		// Overrides .components-toolbar-group styles
 		&::before {
-			left: $grid-unit-10 !important;
-			right: $grid-unit-10 !important;
+			@include break-small() {
+				left: $grid-unit-10 !important;
+				right: $grid-unit-10 !important;
+			}
 		}
 	}
 
 	// Position the icons correctly.
-	.components-toolbar-group .block-editor-block-mover-button.is-up-button,
-	.components-toolbar .block-editor-block-mover-button.is-up-button {
-		svg {
-			margin-bottom: -$grid-unit-10;
-		}
+	@include break-small() {
+		.components-toolbar-group .block-editor-block-mover-button.is-up-button,
+		.components-toolbar .block-editor-block-mover-button.is-up-button {
+			svg {
+				margin-bottom: -$grid-unit-10;
+			}
 
-		// Focus style.
-		&::before {
-			bottom: 0;
-			height: calc(100% - #{ $grid-unit-10 });
+			// Focus style.
+			&::before {
+				bottom: 0;
+				height: calc(100% - #{ $border-width });
+			}
 		}
-	}
 
-	.components-toolbar-group .block-editor-block-mover-button.is-down-button,
-	.components-toolbar .block-editor-block-mover-button.is-down-button {
-		svg {
-			margin-top: -$grid-unit-10;
-		}
+		.components-toolbar-group .block-editor-block-mover-button.is-down-button,
+		.components-toolbar .block-editor-block-mover-button.is-down-button {
+			svg {
+				margin-top: -$grid-unit-10;
+			}
 
-		// Focus style.
-		&::before {
-			top: 0;
-			height: calc(100% - #{ $grid-unit-10 });
+			// Focus style.
+			&::before {
+				top: 0;
+				height: calc(100% - #{ $border-width });
+			}
 		}
 	}
 
@@ -70,14 +82,13 @@
 			height: $block-toolbar-height;
 			// Overrides .components-toolbar-group styles
 			width: $block-toolbar-height / 2;
-			min-width: $grid-unit-30;
 			padding-left: 0;
 			padding-right: 0;
 
 			// Focus style.
 			&::before {
-				top: $grid-unit-10;
-				bottom: $grid-unit-10;
+				top: 0;
+				bottom: 0;
 				min-width: 0;
 				width: auto;
 				height: auto;
@@ -95,7 +106,7 @@
 			// Focus style.
 			// Overrides .components-toolbar-group styles
 			&::before {
-				left: $grid-unit-10 !important;
+				left: 0 !important;
 				right: 0 !important;
 			}
 		}
@@ -111,7 +122,8 @@
 			// Overrides .components-toolbar-group styles
 			&::before {
 				left: 0 !important;
-				right: $grid-unit-10 !important;
+				right: 0 !important;
+				width: calc(100% + #{ $border-width });
 			}
 		}
 	}

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

@@ -14,7 +14,7 @@ import {
 	ClipboardButton,
 } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
-import { moreHorizontal } from '@wordpress/icons';
+import { moreVertical } from '@wordpress/icons';
 
 import { Children, cloneElement, useCallback } from '@wordpress/element';
 import { serialize } from '@wordpress/blocks';
@@ -93,7 +93,7 @@ export function BlockSettingsDropdown( {
 				blocks,
 			} ) => (
 				<DropdownMenu
-					icon={ moreHorizontal }
+					icon={ moreVertical }
 					label={ __( 'More options' ) }
 					className="block-editor-block-settings-menu"
 					popoverProps={ POPOVER_PROPS }

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

@@ -98,40 +98,33 @@ export default function BlockToolbar( { hideDragHandle } ) {
 
 	return (
 		<div className={ classes }>
-			<div
-				className="block-editor-block-toolbar__mover-switcher-container"
-				ref={ nodeRef }
-				{ ...showMoversGestures }
-			>
+			<div ref={ nodeRef } { ...showMoversGestures }>
 				{ ! isMultiToolbar && (
 					<div className="block-editor-block-toolbar__block-parent-selector-wrapper">
 						<BlockParentSelector clientIds={ blockClientIds } />
 					</div>
 				) }
-
 				{ ( shouldShowVisualToolbar || isMultiToolbar ) && (
-					<BlockDraggable
-						clientIds={ blockClientIds }
-						cloneClassname="block-editor-block-toolbar__drag-clone"
-					>
-						{ ( {
-							isDraggable,
-							onDraggableStart,
-							onDraggableEnd,
-						} ) => (
-							<div
-								className="block-editor-block-toolbar__block-switcher-wrapper"
-								draggable={ isDraggable && ! hideDragHandle }
-								onDragStart={ onDraggableStart }
-								onDragEnd={ onDraggableEnd }
-							>
-								<BlockSwitcher clientIds={ blockClientIds } />
-								<BlockMover clientIds={ blockClientIds } />
-							</div>
-						) }
-					</BlockDraggable>
+					<BlockSwitcher clientIds={ blockClientIds } />
 				) }
 			</div>
+			{ ( shouldShowVisualToolbar || isMultiToolbar ) && (
+				<BlockDraggable
+					clientIds={ blockClientIds }
+					cloneClassname="block-editor-block-toolbar__drag-clone"
+				>
+					{ ( { isDraggable, onDraggableStart, onDraggableEnd } ) => (
+						<div
+							className="block-editor-block-toolbar__drag-handle-area"
+							draggable={ isDraggable && ! hideDragHandle }
+							onDragStart={ onDraggableStart }
+							onDragEnd={ onDraggableEnd }
+						>
+							<BlockMover clientIds={ blockClientIds } />
+						</div>
+					) }
+				</BlockDraggable>
+			) }
 			{ shouldShowVisualToolbar && (
 				<>
 					<BlockControls.Slot

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

@@ -87,14 +87,30 @@
 	}
 }
 
-.block-editor-block-toolbar__mover-switcher-container {
-	display: flex;
+.block-editor-block-toolbar-animated-width-container {
+	position: relative;
+	overflow: hidden;
+	transition: width 300ms;
 }
 
-.block-editor-block-toolbar__block-switcher-wrapper {
-	display: flex;
-
-	.block-editor-block-switcher {
-		display: block;
-	}
+.block-editor-block-toolbar-content-enter {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: auto;
+	opacity: 0;
+}
+.block-editor-block-toolbar-content-enter-active {
+	position: absolute;
+	opacity: 1;
+	transition: opacity 300ms;
+}
+.block-editor-block-toolbar-content-exit {
+	width: auto;
+	opacity: 1;
+	pointer-events: none;
+}
+.block-editor-block-toolbar-content-exit-active {
+	opacity: 0;
+	transition: opacity 300ms;
 }

packages/block-editor/src/components/inserter/quick-inserter.js

@@ -193,8 +193,12 @@ function QuickInserter( {
 	const onBrowseAll = () => {
 		// We have to select the previous block because the menu inserter
 		// inserts the new block after the selected one.
+		// Ideally, this selection shouldn't focus the block to avoid the setTimeout.
 		selectBlock( previousBlockClientId );
-		setInsererIsOpened( true );
+		// eslint-disable-next-line @wordpress/react-no-unsafe-timeout
+		setTimeout( () => {
+			setInsererIsOpened( true );
+		} );
 	};
 
 	// Disable reason (no-autofocus): The inserter menu is a modal display, not one which

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

@@ -107,7 +107,6 @@ figure.wp-block-image:not(.wp-block) {
 
 .wp-block-image__aspect-ratio {
 	height: $grid-unit-60 - $border-width - $border-width;
-	margin-top: -$grid-unit-10;
 	margin-bottom: -$grid-unit-10;
 	display: flex;
 	align-items: center;

packages/block-library/src/image/image-editor.js

@@ -195,7 +195,7 @@ export default function ImageEditor( {
 		attrs.src = url;
 
 		apiFetch( {
-			path: `wp/v2/media/${ id }/edit`,
+			path: `/wp/v2/media/${ id }/edit`,
 			method: 'POST',
 			data: attrs,
 		} )

packages/components/src/toolbar-group/style.scss

@@ -92,7 +92,7 @@ div.components-toolbar {
 }
 
 // Last button in a group.
-.components-accessible-toolbar .components-toolbar-group > .components-button:last-child.has-icon,
+.components-accessible-toolbar .components-toolbar-group > .components-button:last-of-type.has-icon,
 .components-accessible-toolbar .components-toolbar-group > div:last-child > .components-button.has-icon,
 .components-toolbar div:last-child .components-button.has-icon {
 	min-width: $block-toolbar-height - $grid-unit-15 / 2;