@wordpress/block-library 9.3.0 → 9.5.0

package/src/embed/variations.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -32,6 +32,14 @@ import {
 
 /** @typedef {import('@wordpress/blocks').WPBlockVariation} WPBlockVariation */
 
+function getTitle( providerName ) {
+	return sprintf(
+		/* translators: %s: provider name */
+		__( '%s Embed' ),
+		providerName
+	);
+}
+
 /**
  * The embed provider services.
  *
@@ -40,7 +48,7 @@ import {
 const variations = [
 	{
 		name: 'twitter',
-		title: 'Twitter',
+		title: getTitle( 'Twitter' ),
 		icon: embedTwitterIcon,
 		keywords: [ 'tweet', __( 'social' ) ],
 		description: __( 'Embed a tweet.' ),
@@ -49,7 +57,7 @@ const variations = [
 	},
 	{
 		name: 'youtube',
-		title: 'YouTube',
+		title: getTitle( 'YouTube' ),
 		icon: embedYouTubeIcon,
 		keywords: [ __( 'music' ), __( 'video' ) ],
 		description: __( 'Embed a YouTube video.' ),
@@ -63,7 +71,7 @@ const variations = [
 		// Deprecate Facebook Embed per FB policy
 		// See: https://developers.facebook.com/docs/plugins/oembed-legacy
 		name: 'facebook',
-		title: 'Facebook',
+		title: getTitle( 'Facebook' ),
 		icon: embedFacebookIcon,
 		keywords: [ __( 'social' ) ],
 		description: __( 'Embed a Facebook post.' ),
@@ -79,7 +87,7 @@ const variations = [
 		// Deprecate Instagram per FB policy
 		// See: https://developers.facebook.com/docs/instagram/oembed-legacy
 		name: 'instagram',
-		title: 'Instagram',
+		title: getTitle( 'Instagram' ),
 		icon: embedInstagramIcon,
 		keywords: [ __( 'image' ), __( 'social' ) ],
 		description: __( 'Embed an Instagram post.' ),
@@ -89,7 +97,7 @@ const variations = [
 	},
 	{
 		name: 'wordpress',
-		title: 'WordPress',
+		title: getTitle( 'WordPress' ),
 		icon: embedWordPressIcon,
 		keywords: [ __( 'post' ), __( 'blog' ) ],
 		description: __( 'Embed a WordPress post.' ),
@@ -99,7 +107,7 @@ const variations = [
 	},
 	{
 		name: 'soundcloud',
-		title: 'SoundCloud',
+		title: getTitle( 'SoundCloud' ),
 		icon: embedAudioIcon,
 		keywords: [ __( 'music' ), __( 'audio' ) ],
 		description: __( 'Embed SoundCloud content.' ),
@@ -108,7 +116,7 @@ const variations = [
 	},
 	{
 		name: 'spotify',
-		title: 'Spotify',
+		title: getTitle( 'Spotify' ),
 		icon: embedSpotifyIcon,
 		keywords: [ __( 'music' ), __( 'audio' ) ],
 		description: __( 'Embed Spotify content.' ),
@@ -117,7 +125,7 @@ const variations = [
 	},
 	{
 		name: 'flickr',
-		title: 'Flickr',
+		title: getTitle( 'Flickr' ),
 		icon: embedFlickrIcon,
 		keywords: [ __( 'image' ) ],
 		description: __( 'Embed Flickr content.' ),
@@ -129,7 +137,7 @@ const variations = [
 	},
 	{
 		name: 'vimeo',
-		title: 'Vimeo',
+		title: getTitle( 'Vimeo' ),
 		icon: embedVimeoIcon,
 		keywords: [ __( 'video' ) ],
 		description: __( 'Embed a Vimeo video.' ),
@@ -138,7 +146,7 @@ const variations = [
 	},
 	{
 		name: 'animoto',
-		title: 'Animoto',
+		title: getTitle( 'Animoto' ),
 		icon: embedAnimotoIcon,
 		description: __( 'Embed an Animoto video.' ),
 		patterns: [ /^https?:\/\/(www\.)?(animoto|video214)\.com\/.+/i ],
@@ -146,7 +154,7 @@ const variations = [
 	},
 	{
 		name: 'cloudup',
-		title: 'Cloudup',
+		title: getTitle( 'Cloudup' ),
 		icon: embedContentIcon,
 		description: __( 'Embed Cloudup content.' ),
 		patterns: [ /^https?:\/\/cloudup\.com\/.+/i ],
@@ -155,7 +163,7 @@ const variations = [
 	{
 		// Deprecated since CollegeHumor content is now powered by YouTube.
 		name: 'collegehumor',
-		title: 'CollegeHumor',
+		title: getTitle( 'CollegeHumor' ),
 		icon: embedVideoIcon,
 		description: __( 'Embed CollegeHumor content.' ),
 		scope: [ 'block' ],
@@ -164,7 +172,7 @@ const variations = [
 	},
 	{
 		name: 'crowdsignal',
-		title: 'Crowdsignal',
+		title: getTitle( 'Crowdsignal' ),
 		icon: embedContentIcon,
 		keywords: [ 'polldaddy', __( 'survey' ) ],
 		description: __( 'Embed Crowdsignal (formerly Polldaddy) content.' ),
@@ -175,7 +183,7 @@ const variations = [
 	},
 	{
 		name: 'dailymotion',
-		title: 'Dailymotion',
+		title: getTitle( 'Dailymotion' ),
 		icon: embedDailymotionIcon,
 		keywords: [ __( 'video' ) ],
 		description: __( 'Embed a Dailymotion video.' ),
@@ -184,7 +192,7 @@ const variations = [
 	},
 	{
 		name: 'imgur',
-		title: 'Imgur',
+		title: getTitle( 'Imgur' ),
 		icon: embedPhotoIcon,
 		description: __( 'Embed Imgur content.' ),
 		patterns: [ /^https?:\/\/(.+\.)?imgur\.com\/.+/i ],
@@ -192,7 +200,7 @@ const variations = [
 	},
 	{
 		name: 'issuu',
-		title: 'Issuu',
+		title: getTitle( 'Issuu' ),
 		icon: embedContentIcon,
 		description: __( 'Embed Issuu content.' ),
 		patterns: [ /^https?:\/\/(www\.)?issuu\.com\/.+/i ],
@@ -200,7 +208,7 @@ const variations = [
 	},
 	{
 		name: 'kickstarter',
-		title: 'Kickstarter',
+		title: getTitle( 'Kickstarter' ),
 		icon: embedContentIcon,
 		description: __( 'Embed Kickstarter content.' ),
 		patterns: [
@@ -211,7 +219,7 @@ const variations = [
 	},
 	{
 		name: 'mixcloud',
-		title: 'Mixcloud',
+		title: getTitle( 'Mixcloud' ),
 		icon: embedAudioIcon,
 		keywords: [ __( 'music' ), __( 'audio' ) ],
 		description: __( 'Embed Mixcloud content.' ),
@@ -220,7 +228,7 @@ const variations = [
 	},
 	{
 		name: 'pocket-casts',
-		title: 'Pocket Casts',
+		title: getTitle( 'Pocket Casts' ),
 		icon: embedPocketCastsIcon,
 		keywords: [ __( 'podcast' ), __( 'audio' ) ],
 		description: __( 'Embed a podcast player from Pocket Casts.' ),
@@ -229,7 +237,7 @@ const variations = [
 	},
 	{
 		name: 'reddit',
-		title: 'Reddit',
+		title: getTitle( 'Reddit' ),
 		icon: embedRedditIcon,
 		description: __( 'Embed a Reddit thread.' ),
 		patterns: [ /^https?:\/\/(www\.)?reddit\.com\/.+/i ],
@@ -237,7 +245,7 @@ const variations = [
 	},
 	{
 		name: 'reverbnation',
-		title: 'ReverbNation',
+		title: getTitle( 'ReverbNation' ),
 		icon: embedAudioIcon,
 		description: __( 'Embed ReverbNation content.' ),
 		patterns: [ /^https?:\/\/(www\.)?reverbnation\.com\/.+/i ],
@@ -245,7 +253,7 @@ const variations = [
 	},
 	{
 		name: 'screencast',
-		title: 'Screencast',
+		title: getTitle( 'Screencast' ),
 		icon: embedVideoIcon,
 		description: __( 'Embed Screencast content.' ),
 		patterns: [ /^https?:\/\/(www\.)?screencast\.com\/.+/i ],
@@ -253,7 +261,7 @@ const variations = [
 	},
 	{
 		name: 'scribd',
-		title: 'Scribd',
+		title: getTitle( 'Scribd' ),
 		icon: embedContentIcon,
 		description: __( 'Embed Scribd content.' ),
 		patterns: [ /^https?:\/\/(www\.)?scribd\.com\/.+/i ],
@@ -261,7 +269,7 @@ const variations = [
 	},
 	{
 		name: 'smugmug',
-		title: 'SmugMug',
+		title: getTitle( 'SmugMug' ),
 		icon: embedPhotoIcon,
 		description: __( 'Embed SmugMug content.' ),
 		patterns: [ /^https?:\/\/(.+\.)?smugmug\.com\/.*/i ],
