@wordpress/block-library 7.6.0 → 7.9.0

package/src/cover/edit/index.js

@@ -10,7 +10,7 @@ import namesPlugin from 'colord/plugins/names';
  */
 import { useEntityProp, store as coreStore } from '@wordpress/core-data';
 import { useEffect, useRef } from '@wordpress/element';
-import { Spinner } from '@wordpress/components';
+import { Placeholder, Spinner } from '@wordpress/components';
 import { compose } from '@wordpress/compose';
 import {
 	withColors,
@@ -33,7 +33,6 @@ import {
 	attributesFromMedia,
 	IMAGE_BACKGROUND_TYPE,
 	VIDEO_BACKGROUND_TYPE,
-	backgroundImageStyles,
 	dimRatioToClass,
 	isContentPositionCenter,
 	getPositionClassName,
@@ -121,9 +120,8 @@ function CoverEdit( {
 		? IMAGE_BACKGROUND_TYPE
 		: attributes.backgroundType;
 
-	const { __unstableMarkNextChangeAsNotPersistent } = useDispatch(
-		blockEditorStore
-	);
+	const { __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
 	const { createErrorNotice } = useDispatch( noticesStore );
 	const { gradientClass, gradientValue } = __experimentalUseGradient();
 	const onSelectMedia = attributesFromMedia( setAttributes, dimRatio );
@@ -158,12 +156,13 @@ function CoverEdit( {
 	const isImgElement = ! ( hasParallax || isRepeated );
 
 	const style = {
-		...( isImageBackground && ! isImgElement
-			? backgroundImageStyles( url )
-			: undefined ),
 		minHeight: minHeightWithUnit || undefined,
 	};
 
+	const backgroundImage = url ? `url(${ url })` : undefined;
+
+	const backgroundPosition = mediaPosition( focalPoint );
+
 	const bgStyle = { backgroundColor: overlayColor.color };
 	const mediaStyle = {
 		objectPosition:
@@ -212,23 +211,31 @@ function CoverEdit( {
 		overlayColor,
 	};
 
-	if ( ! hasInnerBlocks && ! hasBackground ) {
+	const blockControls = (
+		<CoverBlockControls
+			attributes={ attributes }
+			setAttributes={ setAttributes }
+			onSelectMedia={ onSelectMedia }
+			currentSettings={ currentSettings }
+		/>
+	);
+
+	const inspectorControls = (
+		<CoverInspectorControls
+			attributes={ attributes }
+			setAttributes={ setAttributes }
+			clientId={ clientId }
+			setOverlayColor={ setOverlayColor }
+			coverRef={ ref }
+			currentSettings={ currentSettings }
+		/>
+	);
+
+	if ( ! useFeaturedImage && ! hasInnerBlocks && ! hasBackground ) {
 		return (
 			<>
-				<CoverBlockControls
-					attributes={ attributes }
-					setAttributes={ setAttributes }
-					onSelectMedia={ onSelectMedia }
-					currentSettings={ currentSettings }
-				/>
-				<CoverInspectorControls
-					attributes={ attributes }
-					setAttributes={ setAttributes }
-					clientId={ clientId }
-					setOverlayColor={ setOverlayColor }
-					coverRef={ ref }
-					currentSettings={ currentSettings }
-				/>
+				{ blockControls }
+				{ inspectorControls }
 				<div
 					{ ...blockProps }
 					className={ classnames(
@@ -279,29 +286,16 @@ function CoverEdit( {
 			'is-transient': isUploadingMedia,
 			'has-parallax': hasParallax,
 			'is-repeated': isRepeated,
-			'has-custom-content-position': ! isContentPositionCenter(
-				contentPosition
-			),
+			'has-custom-content-position':
+				! isContentPositionCenter( contentPosition ),
 		},
 		getPositionClassName( contentPosition )
 	);
 
 	return (
 		<>
-			<CoverBlockControls
-				attributes={ attributes }
-				setAttributes={ setAttributes }
-				onSelectMedia={ onSelectMedia }
-				currentSettings={ currentSettings }
-			/>
-			<CoverInspectorControls
-				attributes={ attributes }
-				setAttributes={ setAttributes }
-				clientId={ clientId }
-				setOverlayColor={ setOverlayColor }
-				coverRef={ ref }
-				currentSettings={ currentSettings }
-			/>
+			{ blockControls }
+			{ inspectorControls }
 			<div
 				{ ...blockProps }
 				className={ classnames( classes, blockProps.className ) }
@@ -324,35 +318,56 @@ function CoverEdit( {
 					showHandle={ isSelected }
 				/>
 
-				<span
-					aria-hidden="true"
-					className={ classnames(
-						'wp-block-cover__background',
-						dimRatioToClass( dimRatio ),
-						{
-							[ overlayColor.class ]: overlayColor.class,
-							'has-background-dim': dimRatio !== undefined,
-							// For backwards compatibility. Former versions of the Cover Block applied
-							// `.wp-block-cover__gradient-background` in the presence of
-							// media, a gradient and a dim.
-							'wp-block-cover__gradient-background':
-								url && gradientValue && dimRatio !== 0,
-							'has-background-gradient': gradientValue,
-							[ gradientClass ]: gradientClass,
-						}
-					) }
-					style={ { backgroundImage: gradientValue, ...bgStyle } }
-				/>
+				{ ( ! useFeaturedImage || url ) && (
+					<span
+						aria-hidden="true"
+						className={ classnames(
+							'wp-block-cover__background',
+							dimRatioToClass( dimRatio ),
+							{
+								[ overlayColor.class ]: overlayColor.class,
+								'has-background-dim': dimRatio !== undefined,
+								// For backwards compatibility. Former versions of the Cover Block applied
+								// `.wp-block-cover__gradient-background` in the presence of
+								// media, a gradient and a dim.
+								'wp-block-cover__gradient-background':
+									url && gradientValue && dimRatio !== 0,
+								'has-background-gradient': gradientValue,
+								[ gradientClass ]: gradientClass,
+							}
+						) }
+						style={ { backgroundImage: gradientValue, ...bgStyle } }
+					/>
+				) }
 
-				{ url && isImageBackground && isImgElement && (
-					<img
-						ref={ mediaElement }
-						className="wp-block-cover__image-background"
-						alt={ alt }
-						src={ url }
-						style={ mediaStyle }
+				{ ! url && useFeaturedImage && (
+					<Placeholder
+						className="wp-block-cover__image--placeholder-image"
+						withIllustration={ true }
 					/>
 				) }
+
+				{ url &&
+					isImageBackground &&
+					( isImgElement ? (
+						<img
+							ref={ mediaElement }
+							className="wp-block-cover__image-background"
+							alt={ alt }
+							src={ url }
+							style={ mediaStyle }
+						/>
+					) : (
+						<div
+							ref={ mediaElement }
+							role="img"
+							className={ classnames(
+								classes,
+								'wp-block-cover__image-background'
+							) }
+							style={ { backgroundImage, backgroundPosition } }
+						/>
+					) ) }
 				{ url && isVideoBackground && (
 					<video
 						ref={ mediaElement }

package/src/cover/edit/inspector-controls.js

@@ -21,8 +21,9 @@ import { useInstanceId } from '@wordpress/compose';
 import {
 	InspectorControls,
 	useSetting,
+	__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
 	__experimentalUseGradient,
-	__experimentalPanelColorGradientSettings as PanelColorGradientSettings,
+	__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 
@@ -138,6 +139,9 @@ export default function CoverInspectorControls( {
 			: [ coverRef.current.style, 'backgroundPosition' ];
 		styleOfRef[ property ] = mediaPosition( value );
 	};
+
+	const colorGradientSettings = useMultipleOriginColorsAndGradients();
+
 	return (
 		<>
 			<InspectorControls>
@@ -220,23 +224,50 @@ export default function CoverInspectorControls( {
 						</PanelRow>
 					</PanelBody>
 				) }
-				<PanelColorGradientSettings
+			</InspectorControls>
+			<InspectorControls __experimentalGroup="color">
+				<ColorGradientSettingsDropdown
 					__experimentalHasMultipleOrigins
 					__experimentalIsRenderedInSidebar
-					title={ __( 'Overlay' ) }
-					initialOpen={ true }
 					settings={ [
 						{
 							colorValue: overlayColor.color,
 							gradientValue,
+							label: __( 'Overlay' ),
 							onColorChange: setOverlayColor,
 							onGradientChange: setGradient,
-							label: __( 'Color' ),
+							isShownByDefault: true,
+							resetAllFilter: () => ( {
+								overlayColor: undefined,
+								customOverlayColor: undefined,
+								gradient: undefined,
+								customGradient: undefined,
+							} ),
 						},
 					] }
+					panelId={ clientId }
+					{ ...colorGradientSettings }
+				/>
+				<ToolsPanelItem
+					hasValue={ () => {
+						// If there's a media background the dimRatio will be
+						// defaulted to 50 whereas it will be 100 for colors.
+						return dimRatio === undefined
+							? false
+							: dimRatio !== ( url ? 50 : 100 );
+					} }
+					label={ __( 'Overlay opacity' ) }
+					onDeselect={ () =>
+						setAttributes( { dimRatio: url ? 50 : 100 } )
+					}
+					resetAllFilter={ () => ( {
+						dimRatio: url ? 50 : 100,
+					} ) }
+					isShownByDefault
+					panelId={ clientId }
 				>
 					<RangeControl
-						label={ __( 'Opacity' ) }
+						label={ __( 'Overlay opacity' ) }
 						value={ dimRatio }
 						onChange={ ( newDimRation ) =>
 							setAttributes( {
@@ -248,7 +279,7 @@ export default function CoverInspectorControls( {
 						step={ 10 }
 						required
 					/>
-				</PanelColorGradientSettings>
+				</ToolsPanelItem>
 			</InspectorControls>
 			<InspectorControls __experimentalGroup="dimensions">
 				<ToolsPanelItem

package/src/cover/edit.native.js

@@ -117,9 +117,8 @@ const Cover = ( {
 		overlayColor,
 		isDark,
 	} = attributes;
-	const [ isScreenReaderEnabled, setIsScreenReaderEnabled ] = useState(
-		false
-	);
+	const [ isScreenReaderEnabled, setIsScreenReaderEnabled ] =
+		useState( false );
 
 	useEffect( () => {
 		let isCurrent = true;
@@ -176,10 +175,8 @@ const Cover = ( {
 
 	const hasOnlyColorBackground = ! url && ( hasBackground || hasInnerBlocks );
 
-	const [
-		isCustomColorPickerShowing,
-		setCustomColorPickerShowing,
-	] = useState( false );
+	const [ isCustomColorPickerShowing, setCustomColorPickerShowing ] =
+		useState( false );
 
 	const openMediaOptionsRef = useRef();
 
@@ -248,9 +245,8 @@ const Cover = ( {
 		openGeneralSidebar();
 	}
 
-	const { __unstableMarkNextChangeAsNotPersistent } = useDispatch(
-		blockEditorStore
-	);
+	const { __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
 	const isCoverDark = useCoverIsDark(
 		isDark,
 		url,
@@ -622,9 +618,8 @@ const Cover = ( {
 
 export default compose( [
 	withSelect( ( select, { clientId } ) => {
-		const { getSelectedBlockClientId, getBlock } = select(
-			blockEditorStore
-		);
+		const { getSelectedBlockClientId, getBlock } =
+			select( blockEditorStore );
 
 		const selectedBlockClientId = getSelectedBlockClientId();
 

package/src/cover/editor.scss

@@ -62,6 +62,15 @@
 	.wp-block-cover__placeholder-background-options {
 		width: 100%;
 	}
+
+	.wp-block-cover__image--placeholder-image {
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+	}
+
 }
 
 [data-align="left"] > .wp-block-cover,
@@ -98,3 +107,7 @@
 .block-editor-block-patterns-list__list-item .has-parallax.wp-block-cover {
 	background-attachment: scroll;
 }
+
+.color-block-support-panel__inner-wrapper > :not(.block-editor-tools-panel-color-gradient-settings__item) {
+	margin-top: $grid-unit-30;
+}

package/src/cover/index.php

@@ -32,20 +32,33 @@ function render_block_core_cover( $attributes, $content ) {
 
 		$image = get_the_post_thumbnail( null, 'post-thumbnail', $attr );
 
-		$content = str_replace(
-			'</span><div',
-			'</span>' . $image . '<div',
-			$content
-		);
-
+		/*
+		 * Inserts the featured image between the (1st) cover 'background' `span` and 'inner_container' `div`,
+		 * and removes eventual withespace characters between the two (typically introduced at template level)
+		 */
+		$inner_container_start = '/<div\b[^>]+wp-block-cover__inner-container[\s|"][^>]*>/U';
+		if ( 1 === preg_match( $inner_container_start, $content, $matches, PREG_OFFSET_CAPTURE ) ) {
+			$offset  = $matches[0][1];
+			$content = substr( $content, 0, $offset ) . $image . substr( $content, $offset );
+		}
 	} else {
 		if ( in_the_loop() ) {
 			update_post_thumbnail_cache();
 		}
 		$current_featured_image = get_the_post_thumbnail_url();
-		$content                = preg_replace(
+
+		$styles = 'background-image:url(' . esc_url( $current_featured_image ) . '); ';
+
+		if ( isset( $attributes['minHeight'] ) ) {
+			$height_unit = empty( $attributes['minHeightUnit'] ) ? 'px' : $attributes['minHeightUnit'];
+			$height      = " min-height:{$attributes['minHeight']}{$height_unit}";
+
+			$styles .= $height;
+		}
+
+		$content = preg_replace(
 			'/class=\".*?\"/',
-			'${0} style="background-image:url(' . esc_url( $current_featured_image ) . ')"',
+			'${0} style="' . $styles . '"',
 			$content,
 			1
 		);

package/src/cover/save.js

@@ -19,10 +19,10 @@ import {
 import {
 	IMAGE_BACKGROUND_TYPE,
 	VIDEO_BACKGROUND_TYPE,
-	backgroundImageStyles,
 	dimRatioToClass,
 	isContentPositionCenter,
 	getPositionClassName,
+	mediaPosition,
 } from './shared';
 
 export default function save( { attributes } ) {
@@ -61,9 +61,6 @@ export default function save( { attributes } ) {
 	const isImgElement = ! ( hasParallax || isRepeated );
 
 	const style = {
-		...( isImageBackground && ! isImgElement && ! useFeaturedImage
-			? backgroundImageStyles( url )
-			: {} ),
 		minHeight: minHeight || undefined,
 	};
 
@@ -75,21 +72,33 @@ export default function save( { attributes } ) {
 	const objectPosition =
 		// prettier-ignore
 		focalPoint && isImgElement
-			 ? `${ Math.round( focalPoint.x * 100 ) }% ${ Math.round( focalPoint.y * 100 ) }%`
-			 : undefined;
+			  ? mediaPosition(focalPoint)
+			  : undefined;
+
+	const backgroundImage = url ? `url(${ url })` : undefined;
+
+	const backgroundPosition = mediaPosition( focalPoint );
 
 	const classes = classnames(
 		{
 			'is-light': ! isDark,
 			'has-parallax': hasParallax,
 			'is-repeated': isRepeated,
-			'has-custom-content-position': ! isContentPositionCenter(
-				contentPosition
-			),
+			'has-custom-content-position':
+				! isContentPositionCenter( contentPosition ),
 		},
 		getPositionClassName( contentPosition )
 	);
 
+	const imgClasses = classnames(
+		'wp-block-cover__image-background',
+		id ? `wp-image-${ id }` : null,
+		{
+			'has-parallax': hasParallax,
+			'is-repeated': isRepeated,
+		}
+	);
+
 	const gradientValue = gradient || customGradient;
 
 	return (
@@ -116,20 +125,23 @@ export default function save( { attributes } ) {
 
 			{ ! useFeaturedImage &&
 				isImageBackground &&
-				isImgElement &&
-				url && (
+				url &&
+				( isImgElement ? (
 					<img
-						className={ classnames(
-							'wp-block-cover__image-background',
-							id ? `wp-image-${ id }` : null
-						) }
+						className={ imgClasses }
 						alt={ alt }
 						src={ url }
 						style={ { objectPosition } }
 						data-object-fit="cover"
 						data-object-position={ objectPosition }
 					/>
-				) }
+				) : (
+					<div
+						role="img"
+						className={ imgClasses }
+						style={ { backgroundPosition, backgroundImage } }
+					/>
+				) ) }
 			{ isVideoBackground && url && (
 				<video
 					className={ classnames(

package/src/cover/shared.js

@@ -21,11 +21,13 @@ export const VIDEO_BACKGROUND_TYPE = 'video';
 export const COVER_MIN_HEIGHT = 50;
 export const COVER_MAX_HEIGHT = 1000;
 export const COVER_DEFAULT_HEIGHT = 300;
-export function backgroundImageStyles( url ) {
-	return url ? { backgroundImage: `url(${ url })` } : {};
-}
+export const DEFAULT_FOCAL_POINT = { x: 0.5, y: 0.5 };
 export const ALLOWED_MEDIA_TYPES = [ 'image', 'video' ];
 
+export function mediaPosition( { x, y } = DEFAULT_FOCAL_POINT ) {
+	return `${ Math.round( x * 100 ) }% ${ Math.round( y * 100 ) }%`;
+}
+
 export function dimRatioToClass( ratio ) {
 	return ratio === 50 || ! ratio === undefined
 		? null
@@ -106,7 +108,3 @@ export function getPositionClassName( contentPosition ) {
 
 	return POSITION_CLASSNAMES[ contentPosition ];
 }
-
-export function mediaPosition( { x, y } ) {
-	return `${ Math.round( x * 100 ) }% ${ Math.round( y * 100 ) }%`;
-}

package/src/cover/style.scss

@@ -12,27 +12,6 @@
 	// This block has customizable padding, border-box makes that more predictable.
 	box-sizing: border-box;
 
-	&.has-parallax {
-		background-attachment: fixed;
-
-		// Mobile Safari does not support fixed background attachment properly.
-		// See also https://stackoverflow.com/questions/24154666/background-size-cover-not-working-on-ios
-		// Chrome on Android does not appear to support the attachment at all: https://issuetracker.google.com/issues/36908439
-		@supports (-webkit-touch-callout: inherit) {
-			background-attachment: scroll;
-		}
-
-		// Remove the appearance of scrolling based on OS-level animation preferences.
-		@media (prefers-reduced-motion: reduce) {
-			background-attachment: scroll;
-		}
-	}
-
-	&.is-repeated {
-		background-repeat: repeat;
-		background-size: auto;
-	}
-
 	/**
 	 * Set a default background color for has-background-dim _unless_ it includes another
 	 * background-color class (e.g. has-green-background-color). The presence of another
@@ -196,7 +175,7 @@
 	}
 
 	// Extra specificity for in edit mode where other styles would override it otherwise.
-	img.wp-block-cover__image-background,
+	.wp-block-cover__image-background,
 	video.wp-block-cover__video-background {
 		position: absolute;
 		top: 0;
@@ -216,6 +195,32 @@
 	}
 }
 
+.wp-block-cover-image,
+.wp-block-cover,
+.wp-block-cover__image-background,
+video.wp-block-cover__video-background {
+	&.has-parallax {
+		background-attachment: fixed;
+
+		// Mobile Safari does not support fixed background attachment properly.
+		// See also https://stackoverflow.com/questions/24154666/background-size-cover-not-working-on-ios
+		// Chrome on Android does not appear to support the attachment at all: https://issuetracker.google.com/issues/36908439
+		@supports (-webkit-overflow-scrolling: touch) {
+			background-attachment: scroll;
+		}
+
+		// Remove the appearance of scrolling based on OS-level animation preferences.
+		@media (prefers-reduced-motion: reduce) {
+			background-attachment: scroll;
+		}
+	}
+
+	&.is-repeated {
+		background-repeat: repeat;
+		background-size: auto;
+	}
+}
+
 .wp-block-cover__video-background {
 	z-index: z-index(".wp-block-cover__video-background");
 }

package/src/cover/test/edit.native.js

@@ -493,13 +493,10 @@ describe( 'color settings', () => {
 	} );
 
 	it( 'clears the selected overlay color and mantains the inner blocks', async () => {
-		const {
-			getByTestId,
-			getByA11yLabel,
-			getByText,
-		} = await initializeEditor( {
-			initialHtml: COVER_BLOCK_SOLID_COLOR_HTML,
-		} );
+		const { getByTestId, getByA11yLabel, getByText } =
+			await initializeEditor( {
+				initialHtml: COVER_BLOCK_SOLID_COLOR_HTML,
+			} );
 
 		// Wait for the block to be created.
 		const coverBlock = await waitFor( () =>

package/src/cover/transforms.js

@@ -66,13 +66,8 @@ const transforms = {
 			type: 'block',
 			blocks: [ 'core/group' ],
 			transform: ( attributes, innerBlocks ) => {
-				const {
-					align,
-					anchor,
-					backgroundColor,
-					gradient,
-					style,
-				} = attributes;
+				const { align, anchor, backgroundColor, gradient, style } =
+					attributes;
 
 				// If the Group block being transformed has a Cover block as its
 				// only child return that Cover block.

package/src/embed/block.json

@@ -35,7 +35,12 @@
 		}
 	},
 	"supports": {
-		"align": true
+		"align": true,
+		"__experimentalStyle": {
+			"spacing": {
+				"margin": "0 0 1em 0"
+			}
+		}
 	},
 	"editorStyle": "wp-block-embed-editor",
 	"style": "wp-block-embed"