@wordpress/block-library 7.5.0 → 7.8.0

package/src/cover/edit/index.js

@@ -0,0 +1,396 @@
+/**
+ * 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 { Placeholder, 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,
+	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 = {
+		minHeight: minHeightWithUnit || undefined,
+	};
+
+	const backgroundImage = url ? `url(${ url })` : undefined;
+
+	const backgroundPosition = mediaPosition( focalPoint );
+
+	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,
+	};
+
+	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 (
+			<>
+				{ blockControls }
+				{ inspectorControls }
+				<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 (
+		<>
+			{ blockControls }
+			{ inspectorControls }
+			<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 }
+				/>
+
+				{ ( ! 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 && 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 }
+						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 );

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

@@ -0,0 +1,317 @@
+/**
+ * WordPress dependencies
+ */
+import { Fragment, useMemo } from '@wordpress/element';
+import {
+	BaseControl,
+	Button,
+	ExternalLink,
+	FocalPointPicker,
+	PanelBody,
+	PanelRow,
+	RangeControl,
+	TextareaControl,
+	ToggleControl,
+	__experimentalUseCustomUnits as useCustomUnits,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+	__experimentalUnitControl as UnitControl,
+	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
+} from '@wordpress/components';
+import { useInstanceId } from '@wordpress/compose';
+import {
+	InspectorControls,
+	useSetting,
+	__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
+	__experimentalUseGradient,
+	__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,
+} from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { COVER_MIN_HEIGHT, mediaPosition } from '../shared';
+
+function CoverHeightInput( {
+	onChange,
+	onUnitChange,
+	unit = 'px',
+	value = '',
+} ) {
+	const instanceId = useInstanceId( UnitControl );
+	const inputId = `block-cover-height-input-${ instanceId }`;
+	const isPx = unit === 'px';
+
+	const units = useCustomUnits( {
+		availableUnits: useSetting( 'spacing.units' ) || [
+			'px',
+			'em',
+			'rem',
+			'vw',
+			'vh',
+		],
+		defaultValues: { px: 430, '%': 20, em: 20, rem: 20, vw: 20, vh: 50 },
+	} );
+
+	const handleOnChange = ( unprocessedValue ) => {
+		const inputValue =
+			unprocessedValue !== ''
+				? parseFloat( unprocessedValue )
+				: undefined;
+
+		if ( isNaN( inputValue ) && inputValue !== undefined ) {
+			return;
+		}
+		onChange( inputValue );
+	};
+
+	const computedValue = useMemo( () => {
+		const [ parsedQuantity ] = parseQuantityAndUnitFromRawValue( value );
+		return [ parsedQuantity, unit ].join( '' );
+	}, [ unit, value ] );
+
+	const min = isPx ? COVER_MIN_HEIGHT : 0;
+
+	return (
+		<BaseControl label={ __( 'Minimum height of cover' ) } id={ inputId }>
+			<UnitControl
+				id={ inputId }
+				isResetValueOnUnitChange
+				min={ min }
+				onChange={ handleOnChange }
+				onUnitChange={ onUnitChange }
+				style={ { maxWidth: 80 } }
+				units={ units }
+				value={ computedValue }
+			/>
+		</BaseControl>
+	);
+}
+export default function CoverInspectorControls( {
+	attributes,
+	setAttributes,
+	clientId,
+	setOverlayColor,
+	coverRef,
+	currentSettings,
+} ) {
+	const {
+		useFeaturedImage,
+		dimRatio,
+		focalPoint,
+		hasParallax,
+		isRepeated,
+		minHeight,
+		minHeightUnit,
+		alt,
+	} = attributes;
+	const {
+		isVideoBackground,
+		isImageBackground,
+		mediaElement,
+		url,
+		isImgElement,
+		overlayColor,
+	} = currentSettings;
+
+	const { gradientValue, setGradient } = __experimentalUseGradient();
+
+	const toggleParallax = () => {
+		setAttributes( {
+			hasParallax: ! hasParallax,
+			...( ! hasParallax ? { focalPoint: undefined } : {} ),
+		} );
+	};
+
+	const toggleIsRepeated = () => {
+		setAttributes( {
+			isRepeated: ! isRepeated,
+		} );
+	};
+
+	const showFocalPointPicker =
+		isVideoBackground ||
+		( isImageBackground && ( ! hasParallax || isRepeated ) );
+
+	const imperativeFocalPointPreview = ( value ) => {
+		const [ styleOfRef, property ] = mediaElement.current
+			? [ mediaElement.current.style, 'objectPosition' ]
+			: [ coverRef.current.style, 'backgroundPosition' ];
+		styleOfRef[ property ] = mediaPosition( value );
+	};
+
+	const colorGradientSettings = useMultipleOriginColorsAndGradients();
+
+	return (
+		<>
+			<InspectorControls>
+				{ !! url && (
+					<PanelBody title={ __( 'Media settings' ) }>
+						{ isImageBackground && (
+							<Fragment>
+								<ToggleControl
+									label={ __( 'Fixed background' ) }
+									checked={ hasParallax }
+									onChange={ toggleParallax }
+								/>
+
+								<ToggleControl
+									label={ __( 'Repeated background' ) }
+									checked={ isRepeated }
+									onChange={ toggleIsRepeated }
+								/>
+							</Fragment>
+						) }
+						{ showFocalPointPicker && (
+							<FocalPointPicker
+								label={ __( 'Focal point picker' ) }
+								url={ url }
+								value={ focalPoint }
+								onDragStart={ imperativeFocalPointPreview }
+								onDrag={ imperativeFocalPointPreview }
+								onChange={ ( newFocalPoint ) =>
+									setAttributes( {
+										focalPoint: newFocalPoint,
+									} )
+								}
+							/>
+						) }
+						{ ! useFeaturedImage &&
+							url &&
+							isImageBackground &&
+							isImgElement && (
+								<TextareaControl
+									label={ __(
+										'Alt text (alternative text)'
+									) }
+									value={ alt }
+									onChange={ ( newAlt ) =>
+										setAttributes( { alt: newAlt } )
+									}
+									help={
+										<>
+											<ExternalLink href="https://www.w3.org/WAI/tutorials/images/decision-tree">
+												{ __(
+													'Describe the purpose of the image'
+												) }
+											</ExternalLink>
+											{ __(
+												'Leave empty if the image is purely decorative.'
+											) }
+										</>
+									}
+								/>
+							) }
+						<PanelRow>
+							<Button
+								variant="secondary"
+								isSmall
+								className="block-library-cover__reset-button"
+								onClick={ () =>
+									setAttributes( {
+										url: undefined,
+										id: undefined,
+										backgroundType: undefined,
+										focalPoint: undefined,
+										hasParallax: undefined,
+										isRepeated: undefined,
+										useFeaturedImage: false,
+									} )
+								}
+							>
+								{ __( 'Clear Media' ) }
+							</Button>
+						</PanelRow>
+					</PanelBody>
+				) }
+			</InspectorControls>
+			<InspectorControls __experimentalGroup="color">
+				<ColorGradientSettingsDropdown
+					__experimentalHasMultipleOrigins
+					__experimentalIsRenderedInSidebar
+					settings={ [
+						{
+							colorValue: overlayColor.color,
+							gradientValue,
+							label: __( 'Overlay' ),
+							onColorChange: setOverlayColor,
+							onGradientChange: setGradient,
+							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={ __( 'Overlay opacity' ) }
+						value={ dimRatio }
+						onChange={ ( newDimRation ) =>
+							setAttributes( {
+								dimRatio: newDimRation,
+							} )
+						}
+						min={ 0 }
+						max={ 100 }
+						step={ 10 }
+						required
+					/>
+				</ToolsPanelItem>
+			</InspectorControls>
+			<InspectorControls __experimentalGroup="dimensions">
+				<ToolsPanelItem
+					hasValue={ () => !! minHeight }
+					label={ __( 'Minimum height' ) }
+					onDeselect={ () =>
+						setAttributes( {
+							minHeight: undefined,
+							minHeightUnit: undefined,
+						} )
+					}
+					resetAllFilter={ () => ( {
+						minHeight: undefined,
+						minHeightUnit: undefined,
+					} ) }
+					isShownByDefault={ true }
+					panelId={ clientId }
+				>
+					<CoverHeightInput
+						value={ minHeight }
+						unit={ minHeightUnit }
+						onChange={ ( newMinHeight ) =>
+							setAttributes( { minHeight: newMinHeight } )
+						}
+						onUnitChange={ ( nextUnit ) =>
+							setAttributes( {
+								minHeightUnit: nextUnit,
+							} )
+						}
+					/>
+				</ToolsPanelItem>
+			</InspectorControls>
+		</>
+	);
+}