@wordpress/block-library 9.24.0 → 9.26.0

package/src/social-link/variations.js

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

package/src/social-links/edit.js

@@ -8,7 +8,6 @@ import clsx from 'clsx';
  */
 import { useEffect } from '@wordpress/element';
 import {
-	BlockControls,
 	useInnerBlocksProps,
 	useBlockProps,
 	InspectorControls,
@@ -20,15 +19,12 @@ import {
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import {
-	MenuGroup,
-	MenuItem,
 	ToggleControl,
-	ToolbarDropdownMenu,
+	SelectControl,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { check } from '@wordpress/icons';
 import { useSelect } from '@wordpress/data';
 
 /**
@@ -37,10 +33,11 @@ import { useSelect } from '@wordpress/data';
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
 const sizeOptions = [
-	{ name: __( 'Small' ), value: 'has-small-icon-size' },
-	{ name: __( 'Normal' ), value: 'has-normal-icon-size' },
-	{ name: __( 'Large' ), value: 'has-large-icon-size' },
-	{ name: __( 'Huge' ), value: 'has-huge-icon-size' },
+	{ label: __( 'Default' ), value: '' },
+	{ label: __( 'Small' ), value: 'has-small-icon-size' },
+	{ label: __( 'Normal' ), value: 'has-normal-icon-size' },
+	{ label: __( 'Large' ), value: 'has-large-icon-size' },
+	{ label: __( 'Huge' ), value: 'has-huge-icon-size' },
 ];
 
 export function SocialLinksEdit( props ) {
@@ -123,10 +120,6 @@ export function SocialLinksEdit( props ) {
 				: undefined,
 	} );
 
-	const POPOVER_PROPS = {
-		position: 'bottom right',
-	};
-
 	const colorSettings = [
 		{
 			// Use custom attribute as fallback to prevent loss of named color selection when
@@ -167,43 +160,6 @@ export function SocialLinksEdit( props ) {
 
 	return (
 		<>
-			<BlockControls group="other">
-				<ToolbarDropdownMenu
-					label={ __( 'Size' ) }
-					text={ __( 'Size' ) }
-					icon={ null }
-					popoverProps={ POPOVER_PROPS }
-				>
-					{ ( { onClose } ) => (
-						<MenuGroup>
-							{ sizeOptions.map( ( entry ) => {
-								return (
-									<MenuItem
-										icon={
-											( size === entry.value ||
-												( ! size &&
-													entry.value ===
-														'has-normal-icon-size' ) ) &&
-											check
-										}
-										isSelected={ size === entry.value }
-										key={ entry.value }
-										onClick={ () => {
-											setAttributes( {
-												size: entry.value,
-											} );
-										} }
-										onClose={ onClose }
-										role="menuitemradio"
-									>
-										{ entry.name }
-									</MenuItem>
-								);
-							} ) }
-						</MenuGroup>
-					) }
-				</ToolbarDropdownMenu>
-			</BlockControls>
 			<InspectorControls>
 				<ToolsPanel
 					label={ __( 'Settings' ) }
@@ -211,27 +167,30 @@ export function SocialLinksEdit( props ) {
 						setAttributes( {
 							openInNewTab: false,
 							showLabels: false,
+							size: undefined,
 						} );
 					} }
 					dropdownMenuProps={ dropdownMenuProps }
 				>
 					<ToolsPanelItem
 						isShownByDefault
-						label={ __( 'Open links in new tab' ) }
-						hasValue={ () => !! openInNewTab }
+						hasValue={ () => !! size }
+						label={ __( 'Icon size' ) }
 						onDeselect={ () =>
-							setAttributes( { openInNewTab: false } )
+							setAttributes( { size: undefined } )
 						}
 					>
-						<ToggleControl
+						<SelectControl
+							__next40pxDefaultSize
 							__nextHasNoMarginBottom
-							label={ __( 'Open links in new tab' ) }
-							checked={ openInNewTab }
-							onChange={ () =>
+							label={ __( 'Icon Size' ) }
+							onChange={ ( newSize ) => {
 								setAttributes( {
-									openInNewTab: ! openInNewTab,
-								} )
-							}
+									size: newSize === '' ? undefined : newSize,
+								} );
+							} }
+							value={ size ?? '' }
+							options={ sizeOptions }
 						/>
 					</ToolsPanelItem>
 					<ToolsPanelItem
@@ -251,6 +210,25 @@ export function SocialLinksEdit( props ) {
 							}
 						/>
 					</ToolsPanelItem>
+					<ToolsPanelItem
+						isShownByDefault
+						label={ __( 'Open links in new tab' ) }
+						hasValue={ () => !! openInNewTab }
+						onDeselect={ () =>
+							setAttributes( { openInNewTab: false } )
+						}
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Open links in new tab' ) }
+							checked={ openInNewTab }
+							onChange={ () =>
+								setAttributes( {
+									openInNewTab: ! openInNewTab,
+								} )
+							}
+						/>
+					</ToolsPanelItem>
 				</ToolsPanel>
 			</InspectorControls>
 			{ colorGradientSettings.hasColorsOrGradients && (

package/src/video/tracks-editor.js

@@ -13,20 +13,30 @@ import {
 	Button,
 	TextControl,
 	SelectControl,
+	ToggleControl,
 	__experimentalGrid as Grid,
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import {
 	MediaUpload,
 	MediaUploadCheck,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
+import { store as noticesStore } from '@wordpress/notices';
 import { upload, media } from '@wordpress/icons';
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { useState, useRef, useEffect } from '@wordpress/element';
 import { getFilename } from '@wordpress/url';
 
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../lock-unlock';
+
+const { Badge } = unlock( componentsPrivateApis );
+
 const ALLOWED_TYPES = [ 'text/vtt' ];
 
 const DEFAULT_KIND = 'subtitles';
@@ -43,22 +53,25 @@ function TrackList( { tracks, onEditPress } ) {
 	const content = tracks.map( ( track, index ) => {
 		return (
 			<HStack
-				key={ index }
+				key={ track.src }
 				className="block-library-video-tracks-editor__track-list-track"
 			>
 				<span>{ track.label }</span>
-				<Button
-					__next40pxDefaultSize
-					variant="tertiary"
-					onClick={ () => onEditPress( index ) }
-					aria-label={ sprintf(
-						/* translators: %s: Label of the video text track e.g: "French subtitles". */
-						_x( 'Edit %s', 'text tracks' ),
-						track.label
-					) }
-				>
-					{ __( 'Edit' ) }
-				</Button>
+				<HStack justify="flex-end">
+					{ track.default && <Badge>{ __( 'Default' ) }</Badge> }
+					<Button
+						__next40pxDefaultSize
+						variant="tertiary"
+						onClick={ () => onEditPress( index ) }
+						aria-label={ sprintf(
+							/* translators: %s: Label of the video text track e.g: "French subtitles". */
+							_x( 'Edit %s', 'text tracks' ),
+							track.label
+						) }
+					>
+						{ __( 'Edit' ) }
+					</Button>
+				</HStack>
 			</HStack>
 		);
 	} );
