@wordpress/block-library 8.29.0 → 8.31.0

package/src/list-item/hooks/use-space.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useRefEffect } from '@wordpress/compose';
-import { SPACE } from '@wordpress/keycodes';
+import { SPACE, TAB } from '@wordpress/keycodes';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
 
@@ -10,11 +10,13 @@ import { useSelect } from '@wordpress/data';
  * Internal dependencies
  */
 import useIndentListItem from './use-indent-list-item';
+import useOutdentListItem from './use-outdent-list-item';
 
 export default function useSpace( clientId ) {
 	const { getSelectionStart, getSelectionEnd, getBlockIndex } =
 		useSelect( blockEditorStore );
 	const indentListItem = useIndentListItem( clientId );
+	const outdentListItem = useOutdentListItem();
 
 	return useRefEffect(
 		( element ) => {
@@ -23,9 +25,8 @@ export default function useSpace( clientId ) {
 
 				if (
 					event.defaultPrevented ||
-					keyCode !== SPACE ||
+					( keyCode !== SPACE && keyCode !== TAB ) ||
 					// Only override when no modifiers are pressed.
-					shiftKey ||
 					altKey ||
 					metaKey ||
 					ctrlKey
@@ -33,18 +34,24 @@ export default function useSpace( clientId ) {
 					return;
 				}
 
-				if ( getBlockIndex( clientId ) === 0 ) {
-					return;
-				}
-
 				const selectionStart = getSelectionStart();
 				const selectionEnd = getSelectionEnd();
 				if (
 					selectionStart.offset === 0 &&
 					selectionEnd.offset === 0
 				) {
-					event.preventDefault();
-					indentListItem();
+					if ( shiftKey ) {
+						// Note that backspace behaviour in defined in onMerge.
+						if ( keyCode === TAB ) {
+							if ( outdentListItem() ) {
+								event.preventDefault();
+							}
+						}
+					} else if ( getBlockIndex( clientId ) !== 0 ) {
+						if ( indentListItem() ) {
+							event.preventDefault();
+						}
+					}
 				}
 			}
 

package/src/list-item/index.js

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { listItem as icon } from '@wordpress/icons';
+import { privateApis } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -11,6 +12,7 @@ import metadata from './block.json';
 import edit from './edit';
 import save from './save';
 import transforms from './transforms';
+import { unlock } from '../lock-unlock';
 
 const { name } = metadata;
 
@@ -27,6 +29,7 @@ export const settings = {
 		};
 	},
 	transforms,
+	[ unlock( privateApis ).requiresWrapperOnCopy ]: true,
 };
 
 export const init = () => initBlock( { name, metadata, settings } );

package/src/loginout/index.php

@@ -8,6 +8,8 @@
 /**
  * Renders the `core/loginout` block on server.
  *
+ * @since 5.8.0
+ *
  * @param array $attributes The block attributes.
  *
  * @return string Returns the login-out link or form.
@@ -39,6 +41,8 @@ function render_block_core_loginout( $attributes ) {
 
 /**
  * Registers the `core/loginout` block on server.
+ *
+ * @since 5.8.0
  */
 function register_block_core_loginout() {
 	register_block_type_from_metadata(

package/src/media-text/block.json

@@ -92,8 +92,13 @@
 		},
 		"allowedBlocks": {
 			"type": "array"
+		},
+		"useFeaturedImage": {
+			"type": "boolean",
+			"default": false
 		}
 	},
+	"usesContext": [ "postId", "postType" ],
 	"supports": {
 		"anchor": true,
 		"align": [ "wide", "full" ],

package/src/media-text/edit.js

@@ -31,7 +31,7 @@ import {
 } from '@wordpress/components';
 import { isBlobURL, getBlobTypeByURL } from '@wordpress/blob';
 import { pullLeft, pullRight } from '@wordpress/icons';
-import { store as coreStore } from '@wordpress/core-data';
+import { useEntityProp, store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -127,7 +127,12 @@ function attributesFromMedia( {
 	};
 }
 
-function MediaTextEdit( { attributes, isSelected, setAttributes } ) {
+function MediaTextEdit( {
+	attributes,
+	isSelected,
+	setAttributes,
+	context: { postId, postType },
+} ) {
 	const {
 		focalPoint,
 		href,
@@ -145,9 +150,42 @@ function MediaTextEdit( { attributes, isSelected, setAttributes } ) {
 		rel,
 		verticalAlignment,
 		allowedBlocks,
+		useFeaturedImage,
 	} = attributes;
 	const mediaSizeSlug = attributes.mediaSizeSlug || DEFAULT_MEDIA_SIZE_SLUG;
 
+	const [ featuredImage ] = useEntityProp(
+		'postType',
+		postType,
+		'featured_media',
+		postId
+	);
+
+	const featuredImageMedia = useSelect(
+		( select ) =>
+			featuredImage &&
+			select( coreStore ).getMedia( featuredImage, { context: 'view' } ),
+		[ featuredImage ]
+	);
+
+	const featuredImageURL = useFeaturedImage
+		? featuredImageMedia?.source_url
+		: '';
+	const featuredImageAlt = useFeaturedImage
+		? featuredImageMedia?.alt_text
+		: '';
+
+	const toggleUseFeaturedImage = () => {
+		setAttributes( {
+			imageFill: false,
+			mediaType: 'image',
+			mediaId: undefined,
+			mediaUrl: undefined,
+			mediaAlt: undefined,
+			useFeaturedImage: ! useFeaturedImage,
+		} );
+	};
+
 	const { imageSizes, image } = useSelect(
 		( select ) => {
 			const { getSettings } = select( blockEditorStore );
@@ -261,25 +299,30 @@ function MediaTextEdit( { attributes, isSelected, setAttributes } ) {
 					}
 				/>
 			) }
-			{ imageFill && mediaUrl && mediaType === 'image' && (
-				<FocalPointPicker
-					__nextHasNoMarginBottom
-					__next40pxDefaultSize
-					label={ __( 'Focal point' ) }
-					url={ mediaUrl }
-					value={ focalPoint }
-					onChange={ ( value ) =>
-						setAttributes( { focalPoint: value } )
-					}
-					onDragStart={ imperativeFocalPointPreview }
-					onDrag={ imperativeFocalPointPreview }
-				/>
-			) }
-			{ mediaType === 'image' && (
+			{ imageFill &&
+				( mediaUrl || featuredImageURL ) &&
+				mediaType === 'image' && (
+					<FocalPointPicker
+						__nextHasNoMarginBottom
+						label={ __( 'Focal point' ) }
+						url={
+							useFeaturedImage && featuredImageURL
+								? featuredImageURL
+								: mediaUrl
+						}
+						value={ focalPoint }
+						onChange={ ( value ) =>
+							setAttributes( { focalPoint: value } )
+						}
+						onDragStart={ imperativeFocalPointPreview }
+						onDrag={ imperativeFocalPointPreview }
+					/>
+				) }
+			{ mediaType === 'image' && ( mediaUrl || featuredImageURL ) && (
 				<TextareaControl
 					__nextHasNoMarginBottom
 					label={ __( 'Alternative text' ) }
-					value={ mediaAlt }
+					value={ mediaAlt || featuredImageAlt }
 					onChange={ onMediaAltChange }
 					help={
 						<>
@@ -353,7 +396,11 @@ function MediaTextEdit( { attributes, isSelected, setAttributes } ) {
 						onChangeUrl={ onSetHref }
 						linkDestination={ linkDestination }
 						mediaType={ mediaType }
-						mediaUrl={ image && image.source_url }
+						mediaUrl={
+							useFeaturedImage && featuredImageURL
+								? featuredImageURL
+								: image && image.source_url
+						}
 						mediaLink={ image && image.link }
 						linkTarget={ linkTarget }
 						linkClass={ linkClass }
@@ -370,6 +417,7 @@ function MediaTextEdit( { attributes, isSelected, setAttributes } ) {
 					commitWidthChange={ commitWidthChange }
 					ref={ refMediaContainer }
 					enableResize={ blockEditingMode === 'default' }
+					toggleUseFeaturedImage={ toggleUseFeaturedImage }
 					{ ...{
 						focalPoint,
 						imageFill,
@@ -381,6 +429,9 @@ function MediaTextEdit( { attributes, isSelected, setAttributes } ) {
 						mediaType,
 						mediaUrl,
 						mediaWidth,
+						useFeaturedImage,
+						featuredImageURL,
+						featuredImageAlt,
 					} }
 				/>
 				{ mediaPosition !== 'right' && <div { ...innerBlocksProps } /> }

package/src/media-text/editor.scss

@@ -26,7 +26,8 @@
 	width: 100% !important;
 }
 
-.wp-block-media-text.is-image-fill .editor-media-container__resizer {
+.wp-block-media-text.is-image-fill .editor-media-container__resizer,
+.wp-block-media-text.is-image-fill .components-placeholder.has-illustration {
 	// The resizer sets an inline height but for the image fill we set it to full height.
 	height: 100% !important;
 }
@@ -34,3 +35,8 @@
 .wp-block-media-text > .block-editor-block-list__layout > .block-editor-block-list__block {
 	max-width: unset;
 }
+
+/* Make the featured image placeholder the same height as the media selection area. */
+.wp-block-media-text--placeholder-image {
+	min-height: 205px;
+}

package/src/media-text/index.php

@@ -0,0 +1,70 @@
+<?php
+/**
+ * Server-side rendering of the `core/media-text` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/media-text` block on server.
+ *
+ * @since 6.6.0
+ *
+ * @param array  $attributes The block attributes.
+ * @param string $content    The block rendered content.
+ *
+ * @return string Returns the Media & Text block markup, if useFeaturedImage is true.
+ */
+function render_block_core_media_text( $attributes, $content ) {
+	if ( false === $attributes['useFeaturedImage'] ) {
+		return $content;
+	}
+
+	if ( in_the_loop() ) {
+		update_post_thumbnail_cache();
+	}
+
+	$current_featured_image = get_the_post_thumbnail_url();
+	if ( ! $current_featured_image ) {
+		return $content;
+	}
+
+	$image_tag = '<figure class="wp-block-media-text__media"><img>';
+	$content   = preg_replace( '/<figure\s+class="wp-block-media-text__media">/', $image_tag, $content );
+
+	$processor = new WP_HTML_Tag_Processor( $content );
+	if ( isset( $attributes['imageFill'] ) && $attributes['imageFill'] ) {
+		$position = '50% 50%';
+		if ( isset( $attributes['focalPoint'] ) ) {
+			$position = round( $attributes['focalPoint']['x'] * 100 ) . '% ' . round( $attributes['focalPoint']['y'] * 100 ) . '%';
+		}
+		$processor->next_tag( 'figure' );
+		$processor->set_attribute( 'style', 'background-image:url(' . esc_url( $current_featured_image ) . ');background-position:' . $position . ';' );
+	}
+	$processor->next_tag( 'img' );
+	$media_size_slug = 'full';
+	if ( isset( $attributes['mediaSizeSlug'] ) ) {
+		$media_size_slug = $attributes['mediaSizeSlug'];
+	}
+	$processor->set_attribute( 'src', esc_url( $current_featured_image ) );
+	$processor->set_attribute( 'class', 'wp-image-' . get_post_thumbnail_id() . ' size-' . $media_size_slug );
+
+	$content = $processor->get_updated_html();
+
+	return $content;
+}
+
+/**
+ * Registers the `core/media-text` block renderer on server.
+ *
+ * @since 6.6.0
+ */
+function register_block_core_media_text() {
+	register_block_type_from_metadata(
+		__DIR__ . '/media-text',
+		array(
+			'render_callback' => 'render_block_core_media_text',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_media_text' );

package/src/media-text/media-container.js

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { ResizableBox, Spinner } from '@wordpress/components';
+import { ResizableBox, Spinner, Placeholder } from '@wordpress/components';
 import {
 	BlockControls,
 	BlockIcon,
@@ -56,21 +56,39 @@ const ResizableBoxContainer = forwardRef(
 	}
 );
 
-function ToolbarEditButton( { mediaId, mediaUrl, onSelectMedia } ) {
+function ToolbarEditButton( {
+	mediaId,
+	mediaUrl,
+	onSelectMedia,
+	toggleUseFeaturedImage,
+	useFeaturedImage,
+	featuredImageURL,
+} ) {
 	return (
 		<BlockControls group="other">
 			<MediaReplaceFlow
 				mediaId={ mediaId }
-				mediaURL={ mediaUrl }
+				mediaUrl={
+					useFeaturedImage && featuredImageURL
+						? featuredImageURL
+						: mediaUrl
+				}
 				allowedTypes={ ALLOWED_MEDIA_TYPES }
 				accept="image/*,video/*"
 				onSelect={ onSelectMedia }
+				onToggleFeaturedImage={ toggleUseFeaturedImage }
+				useFeaturedImage={ useFeaturedImage }
 			/>
 		</BlockControls>
 	);
 }
 
-function PlaceholderContainer( { className, mediaUrl, onSelectMedia } ) {
+function PlaceholderContainer( {
+	className,
+	mediaUrl,
+	onSelectMedia,
+	toggleUseFeaturedImage,
+} ) {
 	const { createErrorNotice } = useDispatch( noticesStore );
 
 	const onUploadError = ( message ) => {
@@ -86,6 +104,7 @@ function PlaceholderContainer( { className, mediaUrl, onSelectMedia } ) {
 			className={ className }
 			onSelect={ onSelectMedia }
 			accept="image/*,video/*"
+			onToggleFeaturedImage={ toggleUseFeaturedImage }
 			allowedTypes={ ALLOWED_MEDIA_TYPES }
 			onError={ onUploadError }
 			disableMediaButtons={ mediaUrl }
@@ -110,13 +129,17 @@ function MediaContainer( props, ref ) {
 		onSelectMedia,
 		onWidthChange,
 		enableResize,
+		toggleUseFeaturedImage,
+		useFeaturedImage,
+		featuredImageURL,
+		featuredImageAlt,
 	} = props;
 
 	const isTemporaryMedia = ! mediaId && isBlobURL( mediaUrl );
 
 	const { toggleSelection } = useDispatch( blockEditorStore );
 
-	if ( mediaUrl ) {
+	if ( mediaUrl || featuredImageURL || useFeaturedImage ) {
 		const onResizeStart = () => {
 			toggleSelection( false );
 		};
@@ -134,11 +157,16 @@ function MediaContainer( props, ref ) {
 
 		const backgroundStyles =
 			mediaType === 'image' && imageFill
-				? imageFillStyles( mediaUrl, focalPoint )
+				? imageFillStyles( mediaUrl || featuredImageURL, focalPoint )
 				: {};
 
 		const mediaTypeRenderers = {
-			image: () => <img src={ mediaUrl } alt={ mediaAlt } />,
+			image: () =>
+				useFeaturedImage && featuredImageURL ? (
+					<img src={ featuredImageURL } alt={ featuredImageAlt } />
+				) : (
+					mediaUrl && <img src={ mediaUrl } alt={ mediaAlt } />
+				),
 			video: () => <video controls src={ mediaUrl } />,
 		};
 
@@ -165,12 +193,24 @@ function MediaContainer( props, ref ) {
 			>
 				<ToolbarEditButton
 					onSelectMedia={ onSelectMedia }
-					mediaUrl={ mediaUrl }
+					mediaUrl={
+						useFeaturedImage && featuredImageURL
+							? featuredImageURL
+							: mediaUrl
+					}
 					mediaId={ mediaId }
+					toggleUseFeaturedImage={ toggleUseFeaturedImage }
+					useFeaturedImage={ useFeaturedImage }
 				/>
 				{ ( mediaTypeRenderers[ mediaType ] || noop )() }
 				{ isTemporaryMedia && <Spinner /> }
-				<PlaceholderContainer { ...props } />
+				{ ! useFeaturedImage && <PlaceholderContainer { ...props } /> }
+				{ ! featuredImageURL && useFeaturedImage && (
+					<Placeholder
+						className="wp-block-media-text--placeholder-image"
+						withIllustration
+					/>
+				) }
 			</ResizableBoxContainer>
 		);
 	}

package/src/media-text/media-container.native.js

@@ -265,7 +265,7 @@ class MediaContainer extends Component {
 										isSelected={ isSelected }
 										style={ styles.video }
 										source={ { uri: mediaUrl } }
-										paused={ true }
+										paused
 									/>
 								</View>
 							) }
@@ -329,7 +329,7 @@ class MediaContainer extends Component {
 		if ( mediaUrl ) {
 			return (
 				<MediaUpload
-					isReplacingMedia={ true }
+					isReplacingMedia
 					onSelect={ this.onSelectMediaUploadOption }
 					allowedTypes={ ALLOWED_MEDIA_TYPES }
 					value={ mediaId }
@@ -341,7 +341,9 @@ class MediaContainer extends Component {
 								{ getMediaOptions() }
 
 								<MediaUploadProgress
-									enablePausedUploads
+									enablePausedUploads={
+										mediaType === MEDIA_TYPE_IMAGE
+									}
 									coverUrl={ coverUrl }
 									mediaId={ mediaId }
 									onUpdateMediaProgress={

package/src/media-text/save.js

@@ -42,13 +42,13 @@ export default function save( { attributes } ) {
 		[ `size-${ mediaSizeSlug }` ]: mediaId && mediaType === 'image',
 	} );
 
-	let image = (
+	let image = mediaUrl ? (
 		<img
 			src={ mediaUrl }
 			alt={ mediaAlt }
 			className={ imageClasses || null }
 		/>
-	);
+	) : null;
 
 	if ( href ) {
 		image = (

package/src/media-text/test/edit.native.js

@@ -0,0 +1,58 @@
+/**
+ * External dependencies
+ */
+import {
+	addBlock,
+	fireEvent,
+	initializeEditor,
+	screen,
+	setupCoreBlocks,
+} from 'test/helpers';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	requestMediaPicker,
+	sendMediaUpload,
+	subscribeMediaUpload,
+} from '@wordpress/react-native-bridge';
+import { MEDIA_UPLOAD_STATE_PAUSED } from '@wordpress/block-editor';
+
+let uploadCallBack;
+subscribeMediaUpload.mockImplementation( ( callback ) => {
+	uploadCallBack = callback;
+} );
+sendMediaUpload.mockImplementation( ( payload ) => {
+	uploadCallBack( payload );
+} );
+
+setupCoreBlocks( [ 'core/media-text' ] );
+
+describe( 'Media & Text block edit', () => {
+	it( 'should display an error message for failed video uploads', async () => {
+		requestMediaPicker.mockImplementation(
+			( source, filter, multiple, callback ) => {
+				callback( {
+					id: 1,
+					url: 'file://video.mp4',
+					type: 'video',
+				} );
+			}
+		);
+		await initializeEditor();
+		await addBlock( screen, 'Media & Text' );
+		fireEvent.press( screen.getByText( 'Add image or video' ) );
+		fireEvent.press( screen.getByText( 'Choose from device' ) );
+
+		sendMediaUpload( {
+			mediaId: 1,
+			state: MEDIA_UPLOAD_STATE_PAUSED,
+			progress: 0,
+		} );
+
+		expect(
+			screen.getByText( 'Failed to insert media.\nTap for more info.' )
+		).toBeVisible();
+	} );
+} );

package/src/missing/test/edit-integration.native.js

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import {
+	act,
 	fireEvent,
 	getBlock,
 	initializeEditor,
@@ -117,7 +118,7 @@ describe( 'Unsupported block', () => {
 				screen.getByTestId( 'bottom-sheet' ),
 				MODAL_DISMISS_EVENT
 			);
-			jest.runOnlyPendingTimers();
+			act( () => jest.runOnlyPendingTimers() );
 		} );
 		expect( requestUnsupportedBlockFallback ).toHaveBeenCalled();
 	} );