@wordpress/block-library 9.27.0 → 9.28.0

package/src/social-link/variations.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { _x } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -62,292 +62,294 @@ const variations = [
 		isDefault: true,
 		name: 'wordpress',
 		attributes: { service: 'wordpress' },
-		title: __( 'WordPress' ),
+		title: _x( 'WordPress', 'social link block variation name' ),
 		icon: WordPressIcon,
 	},
 
 	{
 		name: 'fivehundredpx',
 		attributes: { service: 'fivehundredpx' },
-		title: __( '500px' ),
+		title: _x( '500px', 'social link block variation name' ),
 		icon: FivehundredpxIcon,
 	},
 	{
 		name: 'amazon',
 		attributes: { service: 'amazon' },
-		title: __( 'Amazon' ),
+		title: _x( 'Amazon', 'social link block variation name' ),
 		icon: AmazonIcon,
 	},
 	{
 		name: 'bandcamp',
 		attributes: { service: 'bandcamp' },
-		title: __( 'Bandcamp' ),
+		title: _x( 'Bandcamp', 'social link block variation name' ),
 		icon: BandcampIcon,
 	},
 	{
 		name: 'behance',
 		attributes: { service: 'behance' },
-		title: __( 'Behance' ),
+		title: _x( 'Behance', 'social link block variation name' ),
 		icon: BehanceIcon,
 	},
 	{
 		name: 'bluesky',
 		attributes: { service: 'bluesky' },
-		title: __( 'Bluesky' ),
+		title: _x( 'Bluesky', 'social link block variation name' ),
 		icon: BlueskyIcon,
 	},
 	{
 		name: 'chain',
 		attributes: { service: 'chain' },
-		title: __( 'Link' ),
+		title: _x( 'Link', 'social link block variation name' ),
 		icon: ChainIcon,
 	},
 	{
 		name: 'codepen',
 		attributes: { service: 'codepen' },
-		title: __( 'CodePen' ),
+		title: _x( 'CodePen', 'social link block variation name' ),
 		icon: CodepenIcon,
 	},
 	{
 		name: 'deviantart',
 		attributes: { service: 'deviantart' },
-		title: __( 'DeviantArt' ),
+		title: _x( 'DeviantArt', 'social link block variation name' ),
 		icon: DeviantArtIcon,
 	},
 	{
 		name: 'discord',
 		attributes: { service: 'discord' },
-		title: __( 'Discord' ),
+		title: _x( 'Discord', 'social link block variation name' ),
 		icon: DiscordIcon,
 	},
 	{
 		name: 'dribbble',
 		attributes: { service: 'dribbble' },
-		title: __( 'Dribbble' ),
+		title: _x( 'Dribbble', 'social link block variation name' ),
 		icon: DribbbleIcon,
 	},
 	{
 		name: 'dropbox',
 		attributes: { service: 'dropbox' },
-		title: __( 'Dropbox' ),
+		title: _x( 'Dropbox', 'social link block variation name' ),
 		icon: DropboxIcon,
 	},
 	{
 		name: 'etsy',
 		attributes: { service: 'etsy' },
-		title: __( 'Etsy' ),
+		title: _x( 'Etsy', 'social link block variation name' ),
 		icon: EtsyIcon,
 	},
 	{
 		name: 'facebook',
 		attributes: { service: 'facebook' },
-		title: __( 'Facebook' ),
+		title: _x( 'Facebook', 'social link block variation name' ),
 		icon: FacebookIcon,
 	},
 	{
 		name: 'feed',
 		attributes: { service: 'feed' },
-		title: __( 'RSS Feed' ),
+		title: _x( 'RSS Feed', 'social link block variation name' ),
 		icon: FeedIcon,
 	},
 	{
 		name: 'flickr',
 		attributes: { service: 'flickr' },
-		title: __( 'Flickr' ),
+		title: _x( 'Flickr', 'social link block variation name' ),
 		icon: FlickrIcon,
 	},
 	{
 		name: 'foursquare',
 		attributes: { service: 'foursquare' },
-		title: __( 'Foursquare' ),
+		title: _x( 'Foursquare', 'social link block variation name' ),
 		icon: FoursquareIcon,
 	},
 	{
 		name: 'goodreads',
 		attributes: { service: 'goodreads' },
-		title: __( 'Goodreads' ),
+		title: _x( 'Goodreads', 'social link block variation name' ),
 		icon: GoodreadsIcon,
 	},
 	{
 		name: 'google',
 		attributes: { service: 'google' },
-		title: __( 'Google' ),
+		title: _x( 'Google', 'social link block variation name' ),
 		icon: GoogleIcon,
 	},
 	{
 		name: 'github',
 		attributes: { service: 'github' },
-		title: __( 'GitHub' ),
+		title: _x( 'GitHub', 'social link block variation name' ),
 		icon: GitHubIcon,
 	},
 	{
 		name: 'gravatar',
 		attributes: { service: 'gravatar' },
-		title: __( 'Gravatar' ),
+		title: _x( 'Gravatar', 'social link block variation name' ),
 		icon: GravatarIcon,
 	},
 	{
 		name: 'instagram',
 		attributes: { service: 'instagram' },
-		title: __( 'Instagram' ),
+		title: _x( 'Instagram', 'social link block variation name' ),
 		icon: InstagramIcon,
 	},
 	{
 		name: 'lastfm',
 		attributes: { service: 'lastfm' },
-		title: __( 'Last.fm' ),
+		title: _x( 'Last.fm', 'social link block variation name' ),
 		icon: LastfmIcon,
 	},
 	{
 		name: 'linkedin',
 		attributes: { service: 'linkedin' },
-		title: __( 'LinkedIn' ),
+		title: _x( 'LinkedIn', 'social link block variation name' ),
 		icon: LinkedInIcon,
 	},
 	{
 		name: 'mail',
 		attributes: { service: 'mail' },
-		title: __( 'Mail' ),
+		title: _x( 'Mail', 'social link block variation name' ),
 		keywords: [ 'email', 'e-mail' ],
 		icon: MailIcon,
 	},
 	{
 		name: 'mastodon',
 		attributes: { service: 'mastodon' },
-		title: __( 'Mastodon' ),
+		title: _x( 'Mastodon', 'social link block variation name' ),
 		icon: MastodonIcon,
 	},
 	{
 		name: 'meetup',
 		attributes: { service: 'meetup' },
-		title: __( 'Meetup' ),
+		title: _x( 'Meetup', 'social link block variation name' ),
 		icon: MeetupIcon,
 	},
 	{
 		name: 'medium',
 		attributes: { service: 'medium' },
-		title: __( 'Medium' ),
+		title: _x( 'Medium', 'social link block variation name' ),
 		icon: MediumIcon,
 	},
 	{
 		name: 'patreon',
 		attributes: { service: 'patreon' },
-		title: __( 'Patreon' ),
+		title: _x( 'Patreon', 'social link block variation name' ),
 		icon: PatreonIcon,
 	},
 	{
 		name: 'pinterest',
 		attributes: { service: 'pinterest' },
-		title: __( 'Pinterest' ),
+		title: _x( 'Pinterest', 'social link block variation name' ),
 		icon: PinterestIcon,
 	},
 	{
 		name: 'pocket',
 		attributes: { service: 'pocket' },
-		title: __( 'Pocket' ),
+		title: _x( 'Pocket', 'social link block variation name' ),
 		icon: PocketIcon,
 	},
 	{
 		name: 'reddit',
 		attributes: { service: 'reddit' },
-		title: __( 'Reddit' ),
+		title: _x( 'Reddit', 'social link block variation name' ),
 		icon: RedditIcon,
 	},
 	{
 		name: 'skype',
 		attributes: { service: 'skype' },
-		title: __( 'Skype' ),
+		title: _x( 'Skype', 'social link block variation name' ),
 		icon: SkypeIcon,
+		// Deprecated: Skype service is no longer available.
+		scope: [],
 	},
 	{
 		name: 'snapchat',
 		attributes: { service: 'snapchat' },
-		title: __( 'Snapchat' ),
+		title: _x( 'Snapchat', 'social link block variation name' ),
 		icon: SnapchatIcon,
 	},
 	{
 		name: 'soundcloud',
 		attributes: { service: 'soundcloud' },
-		title: __( 'SoundCloud' ),
+		title: _x( 'SoundCloud', 'social link block variation name' ),
 		icon: SoundCloudIcon,
 	},
 	{
 		name: 'spotify',
 		attributes: { service: 'spotify' },
-		title: __( 'Spotify' ),
+		title: _x( 'Spotify', 'social link block variation name' ),
 		icon: SpotifyIcon,
 	},
 	{
 		name: 'telegram',
 		attributes: { service: 'telegram' },
-		title: __( 'Telegram' ),
+		title: _x( 'Telegram', 'social link block variation name' ),
 		icon: TelegramIcon,
 	},
 	{
 		name: 'threads',
 		attributes: { service: 'threads' },
-		title: __( 'Threads' ),
+		title: _x( 'Threads', 'social link block variation name' ),
 		icon: ThreadsIcon,
 	},
 	{
 		name: 'tiktok',
 		attributes: { service: 'tiktok' },
-		title: __( 'TikTok' ),
+		title: _x( 'TikTok', 'social link block variation name' ),
 		icon: TiktokIcon,
 	},
 	{
 		name: 'tumblr',
 		attributes: { service: 'tumblr' },
-		title: __( 'Tumblr' ),
+		title: _x( 'Tumblr', 'social link block variation name' ),
 		icon: TumblrIcon,
 	},
 	{
 		name: 'twitch',
 		attributes: { service: 'twitch' },
-		title: __( 'Twitch' ),
+		title: _x( 'Twitch', 'social link block variation name' ),
 		icon: TwitchIcon,
 	},
 	{
 		name: 'twitter',
 		attributes: { service: 'twitter' },
-		title: __( 'Twitter' ),
+		title: _x( 'Twitter', 'social link block variation name' ),
 		icon: TwitterIcon,
 	},
 	{
 		name: 'vimeo',
 		attributes: { service: 'vimeo' },
-		title: __( 'Vimeo' ),
+		title: _x( 'Vimeo', 'social link block variation name' ),
 		icon: VimeoIcon,
 	},
 	{
 		name: 'vk',
 		attributes: { service: 'vk' },
-		title: __( 'VK' ),
+		title: _x( 'VK', 'social link block variation name' ),
 		icon: VkIcon,
 	},
 	{
 		name: 'whatsapp',
 		attributes: { service: 'whatsapp' },
-		title: __( 'WhatsApp' ),
+		title: _x( 'WhatsApp', 'social link block variation name' ),
 		icon: WhatsAppIcon,
 	},
 	{
 		name: 'x',
 		attributes: { service: 'x' },
 		keywords: [ 'twitter' ],
-		title: __( 'X' ),
+		title: _x( 'X', 'social link block variation name' ),
 		icon: XIcon,
 	},
 	{
 		name: 'yelp',
 		attributes: { service: 'yelp' },
-		title: __( 'Yelp' ),
+		title: _x( 'Yelp', 'social link block variation name' ),
 		icon: YelpIcon,
 	},
 	{
 		name: 'youtube',
 		attributes: { service: 'youtube' },
-		title: __( 'YouTube' ),
+		title: _x( 'YouTube', 'social link block variation name' ),
 		icon: YouTubeIcon,
 	},
 ];

