@wordpress/block-library 9.11.0 → 9.12.1-next.082ed6819.0

package/src/file/edit.js

@@ -128,15 +128,21 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 		}
 
 		const isPdf = newMedia.url.endsWith( '.pdf' );
+		const pdfAttributes = {
+			displayPreview: isPdf
+				? attributes.displayPreview ?? true
+				: undefined,
+			previewHeight: isPdf ? attributes.previewHeight ?? 600 : undefined,
+		};
+
 		setAttributes( {
 			href: newMedia.url,
 			fileName: newMedia.title,
 			textLinkHref: newMedia.url,
 			id: newMedia.id,
-			displayPreview: isPdf ? true : undefined,
-			previewHeight: isPdf ? 600 : undefined,
 			fileId: `wp-block-file--media-${ clientId }`,
 			blob: undefined,
+			...pdfAttributes,
 		} );
 		setTemporaryURL();
 	}
@@ -201,7 +207,7 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 					labels={ {
 						title: __( 'File' ),
 						instructions: __(
-							'Upload a file or pick one from your media library.'
+							'Drag and drop a file, upload, or choose from your library.'
 						),
 					} }
 					onSelect={ onSelectFile }

package/src/freeform/modal.js

@@ -25,7 +25,7 @@ function ModalAuxiliaryActions( { onClick, isModalFullScreen } ) {
 
 	return (
 		<Button
-			size="small"
+			size="compact"
 			onClick={ onClick }
 			icon={ fullscreen }
 			isPressed={ isModalFullScreen }

package/src/gallery/edit.js

@@ -96,7 +96,7 @@ const ALLOWED_MEDIA_TYPES = [ 'image' ];
 
 const PLACEHOLDER_TEXT = Platform.isNative
 	? __( 'Add media' )
-	: __( 'Drag images, upload new ones or select files from your library.' );
+	: __( 'Drag and drop images, upload, or choose from your library.' );
 
 const MOBILE_CONTROL_PROPS_RANGE_CONTROL = Platform.isNative
 	? { type: 'stepper' }

package/src/group/editor.scss

@@ -10,18 +10,6 @@
 	}
 }
 
