@wordpress/block-library 8.30.0 → 8.32.0

package/src/image/editor.scss

@@ -1,12 +1,7 @@
 // Provide special styling for the placeholder.
-// @todo: this particular minimal style of placeholder could be componentized further.
+// @todo this particular minimal style of placeholder could be componentized further.
 .wp-block-image.wp-block-image {
 
-	&:not(.is-selected) .components-placeholder__fieldset {
-		// Show only is selected.
-		display: none;
-	}
-
 	// Show Placeholder style on-select.
 	&.is-selected .components-placeholder {
 		// Block UI appearance.
@@ -18,7 +13,7 @@
 		// Disable any duotone filter applied in the selected state.
 		filter: none !important;
 
-		// @todo: this should eventually be overridden by a custom border-radius set in the inspector.
+		// @todo this should eventually be overridden by a custom border-radius set in the inspector.
 		border-radius: $radius-block-ui;
 
 		> svg {

package/src/image/image.js

@@ -83,8 +83,7 @@ const ImageWrapper = ( { href, children } ) => {
 				// When the Image block is linked,
 				// it's wrapped with a disabled <a /> tag.
 				// Restore cursor style so it doesn't appear 'clickable'
-				// and remove pointer events. Safari needs the display property.
-				pointerEvents: 'none',
+				// Safari needs the display property.
 				cursor: 'default',
 				display: 'inline',
 			} }
@@ -274,6 +273,22 @@ export default function Image( {
 		}
 	}
 
+	function resetLightbox() {
+		// When deleting a link from an image while lightbox settings
+		// are enabled by default, we should disable the lightbox,
+		// otherwise the resulting UX looks like a mistake.
+		// See https://github.com/WordPress/gutenberg/pull/59890/files#r1532286123.
+		if ( lightboxSetting?.enabled && lightboxSetting?.allowEditing ) {
+			setAttributes( {
+				lightbox: { enabled: false },
+			} );
+		} else {
+			setAttributes( {
+				lightbox: undefined,
+			} );
+		}
+	}
+
 	function onSetTitle( value ) {
 		// This is the HTML title attribute, separate from the media object
 		// title.
@@ -348,7 +363,10 @@ export default function Image( {
 	const [ lightboxSetting ] = useSettings( 'lightbox' );
 
 	const showLightboxSetting =
-		!! lightbox || lightboxSetting?.allowEditing === true;
+		// If a block-level override is set, we should give users the option to
+		// remove that override, even if the lightbox UI is disabled in the settings.
+		( !! lightbox && lightbox?.enabled !== lightboxSetting?.enabled ) ||
+		lightboxSetting?.allowEditing;
 
 	const lightboxChecked =
 		!! lightbox?.enabled || ( ! lightbox && !! lightboxSetting?.enabled );
@@ -498,6 +516,7 @@ export default function Image( {
 							showLightboxSetting={ showLightboxSetting }
 							lightboxEnabled={ lightboxChecked }
 							onSetLightbox={ onSetLightbox }
+							resetLightbox={ resetLightbox }
 						/>
 					) }
 				{ allowCrop && (
@@ -692,6 +711,7 @@ export default function Image( {
 			<InspectorControls group="advanced">
 				<TextControl
 					__nextHasNoMarginBottom
+					__next40pxDefaultSize
 					label={ __( 'Title attribute' ) }
 					value={ title || '' }
 					onChange={ onSetTitle }
@@ -913,9 +933,7 @@ export default function Image( {
 
 	return (
 		<>
-			{ /* Hide controls during upload to avoid component remount,
-				which causes duplicated image upload. */ }
-			{ ! temporaryURL && controls }
+			{ controls }
 			{ img }
 
 			<Caption
@@ -925,7 +943,7 @@ export default function Image( {
 				insertBlocksAfter={ insertBlocksAfter }
 				label={ __( 'Image caption text' ) }
 				showToolbarButton={ isSingleSelected && hasNonContentControls }
-				disableEditing={ lockCaption }
+				readOnly={ lockCaption }
 			/>
 		</>
 	);

package/src/image/index.php

@@ -9,6 +9,8 @@
  * Renders the `core/image` block on the server,
  * adding a data-id attribute to the element if core/gallery has added on pre-render.
  *
+ * @since 5.9.0
+ *
  * @param array    $attributes The block attributes.
  * @param string   $content    The block content.
  * @param WP_Block $block      The block object.
@@ -85,6 +87,8 @@ function render_block_core_image( $attributes, $content, $block ) {
  *
  * This is used to determine whether the lightbox should be rendered or not.
  *
+ * @since 6.4.0
+ *
  * @param array $block Block data.
  *
  * @return array Filtered block data.
@@ -115,6 +119,8 @@ function block_core_image_get_lightbox_settings( $block ) {
 /**
  * Adds the directives and layout needed for the lightbox behavior.
  *
+ * @since 6.4.0
+ *
  * @param string $block_content Rendered block content.
  * @param array  $block         Block object.
  *
@@ -219,6 +225,9 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 	return $body_content;
 }
 
+/**
+ * @since 6.5.0
+ */
 function block_core_image_print_lightbox_overlay() {
 	$close_button_label = esc_attr__( 'Close' );
 
@@ -238,7 +247,7 @@ function block_core_image_print_lightbox_overlay() {
 	}
 
 	echo <<<HTML
-		<div 
+		<div
 			class="wp-lightbox-overlay zoom"
 			data-wp-interactive="core/image"
 			data-wp-context='{}'
@@ -278,6 +287,8 @@ HTML;
 
 /**
  * Registers the `core/image` block on server.
+ *
+ * @since 5.9.0
  */
 function register_block_core_image() {
 	register_block_type_from_metadata(

package/src/image/theme.scss

@@ -2,6 +2,6 @@
 	@include caption-style-theme();
 }
 
-.wp-block-image {
+:where(.wp-block-image) {
 	margin: 0 0 1em 0;
 }

package/src/latest-comments/index.php

@@ -36,6 +36,8 @@ function wp_latest_comments_draft_or_post_title( $post = 0 ) {
 /**
  * Renders the `core/latest-comments` block on server.
  *
+ * @since 5.1.0
+ *
  * @param array $attributes The block attributes.
  *
  * @return string Returns the post content with latest comments added.
@@ -145,6 +147,8 @@ function render_block_core_latest_comments( $attributes = array() ) {
 
 /**
  * Registers the `core/latest-comments` block.
+ *
+ * @since 5.3.0
  */
 function register_block_core_latest_comments() {
 	register_block_type_from_metadata(

package/src/latest-posts/index.php

@@ -18,6 +18,8 @@ $block_core_latest_posts_excerpt_length = 0;
  * Callback for the excerpt_length filter used by
  * the Latest Posts block at render time.
  *
+ * @since 5.4.0
+ *
  * @return int Returns the global $block_core_latest_posts_excerpt_length variable
  *             to allow the excerpt_length filter respect the Latest Block setting.
  */
@@ -29,6 +31,8 @@ function block_core_latest_posts_get_excerpt_length() {
 /**
  * Renders the `core/latest-posts` block on server.
  *
+ * @since 5.0.0
+ *
  * @param array $attributes The block attributes.
  *
  * @return string Returns the post content with latest posts added.
@@ -218,6 +222,8 @@ function render_block_core_latest_posts( $attributes ) {
 
 /**
  * Registers the `core/latest-posts` block on server.
+ *
+ * @since 5.0.0
  */
 function register_block_core_latest_posts() {
 	register_block_type_from_metadata(
@@ -241,6 +247,8 @@ add_action( 'init', 'register_block_core_latest_posts' );
  * TODO: Remove when and if the bottom client-side deprecation for this block
  * is removed.
  *
+ * @since 5.5.0
+ *
  * @param array $block A single parsed block object.
  *
  * @return array The migrated block object.

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/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 = (