package/src/utils/poster-image.js

@@ -0,0 +1,176 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	MediaUpload,
+	MediaUploadCheck,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { store as noticesStore } from '@wordpress/notices';
+import {
+	Button,
+	BaseControl,
+	DropZone,
+	Spinner,
+	__experimentalHStack as HStack,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
+import { isBlobURL } from '@wordpress/blob';
+import { __, sprintf } from '@wordpress/i18n';
+import { useRef, useState } from '@wordpress/element';
+import { useInstanceId } from '@wordpress/compose';
+import { useSelect, useDispatch } from '@wordpress/data';
+
+const POSTER_IMAGE_ALLOWED_MEDIA_TYPES = [ 'image' ];
+
+function PosterImage( { poster, onChange } ) {
+	const posterButtonRef = useRef();
+	const [ isLoading, setIsLoading ] = useState( false );
+	const descriptionId = useInstanceId(
+		PosterImage,
+		'block-library-poster-image-description'
+	);
+
+	const { getSettings } = useSelect( blockEditorStore );
+	const { createErrorNotice } = useDispatch( noticesStore );
+
+	const onDropFiles = ( filesList ) => {
+		getSettings().mediaUpload( {
+			allowedTypes: POSTER_IMAGE_ALLOWED_MEDIA_TYPES,
+			filesList,
+			onFileChange: ( [ image ] ) => {
+				if ( isBlobURL( image?.url ) ) {
+					setIsLoading( true );
+					return;
+				}
+
+				if ( image ) {
+					onChange( image );
+				}
+				setIsLoading( false );
+			},
+			onError: ( message ) => {
+				createErrorNotice( message, {
+					id: 'poster-image-upload-notice',
+					type: 'snackbar',
+				} );
+				setIsLoading( false );
+			},
+			multiple: false,
+		} );
+	};
+
+	const getPosterButtonContent = () => {
+		if ( ! poster && isLoading ) {
+			return <Spinner />;
+		}
+
+		return ! poster ? __( 'Set poster image' ) : __( 'Replace' );
+	};
+
+	return (
+		<MediaUploadCheck>
+			<ToolsPanelItem
+				label={ __( 'Poster image' ) }
+				isShownByDefault
+				hasValue={ () => !! poster }
+				onDeselect={ () => onChange( undefined ) }
+			>
+				<BaseControl.VisualLabel>
+					{ __( 'Poster image' ) }
+				</BaseControl.VisualLabel>
+				<MediaUpload
+					title={ __( 'Select poster image' ) }
+					onSelect={ onChange }
+					allowedTypes={ POSTER_IMAGE_ALLOWED_MEDIA_TYPES }
+					render={ ( { open } ) => (
+						<div className="block-library-poster-image__container">
+							{ poster && (
+								<Button
+									__next40pxDefaultSize
+									onClick={ open }
+									aria-haspopup="dialog"
+									aria-label={ __(
+										'Edit or replace the poster image.'
+									) }
+									className="block-library-poster-image__preview"
+									disabled={ isLoading }
+									accessibleWhenDisabled
+								>
+									<img
+										src={ poster }
+										alt={ __( 'Poster image preview' ) }
+										className="block-library-poster-image__preview-image"
+									/>
+									{ isLoading && <Spinner /> }
+								</Button>
+							) }
+							<HStack
+								className={ clsx(
+									'block-library-poster-image__actions',
+									{
+										'block-library-poster-image__actions-select':
+											! poster,
+									}
+								) }
+							>
+								<Button
+									__next40pxDefaultSize
+									onClick={ open }
+									ref={ posterButtonRef }
+									className="block-library-poster-image__action"
+									aria-describedby={ descriptionId }
+									aria-haspopup="dialog"
+									variant={
+										! poster ? 'secondary' : undefined
+									}
+									disabled={ isLoading }
+									accessibleWhenDisabled
+								>
+									{ getPosterButtonContent() }
+								</Button>
+								<p id={ descriptionId } hidden>
+									{ poster
+										? sprintf(
+												/* translators: %s: poster image URL. */
+												__(
+													'The current poster image url is %s.'
+												),
+												poster
+										  )
+										: __(
+												'There is no poster image currently selected.'
+										  ) }
+								</p>
+								{ !! poster && (
+									<Button
+										__next40pxDefaultSize
+										onClick={ () => {
+											onChange( undefined );
+
+											// Move focus back to the Media Upload button.
+											posterButtonRef.current.focus();
+										} }
+										className="block-library-poster-image__action"
+										disabled={ isLoading }
+										accessibleWhenDisabled
+									>
+										{ __( 'Remove' ) }
+									</Button>
+								) }
+							</HStack>
+							<DropZone onFilesDrop={ onDropFiles } />
+						</div>
+					) }
+				/>
+			</ToolsPanelItem>
+		</MediaUploadCheck>
+	);
+}
+
+export default PosterImage;

package/src/utils/poster-image.scss

@@ -0,0 +1,82 @@
+.block-library-poster-image__container {
+	position: relative;
+
+	&:hover,
+	&:focus,
+	&:focus-within {
+		.block-library-poster-image__actions {
+			opacity: 1;
+		}
+	}
+
+	.block-library-poster-image__actions.block-library-poster-image__actions-select {
+		opacity: 1;
+		margin-top: $grid-unit-20;
+	}
+
+	.components-drop-zone__content {
+		border-radius: $radius-small;
+	}
+
+	// Align text and icons horizontally to avoid clipping when the poster image is not set.
+	.components-drop-zone .components-drop-zone__content-inner {
+		display: flex;
+		align-items: center;
+		gap: $grid-unit-10;
+
+		.components-drop-zone__content-icon {
+			margin: 0;
+		}
+	}
+
+	.components-spinner {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		margin-top: -9px;
+		margin-left: -9px;
+	}
+}
+
+.block-library-poster-image__preview {
+	width: 100%;
+	padding: 0;
+	overflow: hidden; // Ensure the focus style properly encapsulates the image.
+	outline-offset: -#{$border-width};
+	min-height: $grid-unit-50;
+
+	display: flex;
+	justify-content: center;
+	height: auto !important;
+	outline: $border-width solid rgba($black, 0.1);
+
+	.block-library-poster-image__preview-image {
+		object-fit: cover;
+		width: 100%;
+		object-position: 50% 50%;
+		aspect-ratio: 2/1;
+	}
+}
+
+.block-library-poster-image__actions {
+	&:not(.block-library-poster-image__actions-select) {
+		bottom: 0;
+		opacity: 0; // Use opacity instead of visibility so that the buttons remain in the tab order.
+		padding: $grid-unit-10;
+		position: absolute;
+
+		@media not ( prefers-reduced-motion ) {
+			transition: opacity 50ms ease-out;
+		}
+
+		.block-library-poster-image__action {
+			backdrop-filter: blur(16px) saturate(180%);
+			background: rgba(255, 255, 255, 0.75);
+		}
+	}
+
+	.block-library-poster-image__action {
+		flex-grow: 1;
+		justify-content: center;
+	}
+}

package/src/video/edit.js

@@ -30,7 +30,6 @@ import { store as noticesStore } from '@wordpress/notices';
 /**
  * Internal dependencies
  */
-import PosterImage from './poster-image';
 import { createUpgradedEmbedBlock } from '../embed/util';
 import {
 	useUploadMediaFromBlobURL,
@@ -40,6 +39,7 @@ import VideoCommonSettings from './edit-common-settings';
 import TracksEditor from './tracks-editor';
 import Tracks from './tracks';
 import { Caption } from '../utils/caption';
+import PosterImage from '../utils/poster-image';
 
 const ALLOWED_MEDIA_TYPES = [ 'video' ];
 
@@ -70,6 +70,7 @@ function VideoEdit( {
 		}
 	}, [ poster ] );
 
+	// TODO: Whether the video was obtained from the media library or was provided by URL, obtain the `videoWidth` and `videoHeight` of the video once its metadata has loaded and persist in the block attributes.
 	function onSelectVideo( media ) {
 		if ( ! media || ! media.url ) {
 			// In this case there was an error
@@ -219,7 +220,11 @@ function VideoEdit( {
 					/>
 					<PosterImage
 						poster={ poster }
-						setAttributes={ setAttributes }
+						onChange={ ( posterImage ) =>
+							setAttributes( {
+								poster: posterImage?.url,
+							} )
+						}
 					/>
 				</ToolsPanel>
 			</InspectorControls>