Add backports for 5.7 RC 3

packages/block-library/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Bug Fixes
+
+- Fix a regression where the Cover block migration would not work with a non-default contentPosition ([#29542](https://github.com/WordPress/gutenberg/pull/29542))
+
 ## 2.28.0 (2021-02-01)
 
 ### New Features

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

@@ -88,6 +88,12 @@ const deprecated = [
 			customGradient: {
 				type: 'string',
 			},
+			contentPosition: {
+				type: 'string',
+			},
+		},
+		supports: {
+			align: true,
 		},
 		save( { attributes } ) {
 			const {
@@ -219,6 +225,9 @@ const deprecated = [
 				type: 'string',
 			},
 		},
+		supports: {
+			align: true,
+		},
 		save( { attributes } ) {
 			const {
 				backgroundType,
@@ -322,6 +331,9 @@ const deprecated = [
 				type: 'string',
 			},
 		},
+		supports: {
+			align: true,
+		},
 		save( { attributes } ) {
 			const {
 				backgroundType,

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

@@ -592,7 +592,7 @@ function CoverEdit( {
 						style={ { backgroundImage: gradientValue } }
 					/>
 				) }
-				{ isImageBackground && isImgElement && (
+				{ url && isImageBackground && isImgElement && (
 					<img
 						ref={ isDarkElement }
 						className="wp-block-cover__image-background"
@@ -601,7 +601,7 @@ function CoverEdit( {
 						style={ mediaStyle }
 					/>
 				) }
-				{ isVideoBackground && (
+				{ url && isVideoBackground && (
 					<video
 						ref={ isDarkElement }
 						className="wp-block-cover__video-background"

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

@@ -51,6 +51,9 @@ figure.wp-block-gallery {
 			left: 0;
 			z-index: 1;
 		}
+		figcaption {
+			z-index: 2;
+		}
 	}
 
 	figure.is-transient img {

packages/components/src/drop-zone/provider.js

@@ -6,14 +6,10 @@ import { find, some, filter, includes, throttle } from 'lodash';
 /**
  * WordPress dependencies
  */
-import {
-	createContext,
-	useEffect,
-	useRef,
-	useContext,
-} from '@wordpress/element';
+import { createContext, useRef, useContext } from '@wordpress/element';
 import { getFilesFromDataTransfer } from '@wordpress/dom';
 import isShallowEqual from '@wordpress/is-shallow-equal';
+import { useRefEffect } from '@wordpress/compose';
 
 export const Context = createContext();
 
@@ -109,135 +105,138 @@ export const INITIAL_DROP_ZONE_STATE = {
 	type: null,
 };
 
-export function useDrop( ref ) {
+export function useDrop() {
 	const dropZones = useContext( Context );
 
-	useEffect( () => {
-		const { ownerDocument } = ref.current;
-		const { defaultView } = ownerDocument;
+	return useRefEffect(
+		( node ) => {
+			const { ownerDocument } = node;
+			const { defaultView } = ownerDocument;
 
-		let lastRelative;
+			let lastRelative;
 
-		function updateDragZones( event ) {
-			if ( lastRelative && lastRelative.contains( event.target ) ) {
-				return;
-			}
-
-			const dragEventType = getDragEventType( event );
-			const position = getPosition( event );
-			const hoveredDropZone = getHoveredDropZone(
-				dropZones,
-				position,
-				dragEventType
-			);
-
-			if ( hoveredDropZone && hoveredDropZone.isRelative ) {
-				lastRelative = hoveredDropZone.element.current.offsetParent;
-			} else {
-				lastRelative = null;
-			}
+			function updateDragZones( event ) {
+				if ( lastRelative && lastRelative.contains( event.target ) ) {
+					return;
+				}
 
-			// Notifying the dropzones
-			dropZones.forEach( ( dropZone ) => {
-				const isDraggingOverDropZone = dropZone === hoveredDropZone;
-				const newState = {
-					isDraggingOverDocument: isTypeSupportedByDropZone(
-						dragEventType,
-						dropZone
-					),
-					isDraggingOverElement: isDraggingOverDropZone,
-					x:
-						isDraggingOverDropZone && dropZone.withPosition
-							? position.x
-							: null,
-					y:
-						isDraggingOverDropZone && dropZone.withPosition
-							? position.y
-							: null,
-					type: isDraggingOverDropZone ? dragEventType : null,
-				};
-
-				dropZone.setState( ( state ) => {
-					if ( isShallowEqual( state, newState ) ) {
-						return state;
-					}
+				const dragEventType = getDragEventType( event );
+				const position = getPosition( event );
+				const hoveredDropZone = getHoveredDropZone(
+					dropZones,
+					position,
+					dragEventType
+				);
+
+				if ( hoveredDropZone && hoveredDropZone.isRelative ) {
+					lastRelative = hoveredDropZone.element.current.offsetParent;
+				} else {
+					lastRelative = null;
+				}
 
-					return newState;
+				// Notifying the dropzones
+				dropZones.forEach( ( dropZone ) => {
+					const isDraggingOverDropZone = dropZone === hoveredDropZone;
+					const newState = {
+						isDraggingOverDocument: isTypeSupportedByDropZone(
+							dragEventType,
+							dropZone
+						),
+						isDraggingOverElement: isDraggingOverDropZone,
+						x:
+							isDraggingOverDropZone && dropZone.withPosition
+								? position.x
+								: null,
+						y:
+							isDraggingOverDropZone && dropZone.withPosition
+								? position.y
+								: null,
+						type: isDraggingOverDropZone ? dragEventType : null,
+					};
+
+					dropZone.setState( ( state ) => {
+						if ( isShallowEqual( state, newState ) ) {
+							return state;
+						}
+
+						return newState;
+					} );
 				} );
-			} );
 
-			event.preventDefault();
-		}
+				event.preventDefault();
+			}
 
-		const throttledUpdateDragZones = throttle( updateDragZones, 200 );
+			const throttledUpdateDragZones = throttle( updateDragZones, 200 );
 
-		function onDragOver( event ) {
-			throttledUpdateDragZones( event );
-			event.preventDefault();
-		}
+			function onDragOver( event ) {
+				throttledUpdateDragZones( event );
+				event.preventDefault();
+			}
 
-		function resetDragState() {
-			// Avoid throttled drag over handler calls
-			throttledUpdateDragZones.cancel();
+			function resetDragState() {
+				// Avoid throttled drag over handler calls
+				throttledUpdateDragZones.cancel();
 
-			dropZones.forEach( ( dropZone ) =>
-				dropZone.setState( INITIAL_DROP_ZONE_STATE )
-			);
-		}
+				dropZones.forEach( ( dropZone ) =>
+					dropZone.setState( INITIAL_DROP_ZONE_STATE )
+				);
+			}
 
-		function onDrop( event ) {
-			// This seemingly useless line has been shown to resolve a Safari issue
-			// where files dragged directly from the dock are not recognized
-			event.dataTransfer && event.dataTransfer.files.length; // eslint-disable-line no-unused-expressions
-
-			const dragEventType = getDragEventType( event );
-			const position = getPosition( event );
-			const hoveredDropZone = getHoveredDropZone(
-				dropZones,
-				position,
-				dragEventType
-			);
-
-			resetDragState();
-
-			if ( hoveredDropZone ) {
-				switch ( dragEventType ) {
-					case 'file':
-						hoveredDropZone.onFilesDrop(
-							getFilesFromDataTransfer( event.dataTransfer ),
-							position
-						);
-						break;
-					case 'html':
-						hoveredDropZone.onHTMLDrop(
-							event.dataTransfer.getData( 'text/html' ),
-							position
-						);
-						break;
-					case 'default':
-						hoveredDropZone.onDrop( event, position );
+			function onDrop( event ) {
+				// This seemingly useless line has been shown to resolve a Safari issue
+				// where files dragged directly from the dock are not recognized
+				event.dataTransfer && event.dataTransfer.files.length; // eslint-disable-line no-unused-expressions
+
+				const dragEventType = getDragEventType( event );
+				const position = getPosition( event );
+				const hoveredDropZone = getHoveredDropZone(
+					dropZones,
+					position,
+					dragEventType
+				);
+
+				resetDragState();
+
+				if ( hoveredDropZone ) {
+					switch ( dragEventType ) {
+						case 'file':
+							hoveredDropZone.onFilesDrop(
+								getFilesFromDataTransfer( event.dataTransfer ),
+								position
+							);
+							break;
+						case 'html':
+							hoveredDropZone.onHTMLDrop(
+								event.dataTransfer.getData( 'text/html' ),
+								position
+							);
+							break;
+						case 'default':
+							hoveredDropZone.onDrop( event, position );
+					}
 				}
-			}
 
-			event.stopPropagation();
-			event.preventDefault();
-		}
+				event.stopPropagation();
+				event.preventDefault();
+			}
 
-		defaultView.addEventListener( 'drop', onDrop );
-		defaultView.addEventListener( 'dragover', onDragOver );
-		defaultView.addEventListener( 'mouseup', resetDragState );
-		// Note that `dragend` doesn't fire consistently for file and HTML drag
-		// events where the drag origin is outside the browser window.
-		// In Firefox it may also not fire if the originating node is removed.
-		defaultView.addEventListener( 'dragend', resetDragState );
-
-		return () => {
-			defaultView.removeEventListener( 'drop', onDrop );
-			defaultView.removeEventListener( 'dragover', onDragOver );
-			defaultView.removeEventListener( 'mouseup', resetDragState );
-			defaultView.removeEventListener( 'dragend', resetDragState );
-		};
-	}, [ ref, dropZones ] );
+			node.addEventListener( 'drop', onDrop );
+			defaultView.addEventListener( 'dragover', onDragOver );
+			defaultView.addEventListener( 'mouseup', resetDragState );
+			// Note that `dragend` doesn't fire consistently for file and HTML drag
+			// events where the drag origin is outside the browser window.
+			// In Firefox it may also not fire if the originating node is removed.
+			defaultView.addEventListener( 'dragend', resetDragState );
+
+			return () => {
+				node.removeEventListener( 'drop', onDrop );
+				defaultView.removeEventListener( 'dragover', onDragOver );
+				defaultView.removeEventListener( 'mouseup', resetDragState );
+				defaultView.removeEventListener( 'dragend', resetDragState );
+			};
+		},
+		[ dropZones ]
+	);
 }
 
 export function DropZoneContextProvider( props ) {
@@ -246,8 +245,7 @@ export function DropZoneContextProvider( props ) {
 }
 
 function DropContainer( { children } ) {
-	const ref = useRef();
-	useDrop( ref );
+	const ref = useDrop();
 	return (
 		<div ref={ ref } className="components-drop-zone__provider">
 			{ children }

packages/compose/README.md

@@ -303,6 +303,30 @@ _Returns_
 
 -   `boolean`: Reduced motion preference value.
 
+<a name="useRefEffect" href="#useRefEffect">#</a> **useRefEffect**
+
+Effect-like ref callback. Just like with `useEffect`, this allows you to
+return a cleanup function to be run if the ref changes or one of the
+dependencies changes. The ref is provided as an argument to the callback
+functions. The main difference between this and `useEffect` is that
+the `useEffect` callback is not called when the ref changes, but this is.
+Pass the returned ref callback as the component's ref and merge multiple refs
+with `useMergeRefs`.
+
+It's worth noting that if the dependencies array is empty, there's not
+strictly a need to clean up event handlers for example, because the node is
+to be removed. It _is_ necessary if you add dependencies because the ref
+callback will be called multiple times for the same node.
+
+_Parameters_
+
+-   _calllback_ `Function`: Callback with ref as argument.
+-   _dependencies_ `Array`: Dependencies of the callback.
+
+_Returns_
+
+-   `Function`: Ref callback.
+
 <a name="useResizeObserver" href="#useResizeObserver">#</a> **useResizeObserver**
 
 Hook which allows to listen the resize event of any target element when it changes sizes.