@wordpress/block-library 7.4.0 → 7.7.0

package/src/cover/edit/resizable-cover.js

@@ -0,0 +1,55 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import { ResizableBox } from '@wordpress/components';
+
+const RESIZABLE_BOX_ENABLE_OPTION = {
+	top: false,
+	right: false,
+	bottom: true,
+	left: false,
+	topRight: false,
+	bottomRight: false,
+	bottomLeft: false,
+	topLeft: false,
+};
+
+export default function ResizableCover( {
+	className,
+	onResizeStart,
+	onResize,
+	onResizeStop,
+	...props
+} ) {
+	const [ isResizing, setIsResizing ] = useState( false );
+
+	return (
+		<ResizableBox
+			className={ classnames( className, {
+				'is-resizing': isResizing,
+			} ) }
+			enable={ RESIZABLE_BOX_ENABLE_OPTION }
+			onResizeStart={ ( _event, _direction, elt ) => {
+				onResizeStart( elt.clientHeight );
+				onResize( elt.clientHeight );
+			} }
+			onResize={ ( _event, _direction, elt ) => {
+				onResize( elt.clientHeight );
+				if ( ! isResizing ) {
+					setIsResizing( true );
+				}
+			} }
+			onResizeStop={ ( _event, _direction, elt ) => {
+				onResizeStop( elt.clientHeight );
+				setIsResizing( false );
+			} }
+			{ ...props }
+		/>
+	);
+}

package/src/cover/edit/use-cover-is-dark.js

@@ -0,0 +1,71 @@
+/**
+ * External dependencies
+ */
+import FastAverageColor from 'fast-average-color';
+import { colord } from 'colord';
+
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useState } from '@wordpress/element';
+
+function retrieveFastAverageColor() {
+	if ( ! retrieveFastAverageColor.fastAverageColor ) {
+		retrieveFastAverageColor.fastAverageColor = new FastAverageColor();
+	}
+	return retrieveFastAverageColor.fastAverageColor;
+}
+
+/**
+ * useCoverIsDark is a hook that returns a boolean variable specifying if the cover
+ * background is dark or not.
+ *
+ * @param {?string} url          Url of the media background.
+ * @param {?number} dimRatio     Transparency of the overlay color. If an image and
+ *                               color are set, dimRatio is used to decide what is used
+ *                               for background darkness checking purposes.
+ * @param {?string} overlayColor String containing the overlay color value if one exists.
+ * @param {?Object} elementRef   If a media background is set, elementRef should contain a reference to a
+ *                               dom element that renders that media.
+ *
+ * @return {boolean} True if the cover background is considered "dark" and false otherwise.
+ */
+export default function useCoverIsDark(
+	url,
+	dimRatio = 50,
+	overlayColor,
+	elementRef
+) {
+	const [ isDark, setIsDark ] = useState( false );
+	useEffect( () => {
+		// If opacity is lower than 50 the dominant color is the image or video color,
+		// so use that color for the dark mode computation.
+		if ( url && dimRatio <= 50 && elementRef.current ) {
+			retrieveFastAverageColor().getColorAsync(
+				elementRef.current,
+				( color ) => {
+					setIsDark( color.isDark );
+				}
+			);
+		}
+	}, [ url, url && dimRatio <= 50 && elementRef.current, setIsDark ] );
+	useEffect( () => {
+		// If opacity is greater than 50 the dominant color is the overlay color,
+		// so use that color for the dark mode computation.
+		if ( dimRatio > 50 || ! url ) {
+			if ( ! overlayColor ) {
+				// If no overlay color exists the overlay color is black (isDark )
+				setIsDark( true );
+				return;
+			}
+			setIsDark( colord( overlayColor ).isDark() );
+		}
+	}, [ overlayColor, dimRatio > 50 || ! url, setIsDark ] );
+	useEffect( () => {
+		if ( ! url && ! overlayColor ) {
+			// Reset isDark.
+			setIsDark( false );
+		}
+	}, [ ! url && ! overlayColor, setIsDark ] );
+	return isDark;
+}

package/src/cover/edit.native.js

@@ -9,6 +9,7 @@ import {
 	Platform,
 } from 'react-native';
 import Video from 'react-native-video';
