@wordpress/block-library 7.5.0 → 7.6.0

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

@@ -0,0 +1,286 @@
+/**
+ * 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,
+	__experimentalUseGradient,
+	__experimentalPanelColorGradientSettings as PanelColorGradientSettings,
+} 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 );
+	};
+	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>
+				) }
+				<PanelColorGradientSettings
+					__experimentalHasMultipleOrigins
+					__experimentalIsRenderedInSidebar
+					title={ __( 'Overlay' ) }
+					initialOpen={ true }
+					settings={ [
+						{
+							colorValue: overlayColor.color,
+							gradientValue,
+							onColorChange: setOverlayColor,
+							onGradientChange: setGradient,
+							label: __( 'Color' ),
+						},
+					] }
+				>
+					<RangeControl
+						label={ __( 'Opacity' ) }
+						value={ dimRatio }
+						onChange={ ( newDimRation ) =>
+							setAttributes( {
+								dimRatio: newDimRation,
+							} )
+						}
+						min={ 0 }
+						max={ 100 }
+						step={ 10 }
+						required
+					/>
+				</PanelColorGradientSettings>
+			</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>
+		</>
+	);
+}

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

@@ -402,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']['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/shared.js

@@ -106,3 +106,7 @@ 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/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/embed/embed-preview.js

@@ -15,7 +15,7 @@ import { __, sprintf } from '@wordpress/i18n';
 import { Placeholder, SandBox } from '@wordpress/components';
 import { RichText, BlockIcon } from '@wordpress/block-editor';
 import { Component } from '@wordpress/element';
-import { createBlock } from '@wordpress/blocks';
+import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -145,7 +145,9 @@ class EmbedPreview extends Component {
 						onChange={ onCaptionChange }
 						inlineToolbar
 						__unstableOnSplitAtEnd={ () =>
-							insertBlocksAfter( createBlock( 'core/paragraph' ) )
+							insertBlocksAfter(
+								createBlock( getDefaultBlockName() )
+							)
 						}
 					/>
 				) }

package/src/file/edit.native.js

@@ -452,7 +452,6 @@ export class FileEdit extends Component {
 						<TouchableWithoutFeedback
 							accessible={ ! isSelected }
 							onPress={ this.onFilePressed }
-							onLongPress={ openMediaOptions }
 							disabled={ ! isSelected }
 						>
 							<View

package/src/gallery/edit.js

@@ -204,10 +204,11 @@ function GalleryEdit( props ) {
 				: undefined;
 		}
 		return {
-			...pickRelevantMediaFiles( imageAttributes, sizeSlug ),
+			...pickRelevantMediaFiles( image, sizeSlug ),
 			...getHrefAndDestination( image, linkTo ),
 			...getUpdatedLinkTargetSettings( linkTarget, attributes ),
 			className: newClassName,
+			caption: imageAttributes.caption,
 			sizeSlug,
 		};
 	}

package/src/gallery/gallery.js

@@ -10,7 +10,7 @@ import { RichText, useInnerBlocksProps } from '@wordpress/block-editor';
 import { VisuallyHidden } from '@wordpress/components';
 import { useState, useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { createBlock } from '@wordpress/blocks';
+import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 import { View } from '@wordpress/primitives';
 
 const allowedBlocks = [ 'core/image' ];
@@ -89,7 +89,7 @@ export const Gallery = ( props ) => {
 				onChange={ ( value ) => setAttributes( { caption: value } ) }
 				inlineToolbar
 				__unstableOnSplitAtEnd={ () =>
-					insertBlocksAfter( createBlock( 'core/paragraph' ) )
+					insertBlocksAfter( createBlock( getDefaultBlockName() ) )
 				}
 			/>
 		</figure>

package/src/gallery/shared.js

@@ -8,11 +8,12 @@ export function defaultColumnsNumber( imageCount ) {
 }
 
 export const pickRelevantMediaFiles = ( image, sizeSlug = 'large' ) => {
-	const imageProps = pick( image, [ 'alt', 'id', 'link', 'caption' ] );
+	const imageProps = pick( image, [ 'alt', 'id', 'link' ] );
 	imageProps.url =
 		get( image, [ 'sizes', sizeSlug, 'url' ] ) ||
 		get( image, [ 'media_details', 'sizes', sizeSlug, 'source_url' ] ) ||
-		image.url;
+		image.url ||
+		image.source_url;
 	const fullUrl =
 		get( image, [ 'sizes', 'full', 'url' ] ) ||
 		get( image, [ 'media_details', 'sizes', 'full', 'source_url' ] );

package/src/gallery/use-get-media.js

@@ -32,7 +32,8 @@ export default function useGetMedia( innerBlockImages ) {
 
 			return select( coreStore ).getMediaItems( {
 				include: imageIds.join( ',' ),
-				per_page: -1,
+				per_page: imageIds.length,
+				orderby: 'include',
 			} );
 		},
 		[ innerBlockImages ]

package/src/gallery/use-short-code-transform.js

@@ -23,20 +23,13 @@ export default function useShortCodeTransform( shortCodeTransforms ) {
 			if ( ! shortCodeTransforms || shortCodeTransforms.length === 0 ) {
 				return;
 			}
-			const getMedia = select( coreStore ).getMedia;
-			return shortCodeTransforms.map( ( image ) => {
-				const imageData = getMedia( image.id );
-				if ( imageData ) {
-					return {
-						id: imageData.id,
-						type: 'image',
-						url: imageData.source_url,
-						mime: imageData.mime_type,
-						alt: imageData.alt_text,
-						link: imageData.link,
-					};
-				}
-				return undefined;
+
+			const imageIds = shortCodeTransforms.map( ( image ) => image.id );
+
+			return select( coreStore ).getMediaItems( {
+				include: imageIds.join( ',' ),
+				per_page: imageIds.length,
+				orderby: 'include',
 			} );
 		},
 		[ shortCodeTransforms ]
@@ -46,7 +39,17 @@ export default function useShortCodeTransform( shortCodeTransforms ) {
 		return;
 	}
 
-	if ( every( newImageData, ( img ) => img && img.url ) ) {
-		return newImageData;
+	if ( every( newImageData, ( img ) => img && img.source_url ) ) {
+		return newImageData.map( ( imageData ) => {
+			return {
+				id: imageData.id,
+				type: 'image',
+				url: imageData.source_url,
+				mime: imageData.mime_type,
+				alt: imageData.alt_text,
+				link: imageData.link,
+				caption: imageData?.caption?.raw,
+			};
+		} );
 	}
 }

package/src/gallery/v1/gallery.js

@@ -9,7 +9,7 @@ import classnames from 'classnames';
 import { RichText } from '@wordpress/block-editor';
 import { VisuallyHidden } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
-import { createBlock } from '@wordpress/blocks';
+import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -101,7 +101,7 @@ export const Gallery = ( props ) => {
 				onChange={ ( value ) => setAttributes( { caption: value } ) }
 				inlineToolbar
 				__unstableOnSplitAtEnd={ () =>
-					insertBlocksAfter( createBlock( 'core/paragraph' ) )
+					insertBlocksAfter( createBlock( getDefaultBlockName() ) )
 				}
 			/>
 		</figure>

package/src/heading/block.json

@@ -43,6 +43,7 @@
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
+			"__experimentalFontFamily": true,
 			"__experimentalFontStyle": true,
 			"__experimentalFontWeight": true,
 			"__experimentalLetterSpacing": true,