@@ -273,7 +281,7 @@ const variations = [
 	},
 	{
 		name: 'speaker-deck',
-		title: 'Speaker Deck',
+		title: getTitle( 'Speaker Deck' ),
 		icon: embedContentIcon,
 		description: __( 'Embed Speaker Deck content.' ),
 		patterns: [ /^https?:\/\/(www\.)?speakerdeck\.com\/.+/i ],
@@ -281,7 +289,7 @@ const variations = [
 	},
 	{
 		name: 'tiktok',
-		title: 'TikTok',
+		title: getTitle( 'TikTok' ),
 		icon: embedVideoIcon,
 		keywords: [ __( 'video' ) ],
 		description: __( 'Embed a TikTok video.' ),
@@ -290,7 +298,7 @@ const variations = [
 	},
 	{
 		name: 'ted',
-		title: 'TED',
+		title: getTitle( 'TED' ),
 		icon: embedVideoIcon,
 		description: __( 'Embed a TED video.' ),
 		patterns: [ /^https?:\/\/(www\.|embed\.)?ted\.com\/.+/i ],
@@ -298,7 +306,7 @@ const variations = [
 	},
 	{
 		name: 'tumblr',
-		title: 'Tumblr',
+		title: getTitle( 'Tumblr' ),
 		icon: embedTumblrIcon,
 		keywords: [ __( 'social' ) ],
 		description: __( 'Embed a Tumblr post.' ),
@@ -307,7 +315,7 @@ const variations = [
 	},
 	{
 		name: 'videopress',
-		title: 'VideoPress',
+		title: getTitle( 'VideoPress' ),
 		icon: embedVideoIcon,
 		keywords: [ __( 'video' ) ],
 		description: __( 'Embed a VideoPress video.' ),
@@ -316,7 +324,7 @@ const variations = [
 	},
 	{
 		name: 'wordpress-tv',
-		title: 'WordPress.tv',
+		title: getTitle( 'WordPress.tv' ),
 		icon: embedVideoIcon,
 		description: __( 'Embed a WordPress.tv video.' ),
 		patterns: [ /^https?:\/\/wordpress\.tv\/.+/i ],
@@ -324,7 +332,7 @@ const variations = [
 	},
 	{
 		name: 'amazon-kindle',
-		title: 'Amazon Kindle',
+		title: getTitle( 'Amazon Kindle' ),
 		icon: embedAmazonIcon,
 		keywords: [ __( 'ebook' ) ],
 		description: __( 'Embed Amazon Kindle content.' ),
@@ -336,7 +344,7 @@ const variations = [
 	},
 	{
 		name: 'pinterest',
-		title: 'Pinterest',
+		title: getTitle( 'Pinterest' ),
 		icon: embedPinterestIcon,
 		keywords: [ __( 'social' ), __( 'bookmark' ) ],
 		description: __( 'Embed Pinterest pins, boards, and profiles.' ),
@@ -347,7 +355,7 @@ const variations = [
 	},
 	{
 		name: 'wolfram-cloud',
-		title: 'Wolfram',
+		title: getTitle( 'Wolfram' ),
 		icon: embedWolframIcon,
 		description: __( 'Embed Wolfram notebook content.' ),
 		patterns: [ /^https?:\/\/(www\.)?wolframcloud\.com\/obj\/.+/i ],
@@ -355,7 +363,7 @@ const variations = [
 	},
 	{
 		name: 'bluesky',
-		title: 'Bluesky',
+		title: getTitle( 'Bluesky' ),
 		icon: embedBlueskyIcon,
 		description: __( 'Embed a Bluesky post.' ),
 		patterns: [ /^https?:\/\/bsky\.app\/profile\/.+\/post\/.+/i ],

package/src/footnotes/index.js

@@ -21,8 +21,7 @@ export const settings = {
 	edit,
 };
 
-registerFormatType( formatName, format );
-
 export const init = () => {
+	registerFormatType( formatName, format );
 	initBlock( { name, metadata, settings } );
 };

package/src/form/edit.js

@@ -77,8 +77,8 @@ const Edit = ( { attributes, setAttributes, clientId } ) => {
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
 					<SelectControl
-						// __nextHasNoMarginBottom
-						// size={ '__unstable-large' }
+						__nextHasNoMarginBottom
+						__next40pxDefaultSize
 						label={ __( 'Submissions method' ) }
 						options={ [
 							// TODO: Allow plugins to add their own submission methods.
@@ -108,6 +108,7 @@ const Edit = ( { attributes, setAttributes, clientId } ) => {
 					{ submissionMethod === 'email' && (
 						<TextControl
 							__nextHasNoMarginBottom
+							__next40pxDefaultSize
 							autoComplete="off"
 							label={ __( 'Email for form submissions' ) }
 							value={ email }

package/src/form-input/edit.js

@@ -38,6 +38,7 @@ function InputFieldBlock( { attributes, setAttributes, className } ) {
 					<PanelBody title={ __( 'Settings' ) }>
 						{ 'checkbox' !== type && (
 							<CheckboxControl
+								__nextHasNoMarginBottom
 								label={ __( 'Inline label' ) }
 								checked={ inlineLabel }
 								onChange={ ( newVal ) => {
@@ -48,6 +49,7 @@ function InputFieldBlock( { attributes, setAttributes, className } ) {
 							/>
 						) }
 						<CheckboxControl
+							__nextHasNoMarginBottom
 							label={ __( 'Required' ) }
 							checked={ required }
 							onChange={ ( newVal ) => {
@@ -61,6 +63,7 @@ function InputFieldBlock( { attributes, setAttributes, className } ) {
 			) }
 			<InspectorControls group="advanced">
 				<TextControl
+					__nextHasNoMarginBottom
 					autoComplete="off"
 					label={ __( 'Name' ) }
 					value={ name }

package/src/form-input/style.scss

@@ -24,6 +24,7 @@
 	*/
 	&:has(input[type="checkbox"]) {
 		width: fit-content;
+		/* stylelint-disable-next-line declaration-property-value-allowed-list -- This should be refactored to not use the row-reverse value. */
 		flex-direction: row-reverse;
 	}
 }

package/src/gallery/block.json

@@ -112,6 +112,16 @@
 	"supports": {
 		"anchor": true,
 		"align": true,
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"color": true,
+				"radius": true
+			}
+		},
 		"html": false,
 		"units": [ "px", "em", "rem", "vh", "vw" ],
 		"spacing": {

package/src/gallery/edit.js

@@ -14,6 +14,9 @@ import {
 	ToggleControl,
 	RangeControl,
 	Spinner,
+	MenuGroup,
+	MenuItem,
+	ToolbarDropdownMenu,
 	withNotices,
 } from '@wordpress/components';
 import {
@@ -33,6 +36,12 @@ import { View } from '@wordpress/primitives';
 import { createBlock } from '@wordpress/blocks';
 import { createBlobURL } from '@wordpress/blob';
 import { store as noticesStore } from '@wordpress/notices';
+import {
+	link as linkIcon,
+	customLink,
+	image as imageIcon,
+	linkOff,
+} from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -57,11 +66,23 @@ import GapStyles from './gap-styles';
 
 const MAX_COLUMNS = 8;
 const linkOptions = [
-	{ value: LINK_DESTINATION_ATTACHMENT, label: __( 'Attachment Page' ) },
-	{ value: LINK_DESTINATION_MEDIA, label: __( 'Media File' ) },
 	{
-		value: LINK_DESTINATION_NONE,
+		icon: customLink,
+		label: __( 'Link images to attachment pages' ),
+		value: LINK_DESTINATION_ATTACHMENT,
+		noticeText: __( 'Attachment Pages' ),
+	},
+	{
+		icon: imageIcon,
+		label: __( 'Link images to media files' ),
+		value: LINK_DESTINATION_MEDIA,
+		noticeText: __( 'Media Files' ),
+	},
+	{
+		icon: linkOff,
 		label: _x( 'None', 'Media item link option' ),
+		value: LINK_DESTINATION_NONE,
+		noticeText: __( 'None' ),
 	},
 ];
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
@@ -359,7 +380,7 @@ function GalleryEdit( props ) {
 			sprintf(
 				/* translators: %s: image size settings */
 				__( 'All gallery image links updated to: %s' ),
-				linkToText.label
+				linkToText.noticeText
 			),
 			{
 				id: 'gallery-attributes-linkTo',
@@ -552,15 +573,17 @@ function GalleryEdit( props ) {
 							size="__unstable-large"
 						/>
 					) }
-					<SelectControl
-						__nextHasNoMarginBottom
-						label={ __( 'Link to' ) }
-						value={ linkTo }
-						onChange={ setLinkTo }
-						options={ linkOptions }
-						hideCancelButton
-						size="__unstable-large"
-					/>
+					{ Platform.isNative ? (
+						<SelectControl
+							__nextHasNoMarginBottom
+							label={ __( 'Link' ) }
+							value={ linkTo }
+							onChange={ setLinkTo }
+							options={ linkOptions }
+							hideCancelButton
+							size="__unstable-large"
+						/>
+					) : null }
 					<ToggleControl
 						__nextHasNoMarginBottom
 						label={ __( 'Crop images to fit' ) }
@@ -594,6 +617,45 @@ function GalleryEdit( props ) {
 					) }
 				</PanelBody>
 			</InspectorControls>
+			{ Platform.isWeb ? (
+				<BlockControls group="block">
+					<ToolbarDropdownMenu
+						icon={ linkIcon }
+						label={ __( 'Link' ) }
+					>
+						{ ( { onClose } ) => (
+							<MenuGroup>
+								{ linkOptions.map( ( linkItem ) => {
+									const isOptionSelected =
+										linkTo === linkItem.value;
+									return (
+										<MenuItem
+											key={ linkItem.value }
+											isSelected={ isOptionSelected }
+											className={ clsx(
+												'components-dropdown-menu__menu-item',
+												{
+													'is-active':
+														isOptionSelected,
+												}
+											) }
+											iconPosition="left"
+											icon={ linkItem.icon }
+											onClick={ () => {
+												setLinkTo( linkItem.value );
+												onClose();
+											} }
+											role="menuitemradio"
+										>
+											{ linkItem.label }
+										</MenuItem>
+									);
+								} ) }
+							</MenuGroup>
+						) }
+					</ToolbarDropdownMenu>
+				</BlockControls>
+			) : null }
 			{ Platform.isWeb && (
 				<>
 					{ ! multiGallerySelection && (

package/src/gallery/editor.scss

@@ -70,7 +70,6 @@
 
 .gallery-image-sizes {
 	.components-base-control__label {
-		display: block;
 		margin-bottom: 4px;
 	}
 

package/src/gallery/gap-styles.js

@@ -3,16 +3,9 @@
  */
 import {
 	__experimentalGetGapCSSValue as getGapCSSValue,
-	privateApis as blockEditorPrivateApis,
+	useStyleOverride,
 } from '@wordpress/block-editor';
 
-/**
- * Internal dependencies
- */
-import { unlock } from '../lock-unlock';
-
-const { useStyleOverride } = unlock( blockEditorPrivateApis );
-
 export default function GapStyles( { blockGap, clientId } ) {
 	// --gallery-block--gutter-size is deprecated. --wp--style--gallery-gap-default should be used by themes that want to set a default
 	// gap on the gallery.

package/src/gallery/test/__snapshots__/index.native.js.snap

@@ -82,7 +82,7 @@ exports[`Gallery block inserts block 1`] = `
 <!-- /wp:gallery -->"
 `;
 
-exports[`Gallery block overrides "Link to" setting of gallery items 1`] = `
+exports[`Gallery block overrides "Link" setting of gallery items 1`] = `
 "<!-- wp:gallery {"linkTo":"media"} -->
 <figure class="wp-block-gallery has-nested-images columns-default is-cropped"><!-- wp:image {"id":1,"linkDestination":"media"} -->
 <figure class="wp-block-image"><img src="file:///local-image-1.jpeg" alt="" class="wp-image-1"/></figure>

package/src/gallery/test/index.native.js

@@ -594,9 +594,9 @@ describe( 'Gallery block', () => {
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
 
-	// Test case related to TC012 - Settings - Link to
+	// Test case related to TC012 - Settings - Link
 	// Reference: https://github.com/wordpress-mobile/test-cases/blob/trunk/test-cases/gutenberg/gallery.md#tc012
-	it( 'overrides "Link to" setting of gallery items', async () => {
+	it( 'overrides "Link" setting of gallery items', async () => {
 		// Initialize with a gallery that contains two items, the latter includes "linkDestination" attribute
 		const screen = await initializeWithGalleryBlock( {
 			html: `<!-- wp:gallery {"linkTo":"none"} -->
@@ -612,10 +612,10 @@ describe( 'Gallery block', () => {
 		} );
 		const { getByText } = screen;
 
-		// Set "Link to" setting via Gallery block settings
+		// Set "Link" setting via Gallery block settings
 		await openBlockSettings( screen );
-		fireEvent.press( getByText( 'Link to' ) );
-		fireEvent.press( getByText( 'Media File' ) );
+		fireEvent.press( getByText( 'Link' ) );
+		fireEvent.press( getByText( 'Link images to media files' ) );
 
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );

package/src/gallery/use-image-sizes.js

@@ -4,10 +4,10 @@
 import { useMemo } from '@wordpress/element';
 
 /**
- * Calculates the image sizes that are avaible for the current gallery images in order to
+ * Calculates the image sizes that are available for the current gallery images in order to
  * populate the 'Resolution' selector.
  *
- * @param {Array}    images      Basic image block data taken from current gallery innerBlock
+ * @param {Array}    images      Basic image block data taken from current gallery innerBlock.
  * @param {boolean}  isSelected  Is the block currently selected in the editor.
  * @param {Function} getSettings Block editor store selector.
  *

package/src/group/deprecated.js

@@ -109,15 +109,11 @@ const deprecated = [
 			);
 		},
 		isEligible: ( { layout } ) =>
-			! layout ||
-			layout.inherit ||
-			( layout.contentSize && layout.type !== 'constrained' ),
+			layout?.inherit ||
+			( layout?.contentSize && layout?.type !== 'constrained' ),
 		migrate: ( attributes ) => {
 			const { layout = null } = attributes;
-			if ( ! layout ) {
-				return attributes;
-			}
-			if ( layout.inherit || layout.contentSize ) {
+			if ( layout?.inherit || layout?.contentSize ) {
 				return {
 					...attributes,
 					layout: {

package/src/group/editor.scss

@@ -43,7 +43,7 @@
 		pointer-events: none;
 		min-height: $grid-unit-60 - $border-width - $border-width;
 		border: $border-width dashed currentColor;
-		@include placeholder-style();
+		border-radius: $radius-block-ui;
 	}
 
 	// Let the parent be selectable in the placeholder area.