@wordpress/block-library 8.31.0 → 8.33.0

package/src/file/index.php

@@ -17,27 +17,6 @@
  * @return string Returns the block content.
  */
 function render_block_core_file( $attributes, $content ) {
-	// Update object's aria-label attribute if present in block HTML.
-	// Match an aria-label attribute from an object tag.
-	$pattern = '@<object.+(?<attribute>aria-label="(?<filename>[^"]+)?")@i';
-	$content = preg_replace_callback(
-		$pattern,
-		static function ( $matches ) {
-			$filename     = ! empty( $matches['filename'] ) ? $matches['filename'] : '';
-			$has_filename = ! empty( $filename ) && 'PDF embed' !== $filename;
-			$label        = $has_filename ?
-				sprintf(
-					/* translators: %s: filename. */
-					__( 'Embed of %s.' ),
-					$filename
-				)
-				: __( 'PDF embed' );
-
-			return str_replace( $matches['attribute'], sprintf( 'aria-label="%s"', $label ), $matches[0] );
-		},
-		$content
-	);
-
 	// If it's interactive, enqueue the script module and add the directives.
 	if ( ! empty( $attributes['displayPreview'] ) ) {
 		$suffix = wp_scripts_get_suffix();
@@ -59,6 +38,19 @@ function render_block_core_file( $attributes, $content ) {
 		$processor->next_tag( 'object' );
 		$processor->set_attribute( 'data-wp-bind--hidden', '!state.hasPdfPreview' );
 		$processor->set_attribute( 'hidden', true );
+
+		$filename     = $processor->get_attribute( 'aria-label' );
+		$has_filename = ! empty( $filename ) && 'PDF embed' !== $filename;
+		$label        = $has_filename ? sprintf(
+			/* translators: %s: filename. */
+			__( 'Embed of %s.' ),
+			$filename
+		) : __( 'PDF embed' );
+
+		// Update object's aria-label attribute if present in block HTML.
+		// Match an aria-label attribute from an object tag.
+		$processor->set_attribute( 'aria-label', $label );
+
 		return $processor->get_updated_html();
 	}
 

package/src/gallery/editor.scss

@@ -1,4 +1,4 @@
-figure.wp-block-gallery {
+:where(figure.wp-block-gallery) {
 	// Override the default list style type _only in the editor_
 	// to avoid :not() selector specificity issues.
 	// See https://github.com/WordPress/gutenberg/pull/10358
@@ -27,7 +27,7 @@ figure.wp-block-gallery {
 		}
 	}
 
-	// @todo: this deserves a refactor, by being moved to the toolbar.
+	// @todo this deserves a refactor, by being moved to the toolbar.
 	.block-editor-media-placeholder.is-appender {
 		.components-placeholder__label {
 			display: none;

package/src/gallery/index.php

@@ -131,7 +131,7 @@ function block_core_gallery_render( $attributes, $content ) {
 	 * the `$parsed_block['innerBlocks']` via the `render_block_data` hook.
 	 * However, this hook doesn't apply inner block updates when blocks are
 	 * nested.
-	 * @todo: In the future, if this hook supports updating innerBlocks in
+	 * @todo In the future, if this hook supports updating innerBlocks in
 	 * nested blocks, it should be refactored.
 	 *
 	 * @see: https://github.com/WordPress/gutenberg/pull/58733

package/src/image/edit.js

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { getBlobByURL, isBlobURL, revokeBlobURL } from '@wordpress/blob';
+import { isBlobURL } from '@wordpress/blob';
 import { store as blocksStore } from '@wordpress/blocks';
 import { Placeholder } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
@@ -28,6 +28,7 @@ import { store as noticesStore } from '@wordpress/notices';
  * Internal dependencies
  */
 import { unlock } from '../lock-unlock';
+import { useUploadMediaFromBlobURL } from '../utils/hooks';
 import Image from './image';
 
 /**
@@ -116,7 +117,9 @@ export function ImageEdit( {
 		align,
 		metadata,
 	} = attributes;
-	const [ temporaryURL, setTemporaryURL ] = useState();
+	const [ temporaryURL, setTemporaryURL ] = useState( () => {
+		return isTemporaryImage( id, url ) ? url : undefined;
+	} );
 
 	const altRef = useRef();
 	useEffect( () => {
@@ -143,7 +146,6 @@ export function ImageEdit( {
 		}
 	}, [ align ] );
 
-	const ref = useRef();
 	const { getSettings } = useSelect( blockEditorStore );
 	const blockEditingMode = useBlockEditingMode();
 
@@ -267,44 +269,12 @@ export function ImageEdit( {
 		}
 	}
 
-	let isTemp = isTemporaryImage( id, url );
-
-	// Upload a temporary image on mount.
-	useEffect( () => {
-		if ( ! isTemp ) {
-			return;
-		}
-
-		const file = getBlobByURL( url );
-
-		if ( file ) {
-			const { mediaUpload } = getSettings();
-			if ( ! mediaUpload ) {
-				return;
-			}
-			mediaUpload( {
-				filesList: [ file ],
-				onFileChange: ( [ img ] ) => {
-					onSelectImage( img );
-				},
-				allowedTypes: ALLOWED_MEDIA_TYPES,
-				onError: ( message ) => {
-					isTemp = false;
-					onUploadError( message );
-				},
-			} );
-		}
-	}, [] );
-
-	// If an image is temporary, revoke the Blob url when it is uploaded (and is
-	// no longer temporary).
-	useEffect( () => {
-		if ( isTemp ) {
-			setTemporaryURL( url );
-			return;
-		}
-		revokeBlobURL( temporaryURL );
-	}, [ isTemp, url ] );
+	useUploadMediaFromBlobURL( {
+		url,
+		allowedTypes: ALLOWED_MEDIA_TYPES,
+		onChange: onSelectImage,
+		onError: onUploadError,
+	} );
 
 	const isExternal = isExternalImage( id, url );
 	const src = isExternal ? url : undefined;
@@ -330,10 +300,7 @@ export function ImageEdit( {
 				Object.keys( borderProps.style ).length > 0 ),
 	} );
 
-	const blockProps = useBlockProps( {
-		ref,
-		className: classes,
-	} );
+	const blockProps = useBlockProps( { className: classes } );
 
 	// Much of this description is duplicated from MediaPlaceholder.
 	const { lockUrlControls = false, lockUrlControlsMessage } = useSelect(
@@ -415,7 +382,6 @@ export function ImageEdit( {
 				onSelectImage={ onSelectImage }
 				onSelectURL={ onSelectURL }
 				onUploadError={ onUploadError }
-				containerRef={ ref }
 				context={ context }
 				clientId={ clientId }
 				blockEditingMode={ blockEditingMode }

package/src/image/editor.scss

@@ -1,5 +1,5 @@
 // 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 {
 
 	// Show Placeholder style on-select.
@@ -13,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

@@ -43,7 +43,6 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import { unlock } from '../lock-unlock';
 import { createUpgradedEmbedBlock } from '../embed/util';
-import useClientWidth from './use-client-width';
 import { isExternalImage } from './edit';
 import { Caption } from '../utils/caption';
 
@@ -83,8 +82,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',
 			} }
@@ -104,7 +102,6 @@ export default function Image( {
 	onSelectImage,
 	onSelectURL,
 	onUploadError,
-	containerRef,
 	context,
 	clientId,
 	blockEditingMode,
@@ -177,7 +174,6 @@ export default function Image( {
 	] = useState( {} );
 	const [ isEditingImage, setIsEditingImage ] = useState( false );
 	const [ externalBlob, setExternalBlob ] = useState();
-	const clientWidth = useClientWidth( containerRef, [ align ] );
 	const hasNonContentControls = blockEditingMode === 'default';
 	const isContentOnlyMode = blockEditingMode === 'contentOnly';
 	const isResizable =
@@ -274,6 +270,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 +360,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 +513,7 @@ export default function Image( {
 							showLightboxSetting={ showLightboxSetting }
 							lightboxEnabled={ lightboxChecked }
 							onSetLightbox={ onSetLightbox }
+							resetLightbox={ resetLightbox }
 						/>
 					) }
 				{ allowCrop && (
@@ -692,6 +708,7 @@ export default function Image( {
 			<InspectorControls group="advanced">
 				<TextControl
 					__nextHasNoMarginBottom
+					__next40pxDefaultSize
 					label={ __( 'Title attribute' ) }
 					value={ title || '' }
 					onChange={ onSetTitle }
@@ -768,10 +785,6 @@ export default function Image( {
 		/* eslint-enable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */
 	);
 
-	// clientWidth needs to be a number for the image Cropper to work, but sometimes it's 0
-	// So we try using the imageRef width first and fallback to clientWidth.
-	const fallbackClientWidth = imageRef.current?.width || clientWidth;
-
 	if ( canEditImage && isEditingImage ) {
 		img = (
 			<ImageWrapper href={ href }>
@@ -780,7 +793,6 @@ export default function Image( {
 					url={ url }
 					width={ numericWidth }
 					height={ numericHeight }
-					clientWidth={ fallbackClientWidth }
 					naturalHeight={ naturalHeight }
 					naturalWidth={ naturalWidth }
 					onSaveImage={ ( imageAttributes ) =>
@@ -913,9 +925,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 +935,7 @@ export default function Image( {
 				insertBlocksAfter={ insertBlocksAfter }
 				label={ __( 'Image caption text' ) }
 				showToolbarButton={ isSingleSelected && hasNonContentControls }
-				disableEditing={ lockCaption }
+				readOnly={ lockCaption }
 			/>
 		</>
 	);

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-posts/edit.js

@@ -431,7 +431,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 	const dateFormat = getSettings().formats.date;
 
 	return (
-		<div>
+		<>
 			{ inspectorControls }
 			<BlockControls>
 				<ToolbarGroup controls={ layoutControls } />
@@ -518,7 +518,6 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 								<div className={ imageClasses }>
 									{ addLinkToFeaturedImage ? (
 										<a
-											className="wp-block-latest-posts__post-title"
 											href={ post.link }
 											rel="noreferrer noopener"
 											onClick={
@@ -533,6 +532,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 								</div>
 							) }
 							<a
+								className="wp-block-latest-posts__post-title"
 								href={ post.link }
 								rel="noreferrer noopener"
 								dangerouslySetInnerHTML={
@@ -582,6 +582,6 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 					);
 				} ) }
 			</ul>
-		</div>
+		</>
 	);
 }

package/src/latest-posts/index.php

@@ -157,7 +157,7 @@ function render_block_core_latest_posts( $attributes ) {
 					$trimmed_excerpt  = substr( $trimmed_excerpt, 0, -11 );
 					$trimmed_excerpt .= sprintf(
 						/* translators: 1: A URL to a post, 2: Hidden accessibility text: Post title */
-						__( '… <a href="%1$s" rel="noopener noreferrer">Read more<span class="screen-reader-text">: %2$s</span></a>' ),
+						__( '… <a class="wp-block-latest-posts__read-more" href="%1$s" rel="noopener noreferrer">Read more<span class="screen-reader-text">: %2$s</span></a>' ),
 						esc_url( $post_link ),
 						esc_html( $title )
 					);

package/src/list/block.json

@@ -38,6 +38,7 @@
 	},
 	"supports": {
 		"anchor": true,
+		"html": false,
 		"className": false,
 		"typography": {
 			"fontSize": true,

package/src/media-text/edit.js

@@ -318,11 +318,11 @@ function MediaTextEdit( {
 						onDrag={ imperativeFocalPointPreview }
 					/>
 				) }
-			{ mediaType === 'image' && ( mediaUrl || featuredImageURL ) && (
+			{ mediaType === 'image' && mediaUrl && ! useFeaturedImage && (
 				<TextareaControl
 					__nextHasNoMarginBottom
 					label={ __( 'Alternative text' ) }
-					value={ mediaAlt || featuredImageAlt }
+					value={ mediaAlt }
 					onChange={ onMediaAltChange }
 					help={
 						<>

package/src/media-text/index.php

@@ -48,6 +48,7 @@ function render_block_core_media_text( $attributes, $content ) {
 	}
 	$processor->set_attribute( 'src', esc_url( $current_featured_image ) );
 	$processor->set_attribute( 'class', 'wp-image-' . get_post_thumbnail_id() . ' size-' . $media_size_slug );
+	$processor->set_attribute( 'alt', trim( strip_tags( get_post_meta( get_post_thumbnail_id(), '_wp_attachment_image_alt', true ) ) ) );
 
 	$content = $processor->get_updated_html();
 

package/src/navigation/edit/accessible-menu-description.js

@@ -12,7 +12,7 @@ import AccessibleDescription from './accessible-description';
 export default function AccessibleMenuDescription( { id } ) {
 	const [ menuTitle ] = useEntityProp( 'postType', 'wp_navigation', 'title' );
 	/* translators: %s: Title of a Navigation Menu post. */
-	const description = sprintf( __( `Navigation menu: "%s"` ), menuTitle );
+	const description = sprintf( __( `Navigation Menu: "%s"` ), menuTitle );
 
 	return (
 		<AccessibleDescription id={ id }>{ description }</AccessibleDescription>

package/src/navigation/edit/deleted-navigation-warning.js

@@ -11,7 +11,7 @@ function DeletedNavigationWarning( { onCreateNew } ) {
 		<Warning>
 			{ createInterpolateElement(
 				__(
-					'Navigation menu has been deleted or is unavailable. <button>Create a new menu?</button>'
+					'Navigation Menu has been deleted or is unavailable. <button>Create a new menu?</button>'
 				),
 				{
 					button: <Button onClick={ onCreateNew } variant="link" />,