@wordpress/block-library 7.5.0 → 7.8.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.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,
@@ -402,7 +398,6 @@ const Cover = ( {
 		<TouchableWithoutFeedback
 			accessible={ ! isParentSelected }
 			onPress={ onMediaPressed }
-			onLongPress={ openMediaOptionsRef.current }
 			disabled={ ! isParentSelected }
 		>
 			<View style={ [ styles.background, backgroundColor ] }>
@@ -623,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

@@ -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;
 		}
@@ -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/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']['y'] * 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,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

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/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',
+			} );
+		} );
+	} );
+} );

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"

package/src/embed/edit.js

@@ -56,47 +56,45 @@ const EmbedEdit = ( props ) => {
 	const [ isEditingURL, setIsEditingURL ] = useState( false );
 	const { invalidateResolution } = useDispatch( coreStore );
 
-	const {
-		preview,
-		fetching,
-		themeSupportsResponsive,
-		cannotEmbed,
-	} = useSelect(
-		( select ) => {
-			const {
-				getEmbedPreview,
-				isPreviewEmbedFallback,
-				isRequestingEmbedPreview,
-				getThemeSupports,
-			} = select( coreStore );
-			if ( ! attributesUrl ) {
-				return { fetching: false, cannotEmbed: false };
-			}
+	const { preview, fetching, themeSupportsResponsive, cannotEmbed } =
+		useSelect(
+			( select ) => {
+				const {
+					getEmbedPreview,
+					isPreviewEmbedFallback,
+					isRequestingEmbedPreview,
+					getThemeSupports,
+				} = select( coreStore );
+				if ( ! attributesUrl ) {
+					return { fetching: false, cannotEmbed: false };
+				}
 
-			const embedPreview = getEmbedPreview( attributesUrl );
-			const previewIsFallback = isPreviewEmbedFallback( attributesUrl );
-
-			// The external oEmbed provider does not exist. We got no type info and no html.
-			const badEmbedProvider =
-				embedPreview?.html === false &&
-				embedPreview?.type === undefined;
-			// Some WordPress URLs that can't be embedded will cause the API to return
-			// a valid JSON response with no HTML and `data.status` set to 404, rather
-			// than generating a fallback response as other embeds do.
-			const wordpressCantEmbed = embedPreview?.data?.status === 404;
-			const validPreview =
-				!! embedPreview && ! badEmbedProvider && ! wordpressCantEmbed;
-			return {
-				preview: validPreview ? embedPreview : undefined,
-				fetching: isRequestingEmbedPreview( attributesUrl ),
-				themeSupportsResponsive: getThemeSupports()[
-					'responsive-embeds'
-				],
-				cannotEmbed: ! validPreview || previewIsFallback,
-			};
-		},
-		[ attributesUrl ]
-	);
+				const embedPreview = getEmbedPreview( attributesUrl );
+				const previewIsFallback =
+					isPreviewEmbedFallback( attributesUrl );
+
+				// The external oEmbed provider does not exist. We got no type info and no html.
+				const badEmbedProvider =
+					embedPreview?.html === false &&
+					embedPreview?.type === undefined;
+				// Some WordPress URLs that can't be embedded will cause the API to return
+				// a valid JSON response with no HTML and `data.status` set to 404, rather
+				// than generating a fallback response as other embeds do.
+				const wordpressCantEmbed = embedPreview?.data?.status === 404;
+				const validPreview =
+					!! embedPreview &&
+					! badEmbedProvider &&
+					! wordpressCantEmbed;
+				return {
+					preview: validPreview ? embedPreview : undefined,
+					fetching: isRequestingEmbedPreview( attributesUrl ),
+					themeSupportsResponsive:
+						getThemeSupports()[ 'responsive-embeds' ],
+					cannotEmbed: ! validPreview || previewIsFallback,
+				};
+			},
+			[ attributesUrl ]
+		);
 
 	/**
 	 * Returns the attributes derived from the preview, merged with the current attributes.