+import classnames from 'classnames/dedupe';
 
 /**
  * WordPress dependencies
@@ -47,7 +48,7 @@ import {
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { compose, withPreferredColorScheme } from '@wordpress/compose';
-import { withSelect, withDispatch } from '@wordpress/data';
+import { useDispatch, withSelect, withDispatch } from '@wordpress/data';
 import {
 	useEffect,
 	useState,
@@ -71,6 +72,7 @@ import {
 	COVER_DEFAULT_HEIGHT,
 } from './shared';
 import Controls from './controls';
+import useCoverIsDark from './use-cover-is-dark';
 
 /**
  * Constants
@@ -113,6 +115,7 @@ const Cover = ( {
 		customGradient,
 		gradient,
 		overlayColor,
+		isDark,
 	} = attributes;
 	const [ isScreenReaderEnabled, setIsScreenReaderEnabled ] = useState(
 		false
@@ -180,18 +183,6 @@ const Cover = ( {
 
 	const openMediaOptionsRef = useRef();
 
-	// Used to set a default color for its InnerBlocks
-	// since there's no system to inherit styles yet
-	// the RichText component will check if there are
-	// parent styles for the current block. If there are,
-	// it will use that color instead.
-	useEffect( () => {
-		// While we don't support theme colors.
-		if ( ! attributes.overlayColor || ( ! attributes.overlay && url ) ) {
-			setAttributes( { childrenStyles: styles.defaultColor } );
-		}
-	}, [ setAttributes ] );
-
 	// Initialize uploading flag to false, awaiting sync.
 	const [ isUploadInProgress, setIsUploadInProgress ] = useState( false );
 
@@ -257,6 +248,42 @@ const Cover = ( {
 		openGeneralSidebar();
 	}
 
+	const { __unstableMarkNextChangeAsNotPersistent } = useDispatch(
+		blockEditorStore
+	);
+	const isCoverDark = useCoverIsDark(
+		isDark,
+		url,
+		dimRatio,
+		overlayColorValue?.color
+	);
+
+	useEffect( () => {
+		// This side-effect should not create an undo level.
+		__unstableMarkNextChangeAsNotPersistent();
+		// Used to set a default color for its InnerBlocks
+		// since there's no system to inherit styles yet
+		// the RichText component will check if there are
+		// parent styles for the current block. If there are,
+		// it will use that color instead.
+		setAttributes( {
+			isDark: isCoverDark,
+			childrenStyles: isCoverDark
+				? styles.defaultColor
+				: styles.defaultColorLightMode,
+		} );
+
+		// Ensure that "is-light" is removed from "className" attribute if cover background is dark.
+		if ( isCoverDark && attributes.className?.includes( 'is-light' ) ) {
+			const className = classnames( attributes.className, {
+				'is-light': false,
+			} );
+			setAttributes( {
+				className: className !== '' ? className : undefined,
+			} );
+		}
+	}, [ isCoverDark ] );
+
 	const backgroundColor = getStylesFromColorScheme(
 		styles.backgroundSolid,
 		styles.backgroundSolidDark
@@ -375,7 +402,6 @@ const Cover = ( {
 		<TouchableWithoutFeedback
 			accessible={ ! isParentSelected }
 			onPress={ onMediaPressed }
-			onLongPress={ openMediaOptionsRef.current }
 			disabled={ ! isParentSelected }
 		>
 			<View style={ [ styles.background, backgroundColor ] }>

package/src/cover/editor.scss

@@ -10,7 +10,7 @@
 		min-height: auto !important;
 		padding: 0 !important;
 
-		// Resizeable placeholder for placeholder.
+		// Resizable placeholder for placeholder.
 		.block-library-cover__resize-container {
 			display: none;
 		}

package/src/cover/focal-point-settings-button.native.js

@@ -41,7 +41,7 @@ function FocalPointSettingsButton( {
 		>
 			{ /*
 			 * Wrapper View element used around Icon as workaround for SVG opacity
-			 * issue: https://git.io/JtuXD
+			 * issue: https://github.com/react-native-svg/react-native-svg/issues/1345
 			 */ }
 			<View style={ disabled && styles.dimmedActionButton }>
 				<Icon icon={ chevronRight } />

package/src/cover/index.php

