Cherry Pick PR's for WordPress 5.4 RC 3

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

@@ -8,7 +8,7 @@ import {
 } from '@wordpress/blocks';
 import {
 	PanelBody,
-	__experimentalSlotFillConsumer,
+	__experimentalUseSlot as useSlot,
 } from '@wordpress/components';
 import { withSelect } from '@wordpress/data';
 
@@ -30,6 +30,9 @@ const BlockInspector = ( {
 	selectedBlockName,
 	showNoBlockSelectedMessage = true,
 } ) => {
+	const slot = useSlot( InspectorAdvancedControls.slotName );
+	const hasFills = Boolean( slot.fills && slot.fills.length );
+
 	if ( count > 1 ) {
 		return <MultiSelectionInspector />;
 	}
@@ -69,21 +72,15 @@ const BlockInspector = ( {
 			) }
 			<InspectorControls.Slot bubblesVirtually />
 			<div>
-				<__experimentalSlotFillConsumer>
-					{ ( { hasFills } ) =>
-						hasFills( InspectorAdvancedControls.slotName ) && (
-							<PanelBody
-								className="block-editor-block-inspector__advanced"
-								title={ __( 'Advanced' ) }
-								initialOpen={ false }
-							>
-								<InspectorAdvancedControls.Slot
-									bubblesVirtually
-								/>
-							</PanelBody>
-						)
-					}
-				</__experimentalSlotFillConsumer>
+				{ hasFills && (
+					<PanelBody
+						className="block-editor-block-inspector__advanced"
+						title={ __( 'Advanced' ) }
+						initialOpen={ false }
+					>
+						<InspectorAdvancedControls.Slot bubblesVirtually />
+					</PanelBody>
+				) }
 			</div>
 			<SkipToSelectedBlock key="back" />
 		</div>

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

@@ -57,6 +57,109 @@ const blockAttributes = {
 };
 
 const deprecated = [
+	{
+		attributes: {
+			...blockAttributes,
+			title: {
+				type: 'string',
+				source: 'html',
+				selector: 'p',
+			},
+			contentAlign: {
+				type: 'string',
+				default: 'center',
+			},
+			minHeight: {
+				type: 'number',
+			},
+			gradient: {
+				type: 'string',
+			},
+			customGradient: {
+				type: 'string',
+			},
+		},
+		save( { attributes } ) {
+			const {
+				backgroundType,
+				gradient,
+				customGradient,
+				customOverlayColor,
+				dimRatio,
+				focalPoint,
+				hasParallax,
+				overlayColor,
+				url,
+				minHeight,
+			} = attributes;
+			const overlayColorClass = getColorClassName(
+				'background-color',
+				overlayColor
+			);
+			const gradientClass = __experimentalGetGradientClass( gradient );
+
+			const style =
+				backgroundType === IMAGE_BACKGROUND_TYPE
+					? backgroundImageStyles( url )
+					: {};
+			if ( ! overlayColorClass ) {
+				style.backgroundColor = customOverlayColor;
+			}
+			if ( focalPoint && ! hasParallax ) {
+				style.backgroundPosition = `${ Math.round(
+					focalPoint.x * 100
+				) }% ${ Math.round( focalPoint.y * 100 ) }%`;
+			}
+			if ( customGradient && ! url ) {
+				style.background = customGradient;
+			}
+			style.minHeight = minHeight || undefined;
+
+			const classes = classnames(
+				dimRatioToClass( dimRatio ),
+				overlayColorClass,
+				{
+					'has-background-dim': dimRatio !== 0,
+					'has-parallax': hasParallax,
+					'has-background-gradient': customGradient,
+					[ gradientClass ]: ! url && gradientClass,
+				}
+			);
+
+			return (
+				<div className={ classes } style={ style }>
+					{ url &&
+						( gradient || customGradient ) &&
+						dimRatio !== 0 && (
+							<span
+								aria-hidden="true"
+								className={ classnames(
+									'wp-block-cover__gradient-background',
+									gradientClass
+								) }
+								style={
+									customGradient
+										? { background: customGradient }
+										: undefined
+								}
+							/>
+						) }
+					{ VIDEO_BACKGROUND_TYPE === backgroundType && url && (
+						<video
+							className="wp-block-cover__video-background"
+							autoPlay
+							muted
+							loop
+							src={ url }
+						/>
+					) }
+					<div className="wp-block-cover__inner-container">
+						<InnerBlocks.Content />
+					</div>
+				</div>
+			);
+		},
+	},
 	{
 		attributes: {
 			...blockAttributes,

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

@@ -64,7 +64,7 @@ export default function save( { attributes } ) {
 		{
 			'has-background-dim': dimRatio !== 0,
 			'has-parallax': hasParallax,
-			'has-background-gradient': customGradient,
+			'has-background-gradient': gradient || customGradient,
 			[ gradientClass ]: ! url && gradientClass,
 		}
 	);

packages/components/src/index.js

@@ -98,7 +98,7 @@ export {
 	Slot,
 	Fill,
 	Provider as SlotFillProvider,
-	Consumer as __experimentalSlotFillConsumer,
+	useSlot as __experimentalUseSlot,
 } from './slot-fill';
 
 // Higher-Order Components

packages/components/src/popover/index.js

@@ -23,7 +23,7 @@ import PopoverDetectOutside from './detect-outside';
 import Button from '../button';
 import ScrollLock from '../scroll-lock';
 import IsolatedEventContainer from '../isolated-event-container';
-import { Slot, Fill, Consumer } from '../slot-fill';
+import { Slot, Fill, useSlot } from '../slot-fill';
 import Animate from '../animate';
 
 const FocusManaged = withConstrainedTabbing(
@@ -261,6 +261,7 @@ const Popover = ( {
 	const contentRect = useRef();
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const [ animateOrigin, setAnimateOrigin ] = useState();
+	const slot = useSlot( __unstableSlotName );
 	const isExpanded = expandOnMobile && isMobileViewport;
 
 	noArrow = isExpanded || noArrow;
@@ -602,25 +603,15 @@ const Popover = ( {
 		content = <FocusManaged>{ content }</FocusManaged>;
 	}
 
-	return (
-		<Consumer>
-			{ ( { getSlot } ) => {
-				// In case there is no slot context in which to render,
-				// default to an in-place rendering.
-				if ( getSlot && getSlot( __unstableSlotName ) ) {
-					content = (
-						<Fill name={ __unstableSlotName }>{ content }</Fill>
-					);
-				}
+	if ( slot.ref ) {
+		content = <Fill name={ __unstableSlotName }>{ content }</Fill>;
+	}
 
-				if ( anchorRef || anchorRect ) {
-					return content;
-				}
+	if ( anchorRef || anchorRect ) {
+		return content;
+	}
 
-				return <span ref={ anchorRefFallback }>{ content }</span>;
-			} }
-		</Consumer>
-	);
+	return <span ref={ anchorRefFallback }>{ content }</span>;
 };
 
 const PopoverContainer = Popover;

packages/components/src/responsive-wrapper/index.js

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
+import useResizeAware from 'react-resize-aware';
 
 /**
  * WordPress dependencies
@@ -14,15 +15,23 @@ function ResponsiveWrapper( {
 	children,
 	isInline = false,
 } ) {
+	const [
+		containerResizeListener,
+		{ width: containerWidth },
+	] = useResizeAware();
 	if ( Children.count( children ) !== 1 ) {
 		return null;
 	}
 	const imageStyle = {
-		paddingBottom: ( naturalHeight / naturalWidth ) * 100 + '%',
+		paddingBottom:
+			naturalWidth < containerWidth
+				? naturalHeight
+				: ( naturalHeight / naturalWidth ) * 100 + '%',
 	};
 	const TagName = isInline ? 'span' : 'div';
 	return (
 		<TagName className="components-responsive-wrapper">
+			{ containerResizeListener }
 			<TagName style={ imageStyle } />
 			{ cloneElement( children, {
 				className: classnames(

packages/components/src/responsive-wrapper/style.scss

@@ -15,4 +15,5 @@
 	left: 0;
 	width: 100%;
 	height: 100%;
+	margin: auto;
 }

packages/components/src/slot-fill/bubbles-virtually/fill.js

@@ -0,0 +1,34 @@
+/**
+ * WordPress dependencies
+ */
+import { useRef, useEffect, createPortal } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import useSlot from './use-slot';
+
+export default function Fill( { name, children } ) {
+	const slot = useSlot( name );
+	const ref = useRef();
+
+	useEffect( () => {
+		// We register fills so we can keep track of their existance.
+		// Some Slot implementations need to know if there're already fills
+		// registered so they can choose to render themselves or not.
+		slot.registerFill( ref );
+		return () => {
+			slot.unregisterFill( ref );
+		};
+	}, [ slot.registerFill, slot.unregisterFill ] );
+
+	if ( ! slot.ref || ! slot.ref.current ) {
+		return null;
+	}
+
+	if ( typeof children === 'function' ) {
+		children = children( slot.fillProps );
+	}
+
+	return createPortal( children, slot.ref.current );
+}

packages/components/src/slot-fill/bubbles-virtually/slot-fill-context.js

@@ -0,0 +1,15 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext } from '@wordpress/element';
+
+const SlotFillContext = createContext( {
+	slots: {},
+	fills: {},
+	registerSlot: () => {},
+	unregisterSlot: () => {},
+	registerFill: () => {},
+	unregisterFill: () => {},
+} );
+
+export default SlotFillContext;