@wordpress/block-library 7.5.0 → 7.6.0

package/src/comments-title/index.php

@@ -22,9 +22,10 @@ function render_block_core_comments_title( $attributes ) {
 	$show_post_title     = ! empty( $attributes['showPostTitle'] ) && $attributes['showPostTitle'];
 	$show_comments_count = ! empty( $attributes['showCommentsCount'] ) && $attributes['showCommentsCount'];
 	$wrapper_attributes  = get_block_wrapper_attributes( array( 'class' => $align_class_name ) );
-	$post_title          = $show_post_title ? sprintf( '"%1$s"', get_the_title() ) : null;
-	$comments_count      = number_format_i18n( get_comments_number() );
-	$tag_name            = 'h2';
+	$comments_count      = get_comments_number();
+	/* translators: %s: Post title. */
+	$post_title = sprintf( __( '“%s”' ), get_the_title() );
+	$tag_name   = 'h2';
 	if ( isset( $attributes['level'] ) ) {
 		$tag_name = 'h' . $attributes['level'];
 	}
@@ -33,28 +34,45 @@ function render_block_core_comments_title( $attributes ) {
 		return;
 	}
 
-	$single_default_comment_label = $show_post_title ? __( 'Response to' ) : __( 'Response' );
 	if ( $show_comments_count ) {
-		$single_default_comment_label = $show_post_title ? __( 'One response to' ) : __( 'One response' );
+		if ( $show_post_title ) {
+			if ( '1' === $comments_count ) {
+				/* translators: %s: Post title. */
+				$comments_title = sprintf( __( 'One response to %s' ), $post_title );
+			} else {
+				$comments_title = sprintf(
+					/* translators: 1: Number of comments, 2: Post title. */
+					_n(
+						'%1$s response to %2$s',
+						'%1$s responses to %2$s',
+						$comments_count
+					),
+					number_format_i18n( $comments_count ),
+					$post_title
+				);
+			}
+		} elseif ( '1' === $comments_count ) {
+			$comments_title = __( 'One response' );
+		} else {
+			$comments_title = sprintf(
+				/* translators: %s: Number of comments. */
+				_n( '%s responses', '%s responses', $comments_count ),
+				number_format_i18n( $comments_count )
+			);
+		}
+	} elseif ( $show_post_title ) {
+		if ( '1' === $comments_count ) {
+			/* translators: %s: Post title. */
+			$comments_title = sprintf( __( 'Response to %s' ), $post_title );
+		} else {
+			/* translators: %s: Post title. */
+			$comments_title = sprintf( __( 'Responses to %s' ), $post_title );
+		}
+	} elseif ( '1' === $comments_count ) {
+		$comments_title = __( 'Response' );
+	} else {
+		$comments_title = __( 'Responses' );
 	}
-	$single_comment_label = ! empty( $attributes['singleCommentLabel'] ) ? $attributes['singleCommentLabel'] : $single_default_comment_label;
-
-	$multiple_default_comment_label = $show_post_title ? __( 'Responses to' ) : __( 'Responses' );
-	if ( $show_comments_count ) {
-		$multiple_default_comment_label = $show_post_title ? __( 'responses to' ) : __( 'responses' );
-	}
-
-	$multiple_comment_label = ! empty( $attributes['multipleCommentsLabel'] ) ? $attributes['multipleCommentsLabel'] : $multiple_default_comment_label;
-
-	$comments_title = '%1$s %2$s %3$s';
-
-	$comments_title = sprintf(
-		$comments_title,
-		// If there is only one comment, only display the label.
-		'1' !== $comments_count && $show_comments_count ? $comments_count : null,
-		'1' === $comments_count ? $single_comment_label : $multiple_comment_label,
-		$post_title
-	);
 
 	return sprintf(
 		'<%1$s id="comments" %2$s>%3$s</%1$s>',

package/src/cover/controls.native.js

@@ -167,7 +167,6 @@ function Controls( {
 							styles.mediaPreview,
 							mediaBackground,
 						] }
-						onLongPress={ openMediaOptions }
 					>
 						<View style={ styles.mediaInner }>
 							{ IMAGE_BACKGROUND_TYPE === backgroundType && (
@@ -217,7 +216,7 @@ function Controls( {
 										} );
 										setDisplayPlaceholder( false );
 										// Avoid invisible, paused video on Android, presumably
-										// related to https://git.io/Jt6Dr
+										// related to https://github.com/react-native-video/react-native-video/issues/1979
 										videoRef?.current.seek( 0 );
 									} }
 									ref={ videoRef }

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

@@ -0,0 +1,119 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import { ToolbarButton } from '@wordpress/components';
+
+import {
+	BlockControls,
+	MediaReplaceFlow,
+	__experimentalBlockAlignmentMatrixControl as BlockAlignmentMatrixControl,
+	__experimentalBlockFullHeightAligmentControl as FullHeightAlignmentControl,
+} from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+import { postFeaturedImage } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { ALLOWED_MEDIA_TYPES, IMAGE_BACKGROUND_TYPE } from '../shared';
+
+export default function CoverBlockControls( {
+	attributes,
+	setAttributes,
+	onSelectMedia,
+	currentSettings,
+} ) {
+	const {
+		contentPosition,
+		id,
+		useFeaturedImage,
+		dimRatio,
+		minHeight,
+		minHeightUnit,
+	} = attributes;
+	const { hasInnerBlocks, url } = currentSettings;
+
+	const [ prevMinHeightValue, setPrevMinHeightValue ] = useState( minHeight );
+	const [ prevMinHeightUnit, setPrevMinHeightUnit ] = useState(
+		minHeightUnit
+	);
+	const isMinFullHeight = minHeightUnit === 'vh' && minHeight === 100;
+	const toggleMinFullHeight = () => {
+		if ( isMinFullHeight ) {
+			// If there aren't previous values, take the default ones.
+			if ( prevMinHeightUnit === 'vh' && prevMinHeightValue === 100 ) {
+				return setAttributes( {
+					minHeight: undefined,
+					minHeightUnit: undefined,
+				} );
+			}
+
+			// Set the previous values of height.
+			return setAttributes( {
+				minHeight: prevMinHeightValue,
+				minHeightUnit: prevMinHeightUnit,
+			} );
+		}
+
+		setPrevMinHeightValue( minHeight );
+		setPrevMinHeightUnit( minHeightUnit );
+
+		// Set full height.
+		return setAttributes( {
+			minHeight: 100,
+			minHeightUnit: 'vh',
+		} );
+	};
+
+	const toggleUseFeaturedImage = () => {
+		setAttributes( {
+			id: undefined,
+			url: undefined,
+			useFeaturedImage: ! useFeaturedImage,
+			dimRatio: dimRatio === 100 ? 50 : dimRatio,
+			backgroundType: useFeaturedImage
+				? IMAGE_BACKGROUND_TYPE
+				: undefined,
+		} );
+	};
+	return (
+		<>
+			<BlockControls group="block">
+				<BlockAlignmentMatrixControl
+					label={ __( 'Change content position' ) }
+					value={ contentPosition }
+					onChange={ ( nextPosition ) =>
+						setAttributes( {
+							contentPosition: nextPosition,
+						} )
+					}
+					isDisabled={ ! hasInnerBlocks }
+				/>
+				<FullHeightAlignmentControl
+					isActive={ isMinFullHeight }
+					onToggle={ toggleMinFullHeight }
+					isDisabled={ ! hasInnerBlocks }
+				/>
+			</BlockControls>
+			<BlockControls group="other">
+				<ToolbarButton
+					icon={ postFeaturedImage }
+					label={ __( 'Use featured image' ) }
+					isPressed={ useFeaturedImage }
+					onClick={ toggleUseFeaturedImage }
+				/>
+				{ ! useFeaturedImage && (
+					<MediaReplaceFlow
+						mediaId={ id }
+						mediaURL={ url }
+						allowedTypes={ ALLOWED_MEDIA_TYPES }
+						accept="image/*,video/*"
+						onSelect={ onSelectMedia }
+						name={ ! url ? __( 'Add Media' ) : __( 'Replace' ) }
+					/>
+				) }
+			</BlockControls>
+		</>
+	);
+}

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

@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import { BlockIcon, MediaPlaceholder } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+import { cover as icon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { ALLOWED_MEDIA_TYPES } from '../shared';
+
+export default function CoverPlaceholder( {
+	disableMediaButtons = false,
+	children,
+	onSelectMedia,
+	onError,
+	style,
+} ) {
+	return (
+		<MediaPlaceholder
+			icon={ <BlockIcon icon={ icon } /> }
+			labels={ {
+				title: __( 'Cover' ),
+				instructions: __(
+					'Drag and drop onto this block, upload, or select existing media from your library.'
+				),
+			} }
+			onSelect={ onSelectMedia }
+			accept="image/*,video/*"
+			allowedTypes={ ALLOWED_MEDIA_TYPES }
+			disableMediaButtons={ disableMediaButtons }
+			onError={ onError }
+			style={ style }
+		>
+			{ children }
+		</MediaPlaceholder>
+	);
+}

package/src/cover/edit/index.js

@@ -0,0 +1,381 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import { extend } from 'colord';
+import namesPlugin from 'colord/plugins/names';
+
+/**
+ * WordPress dependencies
+ */
+import { useEntityProp, store as coreStore } from '@wordpress/core-data';
+import { useEffect, useRef } from '@wordpress/element';
+import { Spinner } from '@wordpress/components';
+import { compose } from '@wordpress/compose';
+import {
+	withColors,
+	ColorPalette,
+	useBlockProps,
+	useSetting,
+	useInnerBlocksProps,
+	__experimentalUseGradient,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { isBlobURL } from '@wordpress/blob';
+import { store as noticesStore } from '@wordpress/notices';
+
+/**
+ * Internal dependencies
+ */
+import {
+	attributesFromMedia,
+	IMAGE_BACKGROUND_TYPE,
+	VIDEO_BACKGROUND_TYPE,
+	backgroundImageStyles,
+	dimRatioToClass,
+	isContentPositionCenter,
+	getPositionClassName,
+	mediaPosition,
+} from '../shared';
+import useCoverIsDark from './use-cover-is-dark';
+import CoverInspectorControls from './inspector-controls';
+import CoverBlockControls from './block-controls';
+import CoverPlaceholder from './cover-placeholder';
+import ResizableCover from './resizable-cover';
+
+extend( [ namesPlugin ] );
+
+function getInnerBlocksTemplate( attributes ) {
+	return [
+		[
+			'core/paragraph',
+			{
+				align: 'center',
+				placeholder: __( 'Write title…' ),
+				...attributes,
+			},
+		],
+	];
+}
+
+/**
+ * Is the URL a temporary blob URL? A blob URL is one that is used temporarily while
+ * the media (image or video) is being uploaded and will not have an id allocated yet.
+ *
+ * @param {number} id  The id of the media.
+ * @param {string} url The url of the media.
+ *
+ * @return {boolean} Is the URL a Blob URL.
+ */
+const isTemporaryMedia = ( id, url ) => ! id && isBlobURL( url );
+
+function CoverEdit( {
+	attributes,
+	clientId,
+	isSelected,
+	overlayColor,
+	setAttributes,
+	setOverlayColor,
+	toggleSelection,
+	context: { postId, postType },
+} ) {
+	const {
+		contentPosition,
+		id,
+		useFeaturedImage,
+		dimRatio,
+		focalPoint,
+		hasParallax,
+		isDark,
+		isRepeated,
+		minHeight,
+		minHeightUnit,
+		alt,
+		allowedBlocks,
+		templateLock,
+	} = attributes;
+
+	const [ featuredImage ] = useEntityProp(
+		'postType',
+		postType,
+		'featured_media',
+		postId
+	);
+
+	const media = useSelect(
+		( select ) =>
+			featuredImage &&
+			select( coreStore ).getMedia( featuredImage, { context: 'view' } ),
+		[ featuredImage ]
+	);
+	const mediaUrl = media?.source_url;
+
+	// instead of destructuring the attributes
+	// we define the url and background type
+	// depending on the value of the useFeaturedImage flag
+	// to preview in edit the dynamic featured image
+	const url = useFeaturedImage ? mediaUrl : attributes.url;
+	const backgroundType = useFeaturedImage
+		? IMAGE_BACKGROUND_TYPE
+		: attributes.backgroundType;
+
+	const { __unstableMarkNextChangeAsNotPersistent } = useDispatch(
+		blockEditorStore
+	);
+	const { createErrorNotice } = useDispatch( noticesStore );
+	const { gradientClass, gradientValue } = __experimentalUseGradient();
+	const onSelectMedia = attributesFromMedia( setAttributes, dimRatio );
+	const isUploadingMedia = isTemporaryMedia( id, url );
+
+	const onUploadError = ( message ) => {
+		createErrorNotice( message, { type: 'snackbar' } );
+	};
+
+	const mediaElement = useRef();
+	const isCoverDark = useCoverIsDark(
+		url,
+		dimRatio,
+		overlayColor.color,
+		mediaElement
+	);
+
+	useEffect( () => {
+		// This side-effect should not create an undo level.
+		__unstableMarkNextChangeAsNotPersistent();
+		setAttributes( { isDark: isCoverDark } );
+	}, [ isCoverDark ] );
+
+	const isImageBackground = IMAGE_BACKGROUND_TYPE === backgroundType;
+	const isVideoBackground = VIDEO_BACKGROUND_TYPE === backgroundType;
+
+	const minHeightWithUnit =
+		minHeight && minHeightUnit
+			? `${ minHeight }${ minHeightUnit }`
+			: minHeight;
+
+	const isImgElement = ! ( hasParallax || isRepeated );
+
+	const style = {
+		...( isImageBackground && ! isImgElement
+			? backgroundImageStyles( url )
+			: undefined ),
+		minHeight: minHeightWithUnit || undefined,
+	};
+
+	const bgStyle = { backgroundColor: overlayColor.color };
+	const mediaStyle = {
+		objectPosition:
+			focalPoint && isImgElement
+				? mediaPosition( focalPoint )
+				: undefined,
+	};
+
+	const hasBackground = !! ( url || overlayColor.color || gradientValue );
+
+	const hasInnerBlocks = useSelect(
+		( select ) =>
+			select( blockEditorStore ).getBlock( clientId ).innerBlocks.length >
+			0,
+		[ clientId ]
+	);
+
+	const ref = useRef();
+	const blockProps = useBlockProps( { ref } );
+
+	// Check for fontSize support before we pass a fontSize attribute to the innerBlocks.
+	const hasFontSizes = !! useSetting( 'typography.fontSizes' )?.length;
+	const innerBlocksTemplate = getInnerBlocksTemplate( {
+		fontSize: hasFontSizes ? 'large' : undefined,
+	} );
+
+	const innerBlocksProps = useInnerBlocksProps(
+		{
+			className: 'wp-block-cover__inner-container',
+		},
+		{
+			template: innerBlocksTemplate,
+			templateInsertUpdatesSelection: true,
+			allowedBlocks,
+			templateLock,
+		}
+	);
+
+	const currentSettings = {
+		isVideoBackground,
+		isImageBackground,
+		mediaElement,
+		hasInnerBlocks,
+		url,
+		isImgElement,
+		overlayColor,
+	};
+
+	if ( ! 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 }
+				/>
+				<div
+					{ ...blockProps }
+					className={ classnames(
+						'is-placeholder',
+						blockProps.className
+					) }
+				>
+					<CoverPlaceholder
+						onSelectMedia={ onSelectMedia }
+						onError={ onUploadError }
+						style={ {
+							minHeight: minHeightWithUnit || undefined,
+						} }
+					>
+						<div className="wp-block-cover__placeholder-background-options">
+							<ColorPalette
+								disableCustomColors={ true }
+								value={ overlayColor.color }
+								onChange={ setOverlayColor }
+								clearable={ false }
+							/>
+						</div>
+					</CoverPlaceholder>
+					<ResizableCover
+						className="block-library-cover__resize-container"
+						onResizeStart={ () => {
+							setAttributes( { minHeightUnit: 'px' } );
+							toggleSelection( false );
+						} }
+						onResize={ ( value ) => {
+							setAttributes( { minHeight: value } );
+						} }
+						onResizeStop={ ( newMinHeight ) => {
+							toggleSelection( true );
+							setAttributes( { minHeight: newMinHeight } );
+						} }
+						showHandle={ isSelected }
+					/>
+				</div>
+			</>
+		);
+	}
+
+	const classes = classnames(
+		{
+			'is-dark-theme': isDark,
+			'is-light': ! isDark,
+			'is-transient': isUploadingMedia,
+			'has-parallax': hasParallax,
+			'is-repeated': isRepeated,
+			'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 }
+			/>
+			<div
+				{ ...blockProps }
+				className={ classnames( classes, blockProps.className ) }
+				style={ { ...style, ...blockProps.style } }
+				data-url={ url }
+			>
+				<ResizableCover
+					className="block-library-cover__resize-container"
+					onResizeStart={ () => {
+						setAttributes( { minHeightUnit: 'px' } );
+						toggleSelection( false );
+					} }
+					onResize={ ( value ) => {
+						setAttributes( { minHeight: value } );
+					} }
+					onResizeStop={ ( newMinHeight ) => {
+						toggleSelection( true );
+						setAttributes( { minHeight: newMinHeight } );
+					} }
+					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 } }
+				/>
+
+				{ url && isImageBackground && isImgElement && (
+					<img
+						ref={ mediaElement }
+						className="wp-block-cover__image-background"
+						alt={ alt }
+						src={ url }
+						style={ mediaStyle }
+					/>
+				) }
+				{ url && isVideoBackground && (
+					<video
+						ref={ mediaElement }
+						className="wp-block-cover__video-background"
+						autoPlay
+						muted
+						loop
+						src={ url }
+						style={ mediaStyle }
+					/>
+				) }
+				{ isUploadingMedia && <Spinner /> }
+				<CoverPlaceholder
+					disableMediaButtons
+					onSelectMedia={ onSelectMedia }
+					onError={ onUploadError }
+				/>
+				<div { ...innerBlocksProps } />
+			</div>
+		</>
+	);
+}
+
+export default compose( [
+	withColors( { overlayColor: 'background-color' } ),
+] )( CoverEdit );