@@ -73,8 +86,20 @@ function TrackList( { tracks, onEditPress } ) {
 	);
 }
 
-function SingleTrackEditor( { track, onChange, onClose, onRemove } ) {
-	const { src = '', label = '', srcLang = '', kind = DEFAULT_KIND } = track;
+function SingleTrackEditor( {
+	track,
+	onChange,
+	onClose,
+	onRemove,
+	allowSettingDefault,
+} ) {
+	const {
+		src = '',
+		label = '',
+		srcLang = '',
+		kind = DEFAULT_KIND,
+		default: isDefaultTrack = false,
+	} = track;
 	const fileName = src.startsWith( 'blob:' ) ? '' : getFilename( src ) || '';
 	return (
 		<VStack
@@ -115,7 +140,7 @@ function SingleTrackEditor( { track, onChange, onClose, onRemove } ) {
 					help={ __( 'Language tag (en, fr, etc.)' ) }
 				/>
 			</Grid>
-			<VStack spacing="8">
+			<VStack spacing="4">
 				<SelectControl
 					__next40pxDefaultSize
 					__nextHasNoMarginBottom
@@ -130,6 +155,19 @@ function SingleTrackEditor( { track, onChange, onClose, onRemove } ) {
 						} );
 					} }
 				/>
+				<ToggleControl
+					__next40pxDefaultSize
+					__nextHasNoMarginBottom
+					label={ __( 'Set as default track' ) }
+					checked={ isDefaultTrack }
+					disabled={ ! allowSettingDefault }
+					onChange={ ( defaultTrack ) => {
+						onChange( {
+							...track,
+							default: defaultTrack,
+						} );
+					} }
+				/>
 				<HStack className="block-library-video-tracks-editor__single-track-editor-buttons-container">
 					<Button
 						__next40pxDefaultSize
@@ -175,12 +213,27 @@ function SingleTrackEditor( { track, onChange, onClose, onRemove } ) {
 }
 
 export default function TracksEditor( { tracks = [], onChange } ) {
+	const { createNotice } = useDispatch( noticesStore );
 	const mediaUpload = useSelect( ( select ) => {
 		return select( blockEditorStore ).getSettings().mediaUpload;
 	}, [] );
 	const [ trackBeingEdited, setTrackBeingEdited ] = useState( null );
 	const dropdownPopoverRef = useRef();
 
+	const handleTrackSelect = ( { title, url } ) => {
+		if ( tracks.some( ( track ) => track.src === url ) ) {
+			createNotice( 'error', __( 'This track already exists.' ), {
+				isDismissible: true,
+				type: 'snackbar',
+			} );
+			return;
+		}
+
+		const trackIndex = tracks.length;
+		onChange( [ ...tracks, { label: title || '', src: url } ] );
+		setTrackBeingEdited( trackIndex );
+	};
+
 	useEffect( () => {
 		dropdownPopoverRef.current?.focus();
 	}, [ trackBeingEdited ] );
@@ -237,6 +290,10 @@ export default function TracksEditor( { tracks = [], onChange } ) {
 								);
 								setTrackBeingEdited( null );
 							} }
+							allowSettingDefault={
+								! tracks.some( ( track ) => track.default ) ||
+								tracks[ trackBeingEdited ].default
+							}
 						/>
 					);
 				}
@@ -265,11 +322,7 @@ export default function TracksEditor( { tracks = [], onChange } ) {
 								label={ __( 'Add tracks' ) }
 							>
 								<MediaUpload
-									onSelect={ ( { url } ) => {
-										const trackIndex = tracks.length;
-										onChange( [ ...tracks, { src: url } ] );
-										setTrackBeingEdited( trackIndex );
-									} }
+									onSelect={ handleTrackSelect }
 									allowedTypes={ ALLOWED_TYPES }
 									render={ ( { open } ) => (
 										<MenuItem