@@ -14,51 +14,23 @@
  * @return string Returns the cover block markup, if useFeaturedImage is true.
  */
 function render_block_core_cover( $attributes, $content ) {
-	if ( false === $attributes['useFeaturedImage'] ) {
+	if ( 'image' !== $attributes['backgroundType'] || false === $attributes['useFeaturedImage'] ) {
 		return $content;
 	}
 
-	$current_featured_image = get_the_post_thumbnail_url();
-
-	if ( false === $current_featured_image ) {
-		return $content;
-	}
-
-	$is_img_element      = ! ( $attributes['hasParallax'] || $attributes['isRepeated'] );
-	$is_image_background = 'image' === $attributes['backgroundType'];
-
-	if ( $is_image_background && ! $is_img_element ) {
-		$content = preg_replace(
-			'/class=\".*?\"/',
-			'${0} style="background-image:url(' . esc_url( $current_featured_image ) . ')"',
-			$content,
-			1
+	if ( ! ( $attributes['hasParallax'] || $attributes['isRepeated'] ) ) {
+		$attr = array(
+			'class'           => 'wp-block-cover__image-background',
+			'data-object-fit' => 'cover',
 		);
-	}
 
-	if ( $is_image_background && $is_img_element ) {
-		$object_position = '';
 		if ( isset( $attributes['focalPoint'] ) ) {
-			$object_position = round( $attributes['focalPoint']['x'] * 100 ) . '%' . ' ' .
-			round( $attributes['focalPoint']['x'] * 100 ) . '%';
+			$object_position              = round( $attributes['focalPoint']['x'] * 100 ) . '%' . ' ' . round( $attributes['focalPoint']['y'] * 100 ) . '%';
+			$attr['data-object-position'] = $object_position;
+			$attr['style']                = 'object-position: ' . $object_position;
 		}
 
-		$image_template = '<img
-			class="wp-block-cover__image-background"
-			alt="%s"
-			src="%s"
-			style="object-position: %s"
-			data-object-fit="cover"
-			data-object-position="%s"
-		/>';
-
-		$image = sprintf(
-			$image_template,
-			esc_attr( get_the_post_thumbnail_caption() ),
-			esc_url( $current_featured_image ),
-			esc_attr( $object_position ),
-			esc_attr( $object_position )
-		);
+		$image = get_the_post_thumbnail( null, 'post-thumbnail', $attr );
 
 		$content = str_replace(
 			'</span><div',
@@ -66,6 +38,17 @@ function render_block_core_cover( $attributes, $content ) {
 			$content
 		);
 
+	} else {
+		if ( in_the_loop() ) {
+			update_post_thumbnail_cache();
+		}
+		$current_featured_image = get_the_post_thumbnail_url();
+		$content                = preg_replace(
+			'/class=\".*?\"/',
+			'${0} style="background-image:url(' . esc_url( $current_featured_image ) . ')"',
+			$content,
+			1
+		);
 	}
 
 	return $content;

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,8 +72,12 @@ 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(
 		{
@@ -90,6 +91,15 @@ export default function save( { attributes } ) {
 		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 +126,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

package/src/cover/style.native.scss

@@ -49,6 +49,10 @@
 	color: $white;
 }
 
+.defaultColorLightMode {
+	color: $black;
+}
+
 .background {
 	width: 100%;
 	height: 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-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;
-	}
-
 	/**
 	 * 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
@@ -96,10 +75,6 @@
 		}
 	}
 
-	.block-library-cover__padding-visualizer {
-		z-index: z-index(".block-library-cover__padding-visualizer");
-	}
-
 	// Apply max-width to floated items that have no intrinsic width
 	&.alignleft,
 	&.alignright {
@@ -200,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;
@@ -220,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/__snapshots__/edit.native.js.snap

@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`color settings clears the selected overlay color and mantains the inner blocks 1`] = `
-"<!-- wp:cover -->
-<div class=\\"wp-block-cover\\"><span aria-hidden=\\"true\\" class=\\"wp-block-cover__background has-background-dim-100 has-background-dim\\"></span><div class=\\"wp-block-cover__inner-container\\"><!-- wp:paragraph {\\"align\\":\\"center\\",\\"placeholder\\":\\"Write title…\\"} -->
+"<!-- wp:cover {\\"isDark\\":false} -->
+<div class=\\"wp-block-cover is-light\\"><span aria-hidden=\\"true\\" class=\\"wp-block-cover__background has-background-dim-100 has-background-dim\\"></span><div class=\\"wp-block-cover__inner-container\\"><!-- wp:paragraph {\\"align\\":\\"center\\",\\"placeholder\\":\\"Write title…\\"} -->
 <p class=\\"has-text-align-center\\"></p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:cover -->"
@@ -17,16 +17,16 @@ exports[`color settings sets a color for the overlay background when the placeho
 `;
 
 exports[`color settings sets a gradient overlay background when a solid background was already selected 1`] = `
-"<!-- wp:cover {\\"gradient\\":\\"light-green-cyan-to-vivid-green-cyan\\"} -->
-<div class=\\"wp-block-cover\\"><span aria-hidden=\\"true\\" class=\\"wp-block-cover__background has-background-dim-100 has-background-dim has-background-gradient has-light-green-cyan-to-vivid-green-cyan-gradient-background\\"></span><div class=\\"wp-block-cover__inner-container\\"><!-- wp:paragraph {\\"align\\":\\"center\\",\\"placeholder\\":\\"Write title…\\"} -->
+"<!-- wp:cover {\\"gradient\\":\\"light-green-cyan-to-vivid-green-cyan\\",\\"isDark\\":false} -->
+<div class=\\"wp-block-cover is-light\\"><span aria-hidden=\\"true\\" class=\\"wp-block-cover__background has-background-dim-100 has-background-dim has-background-gradient has-light-green-cyan-to-vivid-green-cyan-gradient-background\\"></span><div class=\\"wp-block-cover__inner-container\\"><!-- wp:paragraph {\\"align\\":\\"center\\",\\"placeholder\\":\\"Write title…\\"} -->
 <p class=\\"has-text-align-center\\"></p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:cover -->"
 `;
 
 exports[`color settings toggles between solid colors and gradients 1`] = `
-"<!-- wp:cover {\\"gradient\\":\\"light-green-cyan-to-vivid-green-cyan\\"} -->
-<div class=\\"wp-block-cover\\"><span aria-hidden=\\"true\\" class=\\"wp-block-cover__background has-background-dim-100 has-background-dim has-background-gradient has-light-green-cyan-to-vivid-green-cyan-gradient-background\\"></span><div class=\\"wp-block-cover__inner-container\\"><!-- wp:paragraph {\\"align\\":\\"center\\",\\"placeholder\\":\\"Write title…\\"} -->
+"<!-- wp:cover {\\"gradient\\":\\"light-green-cyan-to-vivid-green-cyan\\",\\"isDark\\":false} -->
+<div class=\\"wp-block-cover is-light\\"><span aria-hidden=\\"true\\" class=\\"wp-block-cover__background has-background-dim-100 has-background-dim has-background-gradient has-light-green-cyan-to-vivid-green-cyan-gradient-background\\"></span><div class=\\"wp-block-cover__inner-container\\"><!-- wp:paragraph {\\"align\\":\\"center\\",\\"placeholder\\":\\"Write title…\\"} -->
 <p class=\\"has-text-align-center\\"></p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:cover -->"

package/src/cover/test/block-controls.js

@@ -0,0 +1,62 @@
+/**
+ * External dependencies
+ */
+import { render, screen, fireEvent } from '@testing-library/react';
+
+// Need to mock the BlockControls wrapper as this requires a slot to run
+// so can't be easily unit tested.
+jest.mock( '@wordpress/block-editor', () => ( {
+	...jest.requireActual( '@wordpress/block-editor' ),
+	BlockControls: ( { children } ) => <div>{ children }</div>,
+} ) );
+
+/**
+ * Internal dependencies
+ */
+import CoverBlockControls from '../edit/block-controls';
+
+const setAttributes = jest.fn();
+const onSelectMedia = jest.fn();
+
+const currentSettings = { hasInnerBlocks: true, url: undefined };
+const defaultAttributes = {
+	contentPosition: undefined,
+	id: 1,
+	useFeaturedImage: false,
+	dimRatio: 50,
+	minHeight: 300,
+	minHeightUnit: 'px',
+};
+const defaultProps = {
+	attributes: defaultAttributes,
+	currentSettings,
+	setAttributes,
+	onSelectMedia,
+};
+
+beforeEach( () => {
+	setAttributes.mockClear();
+	onSelectMedia.mockClear();
+} );
+
+describe( 'Cover block controls', () => {
+	describe( 'Full height toggle', () => {
+		test( 'displays toggle full height button toggled off if minHeight not 100vh', () => {
+			render( <CoverBlockControls { ...defaultProps } /> );
+			expect(
+				screen.getByRole( 'button', {
+					pressed: false,
+					name: 'Toggle full height',
+				} )
+			).toBeInTheDocument();
+		} );
+		test( 'sets minHeight attributes to 100vh when clicked', () => {
+			render( <CoverBlockControls { ...defaultProps } /> );
+			fireEvent.click( screen.getByLabelText( 'Toggle full height' ) );
+			expect( setAttributes ).toHaveBeenCalledWith( {
+				minHeight: 100,
+				minHeightUnit: 'vh',
+			} );
+		} );
+	} );
+} );