-// Reset user select, but the next rule should take precedence for nested
-// groups.
-:where([data-has-multi-selection]:not([contenteditable="true"]) .wp-block-group > *) {
-	user-select: initial;
-}
-
-// When we are not multi-selecting, prevent children from capturing the
-// selection, which happens when the group is flex and children inlined.
-:where([data-has-multi-selection]:not([contenteditable="true"]) .wp-block-group) {
-	user-select: none;
-}
-
 // Place block list appender in the same place content will appear.
 [data-type="core/group"].is-selected {
 	.block-list-appender {

package/src/heading/block.json

@@ -37,13 +37,7 @@
 			"color": true,
 			"radius": true,
 			"style": true,
-			"width": true,
-			"__experimentalDefaultControls": {
-				"color": true,
-				"radius": true,
-				"style": true,
-				"width": true
-			}
+			"width": true
 		},
 		"color": {
 			"gradients": true,

package/src/home-link/edit.js

@@ -6,15 +6,10 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import {
-	RichText,
-	useBlockProps,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
+import { RichText, useBlockProps } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
-import { useEffect } from '@wordpress/element';
 
 const preventDefault = ( event ) => event.preventDefault();
 
@@ -24,8 +19,6 @@ export default function HomeEdit( { attributes, setAttributes, context } ) {
 		return select( coreStore ).getEntityRecord( 'root', '__unstableBase' )
 			?.home;
 	}, [] );
-	const { __unstableMarkNextChangeAsNotPersistent } =
-		useDispatch( blockEditorStore );
 
 	const { textColor, backgroundColor, style } = context;
 	const blockProps = useBlockProps( {
@@ -41,42 +34,31 @@ export default function HomeEdit( { attributes, setAttributes, context } ) {
 		},
 	} );
 
-	const { label } = attributes;
-
-	useEffect( () => {
-		if ( label === undefined ) {
-			__unstableMarkNextChangeAsNotPersistent();
-			setAttributes( { label: __( 'Home' ) } );
-		}
-	}, [ label ] );
-
 	return (
-		<>
-			<div { ...blockProps }>
-				<a
-					className="wp-block-home-link__content wp-block-navigation-item__content"
-					href={ homeUrl }
-					onClick={ preventDefault }
-				>
-					<RichText
-						identifier="label"
-						className="wp-block-home-link__label"
-						value={ label }
-						onChange={ ( labelValue ) => {
-							setAttributes( { label: labelValue } );
-						} }
-						aria-label={ __( 'Home link text' ) }
-						placeholder={ __( 'Add home link' ) }
-						withoutInteractiveFormatting
-						allowedFormats={ [
-							'core/bold',
-							'core/italic',
-							'core/image',
-							'core/strikethrough',
-						] }
-					/>
-				</a>
-			</div>
-		</>
+		<div { ...blockProps }>
+			<a
+				className="wp-block-home-link__content wp-block-navigation-item__content"
+				href={ homeUrl }
+				onClick={ preventDefault }
+			>
+				<RichText
+					identifier="label"
+					className="wp-block-home-link__label"
+					value={ attributes.label ?? __( 'Home' ) }
+					onChange={ ( labelValue ) => {
+						setAttributes( { label: labelValue } );
+					} }
+					aria-label={ __( 'Home link text' ) }
+					placeholder={ __( 'Add home link' ) }
+					withoutInteractiveFormatting
+					allowedFormats={ [
+						'core/bold',
+						'core/italic',
+						'core/image',
+						'core/strikethrough',
+					] }
+				/>
+			</a>
+		</div>
 	);
 }

package/src/home-link/index.php

@@ -137,9 +137,6 @@ function block_core_home_link_build_li_wrapper_attributes( $context ) {
  */
 function render_block_core_home_link( $attributes, $content, $block ) {
 	if ( empty( $attributes['label'] ) ) {
-		// Using a fallback for the label attribute allows rendering the block even if no attributes have been set,
-		// e.g. when using the block as a hooked block.
-		// Note that the fallback value needs to be kept in sync with the one set in `edit.js` (upon first loading the block in the editor).
 		$attributes['label'] = __( 'Home' );
 	}
 	$aria_current = '';

package/src/image/block.json

@@ -4,7 +4,7 @@
 	"name": "core/image",
 	"title": "Image",
 	"category": "media",
-	"usesContext": [ "allowResize", "imageCrop", "fixedHeight" ],
+	"usesContext": [ "allowResize", "imageCrop", "fixedHeight", "postId", "postType", "queryId" ],
 	"description": "Insert an image to make a visual statement.",
 	"keywords": [ "img", "photo", "picture" ],
 	"textdomain": "default",

package/src/image/edit.js

@@ -411,7 +411,7 @@ export function ImageEdit( {
 					! lockUrlControls &&
 					! isSmallContainer &&
 					__(
-						'Upload or drag an image file here, or pick one from your library.'
+						'Drag and drop an image, upload, or choose from your library.'
 					)
 				}
 				style={ {

package/src/image/editor.scss

@@ -159,6 +159,10 @@ figure.wp-block-image:not(.wp-block) {
 	}
 }
 
+.wp-block-image__toolbar_content_textarea__container {
+	padding: $grid-unit;
+}
+
 .wp-block-image__toolbar_content_textarea {
 	// Corresponds to the size of the textarea in the block inspector.
 	width: 250px;

package/src/image/image.js

@@ -10,11 +10,14 @@ import {
 	TextControl,
 	ToolbarButton,
 	ToolbarGroup,
-	Dropdown,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 	__experimentalUseCustomUnits as useCustomUnits,
 	Placeholder,
+	MenuItem,
+	ToolbarItem,
+	DropdownMenu,
+	Popover,
 } from '@wordpress/components';
 import { useViewportMatch } from '@wordpress/compose';
 import { useSelect, useDispatch } from '@wordpress/data';
@@ -29,15 +32,15 @@ import {
 	__experimentalUseBorderProps as useBorderProps,
 	__experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles,
 	privateApis as blockEditorPrivateApis,
+	BlockSettingsMenuControls,
 } from '@wordpress/block-editor';
 import { useEffect, useMemo, useState, useRef } from '@wordpress/element';
 import { __, _x, sprintf, isRTL } from '@wordpress/i18n';
-import { DOWN } from '@wordpress/keycodes';
 import { getFilename } from '@wordpress/url';
 import { getBlockBindingsSource, switchToBlockType } from '@wordpress/blocks';
-import { crop, overlayText, upload } from '@wordpress/icons';
+import { crop, overlayText, upload, chevronDown } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
-import { store as coreStore } from '@wordpress/core-data';
+import { store as coreStore, useEntityProp } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -69,6 +72,10 @@ const scaleOptions = [
 	},
 ];
 
+const WRITEMODE_POPOVER_PROPS = {
+	placement: 'bottom-start',
+};
+
 // If the image has a href, wrap in an <a /> tag to trigger any inherited link element styles.
 const ImageWrapper = ( { href, children } ) => {
 	if ( ! href ) {
@@ -94,6 +101,150 @@ const ImageWrapper = ( { href, children } ) => {
 	);
 };
 
+function ContentOnlyControls( {
+	attributes,
+	setAttributes,
+	lockAltControls,
+	lockAltControlsMessage,
+	lockTitleControls,
+	lockTitleControlsMessage,
+} ) {
+	// Use internal state instead of a ref to make sure that the component
+	// re-renders when the popover's anchor updates.
+	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
+	const [ isAltDialogOpen, setIsAltDialogOpen ] = useState( false );
+	const [ isTitleDialogOpen, setIsTitleDialogOpen ] = useState( false );
+	return (
+		<>
+			<ToolbarItem ref={ setPopoverAnchor }>
+				{ ( toggleProps ) => (
+					<DropdownMenu
+						icon={ chevronDown }
+						/* translators: button label text should, if possible, be under 16 characters. */
+						label={ __( 'More' ) }
+						toggleProps={ {
+							...toggleProps,
+							description: __( 'Displays more controls.' ),
+						} }
+						popoverProps={ WRITEMODE_POPOVER_PROPS }
+					>
+						{ ( { onClose } ) => (
+							<>
+								<MenuItem
+									onClick={ () => {
+										setIsAltDialogOpen( true );
+										onClose();
+									} }
+									aria-haspopup="dialog"
+								>
+									{ _x(
+										'Alternative text',
+										'Alternative text for an image. Block toolbar label, a low character count is preferred.'
+									) }
+								</MenuItem>
+								<MenuItem
+									onClick={ () => {
+										setIsTitleDialogOpen( true );
+										onClose();
+									} }
+									aria-haspopup="dialog"
+								>
+									{ __( 'Title text' ) }
+								</MenuItem>
+							</>
+						) }
+					</DropdownMenu>
+				) }
+			</ToolbarItem>
+			{ isAltDialogOpen && (
+				<Popover
+					placement="bottom-start"
+					anchor={ popoverAnchor }
+					onClose={ () => setIsAltDialogOpen( false ) }
+					offset={ 13 }
+					variant="toolbar"
+				>
+					<div className="wp-block-image__toolbar_content_textarea__container">
+						<TextareaControl
+							className="wp-block-image__toolbar_content_textarea"
+							label={ __( 'Alternative text' ) }
+							value={ attributes.alt || '' }
+							onChange={ ( value ) =>
+								setAttributes( { alt: value } )
+							}
+							disabled={ lockAltControls }
+							help={
+								lockAltControls ? (
+									<>{ lockAltControlsMessage }</>
+								) : (
+									<>
+										<ExternalLink
+											href={
+												// translators: Localized tutorial, if one exists. W3C Web Accessibility Initiative link has list of existing translations.
+												__(
+													'https://www.w3.org/WAI/tutorials/images/decision-tree/'
+												)
+											}
+										>
+											{ __(
+												'Describe the purpose of the image.'
+											) }
+										</ExternalLink>
+										<br />
+										{ __( 'Leave empty if decorative.' ) }
+									</>
+								)
+							}
+							__nextHasNoMarginBottom
+						/>
+					</div>
+				</Popover>
+			) }
+			{ isTitleDialogOpen && (
+				<Popover
+					placement="bottom-start"
+					anchor={ popoverAnchor }
+					onClose={ () => setIsTitleDialogOpen( false ) }
+					offset={ 13 }
+					variant="toolbar"
+				>
+					<div className="wp-block-image__toolbar_content_textarea__container">
+						<TextControl
+							__next40pxDefaultSize
+							className="wp-block-image__toolbar_content_textarea"
+							__nextHasNoMarginBottom
+							label={ __( 'Title attribute' ) }
+							value={ attributes.title || '' }
+							onChange={ ( value ) =>
+								setAttributes( {
+									title: value,
+								} )
+							}
+							disabled={ lockTitleControls }
+							help={
+								lockTitleControls ? (
+									<>{ lockTitleControlsMessage }</>
+								) : (
+									<>
+										{ __(
+											'Describe the role of this image on the page.'
+										) }
+										<ExternalLink href="https://www.w3.org/TR/html52/dom.html#the-title-attribute">
+											{ __(
+												'(Note: many devices and browsers do not display this text.)'
+											) }
+										</ExternalLink>
+									</>
+								)
+							}
+						/>
+					</div>
+				</Popover>
+			) }
+		</>
+	);
+}
+
 export default function Image( {
 	temporaryURL,
 	attributes,
@@ -625,112 +776,15 @@ export default function Image( {
 				// Add some extra controls for content attributes when content only mode is active.
 				// With content only mode active, the inspector is hidden, so users need another way
 				// to edit these attributes.
-				<BlockControls group="other">
-					<Dropdown
-						popoverProps={ { position: 'bottom right' } }
-						renderToggle={ ( { isOpen, onToggle } ) => (
-							<ToolbarButton
-								onClick={ onToggle }
-								aria-haspopup="true"
-								aria-expanded={ isOpen }
-								onKeyDown={ ( event ) => {
-									if ( ! isOpen && event.keyCode === DOWN ) {
-										event.preventDefault();
-										onToggle();
-									}
-								} }
-							>
-								{ _x(
-									'Alternative text',
-									'Alternative text for an image. Block toolbar label, a low character count is preferred.'
-								) }
-							</ToolbarButton>
-						) }
-						renderContent={ () => (
-							<TextareaControl
-								className="wp-block-image__toolbar_content_textarea"
-								label={ __( 'Alternative text' ) }
-								value={ alt || '' }
-								onChange={ updateAlt }
-								disabled={ lockAltControls }
-								help={
-									lockAltControls ? (
-										<>{ lockAltControlsMessage }</>
-									) : (
-										<>
-											<ExternalLink
-												href={
-													// translators: Localized tutorial, if one exists. W3C Web Accessibility Initiative link has list of existing translations.
-													__(
-														'https://www.w3.org/WAI/tutorials/images/decision-tree/'
-													)
-												}
-											>
-												{ __(
-													'Describe the purpose of the image.'
-												) }
-											</ExternalLink>
-											<br />
-											{ __(
-												'Leave empty if decorative.'
-											) }
-										</>
-									)
-								}
-								__nextHasNoMarginBottom
-							/>
-						) }
+				<BlockControls group="block">
+					<ContentOnlyControls
+						attributes={ attributes }
+						setAttributes={ setAttributes }
+						lockAltControls={ lockAltControls }
+						lockAltControlsMessage={ lockAltControlsMessage }
+						lockTitleControls={ lockTitleControls }
+						lockTitleControlsMessage={ lockTitleControlsMessage }
 					/>
-					{ title && (
-						<Dropdown
-							popoverProps={ { position: 'bottom right' } }
-							renderToggle={ ( { isOpen, onToggle } ) => (
-								<ToolbarButton
-									onClick={ onToggle }
-									aria-haspopup="true"
-									aria-expanded={ isOpen }
-									onKeyDown={ ( event ) => {
-										if (
-											! isOpen &&
-											event.keyCode === DOWN
-										) {
-											event.preventDefault();
-											onToggle();
-										}
-									} }
-								>
-									{ __( 'Title' ) }
-								</ToolbarButton>
-							) }
-							renderContent={ () => (
-								<TextControl
-									__next40pxDefaultSize
-									className="wp-block-image__toolbar_content_textarea"
-									__nextHasNoMarginBottom
-									label={ __( 'Title attribute' ) }
-									value={ title || '' }
-									onChange={ onSetTitle }
-									disabled={ lockTitleControls }
-									help={
-										lockTitleControls ? (
-											<>{ lockTitleControlsMessage }</>
-										) : (
-											<>
-												{ __(
-													'Describe the role of this image on the page.'
-												) }
-												<ExternalLink href="https://www.w3.org/TR/html52/dom.html#the-title-attribute">
-													{ __(
-														'(Note: many devices and browsers do not display this text.)'
-													) }
-												</ExternalLink>
-											</>
-										)
-									}
-								/>
-							) }
-						/>
-					) }
 				</BlockControls>
 			) }
 			<InspectorControls>
@@ -842,6 +896,16 @@ export default function Image( {
 	const shadowProps = getShadowClassesAndStyles( attributes );
 	const isRounded = attributes.className?.includes( 'is-style-rounded' );
 
+	const { postType, postId, queryId } = context;
+	const isDescendentOfQueryLoop = Number.isFinite( queryId );
+
+	const [ , setFeaturedImage ] = useEntityProp(
+		'postType',
+		postType,
+		'featured_media',
+		postId
+	);
+
 	let img =
 		temporaryURL && hasImageErrored ? (
 			// Show a placeholder during upload when the blob URL can't be loaded. This can
@@ -1043,10 +1107,37 @@ export default function Image( {
 		);
 	}
 
+	/**
+	 * Set the post's featured image with the current image.
+	 */
+	const setPostFeatureImage = () => {
+		setFeaturedImage( id );
+		createSuccessNotice( __( 'Post featured image updated.' ), {
+			type: 'snackbar',
+		} );
+	};
+
+	const featuredImageControl = (
+		<BlockSettingsMenuControls>
+			{ ( { selectedClientIds } ) =>
+				selectedClientIds.length === 1 &&
+				! isDescendentOfQueryLoop &&
+				postId &&
+				id &&
+				clientId === selectedClientIds[ 0 ] && (
+					<MenuItem onClick={ setPostFeatureImage }>
+						{ __( 'Set featured image' ) }
+					</MenuItem>
+				)
+			}
+		</BlockSettingsMenuControls>
+	);
+
 	return (
 		<>
 			{ mediaReplaceFlow }
 			{ controls }
+			{ featuredImageControl }
 			{ img }
 
 			<Caption

package/src/image/style.scss

@@ -9,7 +9,6 @@
 		max-width: 100%;
 		vertical-align: bottom;
 		box-sizing: border-box;
-		width: fit-content;
 
 		@media (prefers-reduced-motion: no-preference) {
 			&.hide {

package/src/image/test/__snapshots__/transforms.native.js.snap

@@ -12,7 +12,7 @@ exports[`Image block transformations to Columns block 1`] = `
 
 exports[`Image block transformations to Cover block 1`] = `
 "<!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":1,"dimRatio":50,"style":{"color":{}}} -->
-<div class="wp-block-cover"><span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span><img class="wp-block-cover__image-background wp-image-1" alt="" src="https://cldup.com/cXyG__fTLN.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","fontSize":"large"} -->
+<div class="wp-block-cover"><img class="wp-block-cover__image-background wp-image-1" alt="" src="https://cldup.com/cXyG__fTLN.jpg" data-object-fit="cover"/><span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","fontSize":"large"} -->
 <p class="has-text-align-center has-large-font-size">Mountain</p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:cover -->"

package/src/latest-posts/edit.js

@@ -238,7 +238,6 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 				/>
 				{ displayPostContent && (
 					<RadioControl
-						className="wp-block-latest-posts__post-content-radio"
 						label={ __( 'Show' ) }
 						selected={ displayPostContentRadio }
 						options={ [

package/src/latest-posts/editor.scss

@@ -18,14 +18,3 @@
 		padding-left: 0;
 	}
 }
-
-// Apply the same styles that would be applied to
-// ".block-editor-block-inspector .components-base-control"
-// (see packages/block-editor/src/components/block-inspector/style.scss)
-.wp-block-latest-posts__post-content-radio {
-	margin-bottom: #{ $grid-unit-30 };
-
-	&:last-child {
-		margin-bottom: $grid-unit-10;
-	}
-}

package/src/media-text/style.scss

@@ -69,7 +69,7 @@
 }
 
 .wp-block-media-text__media a {
-	display: inline-block;
+	display: block;
 }
 
 .wp-block-media-text__media img,

package/src/media-text/test/__snapshots__/transforms.native.js.snap

@@ -14,7 +14,7 @@ exports[`Media & Text block transformations with Image to Columns block 1`] = `
 
 exports[`Media & Text block transformations with Image to Cover block 1`] = `
 "<!-- wp:cover {"url":"https://cldup.com/cXyG__fTLN.jpg","id":4674,"dimRatio":50,"align":"wide"} -->
-<div class="wp-block-cover alignwide"><span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span><img class="wp-block-cover__image-background wp-image-4674" alt="" src="https://cldup.com/cXyG__fTLN.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"className":"has-large-font-size"} -->
+<div class="wp-block-cover alignwide"><img class="wp-block-cover__image-background wp-image-4674" alt="" src="https://cldup.com/cXyG__fTLN.jpg" data-object-fit="cover"/><span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"className":"has-large-font-size"} -->
 <p class="has-large-font-size">Mountain</p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:cover -->"
@@ -50,7 +50,7 @@ exports[`Media & Text block transformations with Video to Columns block 1`] = `
 
 exports[`Media & Text block transformations with Video to Cover block 1`] = `
 "<!-- wp:cover {"url":"https://i.cloudup.com/YtZFJbuQCE.mov","id":4675,"dimRatio":50,"backgroundType":"video","align":"wide"} -->
-<div class="wp-block-cover alignwide"><span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span><video class="wp-block-cover__video-background intrinsic-ignore" autoplay muted loop playsinline src="https://i.cloudup.com/YtZFJbuQCE.mov" data-object-fit="cover"></video><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"className":"has-large-font-size"} -->
+<div class="wp-block-cover alignwide"><video class="wp-block-cover__video-background intrinsic-ignore" autoplay muted loop playsinline src="https://i.cloudup.com/YtZFJbuQCE.mov" data-object-fit="cover"></video><span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"className":"has-large-font-size"} -->
 <p class="has-large-font-size">Cloudup</p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:cover -->"